Adds floating label variant on TextArea

[cammiida]

Bakgrunn

Dette er bare et forslag basert på noe jeg kom over.

I Team Personell trenger vi en TextArea med en floating label, slik som Input. I tillegg tenkte jeg det er fint at det er litt konsekvent mellom komponentene som er ganske like 😊
Formen vi trenger det for ser slik ut:

Dersom vi bruker TextArea slik den er nå vil det se slik ut:

Ved siden av hverandre:

Løsning

Lagt til mulighet for å velge variant="floating" på en TextArea`. Legger til variants i theming og i komponenten selv siden den interne strukturen endres med varianten.

• Mangler typing på Theme.

[changeset-bot]

🦋 Changeset detected

Latest commit: d3ca762

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@vygruppen/spor-react	Minor

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

[selbekk]

Kult! Jeg er med på denne - men har noen spørsmål.

1. Trenger vi begge versjoner? Eller burde vi kanskje standardisere på å ha én versjon? Man MÅ jo ikke ha floating label i designet deres, men enig i at det ser finere ut.
2. Om man vil ha en label, så foreslår jeg heller at man sender inn en label prop, og at den i så fall rendrer litt annerledes.

cc @perweum

[perweum]

Jeg er helt med på å standardisere og kun bruke "floating label". Synes også det var fint med character limit på høyresiden. Er det noe man kunne lagt til som en feature på input-elementer? Altså optional?

[selbekk]

Angående character limit - det burde i så fall være sin egen komponent.

[selbekk]

Å innføre label som en påkrevd prop er en breaking change, men det går nok greit.

[cammiida]

Gjorde det som en ekstra variant for å ikke lage noen breaking change. For vår del kan floating gjerne være standard versjon (om ikke eneste), men dette har nok dere mer innsikt i enn meg 😄
Å vise character limit feks om man har satt på en maxLength attribute eller noe, hadde vært tipp topp! Pluss ev å kunne slå av/på at inputen faktisk limiter deg slik som i native html input.

Si i fra om jeg skal gjøre noe mer/endre på noe 😊

[selbekk]

Foreslår at du legger inn en optional label-prop, og fjerner variant propen jeg. Det er ikke breaking, men vi kan hjelpe folk å bruke label-varianten fremover allikevel.

[selbekk]

Det med character limits tror jeg fint kan leve som sin egen CharacterLimitedTextArea komponent - potensielt i Spor den også. Vi burde ikke legge til mer kompleksitet enn vi må i eksisterende komponenter når vi kan komponere dem sammen istedenfor.

[cammiida]

Can do!

[selbekk]

Et par småting, men ellers begynner denne å bli klar!

[selbekk]

Flotte greier!