feat(VAlert): better aligment with prepend icon (#20700)

Author: J-Sek

packages/api-generator/src/locale/en/VIconBtn.json

@@ -6,8 +6,6 @@
     "baseVariant": "When active is a boolean, this variant is used when active is false.",
     "hideOverlay": "Hides overlay from being displayed when active or focused.",
     "iconColor": "Explicit color applied to the icon.",
-    "iconSize": "The specific size of the icon, can use named sizes.",
-    "iconSizes": "An array of tuples that define the icon sizes for each named size.",
     "loading": "Displays circular progress bar in place of the icon.",
     "readonly": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.",
     "rotate": "The rotation of the icon in degrees.",

packages/api-generator/src/locale/en/generic.json

@@ -25,6 +25,8 @@
     "hideOnLeave": "Hides the leaving element (no exit animation).",
     "group": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).",
     "icon": "Apply a specific icon using the [v-icon](/components/icons/) component.",
+    "iconSize": "The specific size of the icon, can use named sizes.",
+    "iconSizes": "An array of tuples that define the icon sizes for each named size.",
     "image": "Apply a specific image using [v-img](/components/images/).",
     "items": "An array of strings or objects used for automatically generating children components.",
     "label": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.",

packages/vuetify/src/components/VAlert/VAlert.sass

@@ -1,3 +1,4 @@
+@use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
 
@@ -42,6 +43,10 @@
         &.v-alert--border-bottom
           padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
 
+    &:not(:has(.v-alert-title))
+      .v-alert__content
+        padding-top: calc(($alert-title-line-height - settings.$line-height-root * 1rem) / 2)
+
   .v-alert__border
     border-radius: inherit
     bottom: 0
@@ -70,6 +75,7 @@
   .v-alert__close
     flex: 0 1 auto
     grid-area: close
+    margin-block: -2px
 
   .v-alert__content
     align-self: center
@@ -78,7 +84,6 @@
 
   .v-alert__append,
   .v-alert__close
-    align-self: flex-start
     margin-inline-start: $alert-append-margin-inline-start
 
   .v-alert__append
@@ -94,6 +99,7 @@
     align-items: center
     grid-area: prepend
     margin-inline-end: $alert-prepend-margin-inline-end
+    min-height: $alert-title-line-height
 
     .v-alert--prominent &
       align-self: center

packages/vuetify/src/components/VAlert/VAlert.tsx

@@ -14,6 +14,7 @@ import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { IconValue } from '@/composables/icons'
+import { makeIconSizeProps, useIconSizes } from '@/composables/iconSizes'
 import { useLocale } from '@/composables/locale'
 import { makeLocationProps, useLocation } from '@/composables/location'
 import { makePositionProps, usePosition } from '@/composables/position'
