refactor(VToolbar): tuning pass (#15154)

* refactor(VToolbar): tuning pass * chore(VToolbar): updates from feedback & clean-up
vuetifyjs · Jun 22, 2022 · b14d137 · b14d137
1 parent bffed6a
commit b14d137
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
@@ -110,3 +110,6 @@
 .v-toolbar-items
   display: flex
   height: inherit
+
+  > .v-btn
+    border-radius: 0
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -13,6 +13,7 @@ import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
+import { provideDefaults } from '@/composables/defaults'
 import { useBackgroundColor } from '@/composables/color'
 import { useForwardRef } from '@/composables/forwardRef'
 
@@ -21,9 +22,8 @@ import { computed, ref, toRef } from 'vue'
 import { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'
 
 // Types
-import type { MakeSlots } from '@/util'
 import type { ExtractPropTypes, PropType } from 'vue'
-import { provideDefaults } from '@/composables/defaults'
+import type { MakeSlots } from '@/util'
 
 export type Density = typeof allowedDensities[number]
 
@@ -62,7 +62,7 @@ export const makeVToolbarProps = propsFactory({
 export const VToolbar = genericComponent<new () => {
   $slots: MakeSlots<{
     default: []
-    image: [{ image: string }]
+    image: []
     prepend: []
     append: []
     title: []
@@ -74,11 +74,11 @@ export const VToolbar = genericComponent<new () => {
   props: makeVToolbarProps(),
 
   setup (props, { slots }) {
+    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
     const { borderClasses } = useBorder(props)
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(props)
     const { themeClasses } = provideTheme(props)
-    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
 
     const isExtended = ref(!!(props.extended || slots.extension?.()))
     const contentHeight = computed(() => parseInt((
@@ -99,7 +99,6 @@ export const VToolbar = genericComponent<new () => {
 
     provideDefaults({
       VBtn: {
-        flat: true,
         variant: 'text',
       },
     })
@@ -141,7 +140,6 @@ export const VToolbar = genericComponent<new () => {
                     src: props.image,
                   },
                 }}
-                scoped
               >
                 { slots.image ? slots.image?.() : (<VImg />) }
               </VDefaultsProvider>

diff --git a/packages/vuetify/src/components/VToolbar/VToolbarItems.tsx b/packages/vuetify/src/components/VToolbar/VToolbarItems.tsx
@@ -3,25 +3,30 @@ import { makeVariantProps } from '@/composables/variant'
 import { provideDefaults } from '@/composables/defaults'
 
 // Utilities
-import { defineComponent } from '@/util'
+import { defineComponent, useRender } from '@/util'
 import { toRef } from 'vue'
 
 export const VToolbarItems = defineComponent({
   name: 'VToolbarItems',
 
-  props: {
-    ...makeVariantProps({ variant: 'tonal' }),
-  },
+  props: makeVariantProps({ variant: 'text' }),
 
   setup (props, { slots }) {
     provideDefaults({
       VBtn: {
         color: toRef(props, 'color'),
+        height: 'inherit',
         variant: toRef(props, 'variant'),
       },
     })
 
-    return () => slots.default?.()
+    useRender(() => (
+      <div class="v-toolbar-items">
+        { slots.default?.() }
+      </div>
+    ))
+
+    return {}
   },
 })