Skip to content

Commit

Permalink
fix(avatars): image backgrounds and grouped icon and image sizes (#3349)
Browse files Browse the repository at this point in the history 
* fix(avatars): image backgrounds and grouped icon and image sizes

* chore: pr feedback
  • Loading branch information
@SiTaggart
SiTaggart authored Jul 26, 2023
1 parent 3c8e02a commit 9385196
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 36 deletions.
6 changes: 6 additions & 0 deletions .changeset/yellow-hounds-add.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@twilio-paste/avatar': patch
'@twilio-paste/core': patch
---

[Avatar]: set transparent background color for image based avatars so that transparent images are displayed as such. Also fix setting the size of icon and image avatars when placed in a group
Binary file added .storybook/static/avatars/avatar5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .storybook/static/avatars/avatar6.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .storybook/static/avatars/avatar7.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .storybook/static/avatars/avatar8.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 12 additions & 24 deletions packages/paste-core/components/avatar/src/Avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,30 +55,35 @@ const AvatarContents: React.FC<React.PropsWithChildren<AvatarContentProps>> = ({

AvatarContents.displayName = 'AvatarContents';

const colorVariants: Record<ColorVariants, BoxStyleProps> = {
const colorPropStyles: Record<ColorVariants, BoxStyleProps> = {
default: {
backgroundColor: 'colorBackgroundUser',
boxShadow: 'shadowBorderUser',
color: 'colorTextUser',
},
decorative10: {
backgroundColor: 'colorBackgroundDecorative10Weakest',
boxShadow: 'shadowBorderDecorative10Weaker',
color: 'colorTextDecorative10',
},
decorative20: {
backgroundColor: 'colorBackgroundDecorative20Weakest',
boxShadow: 'shadowBorderDecorative20Weaker',
color: 'colorTextDecorative20',
},
decorative30: {
backgroundColor: 'colorBackgroundDecorative30Weakest',
boxShadow: 'shadowBorderDecorative30Weaker',
color: 'colorTextDecorative30',
},
decorative40: {
backgroundColor: 'colorBackgroundDecorative40Weakest',
boxShadow: 'shadowBorderDecorative40Weaker',
color: 'colorTextDecorative40',
},
};

const variants: Record<AvatarVariants, BoxStyleProps> = {
const variantStyles: Record<AvatarVariants, BoxStyleProps> = {
user: {
borderRadius: 'borderRadiusCircle',
},
Expand All @@ -87,24 +92,6 @@ const variants: Record<AvatarVariants, BoxStyleProps> = {
},
};

const shadowVariants: Record<ColorVariants, BoxStyleProps> = {
default: {
boxShadow: 'shadowBorderUser',
},
decorative10: {
boxShadow: 'shadowBorderDecorative10Weaker',
},
decorative20: {
boxShadow: 'shadowBorderDecorative20Weaker',
},
decorative30: {
boxShadow: 'shadowBorderDecorative30Weaker',
},
decorative40: {
boxShadow: 'shadowBorderDecorative40Weaker',
},
};

export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
({name, size = DEFAULT_SIZE, element = 'AVATAR', src, icon, color = 'default', variant = 'user', ...props}, ref) => {
if (name === undefined) {
Expand All @@ -123,11 +110,12 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
flexShrink={0}
ref={ref}
size={groupSize || size}
{...(src ? undefined : shadowVariants[color])}
{...colorVariants[color]}
{...variants[groupVariant || variant]}
{...colorPropStyles[color]}
{...variantStyles[groupVariant || variant]}
// when its an image set specific styles that are unrelated to color or variants
{...(src && {backgroundColor: 'colorBackgroundBody', boxShadow: 'shadowBorderWeaker'})}
>
<AvatarContents name={name} size={size} icon={icon} src={src} />
<AvatarContents name={name} size={groupSize || size} icon={icon} src={src} />
</Box>
);
}
Expand Down
171 changes: 159 additions & 12 deletions packages/paste-core/components/avatar/stories/index.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,33 @@ export const Initials = (): React.ReactNode => {

export const Image = (): React.ReactNode => {
return (
<Stack orientation="horizontal" spacing="space40">
<Avatar size="sizeIcon10" name="avatar example" src="./avatars/avatar-sizeIcon10.png" />
<Avatar size="sizeIcon20" name="avatar example" src="./avatars/avatar-sizeIcon20.png" />
<Avatar size="sizeIcon30" name="avatar example" src="./avatars/avatar-sizeIcon30.png" />
<Avatar size="sizeIcon40" name="avatar example" src="./avatars/avatar-sizeIcon40.png" />
<Avatar size="sizeIcon50" name="avatar example" src="./avatars/avatar-sizeIcon50.png" />
<Avatar size="sizeIcon60" name="avatar example" src="./avatars/avatar-sizeIcon60.png" />
<Avatar size="sizeIcon70" name="avatar example" src="./avatars/avatar-sizeIcon70.png" />
<Avatar size="sizeIcon80" name="avatar example" src="./avatars/avatar-sizeIcon80.png" />
<Avatar size="sizeIcon90" name="avatar example" src="./avatars/avatar-sizeIcon90.png" />
<Avatar size="sizeIcon100" name="avatar example" src="./avatars/avatar-sizeIcon100.png" />
<Avatar size="sizeIcon110" name="avatar example" src="./avatars/avatar-sizeIcon110.png" />
<Stack orientation="vertical" spacing="space20">
<Stack orientation="horizontal" spacing="space40">
<Avatar size="sizeIcon10" name="avatar example" src="./avatars/avatar-sizeIcon10.png" />
<Avatar size="sizeIcon20" name="avatar example" src="./avatars/avatar-sizeIcon20.png" />
<Avatar size="sizeIcon30" name="avatar example" src="./avatars/avatar-sizeIcon30.png" />
<Avatar size="sizeIcon40" name="avatar example" src="./avatars/avatar-sizeIcon40.png" />
<Avatar size="sizeIcon50" name="avatar example" src="./avatars/avatar-sizeIcon50.png" />
<Avatar size="sizeIcon60" name="avatar example" src="./avatars/avatar-sizeIcon60.png" />
<Avatar size="sizeIcon70" name="avatar example" src="./avatars/avatar-sizeIcon70.png" />
<Avatar size="sizeIcon80" name="avatar example" src="./avatars/avatar-sizeIcon80.png" />
<Avatar size="sizeIcon90" name="avatar example" src="./avatars/avatar-sizeIcon90.png" />
<Avatar size="sizeIcon100" name="avatar example" src="./avatars/avatar-sizeIcon100.png" />
<Avatar size="sizeIcon110" name="avatar example" src="./avatars/avatar-sizeIcon110.png" />
</Stack>
<Stack orientation="horizontal" spacing="space40">
<Avatar variant="entity" size="sizeIcon10" name="avatar example" src="./avatars/avatar5.png" />
<Avatar variant="entity" size="sizeIcon20" name="avatar example" src="./avatars/avatar6.png" />
<Avatar variant="entity" size="sizeIcon30" name="avatar example" src="./avatars/avatar7.png" />
<Avatar variant="entity" size="sizeIcon40" name="avatar example" src="./avatars/avatar8.png" />
<Avatar variant="entity" size="sizeIcon50" name="avatar example" src="./avatars/avatar5.png" />
<Avatar variant="entity" size="sizeIcon60" name="avatar example" src="./avatars/avatar6.png" />
<Avatar variant="entity" size="sizeIcon70" name="avatar example" src="./avatars/avatar7.png" />
<Avatar variant="entity" size="sizeIcon80" name="avatar example" src="./avatars/avatar8.png" />
<Avatar variant="entity" size="sizeIcon90" name="avatar example" src="./avatars/avatar5.png" />
<Avatar variant="entity" size="sizeIcon100" name="avatar example" src="./avatars/avatar6.png" />
<Avatar variant="entity" size="sizeIcon110" name="avatar example" src="./avatars/avatar7.png" />
</Stack>
</Stack>
);
};
Expand Down Expand Up @@ -212,6 +227,138 @@ export const Grouped = (): React.ReactNode => {
);
};

export const GroupedImage = (): React.ReactNode => {
return (
<Stack orientation="horizontal" spacing="space50">
<Stack orientation="vertical" spacing="space30">
<AvatarGroup size="sizeIcon30" variant="user">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
<AvatarGroup size="sizeIcon70" variant="user">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
<AvatarGroup size="sizeIcon90" variant="user">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
<AvatarGroup size="sizeIcon100" variant="user">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
<AvatarGroup size="sizeIcon110" variant="user">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
</Stack>
<Stack orientation="vertical" spacing="space30">
<AvatarGroup size="sizeIcon30" variant="entity">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
<AvatarGroup size="sizeIcon70" variant="entity">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
<AvatarGroup size="sizeIcon90" variant="entity">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
<AvatarGroup size="sizeIcon100" variant="entity">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
<AvatarGroup size="sizeIcon110" variant="entity">
<Avatar name="avatar example" src="./avatars/avatar5.png" />
<Avatar name="avatar example" src="./avatars/avatar6.png" />
<Avatar name="avatar example" src="./avatars/avatar7.png" />
<Avatar name="avatar example" src="./avatars/avatar8.png" />
</AvatarGroup>
</Stack>
</Stack>
);
};

export const GroupedIcon = (): React.ReactNode => {
return (
<Stack orientation="horizontal" spacing="space50">
<Stack orientation="vertical" spacing="space30">
<AvatarGroup size="sizeIcon30" variant="user">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
<AvatarGroup size="sizeIcon70" variant="user">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
<AvatarGroup size="sizeIcon90" variant="user">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
<AvatarGroup size="sizeIcon100" variant="user">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
<AvatarGroup size="sizeIcon110" variant="user">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
</Stack>
<Stack orientation="vertical" spacing="space30">
<AvatarGroup size="sizeIcon30" variant="entity">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
<AvatarGroup size="sizeIcon70" variant="entity">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
<AvatarGroup size="sizeIcon90" variant="entity">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
<AvatarGroup size="sizeIcon100" variant="entity">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
<AvatarGroup size="sizeIcon110" variant="entity">
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
<Avatar name="avatar example" icon={UserIcon} />
</AvatarGroup>
</Stack>
</Stack>
);
};

export const GroupedUsingContext = (): React.ReactNode => {
return (
<AvatarGroup size="sizeIcon70" variant="entity">
Expand Down

0 comments on commit 9385196

Please sign in to comment.