@@ -76,6 +77,7 @@ export const makeVAlertProps = propsFactory({
   ...makeDensityProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
+  ...makeIconSizeProps(),
   ...makeLocationProps(),
   ...makePositionProps(),
   ...makeRoundedProps(),
@@ -112,6 +114,7 @@ export const VAlert = genericComponent<VAlertSlots>()({
       return props.icon ?? `$${props.type}`
     })
 
+    const { iconSize } = useIconSizes(props, () => props.prominent ? 44 : 28)
     const { themeClasses } = provideTheme(props)
     const { colorClasses, colorStyles, variantClasses } = useVariant(() => ({
       color: props.color ?? props.type,
@@ -140,6 +143,12 @@ export const VAlert = genericComponent<VAlertSlots>()({
       const hasTitle = !!(slots.title || props.title)
       const hasClose = !!(slots.close || props.closable)
 
+      const iconProps = {
+        density: props.density,
+        icon: icon.value,
+        size: iconSize.value,
+      }
+
       return isActive.value && (
         <props.tag
           class={[
@@ -184,23 +193,12 @@ export const VAlert = genericComponent<VAlertSlots>()({
           { hasPrepend && (
             <div key="prepend" class="v-alert__prepend">
               { !slots.prepend ? (
-                <VIcon
-                  key="prepend-icon"
-                  density={ props.density }
-                  icon={ icon.value }
-                  size={ props.prominent ? 44 : 28 }
-                />
+                <VIcon key="prepend-icon" { ...iconProps } />
               ) : (
                 <VDefaultsProvider
                   key="prepend-defaults"
                   disabled={ !icon.value }
-                  defaults={{
-                    VIcon: {
-                      density: props.density,
-                      icon: icon.value,
-                      size: props.prominent ? 44 : 28,
-                    },
-                  }}
+                  defaults={{ VIcon: { ...iconProps } }}
                   v-slots:default={ slots.prepend }
                 />
               )}

packages/vuetify/src/composables/iconSizes.ts

@@ -0,0 +1,40 @@
+// Utilities
+import { computed } from 'vue'
+import { propsFactory } from '@/util'
+
+// Types
+import type { ComputedGetter, PropType } from 'vue'
+import type { VIconBtnSizes } from '@/labs/VIconBtn/VIconBtn'
+
+// Types
+export interface IconSizeProps {
+  iconSize?: VIconBtnSizes | number | string
+  iconSizes: [VIconBtnSizes, number][]
+}
+
+// Composables
+export const makeIconSizeProps = propsFactory({
+  iconSize: [Number, String] as PropType<VIconBtnSizes | number | string>,
+  iconSizes: {
+    type: Array as PropType<[VIconBtnSizes, number][]>,
+    default: () => ([
+      ['x-small', 10],
+      ['small', 16],
+      ['default', 24],
+      ['large', 28],
+      ['x-large', 32],
+    ]),
+  },
+}, 'iconSize')
+
+export function useIconSizes (props: IconSizeProps, fallback: ComputedGetter<VIconBtnSizes | number | string | undefined>) {
+  const iconSize = computed(() => {
+    const iconSizeMap = new Map(props.iconSizes)
+    const _iconSize = props.iconSize as VIconBtnSizes ?? fallback() ?? 'default'
+    return iconSizeMap.has(_iconSize)
+      ? iconSizeMap.get(_iconSize)
+      : _iconSize
+  })
+
+  return { iconSize }
+}

packages/vuetify/src/labs/VIconBtn/VIconBtn.tsx

@@ -10,6 +10,7 @@ import { VProgressCircular } from '@/components/VProgressCircular'
 import { makeBorderProps, useBorder } from '@/composables/border'
 import { makeComponentProps } from '@/composables/component'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
+import { makeIconSizeProps, useIconSizes } from '@/composables/iconSizes'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
@@ -50,17 +51,6 @@ export const makeVIconBtnProps = propsFactory({
   hideOverlay: Boolean,
   icon: [String, Function, Object] as PropType<IconValue>,
   iconColor: String,
-  iconSize: [Number, String] as PropType<VIconBtnSizes | number | string>,
-  iconSizes: {
-    type: Array as PropType<[VIconBtnSizes, number][]>,
-    default: () => ([
-      ['x-small', 10],
-      ['small', 16],
-      ['default', 24],
-      ['large', 28],
-      ['x-large', 32],
-    ]),
-  },
   loading: Boolean,
   opacity: [Number, String],
   readonly: Boolean,
@@ -87,6 +77,7 @@ export const makeVIconBtnProps = propsFactory({
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeElevationProps(),
+  ...makeIconSizeProps(),
   ...makeRoundedProps(),
   ...makeTagProps({ tag: 'button' }),
   ...makeThemeProps(),
@@ -128,7 +119,6 @@ export const VIconBtn = genericComponent<VIconBtnSlots>()({
     }))
 
     const btnSizeMap = new Map(props.sizes)
-    const iconSizeMap = new Map(props.iconSizes)
 
     function onClick () {
       if (
@@ -149,15 +139,14 @@ export const VIconBtn = genericComponent<VIconBtnSlots>()({
       const btnSize = hasNamedSize ? btnSizeMap.get(_btnSize) : _btnSize
       const btnHeight = props.height ?? btnSize
       const btnWidth = props.width ?? btnSize
+      const { iconSize } = useIconSizes(props, () => new Map(props.iconSizes).get(_btnSize))
 
-      const _iconSize = props.iconSize as VIconBtnSizes
-      const hasNamedIconSize = iconSizeMap.has(_iconSize)
-
-      const iconSize = !_iconSize
-        ? hasNamedSize ? iconSizeMap.get(_btnSize) : iconSizeMap.get('default')
-        : hasNamedIconSize ? iconSizeMap.get(_iconSize) : _iconSize
-
-      const iconProps = { icon, size: iconSize, iconColor: props.iconColor, opacity: props.opacity }
+      const iconProps = {
+        icon,
+        size: iconSize.value,
+        iconColor: props.iconColor,
+        opacity: props.opacity,
+      }
 
       return (
         <props.tag
@@ -217,7 +206,7 @@ export const VIconBtn = genericComponent<VIconBtnSlots>()({
                   color={ typeof props.loading === 'boolean' ? undefined : props.loading }
                   indeterminate="disable-shrink"
                   width="2"
-                  size={ iconSize }
+                  size={ iconSize.value }
                 />
               )}
             </span>