refactor(VBanner): tuning pass (#15109)

* refactor(VBanner): tuning pass * refactor(VBanner): remove append slot & remove align-items css
vuetifyjs · Jun 21, 2022 · 61ae05d · 61ae05d
1 parent d30f489
commit 61ae05d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 76 deletions.
diff --git a/packages/vuetify/src/components/VBanner/VBanner.sass b/packages/vuetify/src/components/VBanner/VBanner.sass
@@ -3,11 +3,10 @@
 @use './variables' as *
 
 .v-banner
-  align-items: center
   display: grid
   flex: 1 1
   font-size: $banner-font-size
-  grid-template-areas: "prepend text actions"
+  grid-template-areas: "prepend content actions"
   grid-template-columns: max-content auto max-content
   grid-template-rows: max-content max-content
   line-height: $banner-line-height
@@ -30,7 +29,7 @@
 
   &--stacked
     &:not(.v-banner--one-line)
-      grid-template-areas: "prepend text" ". actions"
+      grid-template-areas: "prepend content" ". actions"
 
     .v-banner-text
       padding-inline-end: $banner-stacked-padding-inline-end
@@ -68,8 +67,9 @@
   &--sticky
     top: $banner-sticky-top
 
-.v-banner-avatar,
-.v-banner-icon,
+.v-banner__content
+  grid-area: content
+
 .v-banner__prepend
   align-self: flex-start
   grid-area: prepend
@@ -89,9 +89,8 @@
 .v-banner-text
   -webkit-box-orient: vertical
   display: -webkit-box
-  grid-area: text
-  overflow: hidden
   padding-inline-end: $banner-text-padding-end
+  overflow: hidden
 
   .v-banner--one-line &
     -webkit-line-clamp: 1

diff --git a/packages/vuetify/src/components/VBanner/VBanner.tsx b/packages/vuetify/src/components/VBanner/VBanner.tsx
@@ -2,10 +2,10 @@
 import './VBanner.sass'
 
 // Components
+import { VAvatar } from '@/components/VAvatar'
 import { VBannerActions } from './VBannerActions'
-import { VBannerAvatar } from './VBannerAvatar'
-import { VBannerIcon } from './VBannerIcon'
 import { VBannerText } from './VBannerText'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 
 // Composables
 import { makeBorderProps, useBorder } from '@/composables/border'
@@ -66,11 +66,7 @@ export const VBanner = defineComponent({
     const color = toRef(props, 'color')
     const density = toRef(props, 'density')
 
-    provideDefaults({
-      VBannerActions: { color, density },
-      VBannerAvatar: { density, image: toRef(props, 'avatar') },
-      VBannerIcon: { color, density, icon: toRef(props, 'icon') },
-    })
+    provideDefaults({ VBannerActions: { color, density } })
 
     useRender(() => {
       const hasText = !!(props.text || slots.text)
@@ -99,27 +95,34 @@ export const VBanner = defineComponent({
           role="banner"
         >
           { hasPrepend && (
-            <>
-              { slots.prepend
-                ? (
-                  <div class="v-banner__prepend">
-                    { slots.prepend() }
-                  </div>
-                )
-                : props.avatar ? (<VBannerAvatar />)
-                : props.icon ? (<VBannerIcon />)
-                : undefined
-              }
-            </>
+            <VDefaultsProvider
+              defaults={{
+                VAvatar: {
+                  color: color.value,
+                  density: density.value,
+                  icon: props.icon,
+                  image: props.avatar,
+                },
+              }}
+            >
+              <div class="v-banner__prepend">
+                { slots.prepend
+                  ? slots.prepend()
+                  : (props.avatar || props.icon) && (<VAvatar />)
+                }
+              </div>
+            </VDefaultsProvider>
           ) }
 
-          { hasText && (
-            <VBannerText>
-              { slots.text ? slots.text() : props.text }
-            </VBannerText>
-          ) }
+          <div class="v-banner__content">
+            { hasText && (
+              <VBannerText>
+                { slots.text ? slots.text() : props.text }
+              </VBannerText>
+            ) }
 
-          { slots.default?.() }
+            { slots.default?.() }
+          </div>
 
           { slots.actions && (
             <VBannerActions>

diff --git a/packages/vuetify/src/components/VBanner/VBannerAvatar.tsx b/packages/vuetify/src/components/VBanner/VBannerAvatar.tsx
diff --git a/packages/vuetify/src/components/VBanner/VBannerIcon.tsx b/packages/vuetify/src/components/VBanner/VBannerIcon.tsx
diff --git a/packages/vuetify/src/components/VBanner/index.ts b/packages/vuetify/src/components/VBanner/index.ts
@@ -1,5 +1,3 @@
 export { VBanner } from './VBanner'
 export { VBannerActions } from './VBannerActions'
-export { VBannerAvatar } from './VBannerAvatar'
-export { VBannerIcon } from './VBannerIcon'
 export { VBannerText } from './VBannerText'