From d3df63d7c9c42d76f25bab1a911e16426a8885c6 Mon Sep 17 00:00:00 2001 From: Franck Date: Tue, 10 Oct 2023 12:34:09 -0400 Subject: [PATCH 1/5] 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: () => (
- + From 4bcead16719be51e2231d04713b8849c29d5d17e Mon Sep 17 00:00:00 2001 From: Franck Date: Wed, 11 Oct 2023 09:29:21 -0400 Subject: [PATCH 2/5] Feat(rebrand): Change UI of group remaindings and replace tokens by hopper --- packages/components/src/avatar/src/Avatar.css | 56 ++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/packages/components/src/avatar/src/Avatar.css b/packages/components/src/avatar/src/Avatar.css index 55be6b9e8..ff09eec6f 100644 --- a/packages/components/src/avatar/src/Avatar.css +++ b/packages/components/src/avatar/src/Avatar.css @@ -1,40 +1,43 @@ .o-ui-avatar { display: inline-flex; flex-shrink: 0; - border-radius: var(--o-ui-br-circular); + border-radius: var(--hop-shape-circle); overflow: hidden; } /* SIZES */ +.o-ui-avatar-xs, +.o-ui-avatar-sm, +.o-ui-avatar-md, +.o-ui-avatar-lg, +.o-ui-avatar-xl, +.o-ui-avatar-image { + aspect-ratio: 1/1; +} + .o-ui-avatar-xs { - width: var(--o-ui-sz-2); - height: var(--o-ui-sz-2); + width: 1rem; } .o-ui-avatar-sm { - width: var(--o-ui-sz-4); - height: var(--o-ui-sz-4); + width: 1.5rem; } .o-ui-avatar-md { - width: var(--o-ui-sz-5); - height: var(--o-ui-sz-5); + width: 2rem; } .o-ui-avatar-lg { - width: var(--o-ui-sz-7); - height: var(--o-ui-sz-7); + width: 3rem; } .o-ui-avatar-xl { - width: var(--o-ui-sz-9); - height: var(--o-ui-sz-9); + width: 4rem; } /* IMAGE */ .o-ui-avatar-image { width: 100%; - height: 100%; } /* TEXT */ @@ -55,28 +58,31 @@ align-items: center; } -.o-ui-avatar-group .o-ui-avatar { - border: 1px solid var(--o-ui-white); +.o-ui-avatar-group .o-ui-avatar:not(.o-ui-avatar-group-remainings) { + border: 1px solid var(--hop-neutral-surface); } -.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-xs:not(:first-child):not(.o-ui-avatar-group-remainings), +.o-ui-avatar-group .o-ui-avatar-sm:not(:first-child):not(.o-ui-avatar-group-remainings) { + margin-left: calc(var(--hop-space-inline-xs) * -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); +.o-ui-avatar-group .o-ui-avatar-md:not(:first-child):not(.o-ui-avatar-group-remainings), +.o-ui-avatar-group .o-ui-avatar-lg:not(:first-child):not(.o-ui-avatar-group-remainings), +.o-ui-avatar-group .o-ui-avatar-xl:not(:first-child):not(.o-ui-avatar-group-remainings) { + margin-left: calc(var(--hop-space-inline-sm) * -1); } /* GROUPS | REMAININGS */ .o-ui-avatar-group-remainings { - background-color: var(--o-ui-bg-alias-mid-break); + background-color: transparent; + margin-left: var(--hop-space-inline-sm); + width: auto; } .o-ui-avatar-group-remainings .o-ui-avatar-text { - color: var(--o-ui-text-alias-secondary); + color: var(--hop-neutral-text-weak); + font-weight: var(--hop-body-sm-semibold-font-weight); } /* GROUPS | REMAININGS | TOOLTIP */ @@ -92,9 +98,9 @@ } .o-ui-avatar-group-remainings-list-item:not(:last-child) { - margin-bottom: var(--o-ui-sp-2); + margin-bottom: var(--hop-space-stack-sm); } .o-ui-avatar-group-remainings-list-item-avatar { - margin-right: var(--o-ui-sp-2); + margin-right: var(--hop-space-stack-sm); } From f62ddb22f57aa57d30cce4bb1e28fc8616347202 Mon Sep 17 00:00:00 2001 From: Franck Date: Wed, 11 Oct 2023 09:46:37 -0400 Subject: [PATCH 3/5] Feat(rebrand): Fix chromatic error --- packages/components/src/listbox/src/ListboxOption.tsx | 2 +- packages/components/src/menu/src/MenuItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/listbox/src/ListboxOption.tsx b/packages/components/src/listbox/src/ListboxOption.tsx index be5c1ec1a..f82e54bf6 100644 --- a/packages/components/src/listbox/src/ListboxOption.tsx +++ b/packages/components/src/listbox/src/ListboxOption.tsx @@ -107,7 +107,7 @@ export function InnerListboxOption({ avatar: (avatarElement: ReactElement, slotElements: SlotElements) => { return { className: "o-ui-listbox-option-avatar", - size: isNil(slotElements.description) ? "2xs" : "sm" + size: isNil(slotElements.description) ? "xs" : "sm" }; }, description: { diff --git a/packages/components/src/menu/src/MenuItem.tsx b/packages/components/src/menu/src/MenuItem.tsx index 1ca417fab..dba25a5d8 100644 --- a/packages/components/src/menu/src/MenuItem.tsx +++ b/packages/components/src/menu/src/MenuItem.tsx @@ -62,7 +62,7 @@ export function InnerMenuItem({ avatar: (avatarElement: ReactElement, slotElements: SlotElements) => { return { className: "o-ui-menu-item-option-avatar", - size: isNil(slotElements.description) ? "2xs" : "md" + size: isNil(slotElements.description) ? "xs" : "md" }; }, description: { From 9bb6fc37f12cdd9187ad85566f6d2a8b9e9418c4 Mon Sep 17 00:00:00 2001 From: Franck Date: Wed, 11 Oct 2023 13:14:10 -0400 Subject: [PATCH 4/5] Feat(rebrand): Update calc() for avatar-group --- packages/components/src/avatar/src/Avatar.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/avatar/src/Avatar.css b/packages/components/src/avatar/src/Avatar.css index ff09eec6f..bbf654ece 100644 --- a/packages/components/src/avatar/src/Avatar.css +++ b/packages/components/src/avatar/src/Avatar.css @@ -64,13 +64,13 @@ .o-ui-avatar-group .o-ui-avatar-xs:not(:first-child):not(.o-ui-avatar-group-remainings), .o-ui-avatar-group .o-ui-avatar-sm:not(:first-child):not(.o-ui-avatar-group-remainings) { - margin-left: calc(var(--hop-space-inline-xs) * -1); + margin-left: calc(-1 * var(--hop-space-inline-xs)); } .o-ui-avatar-group .o-ui-avatar-md:not(:first-child):not(.o-ui-avatar-group-remainings), .o-ui-avatar-group .o-ui-avatar-lg:not(:first-child):not(.o-ui-avatar-group-remainings), .o-ui-avatar-group .o-ui-avatar-xl:not(:first-child):not(.o-ui-avatar-group-remainings) { - margin-left: calc(var(--hop-space-inline-sm) * -1); + margin-left: calc(-1 * var(--hop-space-inline-sm)); } /* GROUPS | REMAININGS */ From aa5d539a9d069b60322842b35099f379fd90a4f8 Mon Sep 17 00:00:00 2001 From: Franck Gaudin Date: Thu, 12 Oct 2023 09:34:22 -0400 Subject: [PATCH 5/5] Feat(rebrand): css simplification --- packages/components/src/avatar/src/Avatar.css | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/components/src/avatar/src/Avatar.css b/packages/components/src/avatar/src/Avatar.css index bbf654ece..6da2c14df 100644 --- a/packages/components/src/avatar/src/Avatar.css +++ b/packages/components/src/avatar/src/Avatar.css @@ -1,20 +1,12 @@ .o-ui-avatar { display: inline-flex; + aspect-ratio: 1/1; flex-shrink: 0; border-radius: var(--hop-shape-circle); overflow: hidden; } /* SIZES */ -.o-ui-avatar-xs, -.o-ui-avatar-sm, -.o-ui-avatar-md, -.o-ui-avatar-lg, -.o-ui-avatar-xl, -.o-ui-avatar-image { - aspect-ratio: 1/1; -} - .o-ui-avatar-xs { width: 1rem; }