Merge pull request #1877 from okta/ee/tabs

refactor(odyssey-react-mui): update Tab/Tabs styling
okta · Jul 12, 2023 · 6b07b85 · 6b07b85
2 parents 2957e6a + 807ec54
commit 6b07b85
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 31 deletions.
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -1855,22 +1855,33 @@ export const components = (
           minWidth: "unset",
           minHeight: "unset",
           padding: `${odysseyTokens.Spacing4} 0`,
-          lineHeight: odysseyTokens.TypographyLineHeightBody,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
           overflow: "visible",
-          ...(ownerState.selected == true && {
-            color: odysseyTokens.TypographyColorBody,
-          }),
+
           ...(ownerState.textColor === "inherit" && {
             color: "inherit",
             opacity: 1,
           }),
+
+          ...(ownerState.selected == true && {
+            color: odysseyTokens.TypographyColorAction,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          }),
+
+          ...(ownerState.disabled && {
+            color: odysseyTokens.TypographyColorDisabled,
+          }),
+
           ...(ownerState.wrapped && {
             fontSize: odysseyTokens.TypographySizeCaption,
             lineHeight: theme.typography.subtitle1.lineHeight,
           }),
+
           "&:hover": {
             color: odysseyTokens.TypographyColorAction,
           },
+
           "&:focus-visible::before, &.Mui-focusVisible::before": {
             content: "''",
             position: "absolute",
@@ -1883,20 +1894,7 @@ export const components = (
             borderColor: odysseyTokens.PalettePrimaryMain,
             borderRadius: odysseyTokens.BorderRadiusMain,
           },
-          "&.Mui-selected": {
-            color: odysseyTokens.TypographyColorBody,
-            fontWeight: odysseyTokens.TypographyWeightBodyBold,
-            "&:hover": {
-              color: odysseyTokens.TypographyColorAction,
-            },
-          },
-          "&.Mui-disabled": {
-            cursor: "not-allowed",
-            pointerEvents: "unset",
-            "&:hover": {
-              color: odysseyTokens.TypographyColorDisabled,
-            },
-          },
+
           "& .MuiTab-iconWrapper": {
             marginInlineEnd: odysseyTokens.Spacing1,
           },
@@ -2133,6 +2131,9 @@ export const components = (
       },
     },
     MuiTabs: {
+      defaultProps: {
+        textColor: "inherit",
+      },
       styleOverrides: {
         root: {
           minHeight: "unset",

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.stories.tsx
@@ -13,7 +13,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import {
-  FavoriteIcon,
+  BugIcon,
   TabItemProps,
   TabsProps,
   Tabs,
@@ -22,7 +22,6 @@ import { MuiThemeDecorator } from "../../../../.storybook/components";
 import { userEvent, waitFor, within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
 import { axeRun } from "../../../axe-util";
-import { screen } from "@storybook/testing-library";
 import type { PlaywrightProps } from "../storybookTypes";
 import { icons } from "../../../../.storybook/components/iconUtils";
 
@@ -104,13 +103,6 @@ const selectTab =
         userEvent.tab();
         const tabData = canvas.getByText(`Information about ${tabName}`);
         expect(tabData).toBeInTheDocument();
-
-        if (actionName === "Tab Disabled") {
-          const disabledTab = canvas.getByText("Disabled Tab");
-          userEvent.click(disabledTab);
-          const tabData = screen.queryByText("Tab is disabled");
-          expect(tabData).not.toBeInTheDocument();
-        }
       });
     });
   };
@@ -172,11 +164,11 @@ export const Disabled: StoryObj<TabItemProps> = {
 export const Icons: StoryObj<TabItemProps> = {
   ...DefaultTemplate,
   args: {
-    startIcon: <FavoriteIcon />,
-    label: "Icon Tab",
-    children: <ExampleTabContent label="Icon Tab" />,
+    startIcon: <BugIcon />,
+    label: "Xenomorphs",
+    children: <ExampleTabContent label="Xenomorphs" />,
   },
   play: async ({ canvasElement, step }) => {
-    selectTab({ canvasElement, step })("Tab Icon", "Icon Tab");
+    selectTab({ canvasElement, step })("Tab Icon", "Xenomorphs");
   },
 };