diff --git a/packages/lsd-react/src/components/Tag/Tag.classes.ts b/packages/lsd-react/src/components/Tag/Tag.classes.ts index 584debb..1b8e0f8 100644 --- a/packages/lsd-react/src/components/Tag/Tag.classes.ts +++ b/packages/lsd-react/src/components/Tag/Tag.classes.ts @@ -4,4 +4,7 @@ export const tagClasses = { outlined: `lsd-tag--outlined`, filled: `lsd-tag--filled`, disabled: 'lsd-tag--disabled', + + small: 'lsd-badge--small', + large: 'lsd-badge--large', } diff --git a/packages/lsd-react/src/components/Tag/Tag.stories.tsx b/packages/lsd-react/src/components/Tag/Tag.stories.tsx index 1ea41b0..95a47ba 100644 --- a/packages/lsd-react/src/components/Tag/Tag.stories.tsx +++ b/packages/lsd-react/src/components/Tag/Tag.stories.tsx @@ -18,6 +18,13 @@ export default { value: ['left', 'right', 'none'], }, }, + size: { + type: { + name: 'enum', + value: ['large', 'small'], + }, + defaultValue: 'large', + }, disabled: { type: { name: 'boolean', @@ -36,4 +43,5 @@ Root.args = { 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 9683b60..429b6c7 100644 --- a/packages/lsd-react/src/components/Tag/Tag.styles.ts +++ b/packages/lsd-react/src/components/Tag/Tag.styles.ts @@ -4,14 +4,11 @@ import { tagClasses } from './Tag.classes' export const TagStyles = css` .${tagClasses.root} { width: fit-content; - height: 28px; - padding: 4px 12px; display: flex; flex-direction: row; align-items: center; justify-content: center; - gap: 12px; border: 1px solid rgb(var(--lsd-icon-primary)); @@ -22,6 +19,18 @@ export const TagStyles = css` } } + .${tagClasses.large} { + padding: 4px 12px; + gap: 12px; + height: 28px; + } + + .${tagClasses.small} { + padding: 4px 8px; + gap: 8px; + height: 24px; + } + .${tagClasses.filled} { background-color: rgb(var(--lsd-icon-primary)); color: rgb(var(--lsd-text-secondary)); diff --git a/packages/lsd-react/src/components/Tag/Tag.tsx b/packages/lsd-react/src/components/Tag/Tag.tsx index cb38e43..ab4d7f1 100644 --- a/packages/lsd-react/src/components/Tag/Tag.tsx +++ b/packages/lsd-react/src/components/Tag/Tag.tsx @@ -9,6 +9,7 @@ export type TagProps = React.HTMLAttributes & { icon?: React.ReactNode iconDirection?: 'left' | 'right' disabled?: boolean + size?: 'large' | 'small' } export const Tag: React.FC & { @@ -20,12 +21,18 @@ export const Tag: React.FC & { icon, iconDirection = 'left', children, + size = 'large', ...props }) => { const renderItems = () => ( <> {iconDirection === 'left' && icon} - {label} + + {label} + {iconDirection === 'right' && icon} ) @@ -39,6 +46,7 @@ export const Tag: React.FC & { tagClasses.root, tagClasses[variant], disabled && tagClasses.disabled, + tagClasses[size], )} > {renderItems()}