diff --git a/src/components/Chip.stories.tsx b/src/components/Chip.stories.tsx index 15e1ab38c..250fbfd55 100644 --- a/src/components/Chip.stories.tsx +++ b/src/components/Chip.stories.tsx @@ -59,13 +59,24 @@ export function WithIcon() { ); } -export function WithStartAdorment() { +export function WithCustomLabel() { return ( -
- K} text="Kitchen" /> +
+ + K + Kitchen + + } + /> A} - text="A very long chip name that will eventually truncate" + text={ + + B + Bedroom + + } />
); diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index c332b8fb4..66fb5bdbf 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -20,9 +20,8 @@ export const ChipTypes: Record = { }; export interface ChipProps { - text: string; + text: ReactNode; title?: ReactNode; - startAdornment?: ReactNode; xss?: X; type?: ChipType; compact?: boolean; @@ -35,7 +34,7 @@ export function Chip, X ...props }: ChipProps) { const { fieldProps } = usePresentationContext(); - const { text, title, xss = {}, compact = fieldProps?.compact, icon, startAdornment } = props; + const { text, title, xss = {}, compact = fieldProps?.compact, icon } = props; const tid = useTestIds(props, "chip"); return maybeTooltip({ @@ -51,7 +50,6 @@ export function Chip, X {...tid} > {icon && } - {startAdornment} {text} ),