From 3261937001da09d027927f17d78ec0734c62a043 Mon Sep 17 00:00:00 2001 From: Viveca Krishnamoorthi Date: Wed, 9 Oct 2024 13:54:56 +0200 Subject: [PATCH 1/5] Added ingress --- packages/react/src/components/form/Textarea/Textarea.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/form/Textarea/Textarea.mdx b/packages/react/src/components/form/Textarea/Textarea.mdx index f2b0e7f872..b3a5a48592 100644 --- a/packages/react/src/components/form/Textarea/Textarea.mdx +++ b/packages/react/src/components/form/Textarea/Textarea.mdx @@ -4,7 +4,8 @@ import * as TextareaStories from './Textarea.stories'; -# Textarea +# Textarea +`Textarea` gir brukerne et felt for å skrive inn lengre tekstinnhold, som kommentarer eller beskrivelser. Den skiller seg fra vanlige tekstfelter ved å støtte flere linjer med tekst, og kan tilpasses med hensyn til størrelse. From bba6e0f4ac3aa1b35d975167d799179407ab81e6 Mon Sep 17 00:00:00 2001 From: Viveca Krishnamoorthi Date: Wed, 9 Oct 2024 14:12:31 +0200 Subject: [PATCH 2/5] edit content --- .../src/components/form/Textarea/Textarea.mdx | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/form/Textarea/Textarea.mdx b/packages/react/src/components/form/Textarea/Textarea.mdx index b3a5a48592..28c3d6bf3b 100644 --- a/packages/react/src/components/form/Textarea/Textarea.mdx +++ b/packages/react/src/components/form/Textarea/Textarea.mdx @@ -10,14 +10,28 @@ import * as TextareaStories from './Textarea.stories'; -## Antall tegn +## Eksempler på bruk + + +### Antall tegn + -## Kontrollert +### Kontrollert -## Full bredde +### Full bredde + +## Retningslinjer for bruk av `Textarea` +Bruk Textarea når brukerne forventes å skrive inn mer enn én linje med tekst, for eksempel ved åpne spørsmål, tilbakemeldinger, eller andre situasjoner hvor lengre tekstinnhold er nødvendig. + +Unngå Textarea for korte svar eller spesifikke formaterte data som e-postadresser eller telefonnumre – bruk i stedet standard tekstfelt for disse. + + ### Størrelse og tilpasning + `Textarea` skal kunne tilpasses i høyden. Pass på at feltet i utgangspunktet har en høyde etter hva som er forventet tekst lengde. + + Feltet vil automatisk utvide seg når brukeren skriver, slik at de alltid kan se hele innholdet sitt uten å måtte bruke rullefelt. \ No newline at end of file From 2d12375c53af2468064f1558bbfc532f2cc86b85 Mon Sep 17 00:00:00 2001 From: Viveca Krishnamoorthi Date: Tue, 12 Nov 2024 15:37:18 +0100 Subject: [PATCH 3/5] Update Textarea.mdx --- .../src/components/form/Textarea/Textarea.mdx | 79 +++++++++++++++++-- 1 file changed, 72 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/form/Textarea/Textarea.mdx b/packages/react/src/components/form/Textarea/Textarea.mdx index caff8553a2..38865e026f 100644 --- a/packages/react/src/components/form/Textarea/Textarea.mdx +++ b/packages/react/src/components/form/Textarea/Textarea.mdx @@ -5,7 +5,8 @@ import * as TextareaStories from './Textarea.stories'; # Textarea -`Textarea` gir brukerne et felt for å skrive inn lengre tekstinnhold, som kommentarer eller beskrivelser. Den skiller seg fra vanlige tekstfelter ved å støtte flere linjer med tekst, og kan tilpasses med hensyn til størrelse. +`Textarea` brukes når vi vil gi brukerne mulighet til å legge inn tekst som er lengre enn én linje. + @@ -13,6 +14,12 @@ import * as TextareaStories from './Textarea.stories'; ## Eksempler på bruk + + + + + + ### Antall tegn @@ -23,15 +30,73 @@ import * as TextareaStories from './Textarea.stories'; ### Full bredde +Denne varianten strekker tekstområdet til å fylle hele bredden av tilgjengelig plass. Brukes når tekstfeltet skal stå ut som et hovedfelt eller når det er behov for maksimal skriveplass. +### Begrense antall tegn +Vis antall tegn tekstområdet tillater hvis du bruker denne typen feilmeldinger: + +
+ ## Retningslinjer for bruk av `Textarea` -Bruk Textarea når brukerne forventes å skrive inn mer enn én linje med tekst, for eksempel ved åpne spørsmål, tilbakemeldinger, eller andre situasjoner hvor lengre tekstinnhold er nødvendig. +Bruk `Textarea`når brukerne forventes å skrive inn mer enn én linje med tekst, for eksempel ved åpne spørsmål, tilbakemeldinger, eller andre situasjoner hvor lengre tekstinnhold er nødvendig. + +
+ +Passer til å +* gi mulighet for lengre tekster/svar, for eksempel et avsnitt eller en kommentar. + +
+ +Passer ikke til å +* legge inn formaterte data, for eksempel markdown +* Korte svar eller strukturert data som e-postadresser og telefonnummer – bruk standard tekstfelt for disse for en bedre brukeropplevelse. + +
+ +### Alternativer til fritekst +Vær oppmerksom på at brukerne kan synes det er vanskelig å skrive fritekst eller svare på åpne spørsmål. Da kan det være bedre å bryte opp spørsmålet i flere enklere spørsmål, og gi brukerne mulighet til å svare med for eksempel alternativknapper (`radio`). + +
+ + +## Størrelse og tilpasning + +### Høyden på tekstområdet +`Textarea` skal kunne tilpasses i høyden. Feltet vil automatisk utvide seg når brukeren skriver, slik at de alltid kan se hele innholdet sitt uten å måtte bruke rullefelt. + +
+ +### Bredde på teksområdet +Et tekstområde bør ikke være bredere enn 50–75 tegn inkludert mellomrom. Hvis vi holder oss til det, blir lesbarheten best for alle brukere. + +
+ +### Tillat kopier og lim inn +Brukere som skal fylle ut et tekstområde, trenger ofte å kopiere og lime inn informasjon, så denne funksjonen må ikke deaktiveres. Dette gjør det enkelt for brukerne å fylle inn nødvendige opplysninger uten begrensninger. + +
+ +## Tekst i komponenten +Sett alltid `label` (ledetekst) og eventuelt `description` (beskrivelse) over `textarea`, slik at det er lett å se på små skjermer. Pass på at det ikke dekker eventuelle feilmeldinger. + +
+ +* Hold ledeteksten kort, unngå at den går over to linjer +* Unngå å legge til beskrivelse som ikke er relevant eller meningsfull for brukeren +* Unngå å bruke kolon etter `label` +* Ikke bruk `placeholder` (plassholdertekst) i `textarea`. Teksten forsvinner når brukerne skriver. Kontrastkravene i WCAG gjelder for `placeholder` også, og da blir teksten så mørk at brukerne kan oppfatte `textarea` som utfylt + +
+ +### Tekst i feilmeldinger for text area +Skriv kort og konkret og gi brukerne informasjon som gjør at de kan løse problemet. Pass på at teksten i feilmeldinger følger retningslinjene vi har her: [Feilmeldinger i skjema – Designsystemet](https://www.designsystemet.no/monstre/feilmeldinger) + +
+ + +## Tilgjengelighet -Unngå Textarea for korte svar eller spesifikke formaterte data som e-postadresser eller telefonnumre – bruk i stedet standard tekstfelt for disse. - - ### Størrelse og tilpasning - `Textarea` skal kunne tilpasses i høyden. Pass på at feltet i utgangspunktet har en høyde etter hva som er forventet tekst lengde. +Ikke bruk deaktivert tilstand (disabled state) på `textarea`. Vurder heller om det er nødvendig å vise `textarea` i det hele tatt, eller om du kan presentere informasjonen som ren tekst eller bruke en "Read Only"-tilstand - Feltet vil automatisk utvide seg når brukeren skriver, slik at de alltid kan se hele innholdet sitt uten å måtte bruke rullefelt. \ No newline at end of file From a82b00fd3ea858d2b08bb2be65bd8ca322e42bfa Mon Sep 17 00:00:00 2001 From: Viveca Krishnamoorthi Date: Tue, 12 Nov 2024 15:42:41 +0100 Subject: [PATCH 4/5] Update Textarea.mdx --- packages/react/src/components/form/Textarea/Textarea.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/form/Textarea/Textarea.mdx b/packages/react/src/components/form/Textarea/Textarea.mdx index 38865e026f..7235566126 100644 --- a/packages/react/src/components/form/Textarea/Textarea.mdx +++ b/packages/react/src/components/form/Textarea/Textarea.mdx @@ -98,5 +98,5 @@ Skriv kort og konkret og gi brukerne informasjon som gjør at de kan løse probl ## Tilgjengelighet -Ikke bruk deaktivert tilstand (disabled state) på `textarea`. Vurder heller om det er nødvendig å vise `textarea` i det hele tatt, eller om du kan presentere informasjonen som ren tekst eller bruke en "Read Only"-tilstand +Ikke bruk deaktivert tilstand (disabled state) på `textarea`. Vurder heller om det er nødvendig å vise `textarea` i det hele tatt, eller om du kan presentere informasjonen som ren tekst eller bruke en "Read Only"-tilstand. From 828752f42010161307c188907d818c37b80443c0 Mon Sep 17 00:00:00 2001 From: Viveca Krishnamoorthi Date: Thu, 14 Nov 2024 12:21:55 +0100 Subject: [PATCH 5/5] Update Textarea.mdx --- packages/react/src/components/form/Textarea/Textarea.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/form/Textarea/Textarea.mdx b/packages/react/src/components/form/Textarea/Textarea.mdx index 7235566126..4eedcd4805 100644 --- a/packages/react/src/components/form/Textarea/Textarea.mdx +++ b/packages/react/src/components/form/Textarea/Textarea.mdx @@ -99,4 +99,3 @@ Skriv kort og konkret og gi brukerne informasjon som gjør at de kan løse probl ## Tilgjengelighet Ikke bruk deaktivert tilstand (disabled state) på `textarea`. Vurder heller om det er nødvendig å vise `textarea` i det hele tatt, eller om du kan presentere informasjonen som ren tekst eller bruke en "Read Only"-tilstand. -