search

navikt / aksel

NAVs designsystem og Aksel-portalen
https://aksel.nav.no
MIT License
157 stars 41 forks source link

[Innspill til komponent]: <Stepper /> #2509

Open Trent-NAV opened 11 months ago

Trent-NAV commented 11 months ago

Innspill til Small versjon av horizontal. (også nevnt på Slack)

Reduser title label fra Body/Short/Large til Body/Short/Medium. Behold Body/Short/LargeStrong for Number. Det vil i alle fall for horizontal versjonen av stepper bli litt mer plasseringsvennlig for interne flater. Legger også ved forslag til text only versjon som reduserer høyden den okkuperer. Min Figma skisse gir 24px containerhøyde. Flyttet completed ikonet til høyre for label og redusert størrelsen på den til 24x24px.

Jeg syns uavhengig av Small eller Medium også at kun active state burde ha Strong title - inactive burde ha label i regular vekt, slik det feks allerede er på Toggle group.

stepper

sjur-gr commented 6 months ago

Vi endret vekten på teksten for en stund siden til kun regular fordi bold førte til layout shift (CLS). Jeg er redd dette forslaget vil resultere i enda større layout shift. Har dere testet å bruke tabs? Eller lagd en egen komponent for fremdrift i "saker"?

Trent-NAV commented 6 months ago

Takk for oppfølger.

Vet ikke når dere endret til kun Regular men både vertical og horizontal stepper har kun Strong title på samtlige steps i min versjon fra i Core UI Kit og det er ingen updates tilgjengelig. At alt er Regular og ikke Strong (SemiBold) er bedre enn at alt er Strong, men jeg syns fortsatt at title burde følge vekting på sirklene for active og completed step.

Mitt innspill var forøvrig todelt, det ene går på typografisk vekting av stegene og det andre på størrelsesvarianter. Har dere vurdert Small og/eller en text only versjon?

Vi forsøker å holde egne komponenter til et minimum men lager dem selvsagt om det er nødvendig, vi har ikke laget en egen stepper løsning eller annet fremdriftskomponent. Jeg føler tabs har en annen bruksrolle enn stepper forøvrig, så jeg har ikke tenkt på det som noe substitutt. Progresjonshandlinger er forøvrig ingen utbredt sak i vårt miljø men jeg syns generelt det er enklere å ta initiativ til å designe løsninger for det om ready-made komponentene fra Aksel er justert for Small da det som kjent gjør de mer plasseringvennlige i tight UI etc 😃

sjur-gr commented 6 months ago

Ja, my bad. Vi endret så all tekst er strong.

sjur-gr commented 6 months ago

Ja, small kan vi se på. En "liggende" variant av horisontal stepper vil nok fortsatt ha behov for nummerikonet for å ikke trigge layout shift. Det vil bygge ut bredden ganske mye (ikon + tekst), og gjøre den veldig sårbar for endring i bredde.

thomasrognes commented 2 months ago

Vi i team aap har tatt i bruk denne komponenten i vår saksbehandler løsnning. Vi har også merket at denne er litt for stor for interne flater og har et ønske om en litt mindre versjon. Kom over dette issuet og tenkte å høre hva status på denne er? Ser den er satt til undecided, så det er kanskje fortsatt uavklart.

sjur-gr commented 1 month ago

@thomasrognes har du mulighet til å sende meg noen skjermbilder på Slack, så jeg kan skjønne konteksten?