diff --git a/.changeset/hot-chicken-tickle.md b/.changeset/hot-chicken-tickle.md new file mode 100644 index 00000000000..d09a216a5a4 --- /dev/null +++ b/.changeset/hot-chicken-tickle.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png new file mode 100644 index 00000000000..f8d78736e97 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png new file mode 100644 index 00000000000..09f71271449 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png new file mode 100644 index 00000000000..89fbe8a0c83 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png new file mode 100644 index 00000000000..f8d78736e97 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png new file mode 100644 index 00000000000..f8d78736e97 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png new file mode 100644 index 00000000000..1f11f61e963 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png new file mode 100644 index 00000000000..379c2fd6974 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png new file mode 100644 index 00000000000..1f11f61e963 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png new file mode 100644 index 00000000000..1f11f61e963 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png differ diff --git a/e2e/components/AvatarStack.test.ts b/e2e/components/AvatarStack.test.ts index 8a3332d9371..066f1f3ff6c 100644 --- a/e2e/components/AvatarStack.test.ts +++ b/e2e/components/AvatarStack.test.ts @@ -43,6 +43,10 @@ const stories: Array<{title: string; id: string}> = [ title: 'SX Prop', id: 'components-avatarstack-dev--sx-prop', }, + { + title: 'With Link Wrappers', + id: 'components-avatarstack-dev--with-link-wrappers', + }, ] test.describe('AvatarStack', () => { diff --git a/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx b/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx index e1da2e33122..ed132a155ed 100644 --- a/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx @@ -2,6 +2,7 @@ import React from 'react' import type {Meta} from '@storybook/react' import AvatarStack from './AvatarStack' import Avatar from '../Avatar' +import Link from '../Link' export default { title: 'Components/AvatarStack/Dev', @@ -21,3 +22,20 @@ export const SxProp = () => ( ) + +export const WithLinkWrappers = () => ( + + + + + + + + + + + + + + +) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css new file mode 100644 index 00000000000..ea13c99ecae --- /dev/null +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -0,0 +1,190 @@ +/* stylelint-disable max-nesting-depth */ +/* stylelint-disable selector-max-specificity */ +.AvatarStack { + --avatar-border-width: 1px; + --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); + --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); + + position: relative; + display: flex; + min-width: var(--avatar-stack-size); + height: var(--avatar-stack-size); + + &:where([data-responsive]) { + @media screen and (--viewportRange-narrow) { + --avatar-stack-size: var(--stackSize-narrow); + } + + @media screen and (--viewportRange-regular) { + --avatar-stack-size: var(--stackSize-regular); + } + + @media screen and (--viewportRange-wide) { + --avatar-stack-size: var(--stackSize-wide); + } + } + + &:where([data-avatar-count='1']) { + .AvatarItem { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor); + } + } + + &:where([data-avatar-count='2']) { + /* this calc explained: */ + + /* 1. avatar size + the non-overlapping part of the second avatar */ + + /* 2. + the border widths of the first two avatars */ + min-width: calc( + var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width) + ); + } + + &:where([data-avatar-count='3']) { + /* this calc explained: */ + + /* 1. avatar size + the non-overlapping part of the second avatar */ + + /* 2. + the non-overlapping part of the third avatar */ + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) + ) + ); + } + + &:where([data-avatar-count='3+']) { + /* this calc explained: */ + + /* 1. avatar size + the non-overlapping part of the second avatar */ + + /* 2. + the non-overlapping part of the third and fourth avatar */ + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2 + ) + ); + } + + &:where([data-align-right]) { + justify-content: flex-end; + + .AvatarItem { + margin-left: 0 !important; + + &:first-child { + margin-right: 0; + } + + &:nth-child(n + 2) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--avatar-two-margin); + } + + &:nth-child(n + 3) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--avatar-three-margin); + } + } + + .AvatarStackBody { + flex-direction: row-reverse; + + &:not([data-disable-expand]):hover, + &:not([data-disable-expand]):focus-within { + .AvatarItem { + margin-right: var(--base-size-4) !important; + margin-left: 0 !important; + + &:first-child { + margin-right: 0 !important; + } + } + } + } + } +} + +.AvatarStackBody { + position: absolute; + display: flex; + + &:where([data-disable-expand]) { + position: relative; + } +} + +.AvatarItem { + --avatarSize-regular: var(--avatar-stack-size); + + position: relative; + display: flex; + width: var(--avatar-stack-size); + height: var(--avatar-stack-size); + overflow: hidden; + flex-shrink: 0; + + &:is(img) { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default); + } + + &:first-child { + z-index: 10; + margin-left: 0; + } + + &:nth-child(n + 2) { + z-index: 9; + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--avatar-two-margin); + } + + &:nth-child(n + 3) { + z-index: 8; + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--avatar-three-margin); + opacity: 0.55; + } + + &:nth-child(n + 4) { + z-index: 7; + opacity: 0.4; + } + + &:nth-child(n + 5) { + z-index: 6; + opacity: 0.25; + } + + &:nth-child(n + 6) { + visibility: hidden; + opacity: 0; + } +} + +.AvatarStackBody:not([data-disable-expand]):hover, +.AvatarStackBody:not([data-disable-expand]):focus-within { + width: auto; + + .AvatarItem { + margin-left: var(--base-size-4); + visibility: visible; + opacity: 1; + transition: + margin 0.2s ease-in-out, + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + box-shadow 0.1s ease-in-out; + + &:first-child { + margin-left: 0; + } + } +} diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index ccd87f1e24f..78856581e62 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -12,6 +12,9 @@ import {isResponsiveValue} from '../hooks/useResponsiveValue' import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations' import {defaultSxProp} from '../utils/defaultSxProp' import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys' +import classes from './AvatarStack.module.css' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' import {hasInteractiveNodes} from '../internal/utils/hasInteractiveNodes' import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' @@ -19,170 +22,182 @@ type StyledAvatarStackWrapperProps = { count?: number } & SxProp -const AvatarStackWrapper = styled.span` - --avatar-border-width: 1px; - --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); - --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' - display: flex; - position: relative; - height: var(--avatar-stack-size); - min-width: var(--avatar-stack-size); +const AvatarStackWrapper = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'span', + styled.span` + --avatar-border-width: 1px; + --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); + --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); - .pc-AvatarStackBody { display: flex; - position: absolute; - - ${getGlobalFocusStyles('1px')} - } - - .pc-AvatarItem { - --avatar-size: var(--avatar-stack-size); - flex-shrink: 0; - height: var(--avatar-stack-size); - width: var(--avatar-stack-size); - box-shadow: 0 0 0 var(--avatar-border-width) - ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; position: relative; - overflow: hidden; + height: var(--avatar-stack-size); + min-width: var(--avatar-stack-size); - &:first-child { - margin-left: 0; - z-index: 10; - } + .pc-AvatarStackBody { + display: flex; + position: absolute; - &:nth-child(n + 2) { - margin-left: var(--avatar-two-margin); - z-index: 9; + ${getGlobalFocusStyles('1px')} } - &:nth-child(n + 3) { - margin-left: var(--avatar-three-margin); - opacity: ${100 - 3 * 15}%; - z-index: 8; - } + .pc-AvatarItem { + --avatar-size: var(--avatar-stack-size); + flex-shrink: 0; + height: var(--avatar-stack-size); + width: var(--avatar-stack-size); + position: relative; + overflow: hidden; + display: flex; + + &:is(img) { + box-shadow: 0 0 0 var(--avatar-border-width) + ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; + } - &:nth-child(n + 4) { - opacity: ${100 - 4 * 15}%; - z-index: 7; - } + &:first-child { + margin-left: 0; + z-index: 10; + } - &:nth-child(n + 5) { - opacity: ${100 - 5 * 15}%; - z-index: 6; - } + &:nth-child(n + 2) { + margin-left: var(--avatar-two-margin); + z-index: 9; + } + + &:nth-child(n + 3) { + margin-left: var(--avatar-three-margin); + opacity: ${100 - 3 * 15}%; + z-index: 8; + } - &:nth-child(n + 6) { - opacity: 0; - visibility: hidden; + &:nth-child(n + 4) { + opacity: ${100 - 4 * 15}%; + z-index: 7; + } + + &:nth-child(n + 5) { + opacity: ${100 - 5 * 15}%; + z-index: 6; + } + + &:nth-child(n + 6) { + opacity: 0; + visibility: hidden; + } } - } - &.pc-AvatarStack--two { - // this calc explained: - // 1. avatar size + the non-overlapping part of the second avatar - // 2. + the border widths of the first two avatars - min-width: calc( - var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width) - ); - } + &.pc-AvatarStack--two { + // this calc explained: + // 1. avatar size + the non-overlapping part of the second avatar + // 2. + the border widths of the first two avatars + min-width: calc( + var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + var(--avatar-border-width) + ); + } - &.pc-AvatarStack--three { - // this calc explained: - // 1. avatar size + the non-overlapping part of the second avatar - // 2. + the non-overlapping part of the third avatar - min-width: calc( - var(--avatar-stack-size) + - calc( - calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + - calc(var(--avatar-stack-size) + var(--avatar-three-margin)) - ) - ); - } + &.pc-AvatarStack--three { + // this calc explained: + // 1. avatar size + the non-overlapping part of the second avatar + // 2. + the non-overlapping part of the third avatar + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) + ) + ); + } - &.pc-AvatarStack--three-plus { - // this calc explained: - // 1. avatar size + the non-overlapping part of the second avatar - // 2. + the non-overlapping part of the third and fourth avatar - min-width: calc( - var(--avatar-stack-size) + - calc( - calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + - calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2 - ) - ); - } + &.pc-AvatarStack--three-plus { + // this calc explained: + // 1. avatar size + the non-overlapping part of the second avatar + // 2. + the non-overlapping part of the third and fourth avatar + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2 + ) + ); + } - &.pc-AvatarStack--right { - justify-content: flex-end; - .pc-AvatarItem { - margin-left: 0 !important; + &.pc-AvatarStack--right { + justify-content: flex-end; + .pc-AvatarItem { + margin-left: 0 !important; - &:first-child { - margin-right: 0; - } + &:first-child { + margin-right: 0; + } - &:nth-child(n + 2) { - margin-right: var(--avatar-two-margin); - } + &:nth-child(n + 2) { + margin-right: var(--avatar-two-margin); + } - &:nth-child(n + 3) { - margin-right: var(--avatar-three-margin); + &:nth-child(n + 3) { + margin-right: var(--avatar-three-margin); + } } - } - .pc-AvatarStackBody { - flex-direction: row-reverse; + .pc-AvatarStackBody { + flex-direction: row-reverse; - &:not(.pc-AvatarStack--disableExpand):hover, - &:not(.pc-AvatarStack--disableExpand):focus-within { - .pc-AvatarItem { - margin-right: ${get('space.1')}!important; - margin-left: 0 !important; + &:not(.pc-AvatarStack--disableExpand):hover, + &:not(.pc-AvatarStack--disableExpand):focus-within { + .pc-AvatarItem { + margin-right: ${get('space.1')}!important; + margin-left: 0 !important; - &:first-child { - margin-right: 0 !important; + &:first-child { + margin-right: 0 !important; + } } } } } - } - .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover, - .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within { - width: auto; + .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover, + .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within { + width: auto; - .pc-AvatarItem { - margin-left: ${get('space.1')}; - opacity: 100%; - visibility: visible; - ${props => (props.count === 1 ? '' : `box-shadow: inset 0 0 0 4px ${get('colors.canvas.default')};`)} - transition: + .pc-AvatarItem { + margin-left: ${get('space.1')}; + opacity: 100%; + visibility: visible; + ${props => (props.count === 1 ? '' : `box-shadow: inset 0 0 0 4px ${get('colors.canvas.default')};`)} + transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, box-shadow 0.1s ease-in-out; - ${getGlobalFocusStyles('1px')} + ${getGlobalFocusStyles('1px')} - &:first-child { - margin-left: 0; + &:first-child { + margin-left: 0; + } } } - } - .pc-AvatarStack--disableExpand { - position: relative; - } + .pc-AvatarStack--disableExpand { + position: relative; + } - ${sx}; -` -const transformChildren = (children: React.ReactNode) => { + ${sx}; + `, +) + +const transformChildren = (children: React.ReactNode, enabled: boolean) => { return React.Children.map(children, child => { if (!React.isValidElement(child)) return child return React.cloneElement(child, { ...child.props, - className: clsx(child.props.className, 'pc-AvatarItem'), + className: clsx(child.props.className, 'pc-AvatarItem', {[classes.AvatarItem]: enabled}), }) }) } @@ -195,6 +210,44 @@ export type AvatarStackProps = { children: React.ReactNode } & SxProp +const AvatarStackBody = ({ + disableExpand, + hasInteractiveChildren, + stackContainer, + children, +}: { + disableExpand: boolean | undefined + hasInteractiveChildren: boolean | undefined + stackContainer: React.RefObject +} & React.ComponentPropsWithoutRef<'div'>) => { + const bodyClassNames = clsx('pc-AvatarStackBody', { + 'pc-AvatarStack--disableExpand': disableExpand, + }) + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + if (enabled) { + return ( +
+ {children} +
+ ) + } + return ( + + {children} + + ) +} + const AvatarStack = ({ children, alignRight, @@ -203,6 +256,7 @@ const AvatarStack = ({ className, sx: sxProp = defaultSxProp, }: AvatarStackProps) => { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) const [hasInteractiveChildren, setHasInteractiveChildren] = useState(false) const stackContainer = useRef(null) @@ -216,9 +270,6 @@ const AvatarStack = ({ }, className, ) - const bodyClassNames = clsx('pc-AvatarStackBody', { - 'pc-AvatarStack--disableExpand': disableExpand, - }) const getAvatarChildSizes = () => { const avatarSizeMap: Record = { @@ -259,6 +310,7 @@ const AvatarStack = ({ }, ) } + const childSizes = getAvatarChildSizes() useEffect(() => { if (stackContainer.current) { @@ -282,8 +334,16 @@ const AvatarStack = ({ const getResponsiveAvatarSizeStyles = () => { // if there is no size set on the AvatarStack, use the `size` props of the Avatar children to set the `--avatar-stack-size` CSS variable if (!size) { + if (enabled) { + return { + '--stackSize-narrow': `${childSizes.narrow}px`, + '--stackSize-regular': `${childSizes.regular}px`, + '--stackSize-wide': `${childSizes.wide}px`, + } + } + return getBreakpointDeclarations( - getAvatarChildSizes(), + childSizes, '--avatar-stack-size' as keyof React.CSSProperties, value => `${value}px`, ) @@ -291,6 +351,14 @@ const AvatarStack = ({ // if the `size` prop is set and responsive, set the `--avatar-stack-size` CSS variable for each viewport if (isResponsiveValue(size)) { + if (enabled) { + return { + '--stackSize-narrow': `${size.narrow || DEFAULT_AVATAR_SIZE}px`, + '--stackSize-regular': `${size.regular || DEFAULT_AVATAR_SIZE}px`, + '--stackSize-wide': `${size.wide || DEFAULT_AVATAR_SIZE}px`, + } + } + return getBreakpointDeclarations( size, '--avatar-stack-size' as keyof React.CSSProperties, @@ -303,20 +371,28 @@ const AvatarStack = ({ } const avatarStackSx = merge( - getResponsiveAvatarSizeStyles(), + !enabled && getResponsiveAvatarSizeStyles(), sxProp as SxProp, ) return ( - - 3 ? '3+' : count) : undefined} + data-align-right={enabled && alignRight ? '' : undefined} + data-responsive={enabled && (!size || isResponsiveValue(size)) ? '' : undefined} + className={clsx(wrapperClassNames, {[classes.AvatarStack]: enabled})} + style={enabled ? getResponsiveAvatarSizeStyles() : undefined} + sx={avatarStackSx} + > + {' '} - {transformChildren(children)} - + {transformChildren(children, enabled)} + ) } diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index 8f68da6c108..8b0b980e5d3 100644 --- a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap @@ -46,9 +46,16 @@ exports[`Avatar respects alignRight props 1`] = ` flex-shrink: 0; height: var(--avatar-stack-size); width: var(--avatar-stack-size); - box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default,var(--color-canvas-default,#ffffff)); position: relative; overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c0 .pc-AvatarItem:is(img) { + box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default,var(--color-canvas-default,#ffffff)); } .c0 .pc-AvatarItem:first-child { diff --git a/packages/react/src/experimental/Skeleton/SkeletonAvatar.module.css b/packages/react/src/experimental/Skeleton/SkeletonAvatar.module.css index 2f2d0c20915..02c869f1078 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonAvatar.module.css +++ b/packages/react/src/experimental/Skeleton/SkeletonAvatar.module.css @@ -6,8 +6,6 @@ /* stylelint-disable-next-line primer/typography */ line-height: 1; border-radius: 50%; - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 1px var(--avatar-borderColor); } &:where([data-square]) {