fix: Button's tooltipText needs to show on hover (#1817)

* fix: not showing Button's tooltipText when the prop is passed * fix: minor ordering of properties in Tooltip stories * fix: some Tooltip position stories use Tag, not Button
okta · Jul 7, 2023 · 0ca21ff · 0ca21ff
1 parent 1bb7d48
commit 0ca21ff
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 28 deletions.
diff --git 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";
@@ -62,8 +62,8 @@ const Button = ({
 }: ButtonProps) => {
   const muiProps = useContext(MuiPropsContext);
 
-  const button = useMemo(
-    () => (
+  const renderButton = useCallback(
+    (muiProps) => (
       <MuiButton
         {...muiProps}
         aria-label={ariaLabel}
@@ -86,7 +86,6 @@ const Button = ({
       id,
       isDisabled,
       isFullWidth,
-      muiProps,
       onClick,
       size,
       startIcon,
@@ -101,11 +100,12 @@ const Button = ({
   return (
     <>
       {tooltipText && (
-        <Tooltip ariaType="description" text={tooltipText}>
-          {button}
+        <Tooltip ariaType="description" placement="top" text={tooltipText}>
+          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>
         </Tooltip>
       )}
-      {!tooltipText && button}
+
+      {!tooltipText && renderButton(muiProps)}
     </>
   );
 };

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>
       </>
     );