feat: update v-avatar to v3 (#13265)

Co-authored-by: John Leider <john.j.leider@gmail.com>

packages/docs/src/examples/v-avatar/misc-profile-card.vue

@@ -21,7 +21,7 @@
             class="profile"
             color="grey"
             size="164"
-            tile
+            rounded="0"
           >
             <v-img src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"></v-img>
           </v-avatar>

packages/docs/src/examples/v-avatar/prop-size.vue

@@ -1,24 +1,23 @@
 <template>
   <v-row justify="space-around">
     <v-avatar
-      color="indigo"
-      size="36"
+      color="primary"
+      size="x-small"
     >
-      <span class="white--text headline">36</span>
+      <span class="headline">32</span>
     </v-avatar>
 
     <v-avatar
-      color="teal"
-      size="48"
+      color="secondary"
     >
-      <span class="white--text headline">48</span>
+      <span class="headline">48</span>
     </v-avatar>
 
     <v-avatar
-      color="orange"
-      size="62"
+      color="info"
+      size="x-large"
     >
-      <span class="white--text headline">62</span>
+      <span class="headline">64</span>
     </v-avatar>
   </v-row>
 </template>

packages/docs/src/examples/v-avatar/prop-tile.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="text-center">
     <v-avatar
-      tile
+      rounded="0"
       color="blue"
     >
-      <v-icon dark>
+      <v-icon>
         mdi-alarm
       </v-icon>
     </v-avatar>

packages/docs/src/examples/v-avatar/slot-default.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row justify="space-around">
-    <v-avatar color="indigo">
-      <v-icon dark>
+    <v-avatar color="info">
+      <v-icon>
         mdi-account-circle
       </v-icon>
     </v-avatar>

packages/docs/src/pages/en/components/avatars.md

@@ -29,21 +29,21 @@ Avatars in their simplest form display content within a circular container.
 
 #### Size
 
-The `size` prop allows you to define the height and width of `v-avatar`. This prop scales both evenly with an aspect ratio of 1. `height` and `width` props will override this prop.
+The `size` prop allows you to change the height and width of `v-avatar`.
 
 <example file="v-avatar/prop-size" />
 
 #### Tile
 
-The `tile` prop removes the border radius from v-avatar leaving you with a simple square avatar.
+The `rounded` prop can be used to remove the border radius from v-avatar leaving you with a simple square avatar.
 
 <example file="v-avatar/prop-tile" />
 
 ### Slots
 
 #### Default
 
-The `v-avatar` default slot will accept the `v-icon` component, an image, or text. Mix and match these with other props to create something unique.
+The `v-avatar` default slot allows you to render content such as `v-icon` components, images, or text. Mix and match these with other props to create something unique.
 
 <example file="v-avatar/slot-default" />
 

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

@@ -5,18 +5,17 @@
   border-radius: $avatar-border-radius
   display: inline-flex
   justify-content: center
-  line-height: normal
+  line-height: $avatar-line-height
+  overflow: hidden
   position: relative
   text-align: center
-  vertical-align: middle
-  overflow: hidden
+  vertical-align: $avatar-vertical-align
 
-  img,
-  svg,
-  .v-icon,
-  .v-image,
-  .v-responsive__content
+  > *
     border-radius: inherit
-    display: inline-flex
-    height: inherit
     width: inherit
+
+  @each $name in $sizes
+    &--size-#{$name}
+      height: map-get($avatar-sizes, $name)
+      width: map-get($avatar-sizes, $name)

packages/vuetify/src/components/VAvatar/VAvatar.tsx

@@ -0,0 +1,51 @@
+// Styles
+import './VAvatar.sass'
+
+// Composables
+import { makeBorderRadiusProps, useBorderRadius } from '@/composables/border-radius'
+import { makeSizeProps, useSize } from '@/composables/size'
+import { makeTagProps } from '@/composables/tag'
+import { useBackgroundColor } from '@/composables/color'
+
+// Utilities
+import { defineComponent, toRef } from 'vue'
+
+export default defineComponent({
+  name: 'VAvatar',
+
+  props: {
+    ...makeBorderRadiusProps(),
+    ...makeSizeProps(),
+    ...makeTagProps(),
+    color: String,
+    left: Boolean,
+    right: Boolean,
+  },
+
+  setup (props, { slots }) {
+    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
+    const { borderRadiusClasses } = useBorderRadius(props)
+    const { sizeClasses, sizeStyles } = useSize(props, 'v-avatar')
+
+    return () => (
+      <props.tag
+        class={[
+          'v-avatar',
+          {
+            'v-avatar--left': props.left,
+            'v-avatar--right': props.right,
+          },
+          backgroundColorClasses.value,
+          borderRadiusClasses.value,
+          sizeClasses.value,
+        ]}
+        style={[
+          backgroundColorStyles.value,
+          sizeStyles.value,
+        ]}
+      >
+        { slots.default?.() }
+      </props.tag>
+    )
+  },
+})

packages/vuetify/src/components/VAvatar/__tests__/VAvatar.spec.ts

@@ -1,38 +1,25 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Libraries
-// import Vue from 'vue'
-
 // Components
-// import VAvatar from '../VAvatar'
+import { VAvatar } from '..'
 
 // Utilities
-import {
-  createLocalVue,
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
-
-describe.skip('VAvatar', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let localVue: typeof Vue
-
-  beforeEach(() => {
-    localVue = createLocalVue()
-
-    mountFunction = (options = {}) => {
-      return mount(VAvatar, {
-        localVue,
-        ...options,
-      })
-    }
-  })
-
-  it('should have an v-avatar class', () => {
+import { createVuetify } from '@/framework'
+import { mount } from '@vue/test-utils'
+
+describe('VAvatar', () => {
+  const vuetify = createVuetify()
+
+  function mountFunction (options = {}) {
+    return mount(VAvatar, {
+      global: {
+        plugins: [vuetify],
+      },
+      ...options,
+    })
+  }
+
+  it('should match a snapshot', () => {
     const wrapper = mountFunction()
 
-    expect(wrapper.classes()).toContain('v-avatar')
     expect(wrapper.html()).toMatchSnapshot()
   })
 })

packages/vuetify/src/components/VAvatar/__tests__/__snapshots__/VAvatar.spec.ts.snap

@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VAvatar should have an v-avatar class 1`] = `
-<div class="v-avatar"
-     style="height: 48px; min-width: 48px; width: 48px;"
->
+exports[`VAvatar should match a snapshot 1`] = `
+<div class="v-avatar v-avatar--size-default">
 </div>
 `;

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

@@ -1,3 +1,17 @@
 @import '../../styles/styles.sass';
 
 $avatar-border-radius: 50% !default;
+$avatar-line-height: normal !default;
+$avatar-vertical-align: middle !default;
+
+$avatar-sizes: () !default;
+$avatar-sizes: map-deep-merge(
+  (
+    'x-small': 32px,
+    'small': 40px,
+    'default': 48px,
+    'large': 56px,
+    'x-large': 64px,
+  ),
+  $avatar-sizes
+);

packages/vuetify/src/components/VAvatar/index.ts

@@ -1,4 +1 @@
-import VAvatar from './VAvatar'
-
-export { VAvatar }
-export default VAvatar
+export { default as VAvatar } from './VAvatar'

packages/vuetify/src/components/VIcon/VIcon.tsx

@@ -1,17 +1,17 @@
 // Styles
 import './VIcon.sass'
 
-// Utilities
-import { computed, ComputedRef, defineComponent, toRef } from 'vue'
-import { convertToUnit, flattenFragments } from '@/util'
-import makeProps from '@/util/makeProps'
-
 // Composables
 import { makeSizeProps, useSize } from '@/composables/size'
-import { useIcon } from '@/composables/icons'
 import { makeTagProps } from '@/composables/tag'
+import { useIcon } from '@/composables/icons'
 import { useTextColor } from '@/composables/color'
 
+// Utilities
+import { computed, ComputedRef, defineComponent, toRef } from 'vue'
+import { convertToUnit, flattenFragments } from '@/util'
+import makeProps from '@/util/makeProps'
+
 // Types
 import type { IconValue } from '@/composables/icons'
 import type { PropType } from 'vue'

packages/vuetify/src/components/index.ts

@@ -2,7 +2,7 @@ export * from './VApp'
 // export * from './VAppBar'
 // export * from './VAlert'
 // export * from './VAutocomplete'
-// export * from './VAvatar'
+export * from './VAvatar'
 // export * from './VBadge'
 export * from './VBanner'
 // export * from './VBottomNavigation'

packages/vuetify/src/composables/__tests__/size.spec.ts

@@ -9,9 +9,25 @@ describe('size', () => {
     [{ size: 'x-large' }, 'test--size-x-large'],
     [{ size: '100px' }, null],
     [{ size: 100 }, null],
+    [{ size: undefined }, null],
   ] as const)('should return the correct class given value %p', (input, expected) => {
     const { sizeClasses } = useSize(input, 'test')
 
     expect(sizeClasses.value).toStrictEqual(expected)
   })
+
+  it.each([
+    [{ size: 'x-small' }, null],
+    [{ size: 'small' }, null],
+    [{ size: 'default' }, null],
+    [{ size: 'large' }, null],
+    [{ size: 'x-large' }, null],
+    [{ size: '100px' }, { width: '100px', height: '100px' }],
+    [{ size: 50 }, { width: '50px', height: '50px' }],
+    [{ size: undefined }, null],
+  ] as const)('should return the correct styles given value %p', (input, expected) => {
+    const { sizeStyles } = useSize(input, 'test')
+
+    expect(sizeStyles.value).toStrictEqual(expected)
+  })
 })