diff --git a/packages/lsd-react/src/components/Tag/Tag.classes.ts b/packages/lsd-react/src/components/Tag/Tag.classes.ts index 1b8e0f8..6e7733c 100644 --- a/packages/lsd-react/src/components/Tag/Tag.classes.ts +++ b/packages/lsd-react/src/components/Tag/Tag.classes.ts @@ -1,6 +1,8 @@ export const tagClasses = { root: `lsd-tag`, + label: `lsd-tag__label`, + outlined: `lsd-tag--outlined`, filled: `lsd-tag--filled`, disabled: 'lsd-tag--disabled', diff --git a/packages/lsd-react/src/components/Tag/Tag.stories.tsx b/packages/lsd-react/src/components/Tag/Tag.stories.tsx index 95a47ba..722bd1d 100644 --- a/packages/lsd-react/src/components/Tag/Tag.stories.tsx +++ b/packages/lsd-react/src/components/Tag/Tag.stories.tsx @@ -35,12 +35,13 @@ export default { } as Meta export const Root: Story = (args) => ( - } /> + }> + Tag + ) Root.args = { variant: 'outlined', - label: 'Tag', iconDirection: 'left', disabled: false, size: 'large', diff --git a/packages/lsd-react/src/components/Tag/Tag.styles.ts b/packages/lsd-react/src/components/Tag/Tag.styles.ts index 429b6c7..6a59b54 100644 --- a/packages/lsd-react/src/components/Tag/Tag.styles.ts +++ b/packages/lsd-react/src/components/Tag/Tag.styles.ts @@ -33,7 +33,10 @@ export const TagStyles = css` .${tagClasses.filled} { background-color: rgb(var(--lsd-icon-primary)); - color: rgb(var(--lsd-text-secondary)); + .${tagClasses.label} { + color: rgb(var(--lsd-text-secondary)); + } + svg { --lsd-icon-primary: var(--lsd-icon-secondary); } diff --git a/packages/lsd-react/src/components/Tag/Tag.tsx b/packages/lsd-react/src/components/Tag/Tag.tsx index ab4d7f1..7949243 100644 --- a/packages/lsd-react/src/components/Tag/Tag.tsx +++ b/packages/lsd-react/src/components/Tag/Tag.tsx @@ -5,7 +5,6 @@ import { tagClasses } from './Tag.classes' export type TagProps = React.HTMLAttributes & { variant?: 'outlined' | 'filled' - label: string icon?: React.ReactNode iconDirection?: 'left' | 'right' disabled?: boolean @@ -15,7 +14,6 @@ export type TagProps = React.HTMLAttributes & { export const Tag: React.FC & { classes: typeof tagClasses } = ({ - label, variant = 'outlined', disabled = 'false', icon, @@ -24,22 +22,9 @@ export const Tag: React.FC & { size = 'large', ...props }) => { - const renderItems = () => ( - <> - {iconDirection === 'left' && icon} - - {label} - - {iconDirection === 'right' && icon} - - ) - return (
& { tagClasses[size], )} > - {renderItems()} + {iconDirection === 'left' && icon} + + {children} + + {iconDirection === 'right' && icon}
) }