feat(VList): add nav prop support

vuetifyjs · Jun 10, 2021 · b579b79 · b579b79
1 parent 619f00e
commit b579b79
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
@@ -28,6 +28,7 @@ export default defineComponent({
       type: String,
       default: 'one',
     },
+    nav: Boolean,
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
@@ -53,6 +54,7 @@ export default defineComponent({
             'v-list',
             {
               'v-list--disabled': props.disabled,
+              'v-list--nav': props.nav,
               [`v-list--${props.lines}-line`]: true,
             },
             themeClasses.value,

diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
@@ -85,6 +85,9 @@
 
   @include typography($list-item-subtitle-typography...)
 
+  .v-list--nav &
+    @include typography($list-item-nav-subtitle-typography...)
+
 .v-list-item-title
   hyphens: $list-item-title-hyphens
   overflow-wrap: $list-item-title-overflow-wrap
@@ -97,6 +100,9 @@
 
   @include typography($list-item-title-typography...)
 
+  .v-list--nav &
+    @include typography($list-item-nav-title-typography...)
+
 .v-list-item
   $root: &
 

diff --git a/packages/vuetify/src/components/VList/_variables.scss b/packages/vuetify/src/components/VList/_variables.scss
@@ -20,7 +20,6 @@ $list-item-three-line-min-height: 88px !default;
 $list-item-three-line-padding: 16px 16px !default;
 
 $list-item-avatar-align-self: flex-start !default;
-$list-item-avatar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $list-item-avatar-margin-end: 16px !default;
 $list-item-avatar-margin-start: 16px !default;
 $list-item-avatar-size: 40px !default;
@@ -36,6 +35,15 @@ $list-item-media-two-line-margin-top: -4px !default;
 $list-item-media-three-line-margin-bottom: 0 !default;
 $list-item-media-three-line-margin-top: 0 !default;
 
+$list-item-nav-title-font-size: .8125rem !default;
+$list-item-nav-title-font-weight: 500 !default;
+$list-item-nav-title-letter-spacing: normal !default;
+$list-item-nav-title-line-height: 1rem !default;
+$list-item-nav-subtitle-font-size: .75rem !default;
+$list-item-nav-subtitle-font-weight: map-deep-get($typography, 'body-2', 'weight') !default;
+$list-item-nav-subtitle-letter-spacing: map-deep-get($typography, 'body-2', 'letter-spacing') !default;
+$list-item-nav-subtitle-line-height: 1rem !default;
+
 $list-item-subtitle-opacity: var(--v-medium-emphasis-opacity) !default;
 $list-item-subtitle-font-size: map-deep-get($typography, 'body-2', 'size') !default;
 $list-item-subtitle-font-weight: map-deep-get($typography, 'body-2', 'weight') !default;
@@ -48,7 +56,7 @@ $list-item-title-font-size: map-deep-get($typography, 'body-1', 'size') !default
 $list-item-title-font-weight: map-deep-get($typography, 'body-1', 'weight') !default;
 $list-item-title-header-padding: 0 !default;
 $list-item-title-hyphens: auto !default;
-$list-item-title-letter-spacing: map-deep-get($typography, 'body-1', 'letter-spacing') !default;
+$list-item-title-letter-spacing: map-deep-get($typography, 'subtitle-1', 'letter-spacing') !default;
 $list-item-title-line-height: map-deep-get($typography, 'body-1', 'line-height') !default;
 $list-item-title-overflow-wrap: anywhere !default;
 $list-item-title-padding: 0 !default;
@@ -85,3 +93,19 @@ $list-item-subtitle-typography: (
   $list-item-subtitle-line-height,
   $list-item-subtitle-text-transform
 );
+
+$list-item-nav-title-typography: (
+  $list-item-nav-title-font-size,
+  $list-item-nav-title-font-weight,
+  $list-item-nav-title-letter-spacing,
+  $list-item-nav-title-line-height,
+  null
+);
+
+$list-item-nav-subtitle-typography: (
+  $list-item-nav-subtitle-font-size,
+  $list-item-nav-subtitle-font-weight,
+  $list-item-nav-subtitle-letter-spacing,
+  $list-item-nav-subtitle-line-height,
+  null
+);