From 8b34cfe1503558e8cd0868d04dad459042f509e5 Mon Sep 17 00:00:00 2001
From: jordankoschei-okta <jordan.koschei@okta.com>
Date: Tue, 13 Jun 2023 12:29:48 -0400
Subject: [PATCH 1/3] fix: ensure TagList can wrap

---
 packages/odyssey-react-mui/src/TagList.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/odyssey-react-mui/src/TagList.tsx b/packages/odyssey-react-mui/src/TagList.tsx
index 5489029267..115c04e564 100644
--- a/packages/odyssey-react-mui/src/TagList.tsx
+++ b/packages/odyssey-react-mui/src/TagList.tsx
@@ -30,7 +30,13 @@ const TagList = ({ children }: TagListProps) => {
   );
 
   return (
-    <Stack component="ul" direction="row" spacing={2}>
+    <Stack
+      component="ul"
+      direction="row"
+      spacing={2}
+      useFlexGap
+      sx={{ flexWrap: "wrap" }}
+    >
       <TagListContext.Provider value={providerValue}>
         {children}
       </TagListContext.Provider>

From 4cfde4356e37e7825fb0578779b17ffeb91292c4 Mon Sep 17 00:00:00 2001
From: jordankoschei-okta <jordan.koschei@okta.com>
Date: Tue, 13 Jun 2023 12:37:34 -0400
Subject: [PATCH 2/3] feat: add isWrappable to TagList

---
 packages/odyssey-react-mui/src/TagList.tsx    |  5 ++--
 .../src/components/odyssey-mui/Tag/Tag.mdx    |  6 +++++
 .../odyssey-mui/Tag/Tag.stories.tsx           | 26 +++++++++++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/odyssey-react-mui/src/TagList.tsx b/packages/odyssey-react-mui/src/TagList.tsx
index 115c04e564..aa5cedc59a 100644
--- a/packages/odyssey-react-mui/src/TagList.tsx
+++ b/packages/odyssey-react-mui/src/TagList.tsx
@@ -17,9 +17,10 @@ import { ChipElementType, TagListContext } from "./TagListContext";
 
 export type TagListProps = {
   children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;
+  isWrappable?: boolean;
 };
 
-const TagList = ({ children }: TagListProps) => {
+const TagList = ({ children, isWrappable }: TagListProps) => {
   const providerValue = useMemo<{
     chipElementType: ChipElementType;
   }>(
@@ -35,7 +36,7 @@ const TagList = ({ children }: TagListProps) => {
       direction="row"
       spacing={2}
       useFlexGap
-      sx={{ flexWrap: "wrap" }}
+      sx={{ flexWrap: isWrappable ? "wrap" : "nowrap" }}
     >
       <TagListContext.Provider value={providerValue}>
         {children}
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
index 693c602126..09b2ffb67e 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
@@ -18,6 +18,12 @@ TagList UI is simple. It consists of typography and spacing within a neutral con
   <Story of={Stories.List} />
 </Canvas>
 
+TagList isn't wrappable by default, but can be made wrappable using the `isWrappable` prop.
+
+<Canvas>
+  <Story of={Stories.ListWrappable} />
+</Canvas>
+
 ## States & variants
 
 ### Clickable Tags
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
index 678e476460..f383f78006 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx
@@ -69,6 +69,32 @@ export const List: StoryObj<TagProps> = {
   },
 };
 
+export const ListWrappable: StoryObj<TagProps> = {
+  render: function C(args) {
+    return (
+      <TagList isWrappable>
+        <Tag {...args} />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+        <Tag label="Another tag" />
+      </TagList>
+    );
+  },
+  args: {
+    label: "Starship",
+  },
+};
+
 export const Icon: StoryObj<TagProps> = {
   args: {
     label: "Crew",

From e8e69082e5ac35b62d8317f587e16c32a10c08e8 Mon Sep 17 00:00:00 2001
From: jordankoschei-okta <jordan.koschei@okta.com>
Date: Wed, 21 Jun 2023 08:02:58 -0400
Subject: [PATCH 3/3] refactor: make flexWrap the default

---
 packages/odyssey-react-mui/src/TagList.tsx    |  5 ++--
 .../src/components/odyssey-mui/Tag/Tag.mdx    |  6 -----
 .../odyssey-mui/Tag/Tag.stories.tsx           | 26 -------------------
 3 files changed, 2 insertions(+), 35 deletions(-)

diff --git a/packages/odyssey-react-mui/src/TagList.tsx b/packages/odyssey-react-mui/src/TagList.tsx
index aa5cedc59a..67e42dff90 100644
--- a/packages/odyssey-react-mui/src/TagList.tsx
+++ b/packages/odyssey-react-mui/src/TagList.tsx
@@ -17,10 +17,9 @@ import { ChipElementType, TagListContext } from "./TagListContext";
 
 export type TagListProps = {
   children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;
-  isWrappable?: boolean;
 };
 
-const TagList = ({ children, isWrappable }: TagListProps) => {
+const TagList = ({ children }: TagListProps) => {
   const providerValue = useMemo<{
     chipElementType: ChipElementType;
   }>(
@@ -36,7 +35,7 @@ const TagList = ({ children, isWrappable }: TagListProps) => {
       direction="row"
       spacing={2}
       useFlexGap
-      sx={{ flexWrap: isWrappable ? "wrap" : "nowrap" }}
+      flexWrap="wrap"
     >
       <TagListContext.Provider value={providerValue}>
         {children}
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
index 09b2ffb67e..693c602126 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
@@ -18,12 +18,6 @@ TagList UI is simple. It consists of typography and spacing within a neutral con
   <Story of={Stories.List} />
 </Canvas>
 
-TagList isn't wrappable by default, but can be made wrappable using the `isWrappable` prop.
-
-<Canvas>
-  <Story of={Stories.ListWrappable} />
-</Canvas>
-
 ## States & variants
 
 ### Clickable Tags
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
index f383f78006..678e476460 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx
@@ -69,32 +69,6 @@ export const List: StoryObj<TagProps> = {
   },
 };
 
-export const ListWrappable: StoryObj<TagProps> = {
-  render: function C(args) {
-    return (
-      <TagList isWrappable>
-        <Tag {...args} />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-        <Tag label="Another tag" />
-      </TagList>
-    );
-  },
-  args: {
-    label: "Starship",
-  },
-};
-
 export const Icon: StoryObj<TagProps> = {
   args: {
     label: "Crew",