Enhancement : Badge Component #66555

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.

packages/components/src/badge/styles.scss

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.

docs/manifest.json

packages/components/src/badge/README.md

packages/components/src/badge/stories/index.story.tsx

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.

packages/components/src/badge/index.tsx

packages/components/src/badge/types.ts

packages/components/src/badge/index.tsx

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

packages/components/src/badge/styles.scss

+	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.)

packages/components/src/badge/types.ts

packages/components/src/badge/index.tsx

packages/components/src/index.ts

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

I pushed some updates to make the icons more cohesive:

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

packages/components/src/badge/index.tsx

+			{ 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

packages/icons/src/library/caution.js

+ */
+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>

Vrishabhsk added 2 commits October 29, 2024 16:15

Create badge component

09b3cfe

Imports and Manifest

5877120

Vrishabhsk requested review from ajitbohra, juanmaguitar, fabiankaegy 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

packages/components/src/badge/styles.scss Outdated Show resolved Hide resolved

packages/components/src/badge/styles.scss Outdated Show resolved Hide resolved

packages/components/src/badge/styles.scss Outdated Show resolved Hide resolved

Enhance componenet furthermore

35f553e

mirka reviewed Oct 31, 2024

View reviewed changes

docs/manifest.json Outdated Show resolved Hide resolved

packages/components/src/badge/README.md Show resolved Hide resolved

packages/components/src/badge/stories/index.story.tsx Outdated Show resolved Hide resolved

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
63 checks passed

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

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhancement : Badge Component #66555

Enhancement : Badge Component #66555

Vrishabhsk commented Oct 29, 2024 •

edited

Loading

github-actions bot commented Oct 29, 2024 •

edited

Loading

Vrishabhsk commented Oct 30, 2024

mirka left a comment

Vrishabhsk commented Oct 31, 2024

jameskoster commented Nov 29, 2024

Vrishabhsk commented Nov 29, 2024

mirka Nov 29, 2024

jameskoster Dec 2, 2024

mirka Dec 3, 2024

jameskoster commented Dec 2, 2024

jameskoster Dec 2, 2024

rogermattic Dec 3, 2024

jasmussen Dec 4, 2024

jameskoster Dec 4, 2024

jasmussen Dec 5, 2024 •

edited

Loading

rogermattic Dec 7, 2024

jasmussen Dec 9, 2024

jameskoster Dec 9, 2024

jasmussen Dec 9, 2024

jasmussen Dec 9, 2024

mirka left a comment

mirka Dec 11, 2024

jameskoster Dec 12, 2024

mirka Dec 12, 2024

mirka Dec 12, 2024

mirka left a comment

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

Enhancement : Badge Component #66555

Enhancement : Badge Component #66555

Conversation

Vrishabhsk commented Oct 29, 2024 • edited Loading

What?

Why?

Example Use Cases

Data-Views

Post Card Panel

Screenshots

github-actions bot commented Oct 29, 2024 • edited Loading

Vrishabhsk commented Oct 30, 2024

mirka left a comment

Choose a reason for hiding this comment

Vrishabhsk commented Oct 31, 2024

jameskoster commented Nov 29, 2024

Vrishabhsk commented Nov 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jameskoster commented Dec 2, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasmussen Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mirka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mirka left a comment

Choose a reason for hiding this comment

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