feat(VList): port to v3 (#13697)

fixes #8137
fixes #9285
fixes #12826

Co-authored-by: Kael <[email protected]>

packages/api-generator/src/locale/en/v-list-item.json

@@ -1,13 +1,17 @@
 {
   "props": {
+    "active": "Controls the **active** state of the item. This is typically used to highlight the component",
+    "activeClass": "Configure the active CSS class applied when the link is active. You can find more information about the [**active-class** prop](https://router.vuejs.org/api/#active-class) on the vue-router documentation.",
+    "activeColor": "The applied color when a `v-list-item` is in an active state",
+    "appendAvatar": "Appends a [v-avatar](/components/avatars/) component to the header",
+    "appendIcon": "Appends a [v-icon](/components/icons/) component to the header",
     "color": "Applies specified color to the control when in an **active** state or **input-value** is **true** - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`)",
-    "dense": "Lowers max height of list tiles",
+    "contained": "Changes the component style by changing how color is applied to the background.",
     "disabled": "Disables the component",
-    "inactive": "If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler",
-    "inputValue": "Controls the **active** state of the item. This is typically used to highlight the component",
-    "selectable": "Allow text selection inside `v-list-item`. This prop uses [user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)",
-    "threeLine": "Increases list-item height for three lines. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
-    "twoLine": "Increases list-item height for two lines. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
+    "prependAvatar": "Prepends a [v-avatar](/components/avatars/) component to the header",
+    "prependIcon": "Prepends a [v-icon](/components/icons/) component to the header",
+    "title": "Generates a `v-list-item-title` component with the supplied value",
+    "subtitle": "Generates a `v-list-item-subtitle` component with the supplied value",
     "value": "The value used when a child of a [v-list-item-group](/components/list-item-groups)."
   }
 }

packages/api-generator/src/locale/en/v-list.json

@@ -1,20 +1,10 @@
 {
   "props": {
-    "avatar": "Used to set minimum tile height on a single-line list item",
-    "dense": "Lowers max height of list tiles",
     "disabled": "Disables all children `v-list-item` components",
-    "expand": "Will only collapse when explicitly closed",
-    "flat": "Remove the highlighted background on active `v-list-item`s",
-    "group": "Assign a route namespace. Accepts a string or regexp for determining active state",
     "inactive": "If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler",
     "link": "Applies `v-list-item` hover styles. Useful when using the item as an _activator_.",
     "nav": "An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with **[v-navigation-drawer](/components/navigation-drawers)**",
-    "noAction": "Removes left padding assigned for action icons from group items",
-    "rounded": "Rounds the `v-list-item` edges",
-    "shaped": "Provides an alternative active style for `v-list-item`.",
-    "subGroup": "Designate the component as nested list group",
-    "subheader": "Removes top padding. Used when previous sibling is a header",
-    "threeLine": "Increases list-item height for three lines. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
-    "twoLine": "Increases list-item height for two lines. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers."
+    "subheader": "Removes the top padding from `v-list-subheader` components. When used as a **String**, renders a subheader for you",
+    "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers."
   }
 }

packages/docs/src/data/nav-alpha.json

@@ -58,6 +58,7 @@
       "images",
       "item-groups",
       "lazy",
+      "lists",
       "overlays",
       "sheets",
       "theme-providers"

packages/vuetify/src/components/VAvatar/VAvatar.sass

@@ -12,7 +12,7 @@
   vertical-align: $avatar-vertical-align
 
   @include avatar-sizes($avatar-sizes)
-  @include density('v-avatar', ('height', 'width'), $avatar-density)
+  @include avatar-density(('height', 'width'), $avatar-density)
   @include rounded($avatar-border-radius)
 
   > *
@@ -21,3 +21,13 @@
 
   &--rounded
     +rounded($avatar-rounded-border-radius)
+
+// VList
+.v-avatar
+  .v-list-item-avatar &
+    overflow: visible
+    height: inherit
+    width: inherit
+
+    > *
+      width: auto

packages/vuetify/src/components/VAvatar/_mixins.scss

@@ -7,3 +7,20 @@
     }
   }
 }
