[Innspill til komponent]: <Alert />

[solumstrand]

Tilbakemelding

Ønske om x-small.

Vi bruker designsystemet i saksbehandlingsløsningen vi jobber med. Per nå blir alert for svær i noen steder, og vi har endt med å bruke tag-komponent i x-small fordi den er halvparten av høyden. Ikke ideelt

[sjur-gr]

Yo! Jeg kan grave litt. Har du mulighet til å sende link til UI så vi skjønner kontekst. Gjerne DM på Salck.

[solumstrand]

Her har vi endt opp med å bruke tag

[solumstrand]

Her er med alert

Det er mange slike kort på en side, og kan være mange slik varsler. Vi har allerede ett problem med for lange sider, så må dessverre spare plass overalt hvor vi kan :(

[sjur-gr]

Skjønner. Kan dere bruke varianten "inline"?

[solumstrand]

Vi vurderte det, men da blir den dessverre litt for lett å overse. Vi vet det går fort når de saksbehandler, så farget bakgrunn hjelper på :)

[TRG200]

Tenkte jeg kunne pitche inn litt her siden jeg også jobber under kompakte UI forhold på saksbehandling og stadig tenker på tilpassede løsninger. Om Aksel alert default skal bli så lav som feks. Xsmall Tag (20px) så blir det litt tricky med props som krever minimum target area, som feks, close og eventuelle fremtidig chevron for expand som jeg ser kan være aktuelt, men hvis man har en Xsmall alert i default variant med BodyShort/Small (for redusert line-height) som ikke har interaktive egenskaper så kunne det fungert rent funksjonelt med rendyrket rolle for statisk tekstfremvisning. Jeg regner også med at slike tekster alltid er en-linjet, for hvis aktuelle tekst knekker faller konseptet med en Xsmall default alert på 20px høyde bort.

Man kan argumentere for at lesbarheten reduseres med border når paddingen er så sparsom som Tag som er laget for enkelt-ord og ikke setninger. Borderen er nødvendig for å innfri kontrastkravene på Alert når main bg er subtle. Ofte er plassgevinsten viktigere enn litt redusert lesbarhet, men greit å ha det vurdert.

Fordi nevnte border blir så tight inntil tekstbuskapet så tenkte jeg å også dele ideen om å kun sette rett semantisk bakgrunnsfarge på teksten i CSS, da forsvinner selvsagt formspråket fra Alert men tenkte å nevne det der hovedmålet kun er å markere viktig tekst (se vedlegg) og skape visuelt budskapsfokus. Aksel kunne kanskje drodlet videre på dette med text highlight som del av en typografi feature. Her er det UU aspekter å vurdere selvsagt, så det er kun uformell tankedeling 😀

[solumstrand]

Ikke dumt!

[Karroholm]

Ønsker oss også en x-small for alert i saksbehandlingssystem av samme begrunnelse. Small er litt stor, inline forsvinner litt og det går fort i saksbehandlingsløpet så bakgrunnsfargen er ser vi som nødvendig

[sjur-gr]

Takk for bra oversikt! Size-propen i systemet endrer størrelsen på alt i en komponent. Med en x-small Alert er det fare for at den strider imot sin funksjon, som er å gi en tydelig varsling. Om dere trenger å gjøre lokale justeringer på padding på small-varianten, er det ikke noe i veien for å gjøre det. Noen av eksemplene dere viser ser ut som de kan løses med beskrivelser på skjemafelt og validering av skjemafelt. Det er også viktig å vurdere antall alerts en bruker blir vist av gangen, som vi skriver litt om på Aksel.

[TRG200]

Når det gjelder Alert så er nok bruksbehovene noe bredere enn det komponentet gir "rett fra boksen" i dag. Jeg nevnte chevron for collapse funksjon i min post og ser det dukket opp Slack eksempler på det i dag. Så er de funksjonelle bruksrådene for Alert også noe å huske på, tror fort at dette er et komponent som blir gjentatt litt for ofte i løsningene. Kanskje man skulle sett bredere på dette med visuell varslingsmetodikk der flere/andre alternativer er vurdert, kanskje behovet noen ganger kun er en highlight som jeg nevnte tidligere her og ikke nødvendigvis en systembasert responsmelding som alert. Når alert default i tillegg står i flertall sammen med flere tags i samme semantiske utrykk så kan det fort bli litt overload.

Jeg opplever at det som ikke tilbys som en ready-made i Aksel krever mer jobb å selge inn til utvikler som skal implementere løsningene, i en tid der moderniseringen skal gå fort og med minste motstands vei. Det er litt av utfordringene med systemorientert design, har man først begynt med det så blir det tyngre å forvalte egne løsninger for utviklere, selv om det er urealistisk å få innfridd alt i et felles DS så strekker man seg etter sentrale løsninger så langt det går.

Jeg ser at Alert small default faktisk har økt i høyde i ny versjon på grunn av større top/bottom padding, hvilket reduserer plasseringsvennligheten ytterligere for de som bruker den i smale forhold og med flerlinjet innhold.