feat: updated exports and stories to use new Tabs API from @mui/lab

okta · Oct 12, 2022 · 18b9739 · 18b9739
1 parent 379a077
commit 18b9739
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 48 deletions.
diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
@@ -40,7 +40,6 @@ export {
   TableHead,
   TableRow,
   TableSortLabel,
-  Tabs,
   ThemeProvider as MuiThemeProvider,
   Tooltip,
   Typography,
@@ -69,20 +68,23 @@ export type {
   SnackbarProps,
   StackProps,
   SvgIconProps,
+  TabProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
   TableHeadProps,
   TableProps,
   TableRowProps,
   TableSortLabelProps,
-  TabProps,
-  TabsProps,
   TooltipProps,
   TypographyProps,
   useThemeProps,
 } from "@mui/material";
 
+export { TabContext, TabList, TabPanel } from "@mui/lab";
+
+export type { TabContextProps, TabListProps, TabPanelProps } from "@mui/lab";
+
 export { Favorite as FavoriteIcon } from "@mui/icons-material";
 
 export { visuallyHidden } from "@mui/utils";

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
@@ -16,7 +16,9 @@ import {
   Box,
   FavoriteIcon,
   Tab,
-  Tabs,
+  TabContext,
+  TabList,
+  TabPanel,
   Typography,
 } from "@okta/odyssey-react-mui";
 // import { TabContext, TabList, TabPanel } from "@mui/lab";
@@ -59,26 +61,6 @@ interface TabPanelProps {
   value: number;
 }
 
-function TabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <Box>
-          <Typography>{children}</Typography>
-        </Box>
-      )}
-    </div>
-  );
-}
-
 function a11yProps(index: number) {
   return {
     id: `simple-tab-${index}`,
@@ -95,30 +77,26 @@ const DefaultTemplate: Story = (args) => {
 
   return (
     <Box>
-      <Tabs
-        value={value}
-        onChange={handleChange}
-        aria-label="basic tabs example"
-      >
-        <Tab label="Planets" {...a11yProps(0)} />
-        <Tab label="Moons" {...a11yProps(1)} />
-        <Tab
-          label={args.label}
-          {...a11yProps(2)}
-          icon={args.icon}
-          disabled={args.disabled}
-          wrapped={args.wrapped}
-        />
-      </Tabs>
-      <TabPanel value={value} index={0}>
-        Information about Planets
-      </TabPanel>
-      <TabPanel value={value} index={1}>
-        Information about Moons
-      </TabPanel>
-      <TabPanel value={value} index={2}>
-        Information about {args.label}
-      </TabPanel>
+      <TabContext value={value}>
+        <TabList onChange={handleChange} aria-label="basic tabs example">
+          <Tab label="Planets" value="0" />
+          <Tab label="Moons" value="1" />
+
+          <Tab
+            disabled={args.disabled}
+            icon={args.icon}
+            label={args.label}
+            value="2"
+            wrapped={args.wrapped}
+          />
+        </TabList>
+
+        <TabPanel value="0">Information about Planets</TabPanel>
+
+        <TabPanel value="1">Information about Moons</TabPanel>
+
+        <TabPanel value="2">Information about {args.label}</TabPanel>
+      </TabContext>
     </Box>
   );
 };