From de4a8b017d105f694355e0ca5171bee17d1df0f2 Mon Sep 17 00:00:00 2001
From: JonnCh <jonnch93@gmail.com>
Date: Tue, 6 Aug 2024 12:22:53 -0500
Subject: [PATCH 1/2] feat: Adding start adorment to Chips

---
 src/components/Chip.stories.tsx        | 12 ++++++++++++
 src/components/Chip.tsx                |  4 +++-
 src/inputs/ToggleChipGroup.stories.tsx |  8 ++++++++
 src/inputs/ToggleChipGroup.tsx         | 10 ++++++++--
 4 files changed, 31 insertions(+), 3 deletions(-)

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

From e037c5a228bccdbb5ef6fb864dc74e3f8720c057 Mon Sep 17 00:00:00 2001
From: JonnCh <jonnch93@gmail.com>
Date: Tue, 6 Aug 2024 12:55:45 -0500
Subject: [PATCH 2/2] PR feedback

---
 src/components/Chip.stories.tsx | 21 ++++++++++++++++-----
 src/components/Chip.tsx         |  6 ++----
 2 files changed, 18 insertions(+), 9 deletions(-)

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 (
-    <div css={Css.wPx(200).$}>
-      <Chip startAdornment={<span css={Css.smBd.$}>K</span>} text="Kitchen" />
+    <div css={Css.wPx(200).df.gap1.$}>
+      <Chip
+        text={
+          <span css={Css.sm.df.gap1.$}>
+            <span css={Css.smBd.$}>K</span>
+            Kitchen
+          </span>
+        }
+      />
       <Chip
-        startAdornment={<span css={Css.smBd.$}>A</span>}
-        text="A very long chip name that will eventually truncate"
+        text={
+          <span css={Css.sm.df.gap1.$}>
+            <span css={Css.smBd.$}>B</span>
+            Bedroom
+          </span>
+        }
       />
     </div>
   );
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<ChipType, ChipType> = {
 };
 
 export interface ChipProps<X> {
-  text: string;
+  text: ReactNode;
   title?: ReactNode;
-  startAdornment?: ReactNode;
   xss?: X;
   type?: ChipType;
   compact?: boolean;
@@ -35,7 +34,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, 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 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>
     ),