Modal (Dialogi)

Katso komponentin tekninen dokumentaatio

Dialogi on modaalinen komponentti, jolla voidaan esittää käyttäjälle olennaista tietoa muun sisällön päällä, samalla muu sisältö piilottaen. Dialogia voidaan käyttää esimerkiksi ilmoitusten näyttämiseen, toimintojen suorittamiseen poistumatta nykyisestä näkymästä tai toimintojen varmistamiseen. Dialogi peittää nykyisen näkymän ja lukitsee fokuksen dialogin näkymän sisään. Kun toiminto on saatu suoritettua tai mikäli käyttäjä peruuttaa toiminnon, dialogi sulkeutuu ja palataan alkuperäiseen näkymään.

<Button onClick={...}>
  Avaa dialogi
</Button>

<Modal
  appElementId="__next"
  onEscKeyDown={...}
>
  <ModalContent>
    <ModalTitle>
      Poista ilmoitettu tieto
    </ModalTitle>
    <Paragraph>
      <Text>
        Olet poistamassa kutsumanimen voimassaolevista tiedoistasi.
      </Text>
    </Paragraph>
  </ModalContent>
  <ModalFooter>
    <Button
      arial-label="Hyväksy tietojen poistaminen ja sulje dialogi."
      onClick={...}
    >
      Hyväksy
    </Button>
    <Button
      arial-label="Peruuta tietojen poistaminen ja sulje dialogi."
      onClick={...}
      variant="secondary"
    >
      Peruuta
    </Button>
  </ModalFooter>
</Modal>

Saavutettavuus ja käytettävyys

Dialogin kanssa tulee aina käyttää otsaketta (ModalTitle). Suomi.fi Design Systemin komponenttiin otsake kuuluu pakollisena osana.
Dialogin alatunnisteen tulee aina sisältää toimintopainike jolla dialogi voidaan sulkea.
Dialogin ulkopuolella olevat sisällöt piilotetaan ruudunlukijoilta.
Fokus siirretään oletuksena dialogin otsakkeeseen dialogin avaamisen yhteydessä.
Fokus lukitaan dialogin sisään, eivätkä dialogin ulkopuolella olevat sisällöt ole fokusoitavissa.
Dialogin sulkemisen yhteydessä fokus palautetaan samaan elementtiin missä se oli ennen dialogin avaamista.
Dialogia käytetään tilanteissa joissa halutaan kiinnittää käyttäjän huomio vain tiettyyn asiaan tai toiminnallisuuteen.

Mistä komponentti koostuu

Dialogi koostuu otsakkeesta, sisältöalueesta ja alatunnisteesta sekä taustalle jäävät elementit visuaalisesti himmentävästä peitteestä. Otsake sijaitsee dialogin yläreunassa ja toimii osana dialogin sisältöä. Otsake saa fokuksen dialogin avaamisen yhteydessä. Sisältöalueelle voidaan sijoittaa mitä tahansa sisältöä, pois lukien uudet dialogit. Alatunnisteen tulee aina sisältää painike millä dialogi sulkeutuu. Alatunniste voi lisäksi sisältää mahdollisia toissijaisia painikkeita esimerkiksi toiminnon peruuttamista varten.

Koko ja käyttö

Dialogia voidaan käyttää joko pienempikokoisena varmistusdialogina tai laajempia kokonaisuuksia tukevana dialogina (oletus). Dialogi tukee sekä pieniä näyttöjä että työpöytäkäyttöä. Pienillä näytöillä dialogi täyttää aina koko näytön. Työpöytäkäytössä dialogin maksimikorkeus on aina 50 pikseliä vähemmän kuin näytön korkeus.

Varmistusdialogi

