Legg til mulighet for tooltip i Group Title

[onordbo]

I forum ble det ønsket en mulighet å bruke tooltip sammen med Group Title i skjemafelter, dette fungerer slik jeg har skjønt det ikke så godt hverken i kode eller design i dag? Vi tar en kikk.

🔗 Praktiske lenker (om tilgjengelig)

Pull request: #3251
Designskisser: Components → feat: group-title/tooltip
Forhåndsvisning: Preview-link fra @fremtind-bot (om tilgjengelig)
Discussion: Link til discussion (om tilgjengelig)

🎯 Sjekkliste

• Du har laget en branch i Figma og bedt om feedback
• Du har sjekket at alt av kode og tester kjører som det skal
• Dere har sammen sjekket at resultatet av design og kode matcher

Hvis du står fast og trenger tips kan du ta en kikk i huskelista vår, eller tagge noen fra Jøkul-teamet i dette issuet.

[wkillerud]

Mulig vi bør utforske det å introdusere tooltip-teksten som en egen string prop i kode, sånn at vi ikke åpner for hva som helst av input sånn uten videre (ReactNode er veldig fleksibel).

[onordbo]

Her er et løsningsforslag i Figma. Vi får løst det ganske greit via Component Properties, men for å få spacet ikonet korrekt blir tradeoffen at bredden på kompoenten fremstår litt unaturlig "ut av boksen." Fordelen med dette er at vi ivaretar auto-layout innstillingene for tekstlaget, halverer antall varianter, og samtidig tilrettelegger for å justere tooltip. I tillegg slipper vi en masse utilsiktede tooltips i eksisterende skisser, ettersom vi skjuler tooltip'en som standardinnstilling.

[onordbo]

Tar gjerne noen innspill fra @Murstam, @Stakset og @AudunBerdal på denne, siden dere såvidt meg kjent bruker Group Title ganske ofte? Om vi nå (muligens) bygger ut Group Title med flere funksjoner og den begynner å likne mer og mer på et mønster kan vi samtidig se om vi får reintrodusert spacingen per tittelstørrelse (4/8/16).

[Murstam]

Fungerer fint så vidt jeg kan se. Bra å skjule tooltip, og ja til reintrodusere spacing 😅

[onordbo]

Group Title i Figma
Her er et forslag på hvordan vi kan løse det i Figma. Ved å gjøre det på denne måten vil vi også få Tooltip i en rekke andre komponenter "gratis", siden de allerede bruker Group Title. Samtidig gjeninnfører vi innebygget spacing i komponenten så det ikke blir for trangt mellom Tooltip-ikonet og eventuelle input-felter.

NB: Tekst i Auto Layout
Jeg har lagt opp til at teksten er satt til fill når man bruker Group Title for seg selv, slik at teksten brekker over flere linjer av seg selv om den blir for lang. Men når den brukes via andre komponenter (f.eks: Text Input) tror jeg det er lurt å overstyre fra fill til hug så man slipper å endre det hver gang man skal ha tooltip som følger teksten i et inputfelt. Nedsiden ved dette blir at teksten ikke vil brekke over flere linjer (uten overstyring) hvis man har veldig lange labels i feltene. Tanker?

Variants og standardinnstillinger
Utover dette så tenker jeg at vi burde beholde både label (group title) og hjelpeteksten skjult/avslått ut av boksen, så vi unngår å knekke en god del skisser som allerede bruker "bare" selve inputfeltet.

cc @Murstam @Stakset @AudunBerdal

[onordbo]

Nå har forslaget ovenfor ligget brakk lenge nok til at vi går videre med forslaget, og publiserer endringene for Group Title i Figma. Det betyr at vi reintroduserer innebygget spacing, samtidig som vi får støtte for Tooltip alle steder hvor Group Title brukes i dag.

cc @fremtind/design

[onordbo]

Merget og publisert i Figma.