From d3df63d7c9c42d76f25bab1a911e16426a8885c6 Mon Sep 17 00:00:00 2001 From: Franck Date: Tue, 10 Oct 2023 12:34:09 -0400 Subject: [PATCH] Feat(rebrand): Gave the Avatar component the new Brand --- .../src/avatar/docs/Avatar.stories.mdx | 4 +- packages/components/src/avatar/src/Avatar.css | 37 +++++++++++-------- packages/components/src/avatar/src/Avatar.tsx | 27 +++++--------- .../components/src/avatar/src/AvatarGroup.tsx | 6 +-- .../avatar/tests/chromatic/Avatar.stories.tsx | 10 +---- .../tests/chromatic/AvatarGroup.stories.tsx | 36 +----------------- 6 files changed, 37 insertions(+), 83 deletions(-) diff --git a/packages/components/src/avatar/docs/Avatar.stories.mdx b/packages/components/src/avatar/docs/Avatar.stories.mdx index 66a03a267..dbd91527f 100644 --- a/packages/components/src/avatar/docs/Avatar.stories.mdx +++ b/packages/components/src/avatar/docs/Avatar.stories.mdx @@ -68,13 +68,11 @@ An avatar component can vary in size. - - + - diff --git a/packages/components/src/avatar/src/Avatar.css b/packages/components/src/avatar/src/Avatar.css index 41912e4df..55be6b9e8 100644 --- a/packages/components/src/avatar/src/Avatar.css +++ b/packages/components/src/avatar/src/Avatar.css @@ -6,37 +6,27 @@ } /* SIZES */ -.o-ui-avatar-2xs { - width: var(--o-ui-sz-3); - height: var(--o-ui-sz-3); +.o-ui-avatar-xs { + width: var(--o-ui-sz-2); + height: var(--o-ui-sz-2); } -.o-ui-avatar-xs { +.o-ui-avatar-sm { width: var(--o-ui-sz-4); height: var(--o-ui-sz-4); } -.o-ui-avatar-sm { +.o-ui-avatar-md { width: var(--o-ui-sz-5); height: var(--o-ui-sz-5); } -.o-ui-avatar-md { - width: var(--o-ui-sz-6); - height: var(--o-ui-sz-6); -} - .o-ui-avatar-lg { width: var(--o-ui-sz-7); height: var(--o-ui-sz-7); } .o-ui-avatar-xl { - width: var(--o-ui-sz-8); - height: var(--o-ui-sz-8); -} - -.o-ui-avatar-2xl { width: var(--o-ui-sz-9); height: var(--o-ui-sz-9); } @@ -52,7 +42,7 @@ display: inline-flex; align-items: center; justify-content: center; - color: var(--o-ui-white); + color: rgba(var(--o-ui-black) / 0.75); width: 100%; height: 100%; background-color: transparent; @@ -65,6 +55,21 @@ align-items: center; } +.o-ui-avatar-group .o-ui-avatar { + border: 1px solid var(--o-ui-white); +} + +.o-ui-avatar-group .o-ui-avatar-xs:not(:first-child), +.o-ui-avatar-group .o-ui-avatar-sm:not(:first-child) { + margin-left: calc(var(--o-ui-sp-1) * -1); +} + +.o-ui-avatar-group .o-ui-avatar-md:not(:first-child), +.o-ui-avatar-group .o-ui-avatar-lg:not(:first-child), +.o-ui-avatar-group .o-ui-avatar-xl:not(:first-child) { + margin-left: calc(var(--o-ui-sp-2) * -1); +} + /* GROUPS | REMAININGS */ .o-ui-avatar-group-remainings { background-color: var(--o-ui-bg-alias-mid-break); diff --git a/packages/components/src/avatar/src/Avatar.tsx b/packages/components/src/avatar/src/Avatar.tsx index f3a222257..855112aa5 100644 --- a/packages/components/src/avatar/src/Avatar.tsx +++ b/packages/components/src/avatar/src/Avatar.tsx @@ -34,7 +34,7 @@ export interface InnerAvatarProps extends SlotProps, InternalProps, StyledCompon /** * An avatar can vary in size. */ - size?: ResponsiveProp<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">; + size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl">; /** * The url of a remote image or an image object. */ @@ -71,20 +71,14 @@ function AvatarImage({ } const O365InitialsColorsForName = [ - "#99B433", - "#6BA5E7", - "#E773BD", - "#00A300", - "#1E7145", - "#FF0097", - "#7E3878", - "#603CBA", - "#5E4B8B", - "#00ABA9", - "#2D89EF", - "#2B5797", - "#DA532C", - "#B91D47" + "#95B1FF", + "#A3D6CB", + "#FFBF92", + "#AAD89D", + "#9FD2F7", + "#EAC96D", + "#E5DED6", + "#FFBCB7" ]; function AvatarInitials({ "aria-label": ariaLabel, name, size }: Partial) { @@ -127,9 +121,8 @@ function AvatarInitials({ "aria-label": ariaLabel, name, size }: Partial; + size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl">; } interface RemainingAvatarsProps { avatars: ReactElement[]; - size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"; + size?: "xs" | "sm" | "md" | "lg" | "xl"; } function RemainingAvatars({ avatars, size, ...rest }: RemainingAvatarsProps) { @@ -109,7 +109,7 @@ export function InnerAvatarGroup({ { as, className: "o-ui-avatar-group", - gap: 1 as const, + gap: 0 as const, orientation: "horizontal" as const, ref: forwardedRef, wrap: wrapValue diff --git a/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx b/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx index e5d9af843..d864e455f 100644 --- a/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx +++ b/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx @@ -27,13 +27,11 @@ export const LocalImage: AvatarStory = { storyName: "local image", render: () => ( - - ) }; @@ -44,7 +42,7 @@ export const RemoteImage: AvatarStory = { chromatic: { delay: 500 } }, render: () => ( - + ) }; @@ -52,13 +50,11 @@ export const FailingRemoteSrc: AvatarStory = { storyName: "failing remote src", render: () => ( - - ) }; @@ -68,13 +64,11 @@ export const Initials: AvatarStory = { render: () => ( - - @@ -90,13 +84,11 @@ export const EmptySrc: AvatarStory = { storyName: "empty src", render: () => ( - - ) }; diff --git a/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx b/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx index fdbf71bfd..d78365af6 100644 --- a/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx +++ b/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx @@ -28,10 +28,6 @@ export const Default: AvatarGroupStory = { render: () => ( - - - - @@ -52,18 +48,8 @@ export const Default: AvatarGroupStory = { - - - - - - - - - - @@ -94,12 +80,6 @@ export const Default: AvatarGroupStory = { - - - - - - ) @@ -124,13 +104,6 @@ export const WithRemainings: AvatarGroupStory = { storyName: "with remainings", render: () => ( - - - - - - - @@ -166,13 +139,6 @@ export const WithRemainings: AvatarGroupStory = { - - - - - - - ) }; @@ -181,7 +147,7 @@ export const Overflow: AvatarGroupStory = { storyName: "overflow", render: () => (
- +