Hopp til hovedinnhold
Designsystemet logo

HelpText blir fjerna, kva gjer du?

Me fjernar HelpText frå Designsystemet. Kvifor, og kva gjer du om du fortsatt vil bruke den?

7. januar 2025Designsystemet

Illustrasjon av ein hjelpetekst i popover.
Illustrasjon av ein hjelpetekst i popover.
Klikk på bildet eller trykk Escape for å lukke
HelpText er i dag ein popover knytt til ein knapp.

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

.ds-helptext {
  --dsc-helptext-icon-size: 65%;
  --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --dsc-helptext-size: var(--ds-size-7);


  border-radius: var(--ds-border-radius-full);
  border: max(1px, calc(var(--ds-size-1) / 2)) solid; /* Allow border-width to grow with font-size */
  box-sizing: border-box;
  height: var(--dsc-helptext-size);
  min-height: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  width: var(--dsc-helptext-size);


  @media (forced-colors: active) {
    color: ButtonText;
  }


  &::before {
    content: '';
    border-radius: inherit;
    background: currentcolor;
    mask-composite: exclude;
    mask-image: var(--dsc-helptext-icon-url);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size), cover;
    scale: 1.1; /* Hide tiny half pixel rendeing bug */
    width: 100%;
    height: 100%;


    @media (forced-colors: active) {
      background: ButtonText;
    }
  }


  &:has(+ :popover-open)::before {
    mask-image: var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
  }


  @media print {
    display: none;
  }
}

Markup

export type HelpTextProps = {
  /**
   * Required descriptive label for screen readers.
   **/
  "aria-label": string;
  /**
   * Placement of the Popover.
   * @default 'right'
   */
  placement?: "right" | "bottom" | "left" | "top";
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">;


export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
  function HelpText(
    { placement = "right", children, ...rest },
    ref
  ) {
    return (
      <Popover.TriggerContext>
        <Popover.Trigger
          className="ds-helptext"
          ref={ref}
          variant="tertiary"
          data-color="info"
          {...rest}
        />
        <Popover placement={placement} data-color="info">
          {children}
        </Popover>
      </Popover.TriggerContext>
    );
  }
);

Satt saman

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

Designsystemet logo

Bidragsytere

Tobias BarsnesMarianne RøsvikMichael MarszalekLasse StraumØyvind Thune

Vil du skrive for bloggen?

Har du noe du ønsker å dele med andre i fellesskapet? Kontakt oss på Slack eller via e-post