feat(VEmptyState): add mobile support for headline

vuetifyjs · Apr 1, 2024 · 85b2651 · 85b2651
1 parent 0669e13
commit 85b2651
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git a/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass b/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass
@@ -26,6 +26,10 @@
   font-size: $empty-state-headline-font-size
   font-weight: $empty-state-headline-font-weight
   line-height: $empty-state-headline-line-height
+  text-align: center
+
+  .v-empty-state--mobile &
+    font-size: $empty-state-headline-mobile-font-size
 
 .v-empty-state__title
   font-size: $empty-state-title-font-size

diff --git a/packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx b/packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx
@@ -11,6 +11,7 @@ import { VImg } from '@/components/VImg'
 import { useBackgroundColor } from '@/composables/color'
 import { makeComponentProps } from '@/composables/component'
 import { makeDimensionProps, useDimension } from '@/composables/dimensions'
+import { useDisplay } from '@/composables/display'
 import { IconValue } from '@/composables/icons'
 import { makeSizeProps } from '@/composables/size'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
@@ -76,6 +77,7 @@ export const VEmptyState = genericComponent<VEmptyStateSlots>()({
     const { themeClasses } = provideTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))
     const { dimensionStyles } = useDimension(props)
+    const { displayClasses } = useDisplay()
 
     function onClickAction (e: Event) {
       emit('click:action', e)
@@ -98,6 +100,7 @@ export const VEmptyState = genericComponent<VEmptyStateSlots>()({
             },
             themeClasses.value,
             backgroundColorClasses.value,
+            displayClasses.value,
             props.class,
           ]}
           style={[

diff --git a/packages/vuetify/src/labs/VEmptyState/_variables.scss b/packages/vuetify/src/labs/VEmptyState/_variables.scss
@@ -8,6 +8,7 @@ $empty-state-actions-padding: 16px !default;
 $empty-state-content-padding: 24px 0 !default;
 $empty-state-headline-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $empty-state-headline-font-size: functions.map-deep-get(settings.$typography, 'h2', 'size') !default;
+$empty-state-headline-mobile-font-size: functions.map-deep-get(settings.$typography, 'h4', 'size') !default;
 $empty-state-headline-line-height: functions.map-deep-get(settings.$typography, 'h2', 'line-height') !default;
 $empty-state-headline-font-weight: functions.map-deep-get(settings.$typography, 'h2', 'weight') !default;
 $empty-state-image-padding: 16px !default;