fix(VTab/VTabs): use --v-tabs-height as default for --v-btn-height

fixes #14863 this wasn't actually fixed in 86b2cf1
vuetifyjs · Nov 29, 2022 · b6aed82 · b6aed82
1 parent bdd10cf
commit b6aed82
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 49 deletions.
diff --git a/packages/vuetify/src/components/VTabs/VTab.sass b/packages/vuetify/src/components/VTabs/VTab.sass
@@ -1,16 +1,13 @@
 @use './variables' as *
 
 .v-tab
+  --v-btn-height: var(--v-tabs-height)
   position: relative
   min-width: $tab-min-width
 
   .v-slide-group--horizontal &
     max-width: $tab-max-width
 
-  // override density specificity
-  &.v-tab.v-tab
-    height: var(--v-tabs-height)
-
   .v-slide-group--vertical &
     justify-content: start
 

diff --git a/packages/vuetify/src/components/VTabs/VTabs.sass b/packages/vuetify/src/components/VTabs/VTabs.sass
@@ -51,8 +51,3 @@
       margin-inline-start: 52px
     .v-tab:last-child
       margin-inline-end: 52px
-
-.v-toolbar__content
-  > .v-tabs,
-  .v-tab
-    height: inherit
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -98,12 +98,6 @@ export const VToolbar = genericComponent<new () => {
       : 0
     )
 
-    provideDefaults({
-      VBtn: {
-        variant: 'text',
-      },
-    })
-
     useRender(() => {
       const hasTitle = !!(props.title || slots.title)
       const hasImage = !!(slots.image || props.image)
@@ -147,41 +141,57 @@ export const VToolbar = genericComponent<new () => {
             </div>
           ) }
 
-          <div
-            class="v-toolbar__content"
-            style={{ height: convertToUnit(contentHeight.value) }}
+          <VDefaultsProvider
+            defaults={{
+              VTabs: {
+                height: convertToUnit(contentHeight.value),
+              },
+            }}
           >
-            { slots.prepend && (
-              <div class="v-toolbar__prepend">
-                { slots.prepend?.() }
-              </div>
-            ) }
-
-            { hasTitle && (
-              <VToolbarTitle key="title" text={ props.title }>
-                {{ text: slots.title }}
-              </VToolbarTitle>
-            ) }
-
-            { slots.default?.() }
-
-            { slots.append && (
-              <div class="v-toolbar__append">
-                { slots.append?.() }
-              </div>
-            ) }
-          </div>
-
-          <VExpandTransition>
-            { isExtended.value && (
-              <div
-                class="v-toolbar__extension"
-                style={{ height: convertToUnit(extensionHeight.value) }}
-              >
-                { extension }
-              </div>
-            ) }
-          </VExpandTransition>
+            <div
+              class="v-toolbar__content"
+              style={{ height: convertToUnit(contentHeight.value) }}
+            >
+              { slots.prepend && (
+                <div class="v-toolbar__prepend">
+                  { slots.prepend?.() }
+                </div>
+              ) }
+
+              { hasTitle && (
+                <VToolbarTitle key="title" text={ props.title }>
+                  {{ text: slots.title }}
+                </VToolbarTitle>
+              ) }
+
+              { slots.default?.() }
+
+              { slots.append && (
+                <div class="v-toolbar__append">
+                  { slots.append?.() }
+                </div>
+              ) }
+            </div>
+          </VDefaultsProvider>
+
+          <VDefaultsProvider
+            defaults={{
+              VTabs: {
+                height: convertToUnit(extensionHeight.value),
+              },
+            }}
+          >
+            <VExpandTransition>
+              { isExtended.value && (
+                <div
+                  class="v-toolbar__extension"
+                  style={{ height: convertToUnit(extensionHeight.value) }}
+                >
+                  { extension }
+                </div>
+              ) }
+            </VExpandTransition>
+          </VDefaultsProvider>
         </props.tag>
       )
     })