UI: use Text component for Badge typography#77295
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| variant="body-sm" | ||
| className={ clsx( | ||
| styles.badge, | ||
| styles[ `is-${ intent }-intent` ], | ||
| className | ||
| ), | ||
| children, | ||
| } ), | ||
| } ); | ||
|
|
||
| return element; | ||
| ) } | ||
| { ...props } |
There was a problem hiding this comment.
Let's move variant after the {...props} spread, to make sure it can't be overridden
| - `Dialog`, `AlertDialog`, `Tooltip`, `Select`: Add `container` prop to `Popup` for custom portal targets ([#77163](https://github.com/WordPress/gutenberg/pull/77163)). | ||
| - Add defensive styles against global WordPress stylesheets like common.css and forms.css ([#76783](https://github.com/WordPress/gutenberg/pull/76783)). | ||
| - `VisuallyHidden`: Improve Storybook stories and documentation for the `render` prop composition pattern. | ||
| - `Badge`: Use `Text` component for typography ([#77295](https://github.com/WordPress/gutenberg/pull/77295)). |
There was a problem hiding this comment.
We can move this under internal, since there are effectively no changes for consumers of the package
2 participants
What?
Part of the effort in #76929
(Also, similar changes to #76642)
Refactors the Badge component to use the Text component for typography.
Why?
Typography values (font-family, font-size, font-weight, line-height) were duplicated in the badge's stylesheet rather than being owned by a single source of truth. Using Text with variant="body-sm" centralises this so the badge stays consistent with the rest of the design system automatically.
How?
Text variant="body-sm"Testing Instructions
Testing Instructions for Keyboard
Use of AI Tools
Used Claude (claude.ai) to assist with code review and PR description drafting. All changes were reviewed and authored by me.