diff --git a/src/components/Chip.stories.tsx b/src/components/Chip.stories.tsx
index 2820b15d3..15e1ab38c 100644
--- a/src/components/Chip.stories.tsx
+++ b/src/components/Chip.stories.tsx
@@ -58,3 +58,15 @@ export function WithIcon() {
);
}
+
+export function WithStartAdorment() {
+ return (
+
+ K} text="Kitchen" />
+ A}
+ text="A very long chip name that will eventually truncate"
+ />
+
+ );
+}
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index ff7d66b07..c332b8fb4 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -22,6 +22,7 @@ export const ChipTypes: Record = {
export interface ChipProps {
text: string;
title?: ReactNode;
+ startAdornment?: ReactNode;
xss?: X;
type?: ChipType;
compact?: boolean;
@@ -34,7 +35,7 @@ export function Chip, X
...props
}: ChipProps) {
const { fieldProps } = usePresentationContext();
- const { text, title, xss = {}, compact = fieldProps?.compact, icon } = props;
+ const { text, title, xss = {}, compact = fieldProps?.compact, icon, startAdornment } = props;
const tid = useTestIds(props, "chip");
return maybeTooltip({
@@ -50,6 +51,7 @@ export function Chip, X
{...tid}
>
{icon && }
+ {startAdornment}
{text}
),
diff --git a/src/inputs/ToggleChipGroup.stories.tsx b/src/inputs/ToggleChipGroup.stories.tsx
index 56afd6dd0..00d5e011d 100644
--- a/src/inputs/ToggleChipGroup.stories.tsx
+++ b/src/inputs/ToggleChipGroup.stories.tsx
@@ -35,6 +35,14 @@ export function ToggleChipGroups() {
values={selectedValues}
onChange={setSelectedValues}
/>
+ Start Adornment:
+ ({ ...o, startAdornment: {o.label.slice(0, 2)} }))}
+ values={selectedValues}
+ onChange={setSelectedValues}
+ />
>
);
}
diff --git a/src/inputs/ToggleChipGroup.tsx b/src/inputs/ToggleChipGroup.tsx
index 4f663de13..b5a0b50f3 100644
--- a/src/inputs/ToggleChipGroup.tsx
+++ b/src/inputs/ToggleChipGroup.tsx
@@ -12,6 +12,7 @@ type ToggleChipXss = Xss<"color" | "backgroundColor">;
type ToggleChipItemProps = {
label: string;
value: string;
+ startAdornment?: ReactNode;
/**
* Whether the interactive element is disabled.
*
@@ -55,6 +56,7 @@ export function ToggleChipGroup(props: ToggleChipGroupProps) {
selected={state.value.includes(o.value)}
label={o.label}
disabled={o.disabled}
+ startAdornment={o.startAdornment}
xss={xss}
{...tid[o.value]}
/>
@@ -75,11 +77,12 @@ interface ToggleChipProps {
* If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip.
*/
disabled?: boolean | ReactNode;
+ startAdornment?: ReactNode;
xss?: ToggleChipXss;
}
function ToggleChip(props: ToggleChipProps) {
- const { label, value, groupState, selected: isSelected, disabled = false, xss, ...others } = props;
+ const { label, value, groupState, selected: isSelected, disabled = false, startAdornment, xss, ...others } = props;
const isDisabled = !!disabled;
const ref = useRef(null);
const { inputProps } = useCheckboxGroupItem({ value, "aria-label": label, isDisabled }, groupState, ref);
@@ -109,7 +112,10 @@ function ToggleChip(props: ToggleChipProps) {
- {label}
+
+ {startAdornment}
+ {label}
+
),
});