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.
<ButtononClick={...}> Avaa dialogi
</Button>
<ModalappElementId="__next"onEscKeyDown={...}><ModalContent><ModalTitle> Poista ilmoitettu tieto
</ModalTitle><Paragraph><Text> Olet poistamassa kutsumanimen voimassaolevista tiedoistasi.
</Text></Paragraph></ModalContent><ModalFooter><Buttonarial-label="Hyväksy tietojen poistaminen ja sulje dialogi."onClick={...}> Hyväksy
</Button><Buttonarial-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.
<ButtononClick={...}> Avaa dialogi
</Button>
<ModalappElementId="__next"onEscKeyDown={...}><ModalContent><ModalTitle> Poista ilmoitettu tieto
</ModalTitle><Paragraph><Text> Olet poistamassa kutsumanimen voimassaolevista tiedoistasi.
</Text></Paragraph></ModalContent><ModalFooter><Buttonarial-label="Hyväksy tietojen poistaminen ja sulje dialogi."onClick={...}> Hyväksy
</Button><Buttonarial-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.
<ButtononClick={...}> Avaa dialogi
</Button>
<ModalappElementId="__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><ExpanderGroupcloseAllText="Sulje laajennuspaanelit"openAllText="Avaa laajennuspaanelit"><Expander><ExpanderTitleariaCloseText="Sulje laajennuspaneeli"ariaOpenText="Avaa laajennuspaneeli"toggleButtonAriaDescribedBy="checkbox-id-1"><CheckboxdisabledhintText="Suomi - luonnos"> Sukunimen muuttaminen
</Checkbox></ExpanderTitle><ExpanderContent><ExpanderExampleContent/></ExpanderContent></Expander><Expander><ExpanderTitleariaCloseText="Sulje laajennuspaneeli"ariaOpenText="Avaa laajennuspaneeli"toggleButtonAriaDescribedBy="checkbox-id-2"><CheckboxhintText="Ruotsi - julkaistu"onClick={...}> Ändring av efternamn
</Checkbox></ExpanderTitle><ExpanderContent><ExpanderExampleContent/></ExpanderContent></Expander><Expander><ExpanderTitleariaCloseText="Sulje laajennuspaneeli"ariaOpenText="Avaa laajennuspaneeli"toggleButtonAriaDescribedBy="checkbox-id-3"><CheckboxhintText="Englanti - muokattu"onClick={...}> Change of surname
</Checkbox></ExpanderTitle><ExpanderContent><ExpanderExampleContent/></ExpanderContent></Expander></ExpanderGroup></ModalContent><ModalFooter><VisuallyHidden> Julkaistavia tietoja ei ole valittu.
</VisuallyHidden><Buttonaria-describedby="save-disabled"aria-disabledarial-label="Julkaise"onClick={...}> Julkaise
</Button><Buttonarial-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.
<ButtononClick={...}> Avaa dialogi
</Button>
<ModalappElementId="__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><ExpanderGroupcloseAllText="Sulje laajennuspaanelit"openAllText="Avaa laajennuspaanelit"><Expander><ExpanderTitleariaCloseText="Sulje laajennuspaneeli"ariaOpenText="Avaa laajennuspaneeli"toggleButtonAriaDescribedBy="checkbox-id-1"><CheckboxdisabledhintText="Suomi - luonnos"> Sukunimen muuttaminen
</Checkbox></ExpanderTitle><ExpanderContent><ExpanderExampleContent/></ExpanderContent></Expander><Expander><ExpanderTitleariaCloseText="Sulje laajennuspaneeli"ariaOpenText="Avaa laajennuspaneeli"toggleButtonAriaDescribedBy="checkbox-id-2"><CheckboxhintText="Ruotsi - julkaistu"onClick={...}> Ändring av efternamn
</Checkbox></ExpanderTitle><ExpanderContent><ExpanderExampleContent/></ExpanderContent></Expander><Expander><ExpanderTitleariaCloseText="Sulje laajennuspaneeli"ariaOpenText="Avaa laajennuspaneeli"toggleButtonAriaDescribedBy="checkbox-id-3"><CheckboxhintText="Englanti - muokattu"onClick={...}> Change of surname
</Checkbox></ExpanderTitle><ExpanderContent><ExpanderExampleContent/></ExpanderContent></Expander></ExpanderGroup></ModalContent><ModalFooter><VisuallyHidden> Julkaistavia tietoja ei ole valittu.
</VisuallyHidden><Buttonaria-describedby="save-disabled"aria-disabledarial-label="Julkaise"onClick={...}> Julkaise
</Button><Buttonarial-label="Peruuta"onClick={...}variant="secondary"> Peruuta
</Button></ModalFooter></Modal>