Enhancement : Badge Component by Vrishabhsk · Pull Request #66555 · WordPress/gutenberg

Vrishabhsk · 2024-10-29T12:24:56Z

What?

introduce a new component : Badge

Why?

Convert to component: Badge #61106
Need for a reusable component

Example Use Cases

`Data-Views`

Diff

diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index 230ffe0dc5..cd53cd401d 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -13,6 +13,7 @@ import {
        Spinner,
        Flex,
        FlexItem,
+       Badge,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';

@@ -111,12 +112,12 @@ function GridItem< Item >( {
                                >
                                        { badgeFields.map( ( field ) => {
                                                return (
-                                                       <FlexItem
+                                                       <Badge
                                                                key={ field.id }
                                                                className="dataviews-view-grid__field-value"
                                                        >
                                                                <field.render item={ item } />
-                                                       </FlexItem>
+                                                       </Badge>
                                                );
                                        } ) }
                                </HStack>

`Post Card Panel`

Diff

diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index ed13af9b55..5bc0fef0a3 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -9,6 +9,7 @@ import {
        Icon,
        __experimentalHStack as HStack,
        __experimentalText as Text,
+       Badge,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -99,17 +100,12 @@ export default function PostCardPanel( {
                                        lineHeight="20px"
                                >
                                        { title ? decodeEntities( title ) : __( 'No title' ) }
-                                       { isFrontPage && (
-                                               <span className="editor-post-card-panel__title-badge">
-                                                       { __( 'Homepage' ) }
-                                               </span>
-                                       ) }
-                                       { isPostsPage && (
-                                               <span className="editor-post-card-panel__title-badge">
-                                                       { __( 'Posts Page' ) }
-                                               </span>
-                                       ) }
+                                       <Badge as="span">
+                                               { isFrontPage && __( 'Homepage' ) }
+                                               { isPostsPage && __( 'Posts Page' ) }
+                                       </Badge>
                                </Text>
+
                                <PostActions
                                        postType={ postType }
                                        postId={ postId }

Screenshots

github-actions · 2024-10-29T12:25:11Z

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Vrishabhsk <vrishabhsk@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: rogermattic <magdarogier@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Vrishabhsk · 2024-10-30T10:49:06Z

The tests haven't been updated as per the latest changes. Once they are confirmed, ill update the tests as well

mirka

Thanks for taking the initiative here!

I know we're still discussing component specs in the original issue, so I'll leave the technical review for later and just leave administrative notes for now. The main thing is that this component needs to start as a private API. It needs to be a locked export, and include a 'status-private' tag in the Storybook docs.

Vrishabhsk · 2024-10-31T14:01:37Z

Hi @mirka 👋 Thanks for your input

I have updated the README.md as per your instructions
Also implemented the necessary storybook (CSF 3) and private api steps

Let me know your thoughts on it. Thanks

jameskoster · 2024-11-29T10:20:26Z

Hey @Vrishabhsk what's the latest here? Has the component been updated to reflect the recent discussions in the issue? Let me know if I can help.

Vrishabhsk · 2024-11-29T10:25:01Z

Hi @jameskoster 👋
Apologies for the delay, completely slipped through.
I will handle the Icons and implement them in the component and ping back here.

mirka · 2024-11-29T17:51:36Z

+	background-color: mix($white, $base-color, 90%);
+	color: mix($black, $base-color, 50%);


@WordPress/gutenberg-design Have we considered what we want to happen when a Badge is placed on a dark background? (This can be a follow-up)

What's the concern?

Just thinking forward about theming. The default badge is subtle on a white background, but eye catching on a dark one. Color differences are also harder to perceive, I think, especially in isolation.

FWIW, the default badge looks like this when rendered in the current theming system:

(To be clear, these issues aren't blockers for this PR to land.)

jameskoster · 2024-12-02T13:27:23Z

I pushed some updates to make the icons more cohesive:

jameskoster · 2024-12-02T13:29:30Z

+			{ context !== 'neutral' && (
+				<Icon
+					icon={ contextBasedIcon() }
+					size={ 20 }


There aren't many (any?) examples of icons rendering at 20px in the software, but I don't mind it here. What do you think @jasmussen?

24px looks a bit odd next to the smaller text:

+1 on the 20px rendering! That works well for the visual consistency.
Thank you @jameskoster for covering it and your work on these icons!

BTW In the initial designs I even had it set to 16px.

Hey, thanks for the ping, sorry for the belated response.

I have semi strong opinions on this, all related to the icons being carefully designed to be displayed at 24x24 precisely, so that the pixels render correctly. Even if they are SVGs meant to scale, the pixels won't alias perfectly at any resolution.

That's a long winded way of saying: if we are going to scale the icons down, we should do it according to some careful and deliberate math, so the pixels alias as well as possible. And we should do it very rarely: it should be an exception to the rule to use scaled icons, essentially, just like how we have heuristics for typography sizes. This badge can be such an exception, certainly.

So about that math: the icons are 24x24 with a 1.5px stroke width. At 20x20, the stroke width would be 1.25px. That would render blurry both at 1x screens, and at 2x screens (2.50px). If we scaled the icon to 16 (33% smaller icon), the stroke width would be exactly 1px, so it would be crisp at both 1x and 2x screens.

How would 16x16 look in that context, can you try? If the math checks out, it should look very crisp, even if smaller. And smaller in this case would be good insofar as it looks intentional: it's smaller enough to be significant.

Thanks for the context, we should document this, and maybe even restrict the size prop on Icon to specific values.

16px seems a bit small, but I'll take it over 24px:

I quite like that, because it makes the icon feel like it's part of the text, almost like an in-text glyph rather than an icon. But curious what others think.

@jameskoster @jasmussen I completely agree with the concerns raised here. The 16px icon rendered differently in Figma for me, but I agree with @jameskoster that it looks a bit off in the screenshot above. At the same time, I agree with @jasmussen that size-wise, it blends nicely with the text, which was also my goal.

The issue, though, is that the icon wasn’t designed for this size—its stroke width looks a tiny bit too thin when rescaled, and it doesn’t fill the crop area effectively.

Would it make sense to add a set of icons to the library specifically for badges at this smaller size? These could have adjusted stroke widths and proportions to better suit their context.

BTW Google does it well :D

Would it make sense to add a set of icons to the library specifically for badges at this smaller size? These could have adjusted stroke widths and proportions to better suit their context.

This is a bit of a large undertaking, and even now we are missing a build process (#38850) so this is likely not feasible in the foreseeable future. In that vein, I'd either keep the icons at 16px size, try 18px, just use 24x24, or omit the icon entirely.

I vote we use the current icon at 16px. The resulting strokes are exactly 1px which I agree is a little thin, but should render sharply.

In the future it might be beneficial to redraw the icons to use stroke-width, then we can be a bit more precise/flexible. I discuss this a bit in #65786.

The resulting strokes are exactly 1px which I agree is a little thin, but should render sharply.

Agreed. This is especially important for 1x resolution monitors, which is still the overwhelming majority of desktop monitors.

In the future it might be beneficial to redraw the icons to use stroke-width, then we can be a bit more precise/flexible. I discuss this a bit in #65786.

This would also potentially open the door for some animation fun. Agreed this is a big undertaking.

# Conflicts: # packages/icons/CHANGELOG.md

mirka

Thank you for the follow-ups @Vrishabhsk! I pushed some minor fixups surfaced in the failing CI checks, but otherwise I think we're pretty much ready to land this initial iteration.

Just waiting on some confirmation from the design team about icon file naming.

mirka · 2024-12-11T19:17:26Z

+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const caution = (


@WordPress/gutenberg-design I just want to make sure we measure twice and cut once here because publishing a new icon is kind of irreversible 😄

Would it be worth renaming these so it follows the convention of foo + fooFilled like we do for the other pairs like this? For example, change the canonical name of warning to cautionFilled (maintaining back compat with an aliased export of course).

Oh, yes, good suggestion. Just to clarify; that means any existing instances of warning would map to cautionFilled?

We should update the cautionFilled icon so that the details match the new caution icon too. Do you think it makes sense to do that in this PR, or separately?

that means any existing instances of warning would map to cautionFilled?

Correct 👍

Do you think it makes sense to do that in this PR, or separately?

Yes, let me pull the icon changes out of this PR so we can address it separately with proper care. I'll prepare a PR so you can push up changes to the SVG.

@Vrishabhsk Keeping this PR on hold for just a bit more. Thank you for your patience!

@jameskoster Updates to the SVG can be pushed here: #67895

# Conflicts: # packages/icons/CHANGELOG.md # packages/icons/src/index.js

mirka

Ok, I think the initial iteration is ready to be merged! Thank you everyone for the collaboration 🎉

* Create badge component * Imports and Manifest * Add test and capability for additional props using spread operator * Enhance componenet furthermore * Generate README via manifest & Add in ignore list * Lock Badge * Convert Storybook from CSF 2 to CSF 3 Format * Improve the component * New iteration * Add new icons: Error and Caution * Utilize new icons * Update icons * decrease icon size * Address feedback * Fix SVG formatting * Fix unit test * Remove unnecessary type (already included) * Update readme * Adjust icon keywords * Add changelog --------- Co-authored-by: Vrishabhsk <vrishabhsk@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: rogermattic <magdarogier@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>

Mamaduka · 2025-01-10T07:16:14Z

@Vrishabhsk, I just pushed a small follow-up for this component, which hardens conditions for icon rendering. See: #68588.

Vrishabhsk added 2 commits October 29, 2024 16:15

Create badge component

09b3cfe

Imports and Manifest

5877120

Vrishabhsk requested review from ajitbohra, fabiankaegy, juanmaguitar and ndiego as code owners October 29, 2024 12:24

Add test and capability for additional props using spread operator

409496c

Vrishabhsk mentioned this pull request Oct 29, 2024

Convert to component: Badge #61106

Closed

jameskoster requested a review from a team October 29, 2024 17:10

jameskoster added [Package] Components /packages/components Design System Issues related to the system of combining components according to best practices. labels Oct 29, 2024

jameskoster reviewed Oct 29, 2024

View reviewed changes

Comment thread packages/components/src/badge/styles.scss Outdated

Comment thread packages/components/src/badge/styles.scss Outdated

Comment thread packages/components/src/badge/styles.scss Outdated

Enhance componenet furthermore

35f553e

mirka reviewed Oct 31, 2024

View reviewed changes

Comment thread docs/manifest.json Outdated

Comment thread packages/components/src/badge/README.md

Comment thread packages/components/src/badge/stories/index.story.tsx Outdated

Vrishabhsk added 4 commits October 31, 2024 17:49

Generate README via manifest & Add in ignore list

ddcb92a

Lock Badge

78a6f9e

Convert Storybook from CSF 2 to CSF 3 Format

60d19e2

Improve the component

2c6cb4f

Vrishabhsk added 2 commits November 12, 2024 13:24

Merge branch 'trunk' into add/badge-component

27cf958

New iteration

6e5da3a

Vrishabhsk added 3 commits November 29, 2024 16:45

Add new icons: Error and Caution

e16faaa

Utilize new icons

e75a6d8

Merge branch 'trunk' into add/badge-component

b928d63

mirka reviewed Nov 29, 2024

View reviewed changes

Update icons

bc9563b

jameskoster reviewed Dec 2, 2024

View reviewed changes

jameskoster and others added 2 commits December 4, 2024 13:53

decrease icon size

8a22bfd

Address feedback

2133d46

Vrishabhsk requested a review from mirka December 5, 2024 15:35

mirka added the [Type] Enhancement A suggestion for improvement. label Dec 9, 2024

rogermattic mentioned this pull request Dec 10, 2024

Introducing consistency in colors for deposits across pages Automattic/woocommerce-payments#8382

Merged

6 tasks

mirka added 5 commits December 12, 2024 02:48

Merge branch 'trunk' into add/badge-component

a5e9a5c

# Conflicts: # packages/icons/CHANGELOG.md

Fix SVG formatting

dd84e8b

Fix unit test

76de6a3

Remove unnecessary type (already included)

9146bed

Update readme

c7d0a71

mirka reviewed Dec 11, 2024

View reviewed changes

mirka added 3 commits December 14, 2024 00:21

Merge branch 'trunk' into add/badge-component

e1c568c

# Conflicts: # packages/icons/CHANGELOG.md # packages/icons/src/index.js

Adjust icon keywords

5ca58da

Add changelog

af9da7d

mirka approved these changes Dec 13, 2024

View reviewed changes

mirka linked an issue Dec 13, 2024 that may be closed by this pull request

Convert to component: Badge #61106

Closed

mirka enabled auto-merge (squash) December 13, 2024 16:11

mirka merged commit 24d5f78 into WordPress:trunk Dec 13, 2024

github-actions bot added this to the Gutenberg 20.0 milestone Dec 13, 2024

jameskoster mentioned this pull request Dec 16, 2024

Replace ad hoc badges with Badge component #68020

Closed

4 tasks

daledupreez mentioned this pull request Sep 23, 2025

Showing connection modal when oauth is needed woocommerce/woocommerce-gateway-stripe#4669

Merged

6 tasks

aduth mentioned this pull request Jan 7, 2026

Design System: Support for admin redesign #71196

Open

		background-color: mix($white, $base-color, 90%);
		color: mix($black, $base-color, 50%);

Conversation

Vrishabhsk commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

Example Use Cases

Data-Views

Post Card Panel

Screenshots

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Vrishabhsk commented Oct 30, 2024

Uh oh!

mirka left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Vrishabhsk commented Oct 31, 2024

Uh oh!

jameskoster commented Nov 29, 2024

Uh oh!

Vrishabhsk commented Nov 29, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jameskoster commented Dec 2, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mirka left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Vrishabhsk commented Oct 29, 2024 •

edited

Loading

`Data-Views`

`Post Card Panel`

github-actions bot commented Oct 29, 2024 •

edited

Loading

jasmussen Dec 5, 2024 •

edited

Loading