Chip: Write guidelines for usage

[mrosvik]

Chip Guidelines and examples

Tasks

Beta Give feedback

1. Write/update guidelines
2. Do's and don'ts
3. Examples
4. Suggested draft from GD in comment below

[mrosvik]

Chips er små avrundede knapper som kan brukes til å filtrere og navigere gjennom innhold eller data. For eksempel kan de brukes til å filtrere kategorier i et søkeresultat, samt vise hvilke filter som er aktive. Ikke bruk Chip til statisk metadata for å tagge innholdselementer. Bruk heller Tag -komponenten dersom informasjonen ikke er klikkbar.

Chip eksisterer i ulike varianter:

• Chip er et alternativ til button. Den brukes når handlingen(e) er direkte relatert til hovedinnholdet og når handlingen ikke krever like mye oppmerksomhet som vanlige knapper. Det kan for eksempel være å klikke på en Chip for så å bli sendt til en søkeresultatside med filtrering på denne kategorien.
• Chip med checkmark=true er alternativer til vanlige radiobuttons og checkboxer. Brukes til filtrering av innhold og data, når det skal tilbys et valg mellom flere ulike opsjoner. Innholdet endres til å vise kun det som er valgt.
• Removable Chip er valgte verdier som brukeren kan fjerne. For eksempel filter som har blitt aktivert i et søk som kan fjernes igjen, eller som har blitt valgt i en multiselect.

[Ildest]

Opprettet dokument på Teams

[Ildest]

Foreløpig ikke lagt inn info i Word-filen, da det kan se ut som denne er dokumentert eller er underveis, av @mrosvik

[Ildest]

Status by 21. March: Not sure of progress, need status from @mrosvik as she started documenting it.

[Ildest]

Forslag til ny tekst @mrosvik - du kan eventuelt flette det sammen med det du har skrevet fra før.

Chips

Chips er små, interaktive komponenter som lar brukerne styre hvordan de vil se innhold.

< Komponenten med tilhørende props >

Slik bruker du Chips

[Beskriver hvordan du teknisk tar den i bruk.]

Varianter av Chips

Toggle chips

Toggle chips lar brukerne slå av og på filtre for å se endringer i innholdet. Velg om det skal være mulig for brukeren å velge kun ett, eller flere alternativer samtidig.

[Eksempel]

Toggle chips uten hake

Hvis vi velger å slå av haken på chips, må det være minst tre chips å velge mellom, slik at det er lett for brukerne å se hvilken som er valgt.
[Eksempel]

Chips med kryss (removable)

Vi bruker chips med kryss når vi vil at brukerne skal kunne fjerne valgte verdier. Det kan for eksempel være filter som er satt, eller verdier som brukerne selv har skrevet inn i et tekstfelt.

[Eksempel]

eventuelt "Gjør dette"- og "Ikke gjør dette"-eksempler.

Retningslinjer for Chips

Chips lar brukerne styre hvordan de vil vise innhold. Chips kan vises på en rekke eller i en sky. Hvis vi bruker sky, tilpasser Chips seg til den plassen de får.

Unngå å plassere chips vertikalt. Velg heller Checkbox eller Radio hvis du vil ha alternativer under hverandre.

Passer til å
• filtrere informasjon, for eksempel i lister eller tabeller
• vise hvilke filtre som er valgt

Passer ikke til
• menyer, som sidemenyer eller hovedmenyer
• statiske metadata (bruk heller Tag)
• skjemakomponenter

[Lag eksempler med gjør/ikke gjør her]

Tekst i komponenten

Chips bør ha så få ord som mulig, helst bare ett eller to.

Tilgjengelighet

Hvis deler av en side blir oppdatert samtidig som brukerne gjør noe på siden, må vi passe på at brukere med skjermleser får beskjed om det. Vi kan bruke en ARIA live region til det, som kan vise antall treff eller andre endringer.

Kilde: aksel.no