Fixing Splitbutton height (#138)

* Fixing splitbutton height spacing issues * Updating variables.
ClickHouse · Sep 13, 2023 · 1ddaeeb · 1ddaeeb · vercel · Sep 13, 2023
1 parent 730541d
commit 1ddaeeb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx
@@ -121,7 +121,6 @@ export const SplitButton = ({
 };
 const DropdownContent = styled.div<{ $width: number }>`
   min-width: ${({ $width }) => $width}px;
-  background: red;
 `;
 
 const IconWrapper = ({ label, icon, iconDir }: Omit<MenuItem, "type" | "items">) => {
@@ -231,9 +230,11 @@ const SplitButtonTrigger = styled.div<{ $disabled?: boolean; $type: ButtonType }
 `;
 
 const PrimaryButton = styled(BaseButton)<{ $type: ButtonType }>`
-  border: none;
+  border: 1px solid transparent;
   align-self: stretch;
   border-radius: 0;
+  padding: ${({ theme }) => theme.click.button.split.space.y}
+    ${({ theme }) => theme.click.button.split.space.x};
   ${({ theme, $type }) => `
     background: ${theme.click.button.split[$type].background.main.default};
     color: ${theme.click.button.split[$type].text.default};

diff --git a/src/styles/types.ts b/src/styles/types.ts
@@ -504,6 +504,11 @@
             "x": string
           }
         },
+        "space": {
+          "x": string,
+          "y": string,
+          "gap": string
+        },
         "primary": {
           "background": {
             "main": {

diff --git a/src/styles/variables.json b/src/styles/variables.json
@@ -503,6 +503,11 @@
             "x": "0.344rem"
           }
         },
+        "space": {
+          "x": "1rem",
+          "y": "0.281rem",
+          "gap": "0.5rem"
+        },
         "primary": {
           "background": {
             "main": {
@@ -1082,7 +1087,7 @@
           "label": {
             "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;",
             "hover": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;",
-            "active": "600 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;",
+            "active": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;",
             "disabled": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
           },
           "sectionHeader": {