Komponenttien ulkoasu

Ulkoasun muokkaus

Visuaalisen ilmeen luomiseen kannattaa ensisijaisesti hyödyntää valmiita komponentteja ja niiden proppien tarjoamia vaihtoehtoja. Komponenttien ulkoasun muokkausta kannattaa välttää.

• Näin ilme pysyy yhtenäisenä ja uudet KDS-versiot on helpompi ottaa käyttöön.
• Komponenttien muokkaustarpeet voi esittää KDS-tiimille, joka arvioi niiden lisäämisen kirjastoon muidenkin käytettäväksi.

Ulkoasumuokkausten tekeminen

Jos ulkoasumuokkauksia on kuitenkin tarve tehdä, kannattaa ne kohdistaa mahdollisimman tarkasti haluttuun HTML-elementtiin, className-propin kautta annettavalla CSS-luokalla.

• Näin mahdolliset muutokset komponenttien luokissa tai tyyleissä eivät riko muokkauksia, eikä tyyli vaikuta vahingossa muualle.
• Arvojen (esim. värit) kovakoodaamisen sijaan sovellukseen kannattaa tuoda KDS:n yhteiset design-muuttujat, eli tokenit, jotka helpottavat arvojen ylläpitoa.
• Omat tyylitiedostot sijoitetaan latautumaan KDS:n tyylitiedostojen jälkeen.

Esimerkkinä Container-komponentille välitetään app-custom-container-luokka.

<Container className="app-custom-container"></Container>

Tyylimääritykset

CSS-luokkien nimeäminen

Älä käytä sovelluksessa kds-etuliitettä CSS-luokille tai -muuttujille, jotta ne eivät ylikirjoita KDS:n käyttämiä CSS-luokkia tai -muuttujia.

Etuliitteenä voi käyttää esimerkiksi app tai muuta lyhyttä kyseiseen sovellukseen viittaavaa termiä tai jättää sen kokonaan pois.

CSS-apuluokat

KDS tarjoaa joukon CSS-apuluokkia, joiden valikoima tulee pysymään rajallisena.

• Sovellukseen kannattaa toteuttaa sovelluksen tarpeisiin räätälöity apuluokkakokoelma tai käyttää valmista kirjastoa.
• Apuluokkien arvot kannattaa tuoda design-muuttujista niiltä osin, kun sopivia arvoja on saatavilla.

CSS-muuttujat

Komponenttien CSS-muuttujat, jotka alkavat --kds-c-etuliitteellä (esim. --kds-c-alert-bg-color) ovat yksityisiä muuttujia, jotka saattavat vaihtua tai poistua.

HTML-rakenne

Reactia käytettäessä, kannattaa suosia komponentteja HTML-elementtien sijasta, vaikka tarjolla olisikin globaalit CSS-tyylit kyseiselle elementille.

Käytä esimerkiksi:

• h-tagin sijasta Heading-komponenttia,
• ul- tai ol-listan sijasta List-komponenttia,
• p-tagin sijasta Text-komponenttia.

Jos käytössä ei ole React, kannattaa tutustua Käyttö ilman Reactia -sivun ohjeisiin.