Corrects styling on Buttons that only have a count and icon

.changeset/brave-penguins-clap.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Corrects horizontal padding of `<Button>` when the button only contains an icon and a counter label (no button text label).

packages/react/src/Button/Button.features.stories.tsx

@@ -61,9 +61,7 @@ export const TrailingCounter = () => {
   )
 }
 
-export const TrailingCounterWithNoText = () => {
-  return <Button leadingVisual={CommentIcon} count={3} />
-}
+export const TrailingCounterWithNoText = () => <Button leadingVisual={CommentIcon} count={3} />
 
 export const TrailingCounterAllVariants = () => {
   const [count, setCount] = useState(0)

packages/react/src/Button/ButtonBase.module.css

@@ -505,6 +505,20 @@
       color: inherit !important;
     }
   }
+
+  /* Icon-only + Counter */
+
+  &:where([data-has-count]):has([data-component='leadingVisual']):not(:has([data-component='text'])) {
+    padding-inline: var(--control-medium-paddingInline-condensed);
+
+    &:where([data-size='small']) {
+      padding-inline: var(--control-xsmall-paddingInline-condensed);
+    }
+
+    &:where([data-size='large']) {
+      padding-inline: var(--control-large-paddingInline-normal);
+    }
+  }
 }
 
 .ConditionalWrapper {

packages/react/src/Button/ButtonBase.tsx

@@ -105,6 +105,7 @@ const ButtonBase = forwardRef(
             data-size={size}
             data-variant={variant}
             data-label-wrap={labelWrap}
+            data-has-count={count !== undefined ? true : undefined}
             aria-describedby={[loadingAnnouncementID, ariaDescribedBy]
               .filter(descriptionID => Boolean(descriptionID))
               .join(' ')}
@@ -225,6 +226,7 @@ const ButtonBase = forwardRef(
           data-size={size}
           data-variant={variant}
           data-label-wrap={labelWrap}
+          data-has-count={count !== undefined ? true : undefined}
           aria-describedby={[loadingAnnouncementID, ariaDescribedBy]
             .filter(descriptionID => Boolean(descriptionID))
             .join(' ')}