diff --git a/src/components.d.ts b/src/components.d.ts index 42a1fd7c9..a8f634872 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -44,7 +44,7 @@ export namespace Components { /** * Initials to use as a fallback when no image is available (1-2 characters max recommended). */ - "shape": 'circle' | 'square'; + "shape": 'circle' | 'square' | 'rounded'; } interface SlBadge { /** @@ -1086,7 +1086,7 @@ declare namespace LocalJSX { /** * Initials to use as a fallback when no image is available (1-2 characters max recommended). */ - "shape"?: 'circle' | 'square'; + "shape"?: 'circle' | 'square' | 'rounded'; } interface SlBadge { /** diff --git a/src/components/avatar/avatar.scss b/src/components/avatar/avatar.scss index 226781f3d..c736a829e 100644 --- a/src/components/avatar/avatar.scss +++ b/src/components/avatar/avatar.scss @@ -31,10 +31,14 @@ border-radius: var(--sl-border-radius-circle); } -.avatar--square { +.avatar--rounded { border-radius: var(--sl-border-radius-medium); } +.avatar--square { + border-radius: 0; +} + .avatar__icon { display: flex; align-items: center; diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index 59e8cf685..05f9dad18 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -29,7 +29,7 @@ export class Avatar { @Prop() initials = ''; /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */ - @Prop() shape: 'circle' | 'square' = 'circle'; + @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle'; handleImageError() { this.hasError = true; @@ -43,6 +43,7 @@ export class Avatar { class={{ avatar: true, 'avatar--circle': this.shape === 'circle', + 'avatar--rounded': this.shape === 'rounded', 'avatar--square': this.shape === 'square' }} >