Ilmoitusten näyttämiseen ja toimintojen varmistamiseen käytetään varmistusdialogia. Varmistusdialogi keskeyttää käyttäjän toiminnan ja pyytää varmistuksen meneillään olevalle toiminnolle tai ilmoitukselle. Esimerkiksi ennen kohteen poistamista käyttäjältä varmistetaan, että hän todella haluaa poistaa valitsemansa kohteen. Varmistusdialogin oletusleveys on työpöytäkäytössä 540 pikseliä ja minimikorkeus 190 pikseliä. Työpöytäkäytössä varmistusdialogin korkeus kasvaa sisällön mukana, mutta varmistusdialogi ei tue vieritystä (scrolling). Varmistusdialogia tulee käyttää vain lyhyiden sisältöjen esittämiseen.

<Button onClick={...}>
  Avaa dialogi
</Button>

<Modal
  appElementId="__next"
  onEscKeyDown={...}
>
  <ModalContent>
    <ModalTitle>
      Poista ilmoitettu tieto
    </ModalTitle>
    <Paragraph>
      <Text>
        Olet poistamassa kutsumanimen voimassaolevista tiedoistasi.
      </Text>
    </Paragraph>
  </ModalContent>
  <ModalFooter>
    <Button
      arial-label="Hyväksy tietojen poistaminen ja sulje dialogi."
      onClick={...}
    >
      Hyväksy
    </Button>
    <Button
      arial-label="Peruuta tietojen poistaminen ja sulje dialogi."
      onClick={...}
      variant="secondary"
    >
      Peruuta
    </Button>
  </ModalFooter>
</Modal>

Täysikokokoinen dialogi

Kun halutaan suorittaa laajempia toimintoja poistumatta nykyisestä näkymästä, voidaan käyttää täysikokoista dialogia. Dialogin oletusleveys on työpöytäkäytössä 800 pikseliä ja minimikorkeus 230 pikseliä. Työpöytäkäytössä dialogin korkeus kasvaa sisällön mukana ja sisältöalue muuttuu vieritettäväksi (scrolling), kun sisältö ei enää mahdu saatavilla olevaan tilaan.

<Button onClick={...}>
  Avaa dialogi
</Button>

<Modal
  appElementId="__next"
  onEscKeyDown={...}
>
  <ModalContent>
    <ModalTitle>
      Valitse julkaistavat kieliversiot
    </ModalTitle>
    <Paragraph>
      <Text>
        Valitse, mitkä kieliversiot haluat julkaista. Sisältö julkaistaan heti, ellet ajasta sisällölle julkaisuajankohtaa. Julkaisemasi sisältö näkyy Suomi.fi verkkopalvelussa noin 10-15 minuutin viiveellä. Jos jätät kieliversion luonnostilaan, se näkyy vain palvelutietovarannossa.
      </Text>
    </Paragraph>
    <ExpanderGroup
      closeAllText="Sulje laajennuspaanelit"
      openAllText="Avaa laajennuspaanelit"
    >
      <Expander>
        <ExpanderTitle
          ariaCloseText="Sulje laajennuspaneeli"
          ariaOpenText="Avaa laajennuspaneeli"
          toggleButtonAriaDescribedBy="checkbox-id-1"
        >
          <Checkbox
            disabled
            hintText="Suomi - luonnos"
          >
            Sukunimen muuttaminen
          </Checkbox>
        </ExpanderTitle>
        <ExpanderContent>
          <ExpanderExampleContent />
        </ExpanderContent>
      </Expander>
      <Expander>
        <ExpanderTitle
          ariaCloseText="Sulje laajennuspaneeli"
          ariaOpenText="Avaa laajennuspaneeli"
          toggleButtonAriaDescribedBy="checkbox-id-2"
        >
          <Checkbox
            hintText="Ruotsi - julkaistu"
            onClick={...}
          >
            Ändring av efternamn
          </Checkbox>
        </ExpanderTitle>
        <ExpanderContent>
          <ExpanderExampleContent />
        </ExpanderContent>
      </Expander>
      <Expander>
        <ExpanderTitle
          ariaCloseText="Sulje laajennuspaneeli"
          ariaOpenText="Avaa laajennuspaneeli"
          toggleButtonAriaDescribedBy="checkbox-id-3"
        >
          <Checkbox
            hintText="Englanti - muokattu"
            onClick={...}
          >
            Change of surname
          </Checkbox>
        </ExpanderTitle>
        <ExpanderContent>
          <ExpanderExampleContent />
        </ExpanderContent>
      </Expander>
    </ExpanderGroup>
  </ModalContent>
  <ModalFooter>
    <VisuallyHidden>
      Julkaistavia tietoja ei ole valittu.
    </VisuallyHidden>
    <Button
      aria-describedby="save-disabled"
      aria-disabled
      arial-label="Julkaise"
      onClick={...}
    >
      Julkaise
    </Button>
    <Button
      arial-label="Peruuta"
      onClick={...}
      variant="secondary"
    >
      Peruuta
    </Button>
  </ModalFooter>
