Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(VList): apply avatar spacing to badge:has(avatar) #20588

Merged

Conversation

zaviermiller
Copy link
Contributor

fixes #20573

Description

I added new selectors targeting an avatar within a badge in the VListItem. These new selectors will ensure consistent spacing between list item content and an avatar when the avatar is wrapped in a badge.

Markup:

<template>
  <!-- Prepend slot -->
  <v-list>
    <v-list-item title="Zavier Miller">
      <template #prepend>
        <v-avatar>ZM</v-avatar>
      </template>
    </v-list-item>
    <v-list-item title="Zavier Miller">
      <template #prepend>
        <v-badge dot bordered color="primary">
          <v-avatar>ZM</v-avatar>
        </v-badge>
      </template>
    </v-list-item>
  </v-list>

  <!-- Append slot -->
  <v-list>
    <v-list-item title="Zavier Miller">
      <template #append>
        <v-avatar>ZM</v-avatar>
      </template>
    </v-list-item>
    <v-list-item title="Zavier Miller">
      <template #append>
        <v-badge dot bordered color="primary">
          <v-avatar>ZM</v-avatar>
        </v-badge>
      </template>
    </v-list-item>
  </v-list>

  <!-- Slim list with prepend -->
  <v-list>
    <v-list-item slim title="Zavier Miller">
      <template #prepend>
        <v-avatar>ZM</v-avatar>
      </template>
    </v-list-item>
    <v-list-item slim title="Zavier Miller">
      <template #prepend>
        <v-badge dot bordered color="primary">
          <v-avatar>ZM</v-avatar>
        </v-badge>
      </template>
    </v-list-item>
  </v-list>

  <!-- Slim list with append -->
  <v-list>
    <v-list-item slim title="Zavier Miller">
      <template #append>
        <v-avatar>ZM</v-avatar>
      </template>
    </v-list-item>
    <v-list-item slim title="Zavier Miller">
      <template #append>
        <v-badge dot bordered color="primary">
          <v-avatar>ZM</v-avatar>
        </v-badge>
      </template>
    </v-list-item>
  </v-list>
</template>

@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VListItem VListItem labels Oct 28, 2024
:has() support is still limited, :is() allows us to use it without breaking the entire selector
@KaelWD KaelWD added this to the v3.7.x milestone Nov 6, 2024
@KaelWD KaelWD merged commit 0ac22b5 into vuetifyjs:master Nov 6, 2024
5 checks passed
@KaelWD KaelWD changed the title fix(VListItem): fix avatar-badge spacing fix(VList): apply avatar spacing to badge:has(avatar) Nov 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VListItem VListItem T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.7.2] Badge over avatar in list item prepend slot causes inconsistent spacing
3 participants