Improvements to FileTabs (#312)

* Improvements to FileTabs * Removing unecessessary css * Improving story example.
ClickHouse · Jan 18, 2024 · ff54a39 · ff54a39 · vercel · Jan 18, 2024
1 parent 76cc0d3
commit ff54a39
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 11 deletions.
diff --git a/src/components/FileTabs/FileTabs.stories.tsx b/src/components/FileTabs/FileTabs.stories.tsx
@@ -30,7 +30,7 @@ const FileTabs = ({
   const [tabs, setTabs] = useState(options);
 
   return (
-    <div style={{ display: "flex" }}>
+    <div style={{ display: "flex", height: "4rem" }}>
       <FileTabElement icon="home" />
       <CUIFileTabs
         onReorderTab={() => null}

diff --git a/src/components/FileTabs/FileTabs.tsx b/src/components/FileTabs/FileTabs.tsx
@@ -206,21 +206,16 @@ const TabElement = styled.div<{
   max-width: fill-available;
   max-width: stretch;
   border: none;
+  cursor: pointer;
+  height: 100%;
+  height: -webkit-fill-available;
+  height: fill-available;
+  height: stretch;
   ${({ theme, $active, $preview, $dismissable, $fixedTabElement }) => `
     width:${$fixedTabElement ? "auto" : "100%"};
     grid-template-columns: 1fr ${
       $dismissable ? theme.click.tabs.fileTabs.icon.size.width : ""
     };
-    ${
-      $dismissable
-        ? `
-        height: 100%;
-        height: -webkit-fill-available;
-        height: fill-available;
-        height: stretch;
-    `
-        : ""
-    }
     padding: ${theme.click.tabs.fileTabs.space.y} ${theme.click.tabs.fileTabs.space.x};
     gap: ${theme.click.tabs.fileTabs.space.gap};
     border-radius: ${theme.click.tabs.fileTabs.radii.all};
@@ -304,6 +299,11 @@ const TabContentText = styled.span`
 
 const EmptyButton = styled.button`
   padding: 0;
+  ${({ theme }) => theme.click.tabs.fileTabs.color.closeButton.background.default};
+  &:hover {
+    background: ${({ theme }) =>
+      theme.click.tabs.fileTabs.color.closeButton.background.hover};
+  }
 `;
 
 const Tab = ({

diff --git a/src/styles/types.ts b/src/styles/types.ts
@@ -2283,6 +2283,12 @@
             "default": string,
             "hover": string,
             "active": string
+          },
+          "closeButton": {
+            "background": {
+              "default": string,
+              "hover": string
+            }
           }
         }
       }

diff --git a/src/styles/variables.dark.json b/src/styles/variables.dark.json
@@ -1165,6 +1165,12 @@
             "default": "lch(27.5 0 0 / 0.3)",
             "hover": "lch(27.5 0 0 / 0.3)",
             "active": "lch(27.5 0 0 / 0.3)"
+          },
+          "closeButton": {
+            "background": {
+              "default": "rgba(0,0,0,0)",
+              "hover": "#414141"
+            }
           }
         }
       }

diff --git a/src/styles/variables.json b/src/styles/variables.json
@@ -2282,6 +2282,12 @@
             "default": "lch(91.6 1.1 266)",
             "hover": "lch(91.6 1.1 266)",
             "active": "lch(91.6 1.1 266)"
+          },
+          "closeButton": {
+            "background": {
+              "default": "rgba(0,0,0,0)",
+              "hover": "#e6e7e9"
+            }
           }
         }
       }

diff --git a/src/styles/variables.light.json b/src/styles/variables.light.json
@@ -1161,6 +1161,12 @@
             "default": "lch(91.6 1.1 266)",
             "hover": "lch(91.6 1.1 266)",
             "active": "lch(91.6 1.1 266)"
+          },
+          "closeButton": {
+            "background": {
+              "default": "rgba(0,0,0,0)",
+              "hover": "#e6e7e9"
+            }
           }
         }
       }