Switch to adding top/bottom padding to tabs

Doist · Dec 14, 2024 · 64cf950 · 64cf950
1 parent c84e005
commit 64cf950
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/tabs/tabs.module.css b/src/tabs/tabs.module.css
@@ -14,20 +14,20 @@
     --reactist-tab-track-border-width: 2px;
     --reactist-tab-border-radius: 20px;
     --reactist-tab-border-width: 1px;
-    --reactist-tab-height: 30px;
+    --reactist-tab-padding-x: var(--reactist-spacing-medium);
+    --reactist-tab-padding-y: var(--reactist-spacing-small);
     --reactist-tab-line-height: 21px;
 }
 
 .tab {
     box-sizing: border-box;
-    padding: 0 var(--reactist-spacing-medium);
+    padding: var(--reactist-tab-padding-y) var(--reactist-tab-padding-x);
     border: none;
     background: none;
     cursor: pointer;
     font-size: var(--reactist-font-size-body);
     font-weight: var(--reactist-font-weight-medium);
     line-height: var(--reactist-tab-line-height);
-    min-height: var(--reactist-tab-height);
     z-index: 1;
     text-decoration: none;
     border: var(--reactist-tab-border-width) solid transparent;

diff --git a/src/tabs/tabs.stories.mdx b/src/tabs/tabs.stories.mdx
@@ -146,7 +146,9 @@ Their size can also be customized with:
 --reactist-tab-track-border-width
 --reactist-tab-border-radius
 --reactist-tab-border-width
---reactist-tab-height
+--reactist-tab-padding-x
+--reactist-tab-padding-y
+--reactist-tab-line-height
 ```
 
 ## Stories