From c4073bdd5e12428648fd3a74f57f7096cda93483 Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Fri, 7 Jul 2023 13:18:29 -0500
Subject: [PATCH] fix: some Tooltip position stories use Tag, not Button

---
 packages/odyssey-react-mui/src/Tag.tsx        | 37 +++++++++++--------
 .../odyssey-mui/Tooltip/Tooltip.stories.tsx   | 16 +++++---
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/packages/odyssey-react-mui/src/Tag.tsx b/packages/odyssey-react-mui/src/Tag.tsx
index 70e5c55774..d1c164f4c1 100644
--- a/packages/odyssey-react-mui/src/Tag.tsx
+++ b/packages/odyssey-react-mui/src/Tag.tsx
@@ -10,34 +10,41 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Chip, ChipProps } from "@mui/material";
-import { memo, ReactElement, useContext } from "react";
+import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
+import { memo, ReactElement, useCallback, useContext } from "react";
 import { TagListContext } from "./TagListContext";
 import { Icon } from "./Icon";
+import { MuiPropsContext } from "./MuiPropsContext";
 
 export type TagProps = {
   icon?: ReactElement<typeof Icon>;
   isDisabled?: boolean;
   label: string;
-  onClick?: ChipProps["onClick"];
-  onRemove?: ChipProps["onDelete"];
+  onClick?: MuiChipProps["onClick"];
+  onRemove?: MuiChipProps["onDelete"];
 };
 
 const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
   const { chipElementType } = useContext(TagListContext);
 
-  return (
-    <Chip
-      clickable={onClick ? true : false}
-      component={chipElementType}
-      disabled={isDisabled}
-      aria-disabled={isDisabled}
-      icon={icon}
-      label={label}
-      onClick={onClick}
-      onDelete={onRemove}
-    />
+  const renderTag = useCallback(
+    (muiProps) => (
+      <MuiChip
+        {...muiProps}
+        aria-disabled={isDisabled}
+        clickable={onClick ? true : false}
+        component={chipElementType}
+        disabled={isDisabled}
+        icon={icon}
+        label={label}
+        onClick={onClick}
+        onDelete={onRemove}
+      />
+    ),
+    [chipElementType, icon, isDisabled, label, onClick, onRemove]
   );
+
+  return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;
 };
 
 const MemoizedTag = memo(Tag);
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx
index 43a5f4733e..21fc438bee 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx
@@ -14,6 +14,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import {
   Button,
   DownloadIcon,
+  Tag,
   Tooltip,
   TooltipProps,
 } from "@okta/odyssey-react-mui";
@@ -145,16 +146,19 @@ export const Placement: StoryObj<TooltipProps> = {
     return (
       <>
         <Tooltip text="Top" placement="top" ariaType="label">
-          <Button variant="primary" text="Top" />
+          <Tag label="Bow" />
         </Tooltip>
-        <Tooltip text="Right" placement="right" ariaType="label">
-          <Button variant="primary" text="Right" />
+
+        <Tooltip text="Left" placement="left" ariaType="label">
+          <Tag label="Stern" />
         </Tooltip>
+
         <Tooltip text="Bottom" placement="bottom" ariaType="label">
-          <Button variant="primary" text="Bottom" />
+          <Tag label="Port" />
         </Tooltip>
-        <Tooltip text="Left" placement="left" ariaType="label">
-          <Button variant="primary" text="Left" />
+
+        <Tooltip text="Right" placement="right" ariaType="label">
+          <Tag label="Starboard" />
         </Tooltip>
       </>
     );