+
+@mixin avatar-density ($properties, $densities) {
+  @each $density, $multiplier in $densities {
+    $value: calc(var(--v-avatar-height) + #{$multiplier * $spacer});
+
+    &.v-avatar--density-#{$density} {
+      @if type-of($properties) == "list" {
+        @each $property in $properties {
+          #{$property}: $value;
+        }
+      }
+      @else {
+        #{$properties}: $value;
+      }
+    }
+  }
+}

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -25,7 +25,7 @@
 
   @at-root
     +button-sizes()
-    +density('v-btn', 'height', $button-density)
+    +button-density('height', $button-density)
 
   +states('.v-btn__overlay')
 
@@ -35,7 +35,7 @@
     padding: 0
 
     @at-root &
-      +density('v-btn', ('width', 'height'), $button-icon-density)
+      +button-density(('width', 'height'), $button-icon-density)
 
   &--border
     +border($button-border-color, $button-border-style, $button-border-width)
@@ -88,7 +88,7 @@
 
     @at-root
       @include button-sizes($button-stacked-sizes, true)
-      @include density('v-btn', 'height', $button-stacked-density)
+      @include button-density('height', $button-stacked-density)
 
 .v-btn__overlay
   background-color: currentColor

packages/vuetify/src/components/VBtn/_mixins.scss

@@ -18,3 +18,20 @@
     }
   }
 }
+
+@mixin button-density ($properties, $densities) {
+  @each $density, $multiplier in $densities {
+    $value: calc(var(--v-btn-height) + #{$multiplier * $spacer});
+
+    &.v-btn--density-#{$density} {
+      @if type-of($properties) == "list" {
+        @each $property in $properties {
+          #{$property}: $value;
+        }
+      }
+      @else {
+        #{$properties}: $value;
+      }
+    }
+  }
+}

packages/vuetify/src/components/VCard/_variables.scss

@@ -53,7 +53,7 @@ $card-title-header-padding: 0 !default;
 $card-title-hyphens: auto !default;
 $card-title-letter-spacing: map-deep-get($typography, 'h6', 'letter-spacing') !default;
 $card-title-line-height: map-deep-get($typography, 'h6', 'line-height') !default;
-$card-title-overflow-wrap: anywhere !default;
+$card-title-overflow-wrap: normal !default;
 $card-title-padding-top: 1rem !default;
 $card-title-padding: .5rem 1rem !default;
 $card-title-text-transform: none !default;
@@ -74,6 +74,8 @@ $card-title-densities: (
   'compact': $card-title-compact-line-height
 );
 
+$card-subtitle-densities: ('default': 0, 'comfortable': -1, 'compact': -2);
+
 $card-subtitle-densities: () !default;
 $card-subtitle-densities: (
   null: $card-subtitle-line-height,

packages/vuetify/src/components/VList/VList.cy.spec.tsx

@@ -0,0 +1,54 @@
+/// <reference types="../../../types/cypress" />
+
+import { CenteredGrid } from '@/../cypress/templates'
+import { VList, VListItem } from '..'
+
+describe('VList', () => {
+  function mountFunction (content: JSX.Element) {
+    return cy.mount(() => content)
+  }
+
+  it('supports the density property', () => {
+    const densities = ['default', 'comfortable', 'compact'] as const
+    const ListItems = densities.map(density => (
+      <VList density={ density }>
+        <VListItem>
+          density { density }
+        </VListItem>
+      </VList>
+    ))
+    const wrapper = mountFunction((
+      <CenteredGrid width="200px">
+        <h2 class="mt-8">ListItems by Density</h2>
+
+        { ListItems }
+      </CenteredGrid>
+    ))
+
+    wrapper.get('.v-list--density-default').should('exist')
+    wrapper.get('.v-list--density-comfortable').should('exist')
+    wrapper.get('.v-list--density-compact').should('exist')
+  })
+
+  it('supports the lines property', () => {
+    const lines = ['one', 'two', 'three'] as const
+    const ListItems = lines.map(number => (
+      <VList lines={ number }>
+        <VListItem>
+          lines { number }
+        </VListItem>
+      </VList>
+    ))
+    const wrapper = mountFunction((
+      <CenteredGrid width="200px">
+        <h2 class="mt-8">ListItems by Density</h2>
+
+        { ListItems }
+      </CenteredGrid>
+    ))
+
+    wrapper.get('.v-list--one-line').should('exist')
+    wrapper.get('.v-list--two-line').should('exist')
+    wrapper.get('.v-list--three-line').should('exist')
+  })
+})