fix: some Tooltip position stories use Tag, not Button

okta · Jul 7, 2023 · c4073bd · c4073bd
1 parent c2af151
commit c4073bd
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git 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
@@ -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>
       </>
     );