feat(avatar-stack): new component #4331
Conversation
🦋 Changeset detectedLatest commit: 2c8b905 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Preview deployments for this pull request: storybook - |
oddvernes
requested review from
Barsnes,
eirikbacker and
mimarz
as code owners
|
Needs feedback/approval before creating documentation on www |
packages/css/src/avatar-stack.css
Outdated
|
|
||
| .ds-avatar-stack { | ||
| --dsc-avatar-stack-size: var(--ds-size-12); | ||
| --dsc-avatar-stack-gap: 2; |
There was a problem hiding this comment.
Suggestion: can we specify unit here?
| --dsc-avatar-stack-gap: 2; | |
| --dsc-avatar-stack-gap: 2px; |
as this gives more flexibility?
There was a problem hiding this comment.
Do you feel like the react prop should then specify unit as well or keep that as number converted to px?
There was a problem hiding this comment.
I made it so react prop has to specify "2px" as well for now. Lets see
| .ds-avatar-stack { | ||
| --dsc-avatar-stack-size: var(--ds-size-12); | ||
| --dsc-avatar-stack-gap: 2; | ||
| --dsc-avatar-stack-overlap: 50; |
There was a problem hiding this comment.
Suggestion: can we specify unit here too?
| --dsc-avatar-stack-overlap: 50; | |
| --dsc-avatar-stack-overlap: 50px; |
It seems like this would not be problematic, as the rest of the equations are +/-
There was a problem hiding this comment.
This needs to be a unitless number. it is used in a calculation to create the overlap as a percentage of the avatar size automatically
| --_gap: calc(var(--dsc-avatar-stack-gap) * 1px); | ||
| --_overlap: calc(((var(--dsc-avatar-stack-size) / 100) * var(--dsc-avatar-stack-overlap)) * -1); | ||
|
|
||
| --captured-length: var(--_overlap); |
There was a problem hiding this comment.
could we skip this, a just use --_overlap directly in the rest of the file?
There was a problem hiding this comment.
The registered property is needed to be able to animate the optional expand action. We could rename that to --_overlap or something else instead, but since they have to be declared in global scope, I am in favour of generically named reusable registered custom properties
| &:not(:first-child) { | ||
| margin-left: var(--captured-length); | ||
| } | ||
| &:nth-last-child(1 of .ds-avatar) { |
There was a problem hiding this comment.
Could this instead be .ds-avatar:not(:has(+ .ds-avatar)) for even better browser support?
There was a problem hiding this comment.
looks like :has came out a year earlier than :nth-last-child(1 of ...) for chrome (2022 vs 2023), while :has came after nth-last-child in the other browsers. I can use both i suppose
https://caniuse.com/css-nth-child-of
https://caniuse.com/css-has
There was a problem hiding this comment.
this :has selector will remove mask on all avatars if there are tooltips in between, so i am adding it inside @supports not selector(:nth-last-child(1 of .ds-avatar)). Should be very obscure to encounter a chromium build older than 2023 anyway surely..
resolves #2306
Also adds
asChildsupport toAvatar