feat(VAvatar): add border prop support

vuetifyjs · May 6, 2024 · 9dbc30a · 9dbc30a
1 parent 6aea5e4
commit 9dbc30a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.sass b/packages/vuetify/src/components/VAvatar/VAvatar.sass
@@ -19,6 +19,7 @@
 
     @include avatar-sizes($avatar-sizes)
     @include avatar-density(('height', 'width'), $avatar-density)
+    @include tools.border($avatar-border...)
     @include tools.rounded($avatar-border-radius)
     @include tools.variant($avatar-variants...)
 

diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.tsx b/packages/vuetify/src/components/VAvatar/VAvatar.tsx
@@ -7,6 +7,7 @@ import { VIcon } from '@/components/VIcon'
 import { VImg } from '@/components/VImg'
 
 // Composables
+import { makeBorderProps, useBorder } from '@/composables/border'
 import { makeComponentProps } from '@/composables/component'
 import { makeDensityProps, useDensity } from '@/composables/density'
 import { IconValue } from '@/composables/icons'
@@ -26,6 +27,7 @@ export const makeVAvatarProps = propsFactory({
   image: String,
   text: String,
 
+  ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
@@ -42,6 +44,7 @@ export const VAvatar = genericComponent()({
 
   setup (props, { slots }) {
     const { themeClasses } = provideTheme(props)
+    const { borderClasses } = useBorder(props)
     const { colorClasses, colorStyles, variantClasses } = useVariant(props)
     const { densityClasses } = useDensity(props)
     const { roundedClasses } = useRounded(props)
@@ -56,6 +59,7 @@ export const VAvatar = genericComponent()({
             'v-avatar--end': props.end,
           },
           themeClasses.value,
+          borderClasses.value,
           colorClasses.value,
           densityClasses.value,
           roundedClasses.value,

diff --git a/packages/vuetify/src/components/VAvatar/_variables.scss b/packages/vuetify/src/components/VAvatar/_variables.scss
@@ -1,10 +1,16 @@
 @use "sass:map";
+@use '../../styles/settings';
 @use "../../styles/settings/variables";
 @use "../../styles/tools/functions";
 
 // Defaults
 $avatar-background: var(--v-theme-surface) !default;
 $avatar-border-radius: map.get(variables.$rounded, 'circle') !default;
+$avatar-border-color: settings.$border-color-root !default;
+$avatar-border-radius: map.get(settings.$rounded, 0) !default;
+$avatar-border-style: settings.$border-style-root !default;
+$avatar-border-thin-width: thin !default;
+$avatar-border-width: thin !default;
 $avatar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
 $avatar-elevation: 1 !default;
@@ -26,6 +32,13 @@ $avatar-sizes: functions.map-deep-merge(
   $avatar-sizes
 );
 
+$avatar-border: (
+  $avatar-border-color,
+  $avatar-border-style,
+  $avatar-border-width,
+  $avatar-border-thin-width
+) !default;
+
 $avatar-variants: (
   $avatar-background,
   $avatar-color,