From 09b3cfe04d3f9f79816145927569863e27d0f97f Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Tue, 29 Oct 2024 16:15:07 +0400 Subject: [PATCH 01/20] Create badge component --- packages/components/src/badge/README.md | 38 +++++++++++++++++++ packages/components/src/badge/index.tsx | 19 ++++++++++ .../src/badge/stories/index.story.tsx | 37 ++++++++++++++++++ packages/components/src/badge/styles.scss | 11 ++++++ packages/components/src/badge/types.ts | 19 ++++++++++ 5 files changed, 124 insertions(+) create mode 100644 packages/components/src/badge/README.md create mode 100644 packages/components/src/badge/index.tsx create mode 100644 packages/components/src/badge/stories/index.story.tsx create mode 100644 packages/components/src/badge/styles.scss create mode 100644 packages/components/src/badge/types.ts diff --git a/packages/components/src/badge/README.md b/packages/components/src/badge/README.md new file mode 100644 index 0000000000000..43962ea21bfea --- /dev/null +++ b/packages/components/src/badge/README.md @@ -0,0 +1,38 @@ +# Badge + +`Badge` is a `reusable component` to display important information in (not limited to) `data-views`. + +## Usage + +```jsx +import { Badge } from '@wordpress/components'; + +const ExampleBadge = () => { + return ( + + Code is Poetry + + ); +}; +``` + +## Props + +### `className`: `string` + +Additional classes for the badge component. + +- Required: No + +### `as`: `ElementType` + +Component type that will be used to render the badge component. + +- Required: No +- Default: `div` + +### `children`: `ReactNode` + +The content to be displayed within the `Badge`. + +- Required: Yes diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx new file mode 100644 index 0000000000000..0642c936aa2b8 --- /dev/null +++ b/packages/components/src/badge/index.tsx @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + +/** + * Internal dependencies + */ +import type { BadgeProps } from './types'; + +function Badge( { className, as: Component = 'div', children }: BadgeProps ) { + return ( + + { children } + + ); +} + +export default Badge; diff --git a/packages/components/src/badge/stories/index.story.tsx b/packages/components/src/badge/stories/index.story.tsx new file mode 100644 index 0000000000000..e2cf18f49761e --- /dev/null +++ b/packages/components/src/badge/stories/index.story.tsx @@ -0,0 +1,37 @@ +/** + * External dependencies + */ +import type { Meta, StoryFn } from '@storybook/react'; + +/** + * Internal dependencies + */ +import Badge from '..'; + +const meta: Meta< typeof Badge > = { + component: Badge, + title: 'Components/Containers/Badge', + argTypes: { + className: { + control: { type: 'text' }, + }, + as: { + control: { type: 'select' }, + options: [ 'div', 'span' ], + }, + children: { + control: { type: null }, + }, + }, +}; + +export default meta; + +const Template: StoryFn< typeof Badge > = ( args ) => { + return ; +}; + +export const Default = Template.bind( {} ); +Default.args = { + children: 'Code is Poetry', +}; diff --git a/packages/components/src/badge/styles.scss b/packages/components/src/badge/styles.scss new file mode 100644 index 0000000000000..e6be4a7a0aef5 --- /dev/null +++ b/packages/components/src/badge/styles.scss @@ -0,0 +1,11 @@ +.components-badge { + background: $gray-100; + color: $gray-800; + padding: $grid-unit-05; + border-radius: $radius-small; + font-size: 12px; + font-weight: 400; + flex-shrink: 0; + line-height: $grid-unit-05 * 5; + width: fit-content; +} diff --git a/packages/components/src/badge/types.ts b/packages/components/src/badge/types.ts new file mode 100644 index 0000000000000..ac4537c3a4413 --- /dev/null +++ b/packages/components/src/badge/types.ts @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import type { ElementType, ReactNode } from 'react'; + +export type BadgeProps = { + /** + * Element to display inside the badge. + */ + children: ReactNode; + /** + * Additional classes for the badge component. + */ + className?: string; + /** + * Component type that will be used to render the badge component. + */ + as?: ElementType; +}; From 58771206cfc8969e1aa90bfc3e7b323bee41e15a Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Tue, 29 Oct 2024 16:16:36 +0400 Subject: [PATCH 02/20] Imports and Manifest --- docs/manifest.json | 6 ++++++ packages/components/src/index.ts | 1 + packages/components/src/style.scss | 1 + 3 files changed, 8 insertions(+) diff --git a/docs/manifest.json b/docs/manifest.json index 5e94c6b83b70d..08414a9ddb18a 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -683,6 +683,12 @@ "markdown_source": "../packages/components/src/autocomplete/README.md", "parent": "components" }, + { + "title": "Badge", + "slug": "badge", + "markdown_source": "../packages/components/src/badge/README.md", + "parent": "components" + }, { "title": "BaseControl", "slug": "base-control", diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index e82d6da70279e..968c6de786f4f 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -241,6 +241,7 @@ export { } from './higher-order/with-focus-return'; export { default as withNotices } from './higher-order/with-notices'; export { default as withSpokenMessages } from './higher-order/with-spoken-messages'; +export { default as Badge } from './badge'; // Private APIs. export { privateApis } from './private-apis'; diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index 70317f4a2d0e0..368dec0f5e253 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -10,6 +10,7 @@ // Components @import "./animate/style.scss"; @import "./autocomplete/style.scss"; +@import "./badge/styles.scss"; @import "./button-group/style.scss"; @import "./button/style.scss"; @import "./checkbox-control/style.scss"; From 409496c68aa6153e748e6a3f6de218330e664c22 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Tue, 29 Oct 2024 17:38:06 +0400 Subject: [PATCH 03/20] Add test and capability for additional props using spread operator --- packages/components/src/badge/index.tsx | 12 +++- packages/components/src/badge/test/index.tsx | 66 ++++++++++++++++++++ 2 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 packages/components/src/badge/test/index.tsx diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx index 0642c936aa2b8..48933cf2de9fc 100644 --- a/packages/components/src/badge/index.tsx +++ b/packages/components/src/badge/index.tsx @@ -8,9 +8,17 @@ import clsx from 'clsx'; */ import type { BadgeProps } from './types'; -function Badge( { className, as: Component = 'div', children }: BadgeProps ) { +function Badge( { + className, + as: Component = 'div', + children, + ...props +}: BadgeProps ) { return ( - + { children } ); diff --git a/packages/components/src/badge/test/index.tsx b/packages/components/src/badge/test/index.tsx new file mode 100644 index 0000000000000..5d252a9b843a3 --- /dev/null +++ b/packages/components/src/badge/test/index.tsx @@ -0,0 +1,66 @@ +/** + * External dependencies + */ +import { render, screen } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import Badge from '..'; + +describe( 'Badge', () => { + it( 'should render correctly with default props', () => { + render( Code is Poetry ); + const badge = screen.getByText( 'Code is Poetry' ); + expect( badge ).toBeInTheDocument(); + expect( badge.tagName ).toBe( 'DIV' ); // Default element should be a div + expect( badge ).toHaveClass( 'components-badge' ); + } ); + + it( 'should render as a span when specified', () => { + render( Code is Poetry ); + const badge = screen.getByText( 'Code is Poetry' ); + expect( badge.tagName ).toBe( 'SPAN' ); + expect( badge ).toHaveClass( 'components-badge' ); + } ); + + it( 'should render as a custom element when specified', () => { + render( Code is Poetry ); + const badge = screen.getByText( 'Code is Poetry' ); + expect( badge.tagName ).toBe( 'ARTICLE' ); + expect( badge ).toHaveClass( 'components-badge' ); + } ); + + it( 'should combine custom className with default class', () => { + render( Code is Poetry ); + const badge = screen.getByText( 'Code is Poetry' ); + expect( badge ).toHaveClass( 'components-badge' ); + expect( badge ).toHaveClass( 'custom-class' ); + } ); + + it( 'should render children correctly', () => { + render( + + Nested Content + + ); + + const badge = screen.getByText( ( content, element ) => { + return element?.classList?.contains( 'components-badge' ) ?? false; + } ); + + expect( badge ).toBeInTheDocument(); + expect( badge ).toHaveClass( 'components-badge' ); + expect( badge ).toHaveTextContent( 'Nested Content' ); + + const nestedSpan = screen.getByText( 'Nested' ); + expect( nestedSpan.tagName ).toBe( 'SPAN' ); + } ); + + it( 'should pass through additional props', () => { + render( Code is Poetry ); + const badge = screen.getByTestId( 'custom-badge' ); + expect( badge ).toHaveTextContent( 'Code is Poetry' ); + expect( badge ).toHaveClass( 'components-badge' ); + } ); +} ); From 35f553e84164cdbe2fc885db194ef79c788b7c93 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Wed, 30 Oct 2024 14:39:18 +0400 Subject: [PATCH 04/20] Enhance componenet furthermore --- packages/components/src/badge/README.md | 23 +++++++++++- packages/components/src/badge/index.tsx | 29 ++++++++++++++- .../src/badge/stories/index.story.tsx | 37 +++++++++++++++++++ packages/components/src/badge/styles.scss | 29 +++++++++++++-- packages/components/src/badge/types.ts | 23 ++++++++++++ 5 files changed, 136 insertions(+), 5 deletions(-) diff --git a/packages/components/src/badge/README.md b/packages/components/src/badge/README.md index 43962ea21bfea..6e1d123dec653 100644 --- a/packages/components/src/badge/README.md +++ b/packages/components/src/badge/README.md @@ -24,6 +24,12 @@ Additional classes for the badge component. - Required: No +### `icon`: `IconType` + +Icon to be displayed within the badge component. + +- Required: No + ### `as`: `ElementType` Component type that will be used to render the badge component. @@ -31,8 +37,23 @@ Component type that will be used to render the badge component. - Required: No - Default: `div` +### `variant`: `'generic' | 'info' | 'success' | 'warning' | 'error'` + +Variant of the badge component. + +- Required: No +- Default: `'generic'` +- + +### `showContext`: `boolean` + +Whether to display the badge with a contextual message when variant is set other than `'generic'`. + +- Required: No +- Default: `true` + ### `children`: `ReactNode` -The content to be displayed within the `Badge`. +The content to be displayed within the component. - Required: Yes diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx index 48933cf2de9fc..4cd66d4875cff 100644 --- a/packages/components/src/badge/index.tsx +++ b/packages/components/src/badge/index.tsx @@ -7,18 +7,45 @@ import clsx from 'clsx'; * Internal dependencies */ import type { BadgeProps } from './types'; +import Icon from '../icon'; function Badge( { className, + icon, as: Component = 'div', + variant = 'generic', + showContext = true, children, ...props }: BadgeProps ) { + /** + * Formats the variant string to be displayed when showContext is true. + * + * @param {string} str + * + * @return {string} Formatted variant string. + */ + function formatVariant( str: string ): string { + return ( + str.charAt( 0 ).toUpperCase() + str.slice( 1 ).toLowerCase() + ': ' + ); + } + return ( + { icon && } + + { showContext && + variant !== 'generic' && + formatVariant( variant ) } + { children } ); diff --git a/packages/components/src/badge/stories/index.story.tsx b/packages/components/src/badge/stories/index.story.tsx index e2cf18f49761e..29f711be4989e 100644 --- a/packages/components/src/badge/stories/index.story.tsx +++ b/packages/components/src/badge/stories/index.story.tsx @@ -8,6 +8,11 @@ import type { Meta, StoryFn } from '@storybook/react'; */ import Badge from '..'; +/** + * WordPress dependencies + */ +import { info, bug, help, published } from '@wordpress/icons'; + const meta: Meta< typeof Badge > = { component: Badge, title: 'Components/Containers/Badge', @@ -15,6 +20,17 @@ const meta: Meta< typeof Badge > = { className: { control: { type: 'text' }, }, + icon: { + control: { type: 'select' }, + options: [ '-', 'info', 'bug', 'help', 'published' ], + mapping: { + '-': undefined, + info, + bug, + help, + published, + }, + }, as: { control: { type: 'select' }, options: [ 'div', 'span' ], @@ -35,3 +51,24 @@ export const Default = Template.bind( {} ); Default.args = { children: 'Code is Poetry', }; + +export const WithIcon = Template.bind( {} ); +WithIcon.args = { + children: 'Code is Poetry', + icon: bug, + variant: 'error', +}; + +export const WithVariant = Template.bind( {} ); +WithVariant.args = { + children: 'Code is Poetry', + variant: 'success', +}; + +export const WithoutContext = Template.bind( {} ); +WithoutContext.args = { + children: 'Code is Poetry', + icon: help, + variant: 'warning', + showContext: false, +}; diff --git a/packages/components/src/badge/styles.scss b/packages/components/src/badge/styles.scss index e6be4a7a0aef5..9c7eb445bde71 100644 --- a/packages/components/src/badge/styles.scss +++ b/packages/components/src/badge/styles.scss @@ -1,11 +1,34 @@ +@mixin badge-color-variant( $base-color ) { + background-color: mix($white, $base-color, 90%); + color: mix($black, $base-color, 50%); +} + +$badge-colors: ( + "info": #3858e9, + "warning": $alert-yellow, + "error": $alert-red, + "success": $alert-green, +); + .components-badge { background: $gray-100; color: $gray-800; - padding: $grid-unit-05; + padding: $grid-unit-05 $grid-unit-10; + min-height: $grid-unit-30; border-radius: $radius-small; - font-size: 12px; + font-size: $font-size-small; font-weight: 400; flex-shrink: 0; - line-height: $grid-unit-05 * 5; + line-height: $font-line-height-small; width: fit-content; + display: flex; + align-items: center; + gap: 2px; + + // Generate color variants + @each $type, $color in $badge-colors { + &.components-badge--#{$type} { + @include badge-color-variant( $color ); + } + } } diff --git a/packages/components/src/badge/types.ts b/packages/components/src/badge/types.ts index ac4537c3a4413..c3cfc1e45f6d4 100644 --- a/packages/components/src/badge/types.ts +++ b/packages/components/src/badge/types.ts @@ -3,6 +3,11 @@ */ import type { ElementType, ReactNode } from 'react'; +/** + * Internal dependencies + */ +import type { IconType } from '../icon'; + export type BadgeProps = { /** * Element to display inside the badge. @@ -12,8 +17,26 @@ export type BadgeProps = { * Additional classes for the badge component. */ className?: string; + /** + * Optional Icon to display inside the badge. + */ + icon?: IconType; /** * Component type that will be used to render the badge component. + * + * @default 'div' */ as?: ElementType; + /** + * Badge variant. + * + * @default 'generic' + */ + variant?: 'generic' | 'info' | 'success' | 'warning' | 'error'; + /** + * Show context for the type of badge. + * + * @default true + */ + showContext?: boolean; }; From ddcb92aae8b0131b1697210371646447e0726bff Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 31 Oct 2024 17:49:43 +0400 Subject: [PATCH 05/20] Generate README via manifest & Add in ignore list --- docs/manifest.json | 6 -- docs/tool/manifest.js | 1 + packages/components/src/badge/README.md | 71 ++++++++++--------- .../components/src/badge/docs-manifest.json | 5 ++ 4 files changed, 42 insertions(+), 41 deletions(-) create mode 100644 packages/components/src/badge/docs-manifest.json diff --git a/docs/manifest.json b/docs/manifest.json index 08414a9ddb18a..5e94c6b83b70d 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -683,12 +683,6 @@ "markdown_source": "../packages/components/src/autocomplete/README.md", "parent": "components" }, - { - "title": "Badge", - "slug": "badge", - "markdown_source": "../packages/components/src/badge/README.md", - "parent": "components" - }, { "title": "BaseControl", "slug": "base-control", diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js index 3c1f0fee2090f..3d790f314e9ea 100644 --- a/docs/tool/manifest.js +++ b/docs/tool/manifest.js @@ -18,6 +18,7 @@ const componentPaths = glob( 'packages/components/src/*/**/README.md', { 'packages/components/src/dropdown-menu-v2/README.md', 'packages/components/src/tabs/README.md', 'packages/components/src/custom-select-control-v2/README.md', + 'packages/components/src/badge/README.md', ], } ); const packagePaths = glob( 'packages/*/package.json' ) diff --git a/packages/components/src/badge/README.md b/packages/components/src/badge/README.md index 6e1d123dec653..272dfae9d043d 100644 --- a/packages/components/src/badge/README.md +++ b/packages/components/src/badge/README.md @@ -1,59 +1,60 @@ # Badge -`Badge` is a `reusable component` to display important information in (not limited to) `data-views`. + -## Usage +

