Corrects styling on `Button`s that only have a `count` and `icon` #5448

mperrotti · 2024-12-16T21:13:25Z

Closes https://github.com/github/primer/issues/4501

Changelog

New

corrects padding on <Button> where there is only an icon and a counter label to closer align with <IconButton> sizing

Changed

Nothing

Removed

Nothing

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Confirm that this change doesn't cause any regressions with existing IconButton behavior.

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2024-12-16T21:13:30Z

🦋 Changeset detected

Latest commit: dbfbadb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-12-16T21:13:53Z

Uh oh! @mperrotti, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

github-actions · 2024-12-16T21:13:57Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2024-12-16T21:16:44Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	104.65 KB (+0.11% 🔺)
packages/react/dist/browser.umd.js	104.99 KB (+0.02% 🔺)

…/iconbutton-count

langermank

Discussed on Slack and summarizing my thoughts here!

I would suggest putting this logic in Button to avoid adding a wrapper span inside IconButton. In order to utilize Button's layout wrapper .ButtonContent we're adding it to IconButton which feels like its adding unnecessary complexity given that this already exists in Button 😄

I would suggest...

Add a data-attribute to ButtonBase when count is true data-has-count for example
Add a CSS selector &:where([data-has-count]) and check if .Label is not there (not has?)
Remove padding if has count is true, .Label is not present. You could also check that a leading visual is present but I'm not sure that's necessary

If this doesn't work out I would feel better about that span being conditional in IconButton!

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

langermank · 2024-12-18T21:39:31Z

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

-export const TrailingCounterWithNoText = () => {
-  return <Button leadingVisual={CommentIcon} count={3} />
-}
+export const TrailingCounterWithNoText = () => <Button leadingVisual={CommentIcon} count={3} />


Should we add an aria-label or a Tooltip to this example?

Hmmm I'm torn on this. I'd prefer not to encourage tooltips, but it's common to use them for icon-only buttons.

Maybe add a second example in the same story?

Feedback addressed

langermank · 2024-12-18T21:40:52Z

You'll need to remove the snapshots that were added, and if you want add a new VRT test for the feature story 👍

langermank

🚀

mperrotti added 4 commits December 16, 2024 16:05

adds 'count' prop to IconButton

17e1174

adds VRT for IconButton with trailing counter

fe74ed1

updates IconButton component API docs

6b025a8

adds changeset

274d9a8

mperrotti requested a review from a team as a code owner December 16, 2024 21:13

mperrotti requested a review from francinelucca December 16, 2024 21:13

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Dec 16, 2024

mperrotti temporarily deployed to github-pages December 16, 2024 21:15 — with GitHub Actions Inactive

mperrotti added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 16, 2024

Merge branch 'main' into mp/iconbutton-count

be1808a

mperrotti temporarily deployed to github-pages December 16, 2024 21:17 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5448 December 16, 2024 21:17 Inactive

test(vrt): update snapshots

001bdc8

primer bot requested a review from a team as a code owner December 16, 2024 21:24

primer bot requested a review from tbenning December 16, 2024 21:24

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 16, 2024

primer bot temporarily deployed to github-pages December 16, 2024 21:26 Inactive

github-actions bot temporarily deployed to storybook-preview-5448 December 16, 2024 21:26 Inactive

mperrotti added 2 commits December 16, 2024 16:35

adds 'count' to IconButton Playground story

6dbcecf

Merge branch 'mp/iconbutton-count' of github.com:primer/react into mp…

ea7326a

…/iconbutton-count

mperrotti temporarily deployed to github-pages December 16, 2024 21:37 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5448 December 16, 2024 21:37 Inactive

langermank previously requested changes Dec 16, 2024

View reviewed changes

mperrotti added 3 commits December 18, 2024 16:03

addresses feedback to modify component API

f4a26e4

Merge branch 'main' of github.com:primer/react into mp/iconbutton-count

fe83b2d

modifies changeset

049d430

primer bot temporarily deployed to github-pages December 18, 2024 21:20 Inactive

github-actions bot temporarily deployed to storybook-preview-5448 December 18, 2024 21:20 Inactive

langermank reviewed Dec 18, 2024

View reviewed changes

packages/react/src/Button/ButtonBase.module.css Show resolved Hide resolved

langermank reviewed Dec 18, 2024

View reviewed changes

mperrotti requested a review from langermank December 18, 2024 22:27

Merge branch 'main' into mp/iconbutton-count

07f8bc9

mperrotti added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 18, 2024

mperrotti had a problem deploying to github-pages December 18, 2024 22:29 — with GitHub Actions Failure

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 18, 2024

mperrotti added 2 commits December 19, 2024 12:07

Merge branch 'main' of github.com:primer/react into mp/iconbutton-count

ba029c2

appeases the linter

81f8b37

mperrotti temporarily deployed to github-pages December 19, 2024 17:58 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5448 December 19, 2024 17:58 Inactive

add vrt

553c62e

langermank added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 19, 2024

langermank approved these changes Dec 19, 2024

View reviewed changes

langermank temporarily deployed to github-pages December 19, 2024 18:25 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5448 December 19, 2024 18:25 Inactive

test(vrt): update snapshots

dbfbadb

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 19, 2024

primer bot deployed to github-pages December 19, 2024 18:36 View deployment

mperrotti enabled auto-merge December 19, 2024 18:36

github-actions bot deployed to storybook-preview-5448 December 19, 2024 18:36 View deployment

mperrotti added this pull request to the merge queue Dec 19, 2024

Merged via the queue into main with commit 00600f7 Dec 19, 2024
42 checks passed

mperrotti deleted the mp/iconbutton-count branch December 19, 2024 18:51

primer bot mentioned this pull request Dec 19, 2024

Release tracking (37.9.0) #5439

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Corrects styling on `Button`s that only have a `count` and `icon` #5448

Corrects styling on `Button`s that only have a `count` and `icon` #5448

Uh oh!

mperrotti commented Dec 16, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Dec 16, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Dec 16, 2024

Uh oh!

github-actions bot commented Dec 16, 2024

Uh oh!

github-actions bot commented Dec 16, 2024 •

edited

Loading

Uh oh!

langermank left a comment

Uh oh!

Uh oh!

langermank Dec 18, 2024

Uh oh!

mperrotti Dec 19, 2024

Uh oh!

langermank commented Dec 18, 2024

Uh oh!

langermank left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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

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

Uh oh!

Conversation

mperrotti commented Dec 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Dec 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Dec 16, 2024

Uh oh!

github-actions bot commented Dec 16, 2024

Uh oh!

github-actions bot commented Dec 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

langermank left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

langermank Dec 18, 2024

Choose a reason for hiding this comment

Uh oh!

mperrotti Dec 19, 2024

Choose a reason for hiding this comment

Uh oh!

langermank commented Dec 18, 2024

Uh oh!

langermank left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Corrects styling on `Button`s that only have a `count` and `icon` #5448

Corrects styling on `Button`s that only have a `count` and `icon` #5448

mperrotti commented Dec 16, 2024 •

edited

Loading

changeset-bot bot commented Dec 16, 2024 •

edited

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading