diff --git a/packages/lsd-react/src/components/Badge/Badge.classes.ts b/packages/lsd-react/src/components/Badge/Badge.classes.ts index 84fc2ff..2e37bd5 100644 --- a/packages/lsd-react/src/components/Badge/Badge.classes.ts +++ b/packages/lsd-react/src/components/Badge/Badge.classes.ts @@ -1,6 +1,8 @@ export const badgeClasses = { root: `lsd-badge`, + label: `lsd-badge__label`, + outlined: `lsd-badge--outlined`, filled: `lsd-badge--filled`, disabled: 'lsd-badge--disabled', diff --git a/packages/lsd-react/src/components/Badge/Badge.stories.tsx b/packages/lsd-react/src/components/Badge/Badge.stories.tsx index f8fdd92..3218dd0 100644 --- a/packages/lsd-react/src/components/Badge/Badge.stories.tsx +++ b/packages/lsd-react/src/components/Badge/Badge.stories.tsx @@ -35,12 +35,13 @@ export default { } as Meta export const Root: Story = (args) => ( - } /> + }> + Badge + ) Root.args = { variant: 'outlined', - label: 'Badge', iconDirection: 'left', disabled: false, size: 'large', diff --git a/packages/lsd-react/src/components/Badge/Badge.styles.ts b/packages/lsd-react/src/components/Badge/Badge.styles.ts index a6b389b..561195c 100644 --- a/packages/lsd-react/src/components/Badge/Badge.styles.ts +++ b/packages/lsd-react/src/components/Badge/Badge.styles.ts @@ -34,7 +34,10 @@ export const BadgeStyles = css` .${badgeClasses.filled} { background-color: rgb(var(--lsd-icon-primary)); - color: rgb(var(--lsd-text-secondary)); + .${badgeClasses.label} { + color: rgb(var(--lsd-text-secondary)); + } + svg { --lsd-icon-primary: var(--lsd-icon-secondary); } diff --git a/packages/lsd-react/src/components/Badge/Badge.tsx b/packages/lsd-react/src/components/Badge/Badge.tsx index 4000178..d6008ad 100644 --- a/packages/lsd-react/src/components/Badge/Badge.tsx +++ b/packages/lsd-react/src/components/Badge/Badge.tsx @@ -5,7 +5,6 @@ import { badgeClasses } from './Badge.classes' export type BadgeProps = React.HTMLAttributes & { variant?: 'outlined' | 'filled' - label: string icon?: React.ReactNode iconDirection?: 'left' | 'right' size?: 'large' | 'small' @@ -15,7 +14,6 @@ export type BadgeProps = React.HTMLAttributes & { export const Badge: React.FC & { classes: typeof badgeClasses } = ({ - label, variant = 'outlined', disabled = 'false', size = 'large', @@ -24,22 +22,9 @@ export const Badge: React.FC & { children, ...props }) => { - const renderItems = () => ( - <> - {iconDirection === 'left' && icon} - - {label} - - {iconDirection === 'right' && icon} - - ) - return (
& { badgeClasses[size], )} > - {renderItems()} + {iconDirection === 'left' && icon} + + {children} + + {iconDirection === 'right' && icon}
) }