fix(VTabs): width when using fixed prop and border-radius

fixes #17027
vuetifyjs · Sep 12, 2023 · 127bb0a · 127bb0a
1 parent 251b5c6
commit 127bb0a
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VTabs/VTab.sass b/packages/vuetify/src/components/VTabs/VTab.sass
@@ -4,6 +4,7 @@
   // override v-btn size specificity
   &.v-tab
     --v-btn-height: var(--v-tabs-height)
+    border-radius: $tab-border-radius
     min-width: $tab-min-width
 
   .v-slide-group--horizontal &

diff --git a/packages/vuetify/src/components/VTabs/VTab.tsx b/packages/vuetify/src/components/VTabs/VTab.tsx
@@ -116,11 +116,10 @@ export const VTab = genericComponent()({
           role="tab"
           aria-selected={ String(isSelected.value) }
           active={ false }
-          block={ props.fixed }
-          maxWidth={ props.fixed ? 300 : undefined }
-          rounded={ 0 }
           { ...btnProps }
           { ...attrs }
+          block={ props.fixed }
+          maxWidth={ props.fixed ? 300 : undefined }
           onGroup:selected={ updateSlider }
         >
           { slots.default?.() ?? props.text }

diff --git a/packages/vuetify/src/components/VTabs/_variables.scss b/packages/vuetify/src/components/VTabs/_variables.scss
@@ -8,6 +8,7 @@ $tabs-stacked-height: 72px !default;
 
 // VTab
 $tab-align-tabs-title-margin: 42px !default;
+$tab-border-radius: 0 !default;
 $tab-max-width: 360px !default;
 $tab-min-width: 90px !default;
 $tab-slider-size: 2px !default;