Skip to content

docs(avatar stack): team review #5018

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mimarz merged 9 commits into from
Jun 29, 2026
Merged

docs(avatar stack): team review #5018

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fa12a33
docs(avatar stack): team review
mrosvik Jun 19, 2026
ee30e55
Merge branch 'main' into docs-avatarstack
mrosvik Jun 19, 2026
79e3f64
biome
Barsnes Jun 22, 2026
d600dba
english
mrosvik Jun 24, 2026
0fd47c7
Merge branch 'docs-avatarstack' of https://github.com/digdir/designsy…
mrosvik Jun 24, 2026
79e3434
Update apps/www/app/content/components/avatar-stack/no/code.mdx
mimarz Jun 24, 2026
86eb90f
Merge branch 'main' into docs-avatarstack
mimarz Jun 24, 2026
2c9cdc6
Update apps/www/app/content/components/avatar-stack/en/code.mdx
mimarz Jun 29, 2026
d66d014
Merge branch 'main' into docs-avatarstack
mimarz Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 35 additions & 97 deletions apps/www/app/content/components/avatar-stack/avatar-stack.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ import { useState } from 'react';

export const Preview = () => (
<EXPERIMENTAL_AvatarStack>
<Avatar aria-label=''>
<Avatar aria-label='cat'>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<Avatar aria-label='briefcase'>
<BriefcaseIcon />
</Avatar>
<Avatar aria-label='' initials='sm' />
<Avatar aria-label=''>md</Avatar>
<Avatar aria-label='' initials='on' />
<Avatar aria-label='Søren Magnussen'>sm</Avatar>
<Avatar aria-label='Mark Downright'>md</Avatar>
<Avatar aria-label='Ola Nordman'>on</Avatar>
</EXPERIMENTAL_AvatarStack>
);

Expand Down Expand Up @@ -208,91 +208,29 @@ export const ShapeVariants = () => (
);

export const DataSize = () => (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ds-size-8)' }}>
<fieldset>
<legend>avatarSize='var(--ds-size-8)'</legend>
<EXPERIMENTAL_AvatarStack avatarSize={'var(--ds-size-8)'}>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</Avatar>
</EXPERIMENTAL_AvatarStack>
</fieldset>
<fieldset>
<legend>avatarSize='3em'</legend>
<EXPERIMENTAL_AvatarStack avatarSize='3em'>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</Avatar>
</EXPERIMENTAL_AvatarStack>
</fieldset>
<fieldset>
<legend>avatarSize='clamp(2rem, 1.5rem + 2vw, 4rem)'</legend>
<EXPERIMENTAL_AvatarStack avatarSize='clamp(2rem, 1.5rem + 2vw, 4rem)'>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</Avatar>
</EXPERIMENTAL_AvatarStack>
</fieldset>
</div>
<EXPERIMENTAL_AvatarStack avatarSize='clamp(5rem, 1.5rem + 2vw, 10rem)'>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</Avatar>
<Avatar aria-label=''>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</Avatar>
</EXPERIMENTAL_AvatarStack>
);

export const Gap = () => (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ds-size-8)' }}>
<fieldset>
<legend>gap='2px'</legend>
<EXPERIMENTAL_AvatarStack avatarSize='3rem' gap='2px'>
<Avatar aria-label='' initials='AA' />
<Avatar aria-label='' initials='BB' />
<Avatar aria-label='' initials='CC' />
<Avatar aria-label='' initials='DD' />
</EXPERIMENTAL_AvatarStack>
</fieldset>
<fieldset>
<legend>gap='4px'</legend>
<EXPERIMENTAL_AvatarStack avatarSize='3rem' gap='4px'>
<Avatar aria-label='' initials='AA' />
<Avatar aria-label='' initials='BB' />
<Avatar aria-label='' initials='CC' />
<Avatar aria-label='' initials='DD' />
</EXPERIMENTAL_AvatarStack>
</fieldset>
<fieldset>
<legend>gap='6px'</legend>
<EXPERIMENTAL_AvatarStack avatarSize='3rem' gap='6px'>
<Avatar aria-label='' initials='AA' />
<Avatar aria-label='' initials='BB' />
<Avatar aria-label='' initials='CC' />
<Avatar aria-label='' initials='DD' />
</EXPERIMENTAL_AvatarStack>
</fieldset>
</div>
<EXPERIMENTAL_AvatarStack avatarSize='3rem' gap='6px'>
<Avatar aria-label='' initials='AA' />
<Avatar aria-label='' initials='BB' />
<Avatar aria-label='' initials='CC' />
<Avatar aria-label='' initials='DD' />
</EXPERIMENTAL_AvatarStack>
);

