From ff54a39ea02cc3b8361c34e58d750d8c1144e130 Mon Sep 17 00:00:00 2001
From: Gareth Jones <gareth@clickhouse.com>
Date: Thu, 18 Jan 2024 09:42:20 -0500
Subject: [PATCH] Improvements to FileTabs (#312)

* Improvements to FileTabs

* Removing unecessessary css

* Improving story example.
---
 src/components/FileTabs/FileTabs.stories.tsx |  2 +-
 src/components/FileTabs/FileTabs.tsx         | 20 ++++++++++----------
 src/styles/types.ts                          |  6 ++++++
 src/styles/variables.dark.json               |  6 ++++++
 src/styles/variables.json                    |  6 ++++++
 src/styles/variables.light.json              |  6 ++++++
 6 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/FileTabs/FileTabs.stories.tsx b/src/components/FileTabs/FileTabs.stories.tsx
index 947de079..fbee0df3 100644
--- 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
index 25ba4192..b7475f14 100644
--- 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
index 45e8e681..0f116e1f 100644
--- 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
index 57e6fbe3..2d70cc25 100644
--- 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
index 6cb73f0e..119b4166 100644
--- 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
index 19256640..28938640 100644
--- 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"
+            }
           }
         }
       }