feat: Adding start adorment to Chips

src/components/Chip.stories.tsx

@@ -58,3 +58,15 @@ export function WithIcon() {
     </div>
   );
 }
+
+export function WithStartAdorment() {
+  return (
+    <div css={Css.wPx(200).$}>
+      <Chip startAdornment={<span css={Css.smBd.$}>K</span>} text="Kitchen" />
+      <Chip
+        startAdornment={<span css={Css.smBd.$}>A</span>}
+        text="A very long chip name that will eventually truncate"
+      />
+    </div>
+  );
+}

src/components/Chip.tsx

@@ -22,6 +22,7 @@ export const ChipTypes: Record<ChipType, ChipType> = {
 export interface ChipProps<X> {
   text: string;
   title?: ReactNode;
+  startAdornment?: ReactNode;
   xss?: X;
   type?: ChipType;
   compact?: boolean;
@@ -34,7 +35,7 @@ export function Chip<X extends Only<Xss<Margin | "color" | "backgroundColor">, X
   ...props
 }: ChipProps<X>) {
   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 extends Only<Xss<Margin | "color" | "backgroundColor">, X
         {...tid}
       >
         {icon && <Icon icon={icon} inc={2} xss={Css.fs0.$} />}
+        {startAdornment}
         <span css={Css.lineClamp1.wbba.$}>{text}</span>
       </span>
     ),

src/inputs/ToggleChipGroup.stories.tsx

@@ -35,6 +35,14 @@ export function ToggleChipGroups() {
         values={selectedValues}
         onChange={setSelectedValues}
       />
+      <p css={Css.mt2.mb2.$}>Start Adornment:</p>
+      <ToggleChipGroup
+        label="Select Markets"
+        labelStyle="left"
+        options={options.map((o) => ({ ...o, startAdornment: <span css={Css.smBd.$}>{o.label.slice(0, 2)}</span> }))}
+        values={selectedValues}
+        onChange={setSelectedValues}
+      />
     </>
   );
 }

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) {
         <VisuallyHidden>
           <input {...inputProps} {...focusProps} />
         </VisuallyHidden>
-        {label}
+        <div css={Css.df.gap1.$}>
+          {startAdornment}
+          {label}
+        </div>
       </label>
     ),
   });