</Modal>

Dialogi pienillä näytöillä

Pienillä näytöillä dialogi täyttää aina koko näytön riippumatta siitä onko kyseessä varmistusdialogi vai täysikokoinen dialogi.

<Button onClick={...}>
  Avaa dialogi
</Button>

<Modal
  appElementId="__next"
  onEscKeyDown={...}
  variant="smallScreen"
>
  <ModalContent>
    <ModalTitle>
      Valitse julkaistavat kieliversiot
    </ModalTitle>
    <Paragraph>
      <Text>
        Valitse, mitkä kieliversiot haluat julkaista. Sisältö julkaistaan heti, ellet ajasta sisällölle julkaisuajankohtaa. Julkaisemasi sisältö näkyy Suomi.fi verkkopalvelussa noin 10-15 minuutin viiveellä. Jos jätät kieliversion luonnostilaan, se näkyy vain palvelutietovarannossa.
      </Text>
    </Paragraph>
    <ExpanderGroup
      closeAllText="Sulje laajennuspaanelit"
      openAllText="Avaa laajennuspaanelit"
    >
      <Expander>
        <ExpanderTitle
          ariaCloseText="Sulje laajennuspaneeli"
          ariaOpenText="Avaa laajennuspaneeli"
          toggleButtonAriaDescribedBy="checkbox-id-1"
        >
          <Checkbox
            disabled
            hintText="Suomi - luonnos"
          >
            Sukunimen muuttaminen
          </Checkbox>
        </ExpanderTitle>
        <ExpanderContent>
          <ExpanderExampleContent />
        </ExpanderContent>
      </Expander>
      <Expander>
        <ExpanderTitle
          ariaCloseText="Sulje laajennuspaneeli"
          ariaOpenText="Avaa laajennuspaneeli"
          toggleButtonAriaDescribedBy="checkbox-id-2"
        >
          <Checkbox
            hintText="Ruotsi - julkaistu"
            onClick={...}
          >
            Ändring av efternamn
          </Checkbox>
        </ExpanderTitle>
        <ExpanderContent>
          <ExpanderExampleContent />
        </ExpanderContent>
      </Expander>
      <Expander>
        <ExpanderTitle
          ariaCloseText="Sulje laajennuspaneeli"
          ariaOpenText="Avaa laajennuspaneeli"
          toggleButtonAriaDescribedBy="checkbox-id-3"
        >
          <Checkbox
            hintText="Englanti - muokattu"
            onClick={...}
          >
            Change of surname
          </Checkbox>
        </ExpanderTitle>
        <ExpanderContent>
          <ExpanderExampleContent />
        </ExpanderContent>
      </Expander>
    </ExpanderGroup>
  </ModalContent>
  <ModalFooter>
    <VisuallyHidden>
      Julkaistavia tietoja ei ole valittu.
    </VisuallyHidden>
    <Button
      aria-describedby="save-disabled"
      aria-disabled
      arial-label="Julkaise"
      onClick={...}
    >
      Julkaise
    </Button>
    <Button
      arial-label="Peruuta"
      onClick={...}
      variant="secondary"
    >
      Peruuta
    </Button>
  </ModalFooter>
</Modal>