Corrects styling on Buttons that only have a count and icon

[mperrotti]

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]

🦋 Changeset detected

Latest commit: 07f8bc9

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]

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]

👋 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]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	103.32 KB (-0.02% 🔽)
packages/react/dist/browser.umd.js	103.72 KB (+0.05% 🔺)

[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!

[github-actions]

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]

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.

[langermank]

Suggested change

	&: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);
	}
	}
	&: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);
	}
	}

I think this will work for lint but the formatting might be off

[langermank]

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

Feedback addressed

[langermank]

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