feat(Tabs): add new segemented-control-rounded variant

gitsindonesia · Jun 15, 2023 · 71cefbc · 71cefbc
1 parent c6fa7d7
commit 71cefbc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/tabs/src/variants.ts b/packages/tabs/src/variants.ts
@@ -3,6 +3,7 @@ export const tabVariants = [
   'filled',
   'underline-filled',
   'segmented-control',
+  'segmented-control-rounded',
 ];
 
 export type TabVariants = typeof tabVariants[number];
diff --git a/packages/themes/src/morpheme/_tabs.scss b/packages/themes/src/morpheme/_tabs.scss
@@ -287,7 +287,8 @@
   }
 
   // segmented control
-  &--segmented-control {
+  &--segmented-control,
+  &--segmented-control-rounded {
     --v-tabs-slider-height: 40px;
     --v-tabs-padding-x: 0;
     --v-tabs-padding-y: 0;
@@ -369,6 +370,14 @@
     }
   }
 
+  &--segmented-control-rounded {
+    .v-tabs-items,
+    .v-tabs-item,
+    .v-tabs-slider {
+      border-radius: var(--border-radius-full);
+    }
+  }
+
   // grow
   &--grow {
     .v-tabs-items {