Gå til hovedinnhold
KOMPONENTER

Modal benyttes ofte til spørsmål som brukeren må ta stilling til før han kan gå videre, de avbryter flyten men beholder konteksten delvis. De kan også vise tilleggsinfo som brukeren har etterspurt på en fokusert måte.

npm install @entur/modal
@import '@entur/modal/dist/styles.css';

Komponenter

import { Modal } from '@entur/modal';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Innholdet i modalen

closeLabel?string

Skjermleser-label til lukk-knappen

initialFocusRef?RefObject<HTMLElement>

En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen

open?boolean

Flagg som sier om modalen er åpen

onDismiss?(() => void)

Callback som kalles når brukeren ber om å lukke modalen

size"small" | "medium" | "large" | "extraSmall" | "extraLarge"

Størrelsen på modalen

align?"end" | "start" | "center" 'start'

Hvordan innholdet skal plasseres i modalen

title?ReactNode

Tittelen som vises i modalen

closeOnClickOutside?boolean true

Om modalen skal lukkes når man klikker på utsiden av den

I de aller fleste tilfeller, så kan du bare bruke <Modal /> komponenten direkte. Du kan rendre den hvor du vil i DOM-treet, den vil uansett dukke opp på riktig sted.

Du kan enten sende inn en open prop, eller rett og slett mounte/unmounte hele Modal-komponenten:

const Settings = () => {
  const [isOpen, setOpen] = React.useState(false);
  return isOpen ? (
    <Modal onDismiss={() => setOpen(false)}>Innstillinger</Modal>
  ) : (
    <PrimaryButton onClick={() => setOpen(true)}>
      Åpne innstillinger
    </PrimaryButton>
  );
};

Våre modaler baserer seg på Reach UI sin Dialog, og har det samme APIet.

ModalOverlay og ModalContent

import { ModalOverlay, ModalContent } from '@entur/modal';
NavnTypeBeskrivelse
open?boolean

Flagg som sier om modalen er åpen

onDismiss?(() => void)

Callback som kalles når brukeren ber om å lukke modalen

children?ReactNode

Innholdet i modalen

className?string

Ekstra klassenavn

initialFocusRef?RefObject<HTMLElement>

En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen

NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Innholdet i modalen

className?string

Ekstra klassenavn

size"small" | "medium" | "large" | "extraSmall" | "extraLarge"

Størrelsen på modalen

title?ReactNode

Tittelen som vises i modalen

align?"end" | "start" | "center" 'start'

Hvordan innholdet skal plasseres i modalen

Om du trenger litt mer fleksibilitet i designet av din modal, så kan du sette sammen din egen ved hjelp av de to komponentene <ModalOverlay /> og <ModalContent />. <Modal />-komponenten gjør egentlig ikke noe mer fancy enn å neste disse to inni hverandre, slik at det blir lettere å bruke.

Retningslinjer for bruk

Når skal komponenten brukes?

Modaler benyttes hovedsakelig i to ulike ulike situasjoner; for å tilby et lite knippe funksjoner (f.eks. filter eller datovelger) eller til å gi informasjon (ren tekst, uten funksjon) som er for omfattende til å vise i en tooltip eller pop-over. Modaler skal alltid ha en lukkefunksjon, og man må kunne benytte ‘Esc’ til å lukke. Klikk utenfor modalen skal behandles likt som klikk på ‘lukk’ (kryss eller knapp). Ettersom modaler lett kan lukkes bør de ikke inneholde for mange funksjoner eller kritisk innhold. I slike tilfeller bør en egen side vurderes. Funksjonelle prosesser over flere steg må aldri legges i en modal.

Informasjonsmodaler

Modaler med informasjon benyttes egentlig i samme øyemed som tooltip eller pop-over, men i større format og med plass til mer tekst. Teksten er ofte midtstilt, men kan også være venstrestilt i større modaler med mye tekst. Ved større informasjonsmengder og der man heller ikke vil skjule noe av konteksten, bør bruk av drawer vurderes. Modalen lukes med kryss supplert med ‘Lukk’-tekst og/eller knapp med ‘Ok’. Informasjonsmodaler kan inneholde flere steg, men bør da ha knapper både for ‘Neste’ og for ‘Avbryt’.

Funksjonsmodaler

Modaler med funksjon skal benyttes sparsommelig, og kun til enkle funksjoner som f.eks. innlogging, modusvalg, filter eller dato/tidsvelger. Komplekse skjemaer med flere ulike typer data/inputs bør heller vises på egen side alternativt som ekspanderende skjema ved behov. Funksjonsmodalene har gjerne primærknapp for videre handling og sekundærknapp for ‘Avbryt’ (her har vi gjort et unntak for de nye modalene i app som benytter gesture nedoverswipe for lukk/avbryt). Knappene skal plasseres midtstilt i mindre modaler, og høyrestilt i større modaler. Knappen lengst til høyre skal være primærknappen som appliserer funksjonen. Funksjonsmodaler bør lukkes med ‘Avbryt’, da kun lukkekryss gjør at det fremstår som utydelig om de funksjonelle valgene blir applisert eller ikke.

Varianter

Modaler skal ha faste størrelser, ikke prosentvis, og finnes i størrelsene XXS, XS, S, M og L. Innholdsmengden avgjører hvilken størrelse man velger. Man bør helst ikke benytte mange ulike størrelser på modal i de samme løsningen. XXS og XS finnes i variant med midtstilt og venstrestilt innhold, de større fra S og opp finnes kun med venstrestilt innhold.

Rediger denne siden på Bitbucket