Corrects styling on Buttons that only have a count and icon (#5448

) * adds 'count' prop to IconButton * adds VRT for IconButton with trailing counter * updates IconButton component API docs * adds changeset * test(vrt): update snapshots * adds 'count' to IconButton Playground story * addresses feedback to modify component API * modifies changeset * reverts new IconButton VRT * reverts new IconButton stories * test(vrt): update snapshots * appeases the linter * add vrt * test(vrt): update snapshots --------- Co-authored-by: mperrotti <[email protected]> Co-authored-by: Katie Langerman <[email protected]> Co-authored-by: langermank <[email protected]>
primer · Dec 19, 2024 · 00600f7 · 00600f7
1 parent 3f68caf
commit 00600f7
Show file tree

Hide file tree

Showing 14 changed files with 43 additions and 3 deletions.
diff --git a/.changeset/brave-penguins-clap.md b/.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).
diff --git a/...nts/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-colorblind-linux.png b/...nts/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-colorblind-linux.png
diff --git a/...ponents/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-dimmed-linux.png b/...ponents/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-dimmed-linux.png
diff --git a/.../Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-high-contrast-linux.png b/.../Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-high-contrast-linux.png
diff --git a/...ots/components/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-linux.png b/...ots/components/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-tritanopia-linux.png b/...nts/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-tritanopia-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-colorblind-linux.png b/...ts/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-colorblind-linux.png
diff --git a/...Button.test.ts-snapshots/Trailing-Counter-No-Text-light-high-contrast-linux.png b/...Button.test.ts-snapshots/Trailing-Counter-No-Text-light-high-contrast-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-linux.png b/...ts/components/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-tritanopia-linux.png b/...ts/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-tritanopia-linux.png
diff --git a/e2e/components/Button.test.ts b/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`)
+        })
+      })
+    }
+  })
 })
diff --git a/packages/react/src/Button/Button.features.stories.tsx b/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)

diff --git a/packages/react/src/Button/ButtonBase.module.css b/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 {

diff --git a/packages/react/src/Button/ButtonBase.tsx b/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(' ')}