feat: 🎸 [Tabs] Added single tab color

✅ Closes: #393
melfore · Jan 25, 2024 · a01f698 · a01f698
1 parent a23fba0
commit a01f698
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 14 deletions.
diff --git a/src/components/Tabs/__snapshots__/index.stories.tsx.snap b/src/components/Tabs/__snapshots__/index.stories.tsx.snap
@@ -15,17 +15,18 @@ exports[`Navigation/Tabs Color smoke-test 1`] = `
       <div class="MuiTabs-flexContainer css-mui-classname"
            role="tablist"
       >
-        <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary Mui-selected css-mui-classname"
+        <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-mui-classname"
                 tabindex="0"
                 type="button"
                 role="tab"
                 aria-selected="true"
+                style="color: rgb(237, 108, 2);"
         >
           PAGE1
           <span class="MuiTouchRipple-root css-mui-classname">
           </span>
         </button>
-        <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary css-mui-classname"
+        <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-mui-classname"
                 tabindex="-1"
                 type="button"
                 role="tab"
@@ -35,7 +36,7 @@ exports[`Navigation/Tabs Color smoke-test 1`] = `
           <span class="MuiTouchRipple-root css-mui-classname">
           </span>
         </button>
-        <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary css-mui-classname"
+        <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-mui-classname"
                 tabindex="-1"
                 type="button"
                 role="tab"
@@ -47,7 +48,7 @@ exports[`Navigation/Tabs Color smoke-test 1`] = `
         </button>
       </div>
       <span class="MuiTabs-indicator css-mui-classname"
-            style="left: 0px; width: 90px;"
+            style="left: 0px; width: 90px; background: rgb(237, 108, 2);"
       >
       </span>
     </div>
@@ -82,6 +83,7 @@ exports[`Navigation/Tabs DisabledTab smoke-test 1`] = `
                 type="button"
                 role="tab"
                 aria-selected="true"
+                style="color: rgb(25, 118, 210);"
         >
           PAGE1
           <span class="MuiTouchRipple-root css-mui-classname">
@@ -108,7 +110,7 @@ exports[`Navigation/Tabs DisabledTab smoke-test 1`] = `
         </button>
       </div>
       <span class="MuiTabs-indicator css-mui-classname"
-            style="left: 0px; width: 90px;"
+            style="left: 0px; width: 90px; background: rgb(25, 118, 210);"
       >
       </span>
     </div>
@@ -140,6 +142,7 @@ exports[`Navigation/Tabs Orientation smoke-test 1`] = `
                 type="button"
                 role="tab"
                 aria-selected="true"
+                style="color: rgb(25, 118, 210);"
         >
           PAGE1
           <span class="MuiTouchRipple-root css-mui-classname">
@@ -167,7 +170,7 @@ exports[`Navigation/Tabs Orientation smoke-test 1`] = `
         </button>
       </div>
       <span class="MuiTabs-indicator css-mui-classname"
-            style="top: 0px; height: 48px;"
+            style="top: 0px; height: 48px; background: rgb(25, 118, 210);"
       >
       </span>
     </div>
@@ -202,6 +205,70 @@ exports[`Navigation/Tabs Primary smoke-test 1`] = `
                 type="button"
                 role="tab"
                 aria-selected="true"
+                style="color: rgb(25, 118, 210);"
+        >
+          PAGE1
+          <span class="MuiTouchRipple-root css-mui-classname">
+          </span>
+        </button>
+        <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-mui-classname"
+                tabindex="-1"
+                type="button"
+                role="tab"
+                aria-selected="false"
+        >
+          PAGE2
+          <span class="MuiTouchRipple-root css-mui-classname">
+          </span>
+        </button>
+        <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-mui-classname"
+                tabindex="-1"
+                type="button"
+                role="tab"
+                aria-selected="false"
+        >
+          PAGE3
+          <span class="MuiTouchRipple-root css-mui-classname">
+          </span>
+        </button>
+      </div>
+      <span class="MuiTabs-indicator css-mui-classname"
+            style="left: 0px; width: 90px; background: rgb(25, 118, 210);"
+      >
+      </span>
+    </div>
+  </div>
+  <div role="tabpanel"
+       id="simple-tabpanel-0"
+       aria-labelledby="horizontal-tab-0"
+       style="width: 100%;"
+  >
+    PAGE1
+  </div>
+</div>
+`;
+
+exports[`Navigation/Tabs SingleTabColor smoke-test 1`] = `
+<div class="MuiBox-root css-mui-classname">
+  <div class="MuiTabs-root css-mui-classname"
+       data-cy="tabs"
+  >
+    <div class="MuiTabs-scrollableX MuiTabs-hideScrollbar css-mui-classname"
+         style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+    >
+    </div>
+    <div class="MuiTabs-scroller MuiTabs-hideScrollbar MuiTabs-scrollableX css-mui-classname"
+         style="margin-bottom: 0px;"
+    >
+      <div class="MuiTabs-flexContainer css-mui-classname"
+           role="tablist"
+      >
+        <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-mui-classname"
+                tabindex="0"
+                type="button"
+                role="tab"
+                aria-selected="true"
+                style="color: rgb(25, 118, 210);"
         >
           PAGE1
           <span class="MuiTouchRipple-root css-mui-classname">
