From 2133d466cb155fab8da8bf5e18edbe15ea62f5f4 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 5 Dec 2024 19:33:55 +0400 Subject: [PATCH] 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 bba5224642284a..8a55f3881215f3 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 726364d7a6bf69..aaa4bfb3c08f60 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 b0a55f98243366..e1e9cd5312d11a 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 5d252a9b843a3d..59ba150dc4ddb7 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 3c709267390326..c4df76e309736a 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 968c6de786f4fc..e82d6da70279e8 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';