Enhancement : Badge Component

[Vrishabhsk]

What?

• introduce a new component : Badge

Why?

• https://github.com/WordPress/gutenberg/issues/61106
• Need for a reusable component

Example Use Cases

Data-Views

Diff

```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 ( - - + ); } ) } ```

Post Card Panel

Diff

```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 && ( - - { __( 'Homepage' ) } - - ) } - { isPostsPage && ( - - { __( 'Posts Page' ) } - - ) } + + { isFrontPage && __( 'Homepage' ) } + { isPostsPage && __( 'Posts Page' ) } + +

Screenshots

[github-actions[bot]]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: [Package] Components, Design System.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions[bot]]

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>

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

[Vrishabhsk]

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

[Vrishabhsk]

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