From 90e90f5e3a03d9aacdca018eca27d2dc3f808480 Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Fri, 2 Jun 2023 14:25:42 -0500
Subject: [PATCH 1/3] fix: not showing Button's tooltipText when the prop is
 passed

---
 packages/odyssey-react-mui/src/Button.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/odyssey-react-mui/src/Button.tsx b/packages/odyssey-react-mui/src/Button.tsx
index 18d876bc65..42b4518c47 100644
--- a/packages/odyssey-react-mui/src/Button.tsx
+++ b/packages/odyssey-react-mui/src/Button.tsx
@@ -12,7 +12,7 @@
 
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
-import { memo, ReactElement, useContext, useMemo } from "react";
+import { memo, ReactElement, useCallback, useContext } from "react";
 
 import { Icon } from "./Icon";
 import { MuiPropsContext } from "./MuiPropsContext";
@@ -48,8 +48,8 @@ const Button = ({
 }: ButtonProps) => {
   const muiProps = useContext(MuiPropsContext);
 
-  const button = useMemo(
-    () => (
+  const renderButton = useCallback(
+    (muiProps) => (
       <MuiButton
         {...muiProps}
         disabled={isDisabled}
@@ -69,7 +69,6 @@ const Button = ({
       id,
       isDisabled,
       isFullWidth,
-      muiProps,
       onClick,
       size,
       startIcon,
@@ -82,10 +81,11 @@ const Button = ({
     <>
       {tooltipText && (
         <Tooltip ariaType="description" placement="top" text={tooltipText}>
-          {button}
+          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>
         </Tooltip>
       )}
-      {!tooltipText && button}
+
+      {!tooltipText && renderButton(muiProps)}
     </>
   );
 };

From 79a6332e3b87230a25e1a198a939fbe515a600c6 Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Mon, 5 Jun 2023 15:16:03 -0500
Subject: [PATCH 2/3] fix: minor ordering of properties in Tooltip stories

---
 .../odyssey-mui/Tooltip/Tooltip.stories.tsx    | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

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 370fceeead..1f3af02825 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
@@ -47,8 +47,8 @@ const storybookMeta: Meta<TooltipProps> = {
       },
     },
     placement: {
-      options: ["top", "right", "bottom", "left"],
       control: { type: "radio" },
+      options: ["bottom", "left", "right", "top"],
     },
   },
   args: {
@@ -109,18 +109,10 @@ export const Placement: StoryObj<TooltipProps> = {
   render: function C() {
     return (
       <>
-        <Tooltip text="Top" placement="top" ariaType="label">
-          <Button text="Top" />
-        </Tooltip>
-        <Tooltip text="Right" placement="right" ariaType="label">
-          <Button text="Right" />
-        </Tooltip>
-        <Tooltip text="Bottom" placement="bottom" ariaType="label">
-          <Button text="Bottom" />
-        </Tooltip>
-        <Tooltip text="Left" placement="left" ariaType="label">
-          <Button text="Left" />
-        </Tooltip>
+        <Button tooltipPlacement="top" tooltipText="Top" text="Top" />
+        <Button tooltipPlacement="right" tooltipText="Right" text="Right" />
+        <Button tooltipPlacement="bottom" tooltipText="Bottom" text="Bottom" />
+        <Button tooltipPlacement="left" tooltipText="Left" text="Left" />
       </>
     );
   },

From b788ead38e8d24da69c6cb719a6a0326b2e5b191 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 3/3] 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>
       </>
     );