From 526705241dc57db2c47906b335a2e0a08304504e Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 5 Dec 2023 10:00:24 +0200
Subject: [PATCH] feat(Chips): allow label to accept custom Element (#1798)

---
 src/components/Chips/Chips.tsx                |  4 +-
 .../Chips/__stories__/chips.stories.js        | 57 +++++++++---------
 .../__stories__/chips.stories.module.scss     | 37 ++++++++++++
 .../Chips/__stories__/chips.stories.scss      | 60 -------------------
 .../chips-snapshot-tests.jest.tsx.snap        | 24 ++++++++
 .../__tests__/chips-snapshot-tests.jest.tsx   | 17 ++++++
 6 files changed, 110 insertions(+), 89 deletions(-)
 create mode 100644 src/components/Chips/__stories__/chips.stories.module.scss
 delete mode 100644 src/components/Chips/__stories__/chips.stories.scss

diff --git a/src/components/Chips/Chips.tsx b/src/components/Chips/Chips.tsx
index edd4999a36..12c6809bd2 100644
--- a/src/components/Chips/Chips.tsx
+++ b/src/components/Chips/Chips.tsx
@@ -20,7 +20,7 @@ import { backwardCompatibilityForProperties } from "../../helpers/backwardCompat
 const CHIPS_AVATAR_SIZE = 20;
 
 interface ChipsProps extends VibeComponentProps {
-  label?: string;
+  label?: ElementContent;
   disabled?: boolean;
   readOnly?: boolean;
   /**
@@ -141,7 +141,7 @@ const Chips: VibeComponent<ChipsProps, HTMLElement> & {
     );
     const hasClickableWrapper = (!!onClick || !!onMouseDown) && !disableClickableBehavior;
     const hasCloseButton = !readOnly && !disabled;
-    const overrideAriaLabel = ariaLabel || label;
+    const overrideAriaLabel = ariaLabel || (typeof label === "string" && label) || "";
 
     const iconButtonRef = useRef(null);
     const componentRef = useRef(null);
diff --git a/src/components/Chips/__stories__/chips.stories.js b/src/components/Chips/__stories__/chips.stories.js
index d0ccf9d348..5bee1b20e2 100644
--- a/src/components/Chips/__stories__/chips.stories.js
+++ b/src/components/Chips/__stories__/chips.stories.js
@@ -1,6 +1,7 @@
 import { chunk as _chunk } from "lodash-es";
 import Flex from "../../Flex/Flex";
 import Chips from "../Chips";
+import Text from "../../Text/Text";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import Search from "../../Search/Search";
@@ -10,7 +11,7 @@ import { Email } from "../../Icon/Icons";
 import person1 from "./assets/person1.png";
 import rotem from "./assets/rotem.png";
 import { NOOP } from "../../../utils/function-utils";
-import "./chips.stories.scss";
+import styles from "./chips.stories.module.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Chips,
@@ -175,18 +176,18 @@ export const OnColor = {
 
 export const ColorfulChipsForDifferentContent = {
   render: () => (
-    <DialogContentContainer className="monday-storybook-chips_search-bar">
-      <div className="monday-storybook-chips_item">
+    <DialogContentContainer className={styles.searchBar}>
+      <div className={styles.item}>
         <Chips label="January" color={Chips.colors.POSITIVE} />
       </div>
       <Search />
-      <div className="monday-storybook-chips_item">
+      <div className={styles.item}>
         <Chips label="August" readOnly color={Chips.colors.LIPSTICK} />
       </div>
-      <div className="monday-storybook-chips_item">
+      <div className={styles.item}>
         <Chips label="April" readOnly color={Chips.colors.BUBBLE} />
       </div>
-      <div className="monday-storybook-chips_item">
+      <div className={styles.item}>
         <Chips label="March" readOnly color={Chips.colors.EGG_YOLK} />
       </div>
     </DialogContentContainer>
@@ -197,43 +198,45 @@ export const ColorfulChipsForDifferentContent = {
 
 export const ChipsInAPersonPickerComboBox = {
   render: () => (
-    <DialogContentContainer className="monday-storybook-chips_search-bar">
+    <DialogContentContainer className={styles.searchBar}>
       <Search placeholder="Search names, positions, or a team" />
-      <div className="monday-storybook-chips_inline-container">
+      <Flex align={Flex.align.CENTER} justify={Flex.justify.CENTER}>
         <Chips label="Esther Schanler" leftAvatar={person1} />
         <Chips label="Rotem Dekel" leftAvatar={rotem} />
-      </div>
-      <div className="monday-storybook-chips_lable">Suggested people</div>
-      <div className="monday-storybook-chips_search">
-        <div className="monday-storybook-chips_inline-container" key="cont-1">
+      </Flex>
+      <Text type={Text.types.TEXT2} className={styles.lable}>
+        Suggested people
+      </Text>
+      <div className={styles.search}>
+        <Flex align={Flex.align.CENTER} justify={Flex.justify.CENTER} key="cont-1">
           <Avatar size={Avatar.sizes.SMALL} src={person1} type={Avatar.types.IMG} />
-          <span className="monday-storybook-chips_name">
+          <Text type={Text.types.TEXT2} className={styles.name}>
             May Kishon <span>(UX/UI Product Designer)</span>
-          </span>
-        </div>
-        <div className="monday-storybook-chips_inline-container" key="cont-2">
+          </Text>
+        </Flex>
+        <Flex align={Flex.align.CENTER} justify={Flex.justify.CENTER} key="cont-2">
           <Avatar
             size={Avatar.sizes.SMALL}
             backgroundColor={Avatar.colors.DARK_PURPLE}
             text="LC"
             type={Avatar.types.TEXT}
           />
-          <span className="monday-storybook-chips_name">
+          <Text type={Text.types.TEXT2} className={styles.name}>
             Liron Cohen <span>(Customer Experience)</span>
-          </span>
-        </div>
-        <div className="monday-storybook-chips_inline-container" key="cont-3">
+          </Text>
+        </Flex>
+        <Flex align={Flex.align.CENTER} justify={Flex.justify.CENTER} key="cont-3">
           <Avatar size={Avatar.sizes.SMALL} text="AL" type={Avatar.types.TEXT} />
-          <span className="monday-storybook-chips_name">
+          <Text type={Text.types.TEXT2} className={styles.name}>
             Amanda Lawrence <span>(Customer Experience Designer)</span>
-          </span>
-        </div>
-        <div className="monday-storybook-chips_inline-container" key="cont-4">
+          </Text>
+        </Flex>
+        <Flex align={Flex.align.CENTER} justify={Flex.justify.CENTER} key="cont-4">
           <Avatar size={Avatar.sizes.SMALL} text="DY" type={Avatar.types.TEXT} backgroundColor={Avatar.colors.PEACH} />
-          <span className="monday-storybook-chips_name">
+          <Text type={Text.types.TEXT2} className={styles.name}>
             Dor Yehuda <span>(Customer Experience Designer)</span>
-          </span>
-        </div>
+          </Text>
+        </Flex>
       </div>
     </DialogContentContainer>
   ),
diff --git a/src/components/Chips/__stories__/chips.stories.module.scss b/src/components/Chips/__stories__/chips.stories.module.scss
new file mode 100644
index 0000000000..5e56ab6970
--- /dev/null
+++ b/src/components/Chips/__stories__/chips.stories.module.scss
@@ -0,0 +1,37 @@
+.searchBar {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-medium);
+  padding: var(--spacing-medium);
+}
+
+.search {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-medium);
+}
+
+.item {
+  width: max-content;
+}
+
+.lable {
+  padding-left: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
+}
+
+.inlineContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.name {
+  padding: 0 var(--spacing-small);
+
+  span {
+    color: var(--sb-secondary-text-color);
+  }
+}
diff --git a/src/components/Chips/__stories__/chips.stories.scss b/src/components/Chips/__stories__/chips.stories.scss
deleted file mode 100644
index 2c252dd14e..0000000000
--- a/src/components/Chips/__stories__/chips.stories.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import "../../../styles/typography";
-
-.monday-storybook-chips {
-  &_search-bar {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 18px;
-    padding: 16px;
-  }
-
-  &_search {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 18px;
-  }
-
-  &_item {
-    width: max-content;
-  }
-
-  &_lable {
-    font-size: 14px;
-    padding-left: 5px;
-    margin-top: 4px;
-  }
-
-  &_inline-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &_chip-padding {
-    padding: 0 24px;
-  }
-
-  &_name {
-    padding: 0 8px;
-    font-size: 14px;
-
-    span {
-      color: var(--sb-secondary-text-color);
-    }
-  }
-
-  &_overflowing_chip {
-    width: 150px;
-  }
-
-  &_overflowing_chip_container {
-    width: 150px;
-    display: inline-flex;
-
-    &--chip {
-      margin: 0;
-    }
-  }
-}
diff --git a/src/components/Chips/__tests__/__snapshots__/chips-snapshot-tests.jest.tsx.snap b/src/components/Chips/__tests__/__snapshots__/chips-snapshot-tests.jest.tsx.snap
index 7a0b4f13c6..e919bfc20c 100644
--- a/src/components/Chips/__tests__/__snapshots__/chips-snapshot-tests.jest.tsx.snap
+++ b/src/components/Chips/__tests__/__snapshots__/chips-snapshot-tests.jest.tsx.snap
@@ -405,6 +405,30 @@ exports[`Chips renders correctly renders correctly with right custom renderer 1`
 </div>
 `;
 
+exports[`Chips renders correctly renders correctly with right custom renderer 2`] = `
+<div
+  aria-label="This is mandatory"
+  className="chips noAnimation"
+  data-testid="chip"
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "var(--primary-selected-color)",
+    }
+  }
+>
+  <div
+    className="typography primary start singleLineEllipsis text text2Normal label"
+    data-testid="text"
+  >
+    This is mandatory 
+    <span>
+      *
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Chips renders correctly renders correctly with right icon 1`] = `
 <div
   aria-label=""
diff --git a/src/components/Chips/__tests__/chips-snapshot-tests.jest.tsx b/src/components/Chips/__tests__/chips-snapshot-tests.jest.tsx
index c8c57631df..1b53ae125e 100644
--- a/src/components/Chips/__tests__/chips-snapshot-tests.jest.tsx
+++ b/src/components/Chips/__tests__/chips-snapshot-tests.jest.tsx
@@ -59,4 +59,21 @@ describe("Chips renders correctly", () => {
     const tree = renderer.create(<Chips rightRenderer={<div>custom renderer</div>} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it("renders correctly with right custom renderer", () => {
+    const tree = renderer
+      .create(
+        <Chips
+          readOnly
+          ariaLabel={"This is mandatory"}
+          label={
+            <>
+              This is mandatory <span>*</span>
+            </>
+          }
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });