diff --git a/src/core/components/Chips/Chips.stories.tsx b/src/core/components/Chips/Chips.stories.tsx index c2d442e..1719a99 100644 --- a/src/core/components/Chips/Chips.stories.tsx +++ b/src/core/components/Chips/Chips.stories.tsx @@ -36,7 +36,12 @@ export const Default = () => { return (
- + { +const Chips = ({ + className, + rootRef, + items, + onDelete, + ...props +}: ChipsParams) => { useEffect(() => { if (!rootRef.current) return; @@ -24,8 +30,9 @@ const Chips = ({ className, rootRef, items, onDelete }: ChipsParams) => { element={'li'} key={id} label={label} + className={clsx('px-3')} + {...props} onDelete={onDelete && (() => onDelete({ id }))} - className={'whitespace-nowrap px-3'} /> ))} diff --git a/src/core/components/Chips/types/index.ts b/src/core/components/Chips/types/index.ts index 7206527..9d9a42d 100644 --- a/src/core/components/Chips/types/index.ts +++ b/src/core/components/Chips/types/index.ts @@ -1,8 +1,19 @@ import { HTMLAttributes, RefObject } from 'react'; +import { ChipProps } from '@/core/components/Chip/types'; export interface ChipsParams - extends Pick, 'className'> { + extends Pick, 'className'>, + Pick< + ChipProps<'li'>, + | 'size' + | 'colorTheme' + | 'rounded' + | 'theme' + | 'color' + | 'backgroundColor' + | 'borderColor' + > { rootRef: RefObject; - items: { id: string; label: string }[]; + items: ({ id: string } & Pick, 'label' | 'icon'>)[]; onDelete?: (item: { id: string }) => void; }