UI/Badge: Add border and neutral-strong background to none intent#76356
Merged
jameskoster merged 4 commits intotrunkfrom Mar 13, 2026
Merged
UI/Badge: Add border and neutral-strong background to none intent#76356jameskoster merged 4 commits intotrunkfrom
none intent#76356jameskoster merged 4 commits intotrunkfrom
Conversation
Add a visible border to the `none` intent badge so its pill shape is perceivable on any background. Use padding compensation to keep overall dimensions unchanged. Made-with: Cursor
jameskoster
added
[Type] Enhancement
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @verofasulo. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. 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. |
|
Size Change: +177 B (0%) Total Size: 6.89 MB
ℹ️ View Unchanged
|
|
Thank you for working on this so quickly, Jay — really appreciate it! 🙏 My only feedback would be to align the text color with the rest of the set. Could we use the same dark grey used for the |
|
Flaky tests detected in b050b3b. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22914421010
|
ciampo
approved these changes
Mar 10, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Add a subtle border, update text color and background color for the
Badgecomponent'snoneintent (the default).Why
The
noneintent badge uses--wpds-color-bg-surface-neutralas its background, which is identical tosurface-neutralcontainer backgrounds. When placed inside such containers, the badge becomes visually indistinguishable from its surroundings — the pill shape is lost and the text appears to float without any visual containment.Fixes #76321.
How
surface-neutraltosurface-neutral-strongto differentiate it from thedraftintent while providing a distinct surface.1pxsolid border using--wpds-color-stroke-surface-neutralso the badge boundary is always visible regardless of the container background.--wpds-color-fg-content-neutral.--wpds-border-width-xsfrom bothpadding-blockandpadding-inline, keeping the badge's overall dimensions unchanged.Testing
npm run storybook:devnoneintentbadge at http://localhost:50240/?path=/story/design-system-components-badge--all-intents