From ccc5f02923efbaf8689ea662b798c07fa784c9cc Mon Sep 17 00:00:00 2001 From: Joe Oak <41307427+joeoak@users.noreply.github.com> Date: Wed, 9 Apr 2025 20:06:49 +0000 Subject: [PATCH 1/4] Evenly space avatars --- packages/react/src/AvatarStack/AvatarStack.module.css | 5 +---- packages/react/src/AvatarStack/AvatarStack.tsx | 4 +--- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 7d56ca962de..b387bdeb3d4 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -1,8 +1,7 @@ /* stylelint-disable selector-max-specificity */ .AvatarStack { --avatar-border-width: 1px; - --overlap-size: calc(var(--avatar-stack-size) * 0.55); - --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85); + --overlap-size: calc(var(--avatar-stack-size) * 0.5); --mask-size: calc(100% + (var(--avatar-border-width) * 2)); --mask-start: -1; --opacity-step: 15%; @@ -135,8 +134,6 @@ } &:nth-child(n + 3) { - --overlap-size: var(--overlap-size-avatar-three-plus); - /* stylelint-disable-next-line alpha-value-notation */ opacity: calc(100% - 2 * var(--opacity-step)); } diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index b147a11208d..f6ac2b70a42 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -29,8 +29,7 @@ const AvatarStackWrapper = toggleStyledComponent( 'span', styled.span` --avatar-border-width: 1px; - --overlap-size: calc(var(--avatar-stack-size) * 0.55); - --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85); + --overlap-size: calc(var(--avatar-stack-size) * 0.5); --mask-size: calc(100% + (var(--avatar-border-width) * 2)); --mask-start: -1; --opacity-step: 15%; @@ -92,7 +91,6 @@ const AvatarStackWrapper = toggleStyledComponent( } &:nth-child(n + 3) { - --overlap-size: var(--overlap-size-avatar-three-plus); opacity: calc(100% - 2 * var(--opacity-step)); } From 64c7e68477f78a5a5fc50b6559a68bfc112d5a23 Mon Sep 17 00:00:00 2001 From: Joe Oak <41307427+joeoak@users.noreply.github.com> Date: Wed, 9 Apr 2025 20:13:24 +0000 Subject: [PATCH 2/4] Remove progressive fade effect --- .../react/src/AvatarStack/AvatarStack.module.css | 16 ---------------- packages/react/src/AvatarStack/AvatarStack.tsx | 13 ------------- 2 files changed, 29 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index b387bdeb3d4..ac83914a626 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -4,7 +4,6 @@ --overlap-size: calc(var(--avatar-stack-size) * 0.5); --mask-size: calc(100% + (var(--avatar-border-width) * 2)); --mask-start: -1; - --opacity-step: 15%; position: relative; display: flex; @@ -133,21 +132,6 @@ padding: 0.1px; } - &:nth-child(n + 3) { - /* stylelint-disable-next-line alpha-value-notation */ - opacity: calc(100% - 2 * var(--opacity-step)); - } - - &:nth-child(n + 4) { - /* stylelint-disable-next-line alpha-value-notation */ - opacity: calc(100% - 3 * var(--opacity-step)); - } - - &:nth-child(n + 5) { - /* stylelint-disable-next-line alpha-value-notation */ - opacity: calc(100% - 4 * var(--opacity-step)); - } - &:nth-child(n + 6) { visibility: hidden; opacity: 0; diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index f6ac2b70a42..2e5aa1d62e6 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -32,7 +32,6 @@ const AvatarStackWrapper = toggleStyledComponent( --overlap-size: calc(var(--avatar-stack-size) * 0.5); --mask-size: calc(100% + (var(--avatar-border-width) * 2)); --mask-start: -1; - --opacity-step: 15%; display: flex; position: relative; @@ -90,18 +89,6 @@ const AvatarStackWrapper = toggleStyledComponent( padding: 0.1px; } - &:nth-child(n + 3) { - opacity: calc(100% - 2 * var(--opacity-step)); - } - - &:nth-child(n + 4) { - opacity: calc(100% - 3 * var(--opacity-step)); - } - - &:nth-child(n + 5) { - opacity: calc(100% - 4 * var(--opacity-step)); - } - &:nth-child(n + 6) { opacity: 0; visibility: hidden; From 0bdaa7dc0a491d3fa2924386934a30c9ef493886 Mon Sep 17 00:00:00 2001 From: Joe Oak <41307427+joeoak@users.noreply.github.com> Date: Wed, 9 Apr 2025 20:35:44 +0000 Subject: [PATCH 3/4] Update min-width logic --- .../react/src/AvatarStack/AvatarStack.module.css | 16 ++++------------ packages/react/src/AvatarStack/AvatarStack.tsx | 16 ++++------------ 2 files changed, 8 insertions(+), 24 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index ac83914a626..aa2ebd2f627 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -45,26 +45,18 @@ /* MIN-WIDTH CALC FORMULA EXPLAINED: avatar size ➡️ var(--avatar-stack-size) - plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) - plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) + plus the visible part of the 2nd and 3rd avatars ➡️ (var(--avatar-stack-size) - var(--overlap-size)) * 2 */ - min-width: calc( - var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + - (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) - ); + min-width: calc(var(--avatar-stack-size) + ((var(--avatar-stack-size) - var(--overlap-size)) * 2)); } &:where([data-avatar-count='3+']) { /* MIN-WIDTH CALC FORMULA EXPLAINED: avatar size ➡️ var(--avatar-stack-size) - plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) - plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 + plus the visible part of the 2nd, 3rd, and 4th avatars ➡️ (var(--avatar-stack-size) - var(--overlap-size)) * 3 */ - min-width: calc( - var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + - (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 - ); + min-width: calc(var(--avatar-stack-size) + ((var(--avatar-stack-size) - var(--overlap-size)) * 3)); } &:where([data-align-right]) { diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 2e5aa1d62e6..28ed2e6893e 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -105,23 +105,15 @@ const AvatarStackWrapper = toggleStyledComponent( &.pc-AvatarStack--three { // MIN-WIDTH CALC FORMULA EXPLAINED: // avatar size ➡️ var(--avatar-stack-size) - // plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) - // plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) - min-width: calc( - var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + - (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) - ); + // plus the visible part of the 2nd and 3rd avatars ➡️ (var(--avatar-stack-size) - var(--overlap-size)) * 2 + min-width: calc(var(--avatar-stack-size) + ((var(--avatar-stack-size) - var(--overlap-size)) * 2)); } &.pc-AvatarStack--three-plus { // MIN-WIDTH CALC FORMULA EXPLAINED: // avatar size ➡️ var(--avatar-stack-size) - // plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) - // plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 - min-width: calc( - var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + - (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 - ); + // plus the visible part of the 2nd, 3rd, and 4th avatars ➡️ (var(--avatar-stack-size) - var(--overlap-size)) * 3 + min-width: calc(var(--avatar-stack-size) + ((var(--avatar-stack-size) - var(--overlap-size)) * 3)); } &.pc-AvatarStack--right { From 5ea313bd26d50a1d636a89a5ce4faf80baa3d5db Mon Sep 17 00:00:00 2001 From: Joe Oak <41307427+joeoak@users.noreply.github.com> Date: Wed, 9 Apr 2025 20:43:57 +0000 Subject: [PATCH 4/4] Add transition for visibility --- packages/react/src/AvatarStack/AvatarStack.module.css | 3 ++- packages/react/src/AvatarStack/AvatarStack.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index aa2ebd2f627..4fc90de88b3 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -88,7 +88,8 @@ margin 0.2s ease-in-out, opacity 0.2s ease-in-out, mask-position 0.2s ease-in-out, - mask-size 0.2s ease-in-out; + mask-size 0.2s ease-in-out, + visibility 0.2s ease-in-out; &:is(img) { /* stylelint-disable-next-line primer/box-shadow */ diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 28ed2e6893e..446ab734632 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -58,7 +58,8 @@ const AvatarStackWrapper = toggleStyledComponent( margin 0.2s ease-in-out, opacity 0.2s ease-in-out, mask-position 0.2s ease-in-out, - mask-size 0.2s ease-in-out; + mask-size 0.2s ease-in-out, + visibility 0.2s ease-in-out; &:is(img) { box-shadow: 0 0 0 var(--avatar-border-width)