@@ -222,14 +289,15 @@ exports[`Navigation/Tabs Primary smoke-test 1`] = `
                 type="button"
                 role="tab"
                 aria-selected="false"
+                style="color: rgb(211, 47, 47);"
         >
           PAGE3
           <span class="MuiTouchRipple-root css-mui-classname">
           </span>
         </button>
       </div>
       <span class="MuiTabs-indicator css-mui-classname"
-            style="left: 0px; width: 90px;"
+            style="left: 0px; width: 90px; background: rgb(25, 118, 210);"
       >
       </span>
     </div>

diff --git a/src/components/Tabs/index.stories.tsx b/src/components/Tabs/index.stories.tsx
@@ -44,7 +44,7 @@ export const Primary: Story = {
 };
 
 export const Color: Story = {
-  args: { ...Primary.args, color: "secondary" },
+  args: { ...Primary.args, color: "warning" },
 };
 
 export const Orientation: Story = {
@@ -60,3 +60,13 @@ export const DisabledTab: Story = {
     ],
   },
 };
+
+export const SingleTabColor: Story = {
+  args: {
+    tabList: [
+      { label: "PAGE1", content: "PAGE1" },
+      { label: "PAGE2", content: "PAGE2" },
+      { label: "PAGE3", content: <Progress type="circular" withLabel={false} />, textColor: "error" },
+    ],
+  },
+};
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { useTheme } from "@mui/material";
 import Box from "@mui/material/Box";
 import MUITab from "@mui/material/Tab";
 import MUITabs from "@mui/material/Tabs";
@@ -19,21 +20,36 @@ const Tabs: FC<TabsType> = ({
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
+  const theme = useTheme();
   return (
     <Box sx={orientation === "vertical" ? { display: "flex" } : { display: undefined }}>
       <MUITabs
         data-cy={dataCy}
         style={style}
         value={value}
         onChange={handleChange}
-        textColor={color}
-        indicatorColor={color}
+        textColor="primary"
+        TabIndicatorProps={{ style: { background: theme.palette[color].main } }}
         orientation={orientation}
         variant={orientation === "vertical" ? "standard" : "scrollable"}
         scrollButtons="auto"
       >
         {tabList.map((i, index) => {
-          return <MUITab label={i.label} wrapped={i.wrapped} key={index} disabled={i.disabled} />;
+          return (
+            <MUITab
+              label={i.label}
+              wrapped={i.wrapped}
+              key={index}
+              disabled={i.disabled}
+              style={{
+                color: i.textColor
+                  ? theme.palette[i.textColor].main
+                  : value === index
+                    ? theme.palette[color].main
+                    : undefined,
+              }}
+            />
+          );
         })}
       </MUITabs>
 

diff --git a/src/types/Button.ts b/src/types/Button.ts
@@ -24,7 +24,7 @@ export enum ButtonVariants {
 
 type IButtonVariants = "contained" | "outlined";
 
-type ButtonColor = "primary" | "success" | "secondary" | "info" | "error" | "warning";
+export type ButtonColor = "primary" | "success" | "secondary" | "info" | "error" | "warning";
 
 export type IButtonIcon = Pick<IIcon, "rotate"> & {
   component?: ReactElement;

diff --git a/src/types/Tabs.ts b/src/types/Tabs.ts
@@ -1,9 +1,16 @@
 import { IBase } from "./Base";
+import { ButtonColor } from "./Button";
 
-export type TabType = { label: string; wrapped?: boolean; content?: React.ReactNode; disabled?: boolean };
+export type TabType = {
+  label: string;
+  wrapped?: boolean;
+  content?: React.ReactNode;
+  disabled?: boolean;
+  textColor?: ButtonColor;
+};
 
 export type TabsType = IBase & {
   tabList: TabType[];
-  color?: "primary" | "secondary";
+  color?: ButtonColor;
   orientation?: "horizontal" | "vertical";
 };