Siirry sisältöön

14.5.0

Hyvät kehityskäytännöt

Ohjeita Kela Design Systemin sujuvaan hyödyntämiseen.

Ulkoasun muokkaus

Ulkoasun luomiseen kannattaa ensisijaisesti hyödyntää komponenttien proppeja ja pyrkiä välttämään komponenttien ulkoasun muokkausta.

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

Ulkoasumuokkaukset kannattaa kohdistaa mahdollisimman tarkasti tiettyyn elementtiin className-propin kautta annettavalla CSS-luokalla. Siten mahdolliset muutokset komponenttien luokissa tai tyyleissä eivät riko muokkauksia, eikä tyyli vaikuta vahingossa muualle.

Arvojen kovakoodaamisen sijaan sovellukseen kannattaa tuoda KDS:n yhteiset design-muuttujat eli tokenit, jotka helpottavat ja yksinkertaistavat arvojen ylläpitoa. Muuttujat on koottu sivulle Design-muuttujat.

CSS

Älä käytä sovelluksessa kds-etuliitettä CSS-luokille tai -muuttujille, jotta ne eivät aiheuta konflikteja KDS:n käyttämiin luokkiin ja muuttujiin.

Suosi komponentteja HTML-elementtien sijasta, vaikka tarjolla olisikin globaalit CSS-tyylit kyseiselle elementille.

  • Käytä esimerkiksi otsikon h-tagin sijaan Heading-komponenttia, ul-listan sijaan List-komponenttia.

KDS tarjoaa joukon CSS-apuluokkia, joiden valikoima on rajallinen.

  • Tiettyyn sovellukseen kannattaa pääsääntöisesti toteuttaa sovelluskohtaisesti räätälöity apuluokkakokoelma.
  • Apuluokkien arvot kannattaa tuoda design-tokeneista niiltä osin kuin arvoja on saatavilla.

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

Testaus

  • Suosi helpommin ylläpidettävien testien tekemiseen käytäntöjä, jotka eivät ota kantaa implementaatioon, esim. Testing Libraryn käytäntöjä(Avautuu uuteen välilehteen).
  • Aseta komponenteille testId-propin kautta data-testid-attribuutti ja käytä sitä elementtien hakemiseen.
  • Komponenttien automaattisesti generoidut id-attribuutit saattavat vaihtua (generointiin käytetään Reactin useId(Avautuu uuteen välilehteen)-hookkia).
  • Snapshot-testauksessa kannattaa huomioida, että komponenttien HTML-rakenne saattaa muuttua.