See the WordPress Storybook for more detailed, interactive documentation.

-```jsx -import { Badge } from '@wordpress/components'; +## Props -const ExampleBadge = () => { - return ( - - Code is Poetry - - ); -}; -``` +### `as` -## Props +Component type that will be used to render the badge component. -### `className`: `string` + - Type: `ElementType` + - Required: No + - Default: `'div'` -Additional classes for the badge component. +### `children` -- Required: No +Element to display inside the badge. -### `icon`: `IconType` + - Type: `ReactNode` + - Required: Yes -Icon to be displayed within the badge component. +### `className` -- Required: No +Additional classes for the badge component. -### `as`: `ElementType` + - Type: `string` + - Required: No -Component type that will be used to render the badge component. +### `icon` + +Optional Icon to display inside the badge. -- Required: No -- Default: `div` + - Type: `IconType` + - Required: No -### `variant`: `'generic' | 'info' | 'success' | 'warning' | 'error'` +### `iconSize` -Variant of the badge component. +Size of the icon in the badge. -- Required: No -- Default: `'generic'` -- + - Type: `number` + - Required: No + - Default: `20` -### `showContext`: `boolean` +### `showContext` -Whether to display the badge with a contextual message when variant is set other than `'generic'`. +Show context for the type of badge. -- Required: No -- Default: `true` + - Type: `boolean` + - Required: No + - Default: `true` -### `children`: `ReactNode` +### `variant` -The content to be displayed within the component. +Badge variant. -- Required: Yes + - Type: `"info" | "warning" | "generic" | "success" | "error"` + - Required: No + - Default: `generic` diff --git a/packages/components/src/badge/docs-manifest.json b/packages/components/src/badge/docs-manifest.json new file mode 100644 index 0000000000000..3b70c0ef22843 --- /dev/null +++ b/packages/components/src/badge/docs-manifest.json @@ -0,0 +1,5 @@ +{ + "$schema": "../../schemas/docs-manifest.json", + "displayName": "Badge", + "filePath": "./index.tsx" +} From 78a6f9e5820f17b6dbc18dc7814e0d38b627cced Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 31 Oct 2024 17:50:59 +0400 Subject: [PATCH 06/20] Lock Badge --- packages/components/src/private-apis.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts index 51f820251b8d7..503ab321b95c0 100644 --- a/packages/components/src/private-apis.ts +++ b/packages/components/src/private-apis.ts @@ -9,6 +9,7 @@ import Theme from './theme'; import { Tabs } from './tabs'; import { kebabCase } from './utils/strings'; import { lock } from './lock-unlock'; +import Badge from './badge'; export const privateApis = {}; lock( privateApis, { @@ -19,4 +20,5 @@ lock( privateApis, { Theme, DropdownMenuV2, kebabCase, + Badge, } ); From 60d19e279737124c60bc5f58af779da967912a8c Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 31 Oct 2024 17:58:21 +0400 Subject: [PATCH 07/20] Convert Storybook from CSF 2 to CSF 3 Format --- .../src/badge/stories/index.story.tsx | 55 +++++++++++-------- packages/components/src/badge/types.ts | 6 ++ 2 files changed, 37 insertions(+), 24 deletions(-) diff --git a/packages/components/src/badge/stories/index.story.tsx b/packages/components/src/badge/stories/index.story.tsx index 29f711be4989e..d418c9f5686cd 100644 --- a/packages/components/src/badge/stories/index.story.tsx +++ b/packages/components/src/badge/stories/index.story.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; /** * Internal dependencies @@ -13,7 +13,7 @@ import Badge from '..'; */ import { info, bug, help, published } from '@wordpress/icons'; -const meta: Meta< typeof Badge > = { +const meta = { component: Badge, title: 'Components/Containers/Badge', argTypes: { @@ -31,6 +31,10 @@ const meta: Meta< typeof Badge > = { published, }, }, + iconSize: { + control: { type: 'number' }, + options: [ 20, 24, 32, 48 ], + }, as: { control: { type: 'select' }, options: [ 'div', 'span' ], @@ -39,36 +43,39 @@ const meta: Meta< typeof Badge > = { control: { type: null }, }, }, -}; + tags: [ 'status-private' ], +} satisfies Meta< typeof Badge >; export default meta; -const Template: StoryFn< typeof Badge > = ( args ) => { - return ; -}; +type Story = StoryObj< typeof meta >; -export const Default = Template.bind( {} ); -Default.args = { - children: 'Code is Poetry', +export const Default: Story = { + args: { + children: 'Code is Poetry', + }, }; -export const WithIcon = Template.bind( {} ); -WithIcon.args = { - children: 'Code is Poetry', - icon: bug, - variant: 'error', +export const WithIcon: Story = { + args: { + children: 'Code is Poetry', + icon: bug, + variant: 'error', + }, }; -export const WithVariant = Template.bind( {} ); -WithVariant.args = { - children: 'Code is Poetry', - variant: 'success', +export const WithVariant: Story = { + args: { + children: 'Code is Poetry', + variant: 'success', + }, }; -export const WithoutContext = Template.bind( {} ); -WithoutContext.args = { - children: 'Code is Poetry', - icon: help, - variant: 'warning', - showContext: false, +export const WithoutContext: Story = { + args: { + children: 'Code is Poetry', + icon: help, + variant: 'warning', + showContext: false, + }, }; diff --git a/packages/components/src/badge/types.ts b/packages/components/src/badge/types.ts index c3cfc1e45f6d4..849ec18111697 100644 --- a/packages/components/src/badge/types.ts +++ b/packages/components/src/badge/types.ts @@ -21,6 +21,12 @@ export type BadgeProps = { * Optional Icon to display inside the badge. */ icon?: IconType; + /** + * Size of the icon in the badge. + * + * @default 20 + */ + iconSize?: number; /** * Component type that will be used to render the badge component. * From 2c6cb4fe9142e993d859da5a5516152b3f5d0738 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 31 Oct 2024 17:59:08 +0400 Subject: [PATCH 08/20] Improve the component --- packages/components/src/badge/index.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx index 4cd66d4875cff..2ca99e8a3fed1 100644 --- a/packages/components/src/badge/index.tsx +++ b/packages/components/src/badge/index.tsx @@ -12,6 +12,7 @@ import Icon from '../icon'; function Badge( { className, icon, + iconSize = 20, as: Component = 'div', variant = 'generic', showContext = true, @@ -36,16 +37,16 @@ function Badge( { className={ clsx( 'components-badge', `components-badge--${ variant }`, + icon && 'components-badge--icon', className ) } + aria-label={ `${ variant }-badge` } { ...props } > - { icon && } - - { showContext && - variant !== 'generic' && - formatVariant( variant ) } - + { icon && } + { showContext && variant !== 'generic' && ( + { formatVariant( variant ) } + ) } { children } ); From 6e5da3af6abecd955d64848fbeb9b8e83bde1861 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Tue, 12 Nov 2024 17:32:48 +0400 Subject: [PATCH 09/20] New iteration --- packages/components/src/badge/README.md | 39 ++++----------- packages/components/src/badge/index.tsx | 48 ++++++++++++------- .../src/badge/stories/index.story.tsx | 46 +++--------------- packages/components/src/badge/styles.scss | 6 ++- packages/components/src/badge/types.ts | 27 ++--------- 5 files changed, 53 insertions(+), 113 deletions(-) diff --git a/packages/components/src/badge/README.md b/packages/components/src/badge/README.md index 272dfae9d043d..6458a46ce9049 100644 --- a/packages/components/src/badge/README.md +++ b/packages/components/src/badge/README.md @@ -14,13 +14,6 @@ Component type that will be used to render the badge component. - Required: No - Default: `'div'` -### `children` - -Element to display inside the badge. - - - Type: `ReactNode` - - Required: Yes - ### `className` Additional classes for the badge component. @@ -28,33 +21,17 @@ Additional classes for the badge component. - Type: `string` - Required: No -### `icon` - -Optional Icon to display inside the badge. - - - Type: `IconType` - - Required: No - -### `iconSize` +### `context` -Size of the icon in the badge. - - - Type: `number` - - Required: No - - Default: `20` - -### `showContext` - -Show context for the type of badge. +Badge variant. - - Type: `boolean` + - Type: `"neutral" | "info" | "success" | "warning" | "error"` - Required: No - - Default: `true` + - Default: `neutral` -### `variant` +### `children` -Badge variant. +Element to display inside the badge. - - Type: `"info" | "warning" | "generic" | "success" | "error"` - - Required: No - - Default: `generic` + - Type: `ReactNode` + - Required: Yes diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx index 2ca99e8a3fed1..2b53d89144340 100644 --- a/packages/components/src/badge/index.tsx +++ b/packages/components/src/badge/index.tsx @@ -3,6 +3,11 @@ */ import clsx from 'clsx'; +/** + * WordPress dependencies + */ +import { info, closeSmall, check, warning } from '@wordpress/icons'; + /** * Internal dependencies */ @@ -11,41 +16,48 @@ import Icon from '../icon'; function Badge( { className, - icon, - iconSize = 20, as: Component = 'div', - variant = 'generic', - showContext = true, + context = 'neutral', children, ...props }: BadgeProps ) { /** - * Formats the variant string to be displayed when showContext is true. - * - * @param {string} str + * Returns an icon based on the badge context. * - * @return {string} Formatted variant string. + * @return {JSX.Element | null} The corresponding icon for the provided context. */ - function formatVariant( str: string ): string { - return ( - str.charAt( 0 ).toUpperCase() + str.slice( 1 ).toLowerCase() + ': ' - ); + function contextBasedIcon(): JSX.Element | null { + switch ( context ) { + case 'info': + return info; + case 'warning': + return warning; + case 'error': + return closeSmall; + case 'success': + return check; + default: + return null; + } } return ( - { icon && } - { showContext && variant !== 'generic' && ( - { formatVariant( variant ) } + { context !== 'neutral' && ( + ) } { children } diff --git a/packages/components/src/badge/stories/index.story.tsx b/packages/components/src/badge/stories/index.story.tsx index d418c9f5686cd..726364d7a6bf6 100644 --- a/packages/components/src/badge/stories/index.story.tsx +++ b/packages/components/src/badge/stories/index.story.tsx @@ -8,11 +8,6 @@ import type { Meta, StoryObj } from '@storybook/react'; */ import Badge from '..'; -/** - * WordPress dependencies - */ -import { info, bug, help, published } from '@wordpress/icons'; - const meta = { component: Badge, title: 'Components/Containers/Badge', @@ -20,25 +15,14 @@ const meta = { className: { control: { type: 'text' }, }, - icon: { - control: { type: 'select' }, - options: [ '-', 'info', 'bug', 'help', 'published' ], - mapping: { - '-': undefined, - info, - bug, - help, - published, - }, - }, - iconSize: { - control: { type: 'number' }, - options: [ 20, 24, 32, 48 ], - }, as: { control: { type: 'select' }, options: [ 'div', 'span' ], }, + context: { + control: { type: 'select' }, + options: [ 'neutral', 'info', 'warning', 'error', 'success' ], + }, children: { control: { type: null }, }, @@ -53,29 +37,13 @@ type Story = StoryObj< typeof meta >; export const Default: Story = { args: { children: 'Code is Poetry', + context: 'neutral', }, }; -export const WithIcon: Story = { - args: { - children: 'Code is Poetry', - icon: bug, - variant: 'error', - }, -}; - -export const WithVariant: Story = { - args: { - children: 'Code is Poetry', - variant: 'success', - }, -}; - -export const WithoutContext: Story = { +export const WithContext: Story = { args: { children: 'Code is Poetry', - icon: help, - variant: 'warning', - showContext: false, + context: 'success', }, }; diff --git a/packages/components/src/badge/styles.scss b/packages/components/src/badge/styles.scss index 9c7eb445bde71..b0a55f9824336 100644 --- a/packages/components/src/badge/styles.scss +++ b/packages/components/src/badge/styles.scss @@ -13,7 +13,7 @@ $badge-colors: ( .components-badge { background: $gray-100; color: $gray-800; - padding: $grid-unit-05 $grid-unit-10; + padding: 0 $grid-unit-10; min-height: $grid-unit-30; border-radius: $radius-small; font-size: $font-size-small; @@ -25,6 +25,10 @@ $badge-colors: ( align-items: center; gap: 2px; + &--has-icon { + padding-left: $grid-unit-05; + } + // Generate color variants @each $type, $color in $badge-colors { &.components-badge--#{$type} { diff --git a/packages/components/src/badge/types.ts b/packages/components/src/badge/types.ts index 849ec18111697..3c70926739032 100644 --- a/packages/components/src/badge/types.ts +++ b/packages/components/src/badge/types.ts @@ -3,30 +3,11 @@ */ import type { ElementType, ReactNode } from 'react'; -/** - * Internal dependencies - */ -import type { IconType } from '../icon'; - export type BadgeProps = { - /** - * Element to display inside the badge. - */ - children: ReactNode; /** * Additional classes for the badge component. */ className?: string; - /** - * Optional Icon to display inside the badge. - */ - icon?: IconType; - /** - * Size of the icon in the badge. - * - * @default 20 - */ - iconSize?: number; /** * Component type that will be used to render the badge component. * @@ -38,11 +19,9 @@ export type BadgeProps = { * * @default 'generic' */ - variant?: 'generic' | 'info' | 'success' | 'warning' | 'error'; + context?: 'neutral' | 'info' | 'success' | 'warning' | 'error'; /** - * Show context for the type of badge. - * - * @default true + * Element to display inside the badge. */ - showContext?: boolean; + children: ReactNode; }; From e16faaa8e3072ffd7937571f38a008bab50aabc9 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Fri, 29 Nov 2024 16:45:00 +0400 Subject: [PATCH 10/20] Add new icons: Error and Caution --- packages/icons/CHANGELOG.md | 3 +++ packages/icons/src/index.js | 2 ++ packages/icons/src/library/caution.js | 12 ++++++++++++ packages/icons/src/library/error.js | 12 ++++++++++++ 4 files changed, 29 insertions(+) create mode 100644 packages/icons/src/library/caution.js create mode 100644 packages/icons/src/library/error.js diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 0649fe97ca5a4..4c8ec80f15d58 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +- Add new `caution` icon. +- Add new `error` icon. + ## 10.11.0 (2024-10-30) ## 10.10.0 (2024-10-16) diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 14eaec92b78c4..ca54bcb819cda 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -37,6 +37,7 @@ export { default as caption } from './library/caption'; export { default as capturePhoto } from './library/capture-photo'; export { default as captureVideo } from './library/capture-video'; export { default as category } from './library/category'; +export { default as caution } from './library/caution'; export { default as chartBar } from './library/chart-bar'; export { default as check } from './library/check'; export { default as chevronDown } from './library/chevron-down'; @@ -84,6 +85,7 @@ export { default as download } from './library/download'; export { default as edit } from './library/edit'; export { default as envelope } from './library/envelope'; export { default as external } from './library/external'; +export { default as error } from './library/error'; export { default as file } from './library/file'; export { default as filter } from './library/filter'; export { default as flipHorizontal } from './library/flip-horizontal'; diff --git a/packages/icons/src/library/caution.js b/packages/icons/src/library/caution.js new file mode 100644 index 0000000000000..8408352c08853 --- /dev/null +++ b/packages/icons/src/library/caution.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const caution = ( + + + +); + +export default caution; diff --git a/packages/icons/src/library/error.js b/packages/icons/src/library/error.js new file mode 100644 index 0000000000000..f73c8a2a1a380 --- /dev/null +++ b/packages/icons/src/library/error.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const error = ( + + + +); + +export default error; From e75a6d8bfbab49fc32ae650bf05c12f0df3ea932 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Fri, 29 Nov 2024 16:45:14 +0400 Subject: [PATCH 11/20] Utilize new icons --- packages/components/src/badge/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx index 2b53d89144340..7825751886634 100644 --- a/packages/components/src/badge/index.tsx +++ b/packages/components/src/badge/index.tsx @@ -6,7 +6,7 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { info, closeSmall, check, warning } from '@wordpress/icons'; +import { info, caution, error, published } from '@wordpress/icons'; /** * Internal dependencies @@ -31,11 +31,11 @@ function Badge( { case 'info': return info; case 'warning': - return warning; + return caution; case 'error': - return closeSmall; + return error; case 'success': - return check; + return published; default: return null; } From bc9563bf5f0029467e3cb47fc50a583ef1243ef7 Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 2 Dec 2024 13:25:24 +0000 Subject: [PATCH 12/20] Update icons --- packages/icons/src/library/caution.js | 8 ++++++-- packages/icons/src/library/error.js | 8 ++++++-- packages/icons/src/library/info.js | 8 ++++++-- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/icons/src/library/caution.js b/packages/icons/src/library/caution.js index 8408352c08853..ea73a872730f3 100644 --- a/packages/icons/src/library/caution.js +++ b/packages/icons/src/library/caution.js @@ -4,8 +4,12 @@ import { SVG, Path } from '@wordpress/primitives'; const caution = ( - - + + ); diff --git a/packages/icons/src/library/error.js b/packages/icons/src/library/error.js index f73c8a2a1a380..5d661a59a8730 100644 --- a/packages/icons/src/library/error.js +++ b/packages/icons/src/library/error.js @@ -4,8 +4,12 @@ import { SVG, Path } from '@wordpress/primitives'; const error = ( - - + + ); diff --git a/packages/icons/src/library/info.js b/packages/icons/src/library/info.js index f3425d9e95041..66a261716420a 100644 --- a/packages/icons/src/library/info.js +++ b/packages/icons/src/library/info.js @@ -4,8 +4,12 @@ import { SVG, Path } from '@wordpress/primitives'; const info = ( - - + + ); From 8a22bfdb00b597fa4dc3d12df2303d11ea90adb5 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 4 Dec 2024 13:53:02 +0000 Subject: [PATCH 13/20] decrease icon size --- packages/components/src/badge/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx index 7825751886634..bba5224642284 100644 --- a/packages/components/src/badge/index.tsx +++ b/packages/components/src/badge/index.tsx @@ -55,7 +55,7 @@ function Badge( { { context !== 'neutral' && ( ) } From 2133d466cb155fab8da8bf5e18edbe15ea62f5f4 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 5 Dec 2024 19:33:55 +0400 Subject: [PATCH 14/20] Address feedback --- packages/components/src/badge/index.tsx | 27 ++++++------ .../src/badge/stories/index.story.tsx | 44 ++++++++++--------- packages/components/src/badge/styles.scss | 22 +++++----- packages/components/src/badge/test/index.tsx | 34 ++------------ packages/components/src/badge/types.ts | 19 ++------ packages/components/src/index.ts | 1 - 6 files changed, 56 insertions(+), 91 deletions(-) diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx index bba5224642284..8a55f3881215f 100644 --- a/packages/components/src/badge/index.tsx +++ b/packages/components/src/badge/index.tsx @@ -12,47 +12,46 @@ import { info, caution, error, published } from '@wordpress/icons'; * Internal dependencies */ import type { BadgeProps } from './types'; +import type { WordPressComponentProps } from '../context'; import Icon from '../icon'; function Badge( { className, - as: Component = 'div', - context = 'neutral', + intent = 'default', children, ...props -}: BadgeProps ) { +}: WordPressComponentProps< BadgeProps, 'span', false > ) { /** * Returns an icon based on the badge context. * - * @return {JSX.Element | null} The corresponding icon for the provided context. + * @return The corresponding icon for the provided context. */ - function contextBasedIcon(): JSX.Element | null { - switch ( context ) { + function contextBasedIcon() { + switch ( intent ) { case 'info': return info; + case 'success': + return published; case 'warning': return caution; case 'error': return error; - case 'success': - return published; default: return null; } } return ( - - { context !== 'neutral' && ( + { intent !== 'default' && ( ) } { children } - + ); } diff --git a/packages/components/src/badge/stories/index.story.tsx b/packages/components/src/badge/stories/index.story.tsx index 726364d7a6bf6..aaa4bfb3c08f6 100644 --- a/packages/components/src/badge/stories/index.story.tsx +++ b/packages/components/src/badge/stories/index.story.tsx @@ -11,22 +11,6 @@ import Badge from '..'; const meta = { component: Badge, title: 'Components/Containers/Badge', - argTypes: { - className: { - control: { type: 'text' }, - }, - as: { - control: { type: 'select' }, - options: [ 'div', 'span' ], - }, - context: { - control: { type: 'select' }, - options: [ 'neutral', 'info', 'warning', 'error', 'success' ], - }, - children: { - control: { type: null }, - }, - }, tags: [ 'status-private' ], } satisfies Meta< typeof Badge >; @@ -37,13 +21,33 @@ type Story = StoryObj< typeof meta >; export const Default: Story = { args: { children: 'Code is Poetry', - context: 'neutral', }, }; -export const WithContext: Story = { +export const Info: Story = { args: { - children: 'Code is Poetry', - context: 'success', + ...Default.args, + intent: 'info', + }, +}; + +export const Success: Story = { + args: { + ...Default.args, + intent: 'success', + }, +}; + +export const Warning: Story = { + args: { + ...Default.args, + intent: 'warning', + }, +}; + +export const Error: Story = { + args: { + ...Default.args, + intent: 'error', }, }; diff --git a/packages/components/src/badge/styles.scss b/packages/components/src/badge/styles.scss index b0a55f9824336..e1e9cd5312d11 100644 --- a/packages/components/src/badge/styles.scss +++ b/packages/components/src/badge/styles.scss @@ -1,8 +1,3 @@ -@mixin badge-color-variant( $base-color ) { - background-color: mix($white, $base-color, 90%); - color: mix($black, $base-color, 50%); -} - $badge-colors: ( "info": #3858e9, "warning": $alert-yellow, @@ -11,8 +6,8 @@ $badge-colors: ( ); .components-badge { - background: $gray-100; - color: $gray-800; + background-color: color-mix(in srgb, $white 90%, var(--base-color)); + color: color-mix(in srgb, $black 50%, var(--base-color)); padding: 0 $grid-unit-10; min-height: $grid-unit-30; border-radius: $radius-small; @@ -25,14 +20,19 @@ $badge-colors: ( align-items: center; gap: 2px; - &--has-icon { - padding-left: $grid-unit-05; + &:where(.is-default) { + background-color: $gray-100; + color: $gray-800; + } + + &.has-icon { + padding-inline-start: $grid-unit-05; } // Generate color variants @each $type, $color in $badge-colors { - &.components-badge--#{$type} { - @include badge-color-variant( $color ); + &.is-#{$type} { + --base-color: #{$color}; } } } diff --git a/packages/components/src/badge/test/index.tsx b/packages/components/src/badge/test/index.tsx index 5d252a9b843a3..59ba150dc4ddb 100644 --- a/packages/components/src/badge/test/index.tsx +++ b/packages/components/src/badge/test/index.tsx @@ -17,18 +17,11 @@ describe( 'Badge', () => { expect( badge ).toHaveClass( 'components-badge' ); } ); - it( 'should render as a span when specified', () => { - render( Code is Poetry ); + it( 'should render as per its intent and contain an icon', () => { + render( Code is Poetry ); const badge = screen.getByText( 'Code is Poetry' ); - expect( badge.tagName ).toBe( 'SPAN' ); - expect( badge ).toHaveClass( 'components-badge' ); - } ); - - it( 'should render as a custom element when specified', () => { - render( Code is Poetry ); - const badge = screen.getByText( 'Code is Poetry' ); - expect( badge.tagName ).toBe( 'ARTICLE' ); - expect( badge ).toHaveClass( 'components-badge' ); + expect( badge ).toHaveClass( 'components-badge', 'is-error' ); + expect( badge ).toHaveClass( 'has-icon' ); } ); it( 'should combine custom className with default class', () => { @@ -38,25 +31,6 @@ describe( 'Badge', () => { expect( badge ).toHaveClass( 'custom-class' ); } ); - it( 'should render children correctly', () => { - render( - - Nested Content - - ); - - const badge = screen.getByText( ( content, element ) => { - return element?.classList?.contains( 'components-badge' ) ?? false; - } ); - - expect( badge ).toBeInTheDocument(); - expect( badge ).toHaveClass( 'components-badge' ); - expect( badge ).toHaveTextContent( 'Nested Content' ); - - const nestedSpan = screen.getByText( 'Nested' ); - expect( nestedSpan.tagName ).toBe( 'SPAN' ); - } ); - it( 'should pass through additional props', () => { render( Code is Poetry ); const badge = screen.getByTestId( 'custom-badge' ); diff --git a/packages/components/src/badge/types.ts b/packages/components/src/badge/types.ts index 3c70926739032..c4df76e309736 100644 --- a/packages/components/src/badge/types.ts +++ b/packages/components/src/badge/types.ts @@ -1,27 +1,16 @@ -/** - * External dependencies - */ -import type { ElementType, ReactNode } from 'react'; - export type BadgeProps = { /** * Additional classes for the badge component. */ className?: string; - /** - * Component type that will be used to render the badge component. - * - * @default 'div' - */ - as?: ElementType; /** * Badge variant. * - * @default 'generic' + * @default 'default' */ - context?: 'neutral' | 'info' | 'success' | 'warning' | 'error'; + intent?: 'default' | 'info' | 'success' | 'warning' | 'error'; /** - * Element to display inside the badge. + * Text to display inside the badge. */ - children: ReactNode; + children: string; }; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 968c6de786f4f..e82d6da70279e 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -241,7 +241,6 @@ export { } from './higher-order/with-focus-return'; export { default as withNotices } from './higher-order/with-notices'; export { default as withSpokenMessages } from './higher-order/with-spoken-messages'; -export { default as Badge } from './badge'; // Private APIs. export { privateApis } from './private-apis'; From dd84e8b17bdd3d9e88fddd23e88bcd9dabe620a8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 04:18:12 +0900 Subject: [PATCH 15/20] Fix SVG formatting --- packages/icons/src/library/caution.js | 6 +++--- packages/icons/src/library/error.js | 6 +++--- packages/icons/src/library/info.js | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/icons/src/library/caution.js b/packages/icons/src/library/caution.js index ea73a872730f3..f6d23fdfc7edd 100644 --- a/packages/icons/src/library/caution.js +++ b/packages/icons/src/library/caution.js @@ -5,9 +5,9 @@ import { SVG, Path } from '@wordpress/primitives'; const caution = ( - diff --git a/packages/icons/src/library/error.js b/packages/icons/src/library/error.js index 5d661a59a8730..2dc2bccbf639c 100644 --- a/packages/icons/src/library/error.js +++ b/packages/icons/src/library/error.js @@ -5,9 +5,9 @@ import { SVG, Path } from '@wordpress/primitives'; const error = ( - diff --git a/packages/icons/src/library/info.js b/packages/icons/src/library/info.js index 66a261716420a..24d41d798263f 100644 --- a/packages/icons/src/library/info.js +++ b/packages/icons/src/library/info.js @@ -5,9 +5,9 @@ import { SVG, Path } from '@wordpress/primitives'; const info = ( - From 76de6a30dd8c06bfe42053d84f8d1520a96b2cf4 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 04:19:06 +0900 Subject: [PATCH 16/20] Fix unit test --- packages/components/src/badge/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/badge/test/index.tsx b/packages/components/src/badge/test/index.tsx index 59ba150dc4ddb..47c832eb3c830 100644 --- a/packages/components/src/badge/test/index.tsx +++ b/packages/components/src/badge/test/index.tsx @@ -13,7 +13,7 @@ describe( 'Badge', () => { render( Code is Poetry ); const badge = screen.getByText( 'Code is Poetry' ); expect( badge ).toBeInTheDocument(); - expect( badge.tagName ).toBe( 'DIV' ); // Default element should be a div + expect( badge.tagName ).toBe( 'SPAN' ); expect( badge ).toHaveClass( 'components-badge' ); } ); From 9146bed889d608660dbadd126559064296f555f0 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 04:21:43 +0900 Subject: [PATCH 17/20] Remove unnecessary type (already included) --- packages/components/src/badge/types.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/components/src/badge/types.ts b/packages/components/src/badge/types.ts index c4df76e309736..91cd7c39b549b 100644 --- a/packages/components/src/badge/types.ts +++ b/packages/components/src/badge/types.ts @@ -1,8 +1,4 @@ export type BadgeProps = { - /** - * Additional classes for the badge component. - */ - className?: string; /** * Badge variant. * From c7d0a716e9b8bc5609aab3dea6bb1e3876e4919a Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 04:22:02 +0900 Subject: [PATCH 18/20] Update readme --- packages/components/src/badge/README.md | 27 ++++++------------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/packages/components/src/badge/README.md b/packages/components/src/badge/README.md index 6458a46ce9049..0be531ca6f2df 100644 --- a/packages/components/src/badge/README.md +++ b/packages/components/src/badge/README.md @@ -6,32 +6,17 @@ ## Props -### `as` - -Component type that will be used to render the badge component. - - - Type: `ElementType` - - Required: No - - Default: `'div'` - -### `className` +### `children` -Additional classes for the badge component. +Text to display inside the badge. - Type: `string` - - Required: No + - Required: Yes -### `context` +### `intent` Badge variant. - - Type: `"neutral" | "info" | "success" | "warning" | "error"` + - Type: `"default" | "info" | "success" | "warning" | "error"` - Required: No - - Default: `neutral` - -### `children` - -Element to display inside the badge. - - - Type: `ReactNode` - - Required: Yes + - Default: `default` From 5ca58da879d930c407ac1e54d78d5267259441ed Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 14 Dec 2024 00:44:57 +0900 Subject: [PATCH 19/20] Adjust icon keywords --- packages/icons/src/icon/stories/keywords.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/icons/src/icon/stories/keywords.ts b/packages/icons/src/icon/stories/keywords.ts index 4965bc38c3451..4de5ae9a7dae9 100644 --- a/packages/icons/src/icon/stories/keywords.ts +++ b/packages/icons/src/icon/stories/keywords.ts @@ -1,7 +1,9 @@ const keywords: Partial< Record< keyof typeof import('../../'), string[] > > = { cancelCircleFilled: [ 'close' ], - cautionFilled: [ 'alert', 'caution', 'warning' ], + caution: [ 'alert', 'warning' ], + cautionFilled: [ 'alert', 'warning' ], create: [ 'add' ], + error: [ 'alert', 'caution', 'warning' ], file: [ 'folder' ], seen: [ 'show' ], thumbsDown: [ 'dislike' ], From af9da7de9a65fd5f331e30613582386620b055f4 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 14 Dec 2024 00:50:30 +0900 Subject: [PATCH 20/20] Add changelog --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index af71c4104b4d9..c58817a420a74 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -16,6 +16,10 @@ - `BoxControl`: Better respect for the `min` prop in the Range Slider ([#67819](https://github.com/WordPress/gutenberg/pull/67819)). +### Experimental + +- Add new `Badge` component ([#66555](https://github.com/WordPress/gutenberg/pull/66555)). + ## 29.0.0 (2024-12-11) ### Breaking Changes