[Bug Report] VAvatar inside small VChip is not sized properly

[Dylan-Chapman]

Environment

Vuetify Version: 2.0.2
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

Create a VChip component with the small prop and a child VAvatar

Expected Behavior

VAvatar has spacing between itself and the edge of the VChip just like it does when the small prop isn't set

Actual Behavior

VAvatar goes to the edge of the VChip

Reproduction Link

https://codepen.io/Dylan-Chapman/pen/QedyQg

Other comments

This also can't be fixed by setting the VAvatar's size prop because of !important style declarations.

[Dylan-Chapman]

Don't know if it's worth making a separate issue over, but VAvatar is also over-sized when the VChip has both small and pill props set.

[jacekkarczmarczyk]

You can add this other issue to the codepen

[Dylan-Chapman]

The codepen has been updated to show both of these issues.

[dsseng]

The problem is present with any non-default sizes:

Codepen: https://codepen.io/sh7dm/pen/KOXdBe
Playground:

<template>
  <v-container>
    <v-layout justify-space-around wrap align-space-around>
      <v-flex>
        <v-chip x-small>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip x-small pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>

      <v-flex>
        <v-chip small>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip small pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>

      <v-flex>
        <v-chip>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>

      <v-flex>
        <v-chip large>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip large pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>

      <v-flex>
        <v-chip x-large>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip x-large pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data: () => ({
  })
}
</script>

[dsseng]

also I noticed that avatar is positioned incorrectly

[bykka]

@sh7dm for some cases helps property "left" for v-avatar.
<v-avatar left>...

[johnleider]

resolved by #13192

If you have any questions, please reach out to us in our Discord community.