diff --git a/apps/www/app/content/components/avatar-stack/avatar-stack.stories.tsx b/apps/www/app/content/components/avatar-stack/avatar-stack.stories.tsx index 6ec78becf0..80491cb8e1 100644 --- a/apps/www/app/content/components/avatar-stack/avatar-stack.stories.tsx +++ b/apps/www/app/content/components/avatar-stack/avatar-stack.stories.tsx @@ -10,15 +10,15 @@ import { useState } from 'react'; export const Preview = () => ( - + - + - - md - + sm + md + on ); @@ -208,91 +208,29 @@ export const ShapeVariants = () => ( ); export const DataSize = () => ( -
-
- avatarSize='var(--ds-size-8)' - - - - - - - - - - - - - - -
-
- avatarSize='3em' - - - - - - - - - - - - - - -
-
- avatarSize='clamp(2rem, 1.5rem + 2vw, 4rem)' - - - - - - - - - - - - - - -
-
+ + + + + + + + + + + + + + ); export const Gap = () => ( -
-
- gap='2px' - - - - - - -
-
- gap='4px' - - - - - - -
-
- gap='6px' - - - - - - -
-
+ + + + + + ); export const AdditionalAvatars = () => ( @@ -331,30 +269,30 @@ export const WithTooltipAndLink = () => (
Link + Tooltip - + - + - + - + - BR + BK @@ -366,30 +304,30 @@ export const WithTooltipAndLink = () => ( expandable='fixed' aria-label='contributors' > - + - + - + - + - BR + BK diff --git a/apps/www/app/content/components/avatar-stack/en/code.mdx b/apps/www/app/content/components/avatar-stack/en/code.mdx index 6c95614ecc..6bea1612c3 100644 --- a/apps/www/app/content/components/avatar-stack/en/code.mdx +++ b/apps/www/app/content/components/avatar-stack/en/code.mdx @@ -8,49 +8,8 @@ Avatar stack is under development. If you have feedback or suggestions, please r To create an avatar stack in plain HTML, use the `ds-avatar-stack` class on a ``. Inside this, place elements with the `ds-avatar` class. Note that if you want to use `data-expandable="fixed"`, the number of avatars must be specified via `--dsc-avatar-count: ` to correctly calculate the fixed width. Use `data-suffix` to add a text indicator for hidden avatars. -```html - - - - - - - ON - - -``` - -To override the default gap/size/overlap, use these CSS variables: +`aria-label` or `aria-description` can be used on avatar stack to provide context to screen readers about what the stack represents. -```css -.ds-avatar-stack { - --dsc-avatar-stack-gap: 4px; /* default is 2px */ - --dsc-avatar-stack-avatar-size: 3rem; /* default is var(--ds-size-12) */ - --dsc-avatar-stack-overlap: 30; /* default is 50 */ -} -``` ## CSS variables and data attributes @@ -62,12 +21,8 @@ Avatar stack uses its own CSS variables to control gap, size and overlap. ## Examples -### Customization -Avatar stack is designed to be flexible enough to cover many different needs and use cases. - - ### Expandable - `expandable` animates overlap to 0 on hover or focus. Use `expandable="fixed"` to expand with overflow without changing the physical width. `tabindex="0"` is automatically added with `expandable`, but this can be overridden. +`data-expandable` animates overlap to 0 on hover or focus. Use `data-expandable="fixed"` to expand with overflow without changing the physical width. `tabindex="0"` should be added, this is automatically added with `expandable` in React. ### Indicating avatars not shown @@ -76,11 +31,11 @@ You can also use an avatar with `+xx` as `initials` or child, but you should ove ### Sizes -You cannot use `data-size` to change the size of avatars in an avatar stack. Instead, the size is controlled via the `avatarSize` prop on `AvatarStack`. This must be specified in a valid CSS length unit (`px`, `em`, `rem`, `var(--ds-size-6)`, etc.). +You cannot use `data-size` to change the size of avatars in an avatar stack. Instead, the size is controlled by setting the `--dsc-avatar-stack-size` variable. ### Gap -Avatar stack uses CSS `mask` to create the visible space between avatars. The default is 2px, but can be customized with `gap`. +Avatar stack uses CSS `mask` to create the visible space between avatars. This can be adjusted by setting the `--dsc-avatar-stack-gap` variable. ## React diff --git a/apps/www/app/content/components/avatar-stack/en/overview.mdx b/apps/www/app/content/components/avatar-stack/en/overview.mdx index 5fef1e20c1..6caf25bbdb 100644 --- a/apps/www/app/content/components/avatar-stack/en/overview.mdx +++ b/apps/www/app/content/components/avatar-stack/en/overview.mdx @@ -23,18 +23,6 @@ Avatar stack is under development. If you have feedback or suggestions, please r Avatar stack is designed to be flexible enough to cover many different needs and use cases. -### Sizes -The size of avatars in an avatar stack is controlled via `avatarSize` and can be specified in any valid CSS size unit for maximum flexibility. - - -### Gap -The visible space between avatars can be customized with `gap` - - -### Expandable -In some cases, it may be desirable to expand the stack on hover and focus. This functionality is off by default. - - ### Variants Avatar stack supports both round and square variants, but only one variant per stack. @@ -50,7 +38,5 @@ Avatars in avatar stack can have tooltips and be links, but be aware of accessib ## Guidelines Avatar stack should be used with caution, as it can be challenging for users to identify individual avatars in a tightly packed stack. Ensure that the use of avatar stack makes sense in the context of the user experience and does not compromise accessibility or usability. -Avatar stack does not support wrapping across multiple lines. If there are more avatars than can fit in the stack, you can use `suffix` or an additional avatar with `+xx` to indicate the number of hidden avatars. - ## Text -`aria-label` or `aria-description` can be used on avatar stack to provide context to screen readers about what the stack represents, for example "Meeting participants" or "Team members". +Remember to provide context to screen readers about what the stack represents, for example "Meeting participants" or "Team members". diff --git a/apps/www/app/content/components/avatar-stack/no/code.mdx b/apps/www/app/content/components/avatar-stack/no/code.mdx index 95eb206c5b..7ff601fd48 100644 --- a/apps/www/app/content/components/avatar-stack/no/code.mdx +++ b/apps/www/app/content/components/avatar-stack/no/code.mdx @@ -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 ``. 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: ` for å korrekt kalkulere den faste bredden. Bruk `data-suffix` for å legge til en tekstindikator for skjulte avatarer. -```html - - - - - - - ON - - -``` - -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 @@ -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. - - ### 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 til med `data-expandable`, men dette kan overstyres. ### 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. + ### 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`. ### 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`. ## React diff --git a/apps/www/app/content/components/avatar-stack/no/overview.mdx b/apps/www/app/content/components/avatar-stack/no/overview.mdx index 9d5d450f9c..92ffde5fa6 100644 --- a/apps/www/app/content/components/avatar-stack/no/overview.mdx +++ b/apps/www/app/content/components/avatar-stack/no/overview.mdx @@ -9,12 +9,12 @@ Avatar stack er under utvikling. Har du tilbakemelding eller innspill, meld fra **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 @@ -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. -### 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. - - -### Gap -Det synlige mellomrommet mellom avatarene kan tilpasses med `gap` - - -### Expandable -I noen tilfeller kan det være ønskelig å utvide stabelen ved hover og fokus. Denne funksjonaliteten er av som standard. - - ### Varianter Avatar stack støtter både rund og kvadratisk variant, men bare en variant per stack. @@ -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".