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).

e2e/components/Button.test.ts

@@ -644,4 +644,22 @@ test.describe('Button', () => {
       })
     }
   })
+
+  test.describe('Trailing Counter No Text', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--trailing-counter-with-no-text',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Trailing Counter No Text.${theme}.png`)
+        })
+      })
+    }
+  })
 })

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 aria-label="Comments" leadingVisual={CommentIcon} count={3} />
 
 export const TrailingCounterAllVariants = () => {
   const [count, setCount] = useState(0)

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

@@ -505,6 +505,23 @@
       color: inherit !important;
     }
   }
+
+  /* Icon-only + Counter */
+
+  &:where([data-has-count]):has([data-component='leadingVisual']):not(:has([data-component='text'])) {
+    /* stylelint-disable-next-line primer/spacing */
+    padding-inline: var(--control-medium-paddingInline-condensed);
+
+    &:where([data-size='small']) {
+      /* stylelint-disable-next-line primer/spacing */
+      padding-inline: var(--control-xsmall-paddingInline-condensed);
+    }
+
+    &:where([data-size='large']) {
+      /* stylelint-disable-next-line primer/spacing */
+      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(' ')}