export const AdditionalAvatars = () => (
Expand Down Expand Up @@ -331,30 +269,30 @@ export const WithTooltipAndLink = () => (
<fieldset>
<legend>Link + Tooltip</legend>
<EXPERIMENTAL_AvatarStack overlap={20} aria-label='contributors'>
<Tooltip content='Ola Nordmann'>
<Tooltip content='Ola Katt'>
<Avatar aria-label='' asChild>
<a href='#'>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</a>
</Avatar>
</Tooltip>
<Tooltip content='Kari Nordmann'>
<Tooltip content='Kari Katt'>
<Avatar aria-label='' asChild>
<a href='#'>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</a>
</Avatar>
</Tooltip>
<Tooltip content='Person 2'>
<Tooltip content='Katt 2'>
<Avatar aria-label='' asChild>
<a href='#'>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</a>
</Avatar>
</Tooltip>
<Tooltip content='Person 3'>
<Tooltip content='Børge Katt'>
<Avatar aria-label='' asChild>
<a href='#'>BR</a>
<a href='#'>BK</a>
</Avatar>
</Tooltip>
</EXPERIMENTAL_AvatarStack>
Expand All @@ -366,30 +304,30 @@ export const WithTooltipAndLink = () => (
expandable='fixed'
aria-label='contributors'
>
<Tooltip content='Ola Nordmann'>
<Tooltip content='Ola Katt'>
<Avatar aria-label='' asChild>
<a href='#'>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</a>
</Avatar>
</Tooltip>
<Tooltip content='Kari Nordmann'>
<Tooltip content='Kari Katt'>
<Avatar aria-label='' asChild>
<a href='#'>
<img src='/img/component-docs/cats/cat1.webp' alt='' />
</a>
</Avatar>
</Tooltip>
<Tooltip content='Person 2'>
<Tooltip content='Katt 2'>
<Avatar aria-label='' asChild>
<a href='#'>
<img src='/img/component-docs/cats/cat6.webp' alt='' />
</a>
</Avatar>
</Tooltip>
<Tooltip content='Person 3'>
<Tooltip content='Børge Katt'>
<Avatar aria-label='' asChild>
<a href='#'>BR</a>
<a href='#'>BK</a>
</Avatar>
</Tooltip>
</EXPERIMENTAL_AvatarStack>
Expand Down
55 changes: 6 additions & 49 deletions apps/www/app/content/components/avatar-stack/no/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,49 +8,8 @@ Avatar stack er under utvikling. Har du tilbakemelding eller innspill, meld fra

For å lage en avatar stack i ren HTML brukes klassen `ds-avatar-stack` på en `<span>`. Inne i denne plasseres elementer med klassen `ds-avatar`. Merk at dersom du vil bruke `data-expandable="fixed"` må antallet avatarer være oppgitt via `--dsc-avatar-count: <number>` for å korrekt kalkulere den faste bredden. Bruk `data-suffix` for å legge til en tekstindikator for skjulte avatarer.

```html
<span
class="ds-avatar-stack"
data-expandable="fixed"
style="--dsc-avatar-count: 3;"
tabindex="0"
aria-label="contributors"
data-suffix="+4">
<span
class="ds-avatar"
data-variant="circle"
role="img"
aria-label=""
>
<img alt="" aria-hidden="true" src="...">
</span>
<span
class="ds-avatar"
data-variant="circle"
data-initials="ON"
role="img"
aria-label=""
></span>
<span
class="ds-avatar"
data-variant="circle"
role="img"
aria-label=""
>
<span>ON</span>
</span>
</span>
```

Dersom du vil overstyre standard gap/size/overlap gjøres det via disse CSS-variablene:
`aria-label` eller `aria-description` kan brukes på avatar stack for å gi kontekst til skjermlesere om hva stabelen representerer.

```css
.ds-avatar-stack {
--dsc-avatar-stack-gap: 4px; /* standard er 2px */
--dsc-avatar-stack-avatar-size: 3rem; /* standard er var(--ds-size-12) */
--dsc-avatar-stack-overlap: 30; /* standard er 50 */
}
```

## CSS variabler og data-attributter

Expand All @@ -62,25 +21,23 @@ Avatar stack bruker egne CSS-variabler for å styre gap, størrelse og overlapp.

## Eksempel

### Tilpassbarhet
Avatar stack er laget for å være fleksibel nok til å dekke mange ulike behov og brukstilfeller.
<Story story="Playground" layout='block' />

### Expandable
`expandable` animerer overlap til 0 ved hover eller fokus. Bruk `expandable="fixed"` for å utvide med overflow uten å endre den fysiske bredden. `tabindex="0"` blir automatisk lagt med `expandable`, men dette kan overstyres.
`data-expandable` animerer overlap til 0 ved hover eller fokus. Bruk `data-expandable="fixed"` for å utvide med overflow uten å endre den fysiske bredden. `tabindex="0"` blir automatisk lagt med `data-expandable`, men dette kan overstyres.
Comment thread
mimarz marked this conversation as resolved.
Outdated
<Story story="Expandable" layout='block' />

### Indikere avatarer som ikke vises
Avatar stack støtter ikke "wrapping" over flere linjer. Dersom det er flere avatarer enn det er plass til i stacken, kan man bruke `suffix` for å indikere dette i form av tekst til høyre for stabelen. Denne skalerer seg automatisk med avatar-størrelsen.

Det er også mulig å bruke en avatar med `+xx` som `initials` eller child, men da bør du overstyre tekststørrelsen på denne avataren med `--dsc-avatar-font-size` dersom det skal være plass til tosifret eller høyere tall.

<Story story="AdditionalAvatars" layout='block' />

### Størrelser
Du kan ikke bruke `data-size` for å endre størrelsen på avatarer i en avatar stack. I stedet styres størrelsen via `avatarSize` prop på `AvatarStack`. Denne må oppgis i en gyldig CSS-lengdeenhet (`px`, `em`, `rem`, `var(--ds-size-6)` osv.).
Du kan ikke bruke `data-size` for å endre størrelsen på avatarer i en avatar stack. I stedet styres størrelsen med å sette størrelsen på variabelen `--dsc-avatar-stack-size`.
<Story story="DataSize" layout='block' />

### Gap
Avatar stack bruker CSS `mask` for å lage det synlige mellomrommet mellom avatarene. Standard er 2px, men kan tilpasses med `gap`.
Avatar stack bruker CSS `mask` for å lage det synlige mellomrommet mellom avatarene, denne kan justeres ved sette størrelsen på variabelen `--dsc-avatar-stack-gap`.
<Story story="Gap" layout='block' />

## React
Expand Down
24 changes: 5 additions & 19 deletions apps/www/app/content/components/avatar-stack/no/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ Avatar stack er under utvikling. Har du tilbakemelding eller innspill, meld fra
<Story story="Preview" />

**Bruk avatar stack når**
- En gruppe personer eller enheter skal vises sammen, men det er begrenset plass.
- Du skal signalisere at flere er involvert, uten å vise alle i full størrelse.
- en gruppe personer eller enheter skal vises sammen, men det er begrenset plass
- du skal signalisere at flere er involvert, uten å vise alle i full størrelse

**Unngå avatar stack når**
- Det alltid er bare én avatar som skal vises.
- Hver person eller enhet må være tydelig identifiserbar med navn eller rolle samtidig.
- det alltid er bare én avatar som skal vises
- hver person eller enhet må være tydelig identifiserbar med navn eller rolle samtidig


## Eksempel
Expand All @@ -23,18 +23,6 @@ Avatar stack er under utvikling. Har du tilbakemelding eller innspill, meld fra
Avatar stack er laget for å være fleksibel nok til å dekke mange ulike behov og brukstilfeller.
<Story story="Playground" layout='block' />

### Størrelser
Størrelse på avatarer i en avatar stack styres via `avatarSize` og kan oppgis i hvilket som helst gyldig CSS-størrelsesenhet for maksimum fleksibilitet.
<Story story="DataSize" layout='block' />

### Gap
Det synlige mellomrommet mellom avatarene kan tilpasses med `gap`
<Story story="Gap" layout='block' />

### Expandable
I noen tilfeller kan det være ønskelig å utvide stabelen ved hover og fokus. Denne funksjonaliteten er av som standard.
<Story story="Expandable" layout='block' />

### Varianter
Avatar stack støtter både rund og kvadratisk variant, men bare en variant per stack.
<Story story="ShapeVariants" layout='block' />
Expand All @@ -50,7 +38,5 @@ Avatarer i avatar stack kan ha tooltip og være lenker, men vær obs på tilgjen
## Retningslinjer
Avatar stack bør brukes med forsiktighet, da det kan være utfordrende for brukere å identifisere individuelle avatarer i en tettpakket stabel. Sørg for at bruken av avatar stack gir mening i konteksten av brukeropplevelsen og at det ikke går på bekostning av tilgjengelighet eller brukervennlighet.

Avatar stack støtter ikke "wrapping" over flere linjer. Dersom det er flere avatarer enn det er plass til i stacken, kan man bruke `suffix` eller en ekstra avatar med `+xx` for å indikere antall skjulte avatarer.

## Tekst
`aria-label` eller `aria-description` kan brukes på avatar stack for å gi kontekst til skjermlesere om hva stabelen representerer, for eksempel "Deltakere i møtet" eller "Medlemmer av teamet".
Husk å gi kontekst til skjermlesere om hva stabelen representerer, for eksempel "Deltakere i møtet" eller "Medlemmer av teamet".
Loading