feat(odyssey-react-mui): add icon support to Tag

okta · Jun 6, 2023 · 6d1adc4 · 6d1adc4
1 parent 6810a9c
commit 6d1adc4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/packages/odyssey-react-mui/src/Tag.tsx b/packages/odyssey-react-mui/src/Tag.tsx
@@ -11,25 +11,28 @@
  */
 
 import { Chip, ChipProps } from "@mui/material";
-import { memo, useContext } from "react";
+import { memo, ReactElement, useContext } from "react";
 import { TagListContext } from "./TagListContext";
+import { Icon } from "./Icon";
 
 export type TagProps = {
+  icon?: ReactElement<typeof Icon>;
   isDisabled?: boolean;
   label: string;
   onClick?: ChipProps["onClick"];
   onRemove?: ChipProps["onDelete"];
 };
 
-const Tag = ({ isDisabled, label, onClick, onRemove }: TagProps) => {
+const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
   const { chipElementType } = useContext(TagListContext);
 
   return (
     <Chip
-      label={label}
       clickable={onClick ? true : false}
       component={chipElementType}
       disabled={isDisabled}
+      icon={icon}
+      label={label}
       onClick={onClick}
       onDelete={onRemove}
     />

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
@@ -32,6 +32,12 @@ TagList UI is simple. It consists of typography and spacing within a neutral con
   <Story of={Stories.Removable} />
 </Canvas>
 
+### Tags with Icons
+
+<Canvas>
+  <Story of={Stories.Icon} />
+</Canvas>
+
 ### Disabled Tags
 
 <Canvas>

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx
@@ -13,6 +13,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Tag, TagList, TagProps } from "@okta/odyssey-react-mui";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
+import { UserGroupIcon } from "@okta/odyssey-react-mui";
 
 const storybookMeta: Meta<TagProps> = {
   title: "MUI Components/Tag",
@@ -24,6 +25,9 @@ const storybookMeta: Meta<TagProps> = {
     label: {
       control: "text",
     },
+    icon: {
+      control: "text",
+    },
     isDisabled: {
       control: "boolean",
     },
@@ -65,6 +69,13 @@ export const List: StoryObj<TagProps> = {
   },
 };
 
+export const Icon: StoryObj<TagProps> = {
+  args: {
+    label: "Crew",
+    icon: <UserGroupIcon />,
+  },
+};
+
 export const Clickable: StoryObj<TagProps> = {
   args: {
     label: "Starship",