fix: fix tab ui (#436) (#460)

* fix: fix tab ui (#436) * feat: updated tab scrolling styles (#436) * feat: updated horizontal tab styles (#436) --------- Co-authored-by: Fran McDade <[email protected]>
clevercanary · Nov 10, 2023 · 252c792 · 252c792
1 parent 2d15086
commit 252c792
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/packages/data-explorer-ui/src/components/common/Tabs/tabs.styles.ts b/packages/data-explorer-ui/src/components/common/Tabs/tabs.styles.ts
@@ -12,6 +12,7 @@ export const TabScrollFuzz = styled.span<Props>`
   opacity: 1;
   position: absolute;
   top: 0;
+  transition: opacity 300ms ease-in;
   width: 56px;
   z-index: 1;
 

diff --git a/packages/data-explorer-ui/src/components/common/Tabs/tabs.tsx b/packages/data-explorer-ui/src/components/common/Tabs/tabs.tsx
@@ -33,6 +33,7 @@ export const Tabs = ({
 }: TabsProps): JSX.Element => {
   return (
     <MTabs
+      allowScrollButtonsMobile
       className={className}
       onChange={(_, tabValue): void => onTabChange(tabValue)}
       ScrollButtonComponent={TabScrollFuzz} // Utilizing MuiTabScrollButton to show/hide scroll fuzz.

diff --git a/packages/data-explorer-ui/src/theme/common/components.ts b/packages/data-explorer-ui/src/theme/common/components.ts
@@ -1296,12 +1296,13 @@ export const MuiTab = (theme: Theme): Components["MuiTab"] => {
         padding: 12,
         textTransform: "capitalize",
         // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "& > .MuiTab-iconWrapper": {
-          marginRight: 0,
-        },
         "&.Mui-selected": {
           color: theme.palette.ink.main,
         },
+        // eslint-disable-next-line sort-keys -- disabling key order for readability
+        "& > .MuiTab-iconWrapper": {
+          marginRight: 0,
+        },
       },
     },
   };
@@ -1377,6 +1378,39 @@ export const MuiTabs = (theme: Theme): Components["MuiTabs"] => {
     styleOverrides: {
       flexContainer: {
         gap: 8,
+        // eslint-disable-next-line sort-keys -- disabling key order for readability
+        "&:not(.MuiTabs-flexContainerVertical)": {
+          // eslint-disable-next-line sort-keys -- disabling key order for readability
+          ".MuiTab-root": {
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+              color: theme.palette.ink.main,
+              overflow: "visible",
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:after": {
+                backgroundColor: theme.palette.smoke.dark,
+                borderRadius: "12px 12px 0 0",
+                bottom: -3,
+                content: '""',
+                height: 3,
+                left: 0,
+                position: "absolute",
+                width: "100%",
+              },
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-selected": {
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:hover": {
+                overflow: "unset",
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:after": {
+                  content: "none",
+                },
+              },
+            },
+          },
+        },
       },
       indicator: {
         borderTopLeftRadius: 12,
@@ -1389,10 +1423,11 @@ export const MuiTabs = (theme: Theme): Components["MuiTabs"] => {
         position: "relative", // Positions scroll fuzz.
       },
       scroller: {
-        margin: "0 16px",
+        margin: 0,
+        padding: "0 8px",
         // eslint-disable-next-line sort-keys -- disabling key order for readability
         [tabletUp]: {
-          margin: 0,
+          padding: 0,
         },
       },
     },