HelpText blir fjerna, kva gjer du?

Designsystemet fjernar HelpText, dette betyr at den ikkje blir med i versjon 1. Kvifor gjer me dette? Og kva gjer du dersom du fortsatt bruker den?

Nederst i artikkelen finn du kode for å implementere denne komponenten sjølv.

Kvifor fjernar me HelpText?

Det har vore ein utfordrande komponent å anbefale konsekvent, og fleire faktorar tilseier at den ikkje passar i Designsystemet:

• Enkel å implementere sjølv: HelpText er i praksis ein popover knytt til ein knapp, noko som lett kan lagast med ein kort css-snutt og eksisterande komponentar.
• Uklart bruksområde: Me har ikkje klare anbefalingar for når og korleis hjelpetekst bør visast, og komponenten kan dermed lett bli brukt feil.
• Uvanleg i designsystem: Få designsystem inkluderer ein dedikert HelpText-komponent, nettopp fordi hjelpetekst varierer stort i form og kontekst.
• Avgrensar fleksibilitet: Å tilby HelpText som ein standard popover skaper forventingar om at hjelpetekst alltid skal visast på denne måten. Det finst fleire løysingar som er betre eigna i ulike situasjonar.

Kva gjer du dersom du fortsatt bruker den?

Dersom du har brukt HelpText, finn du nederst i artikkelen ein kode-snutt som viser korleis du kan implementere funksjonaliteten sjølv. Denne løysinga gjer deg fridom til å tilpasse hjelpetekst etter dine behov.

Vidare arbeid

Me jobbar med å avklare når og korleis hjelpetekst bør integrerast i grensesnitt, og ser fram til å kunne tilby meir presise anbefalingar i framtida. Det vil etter kvart kome eit mønster for ulike typar hjelpetekst.

Kode

Koden under kan du bruke for å komponere din eigen HelpText-komponent. CSS-snutten inkluderer ikon, klassen legger du på Popover.Trigger.

CSS

Markup

Satt saman

I denne CodeSandboxen kan du sjå korleis du sett kodesnuttane over saman.

Bidragsytere

Tobias BarsnesMarianne RøsvikMichael MarszalekLasse StraumØyvind Thune