Hyvät kehityskäytännöt
Ohjeita Kela Design Systemin sujuvaan hyödyntämiseen.
Ohjeita Kela Design Systemin sujuvaan hyödyntämiseen.
Ulkoasun luomiseen kannattaa ensisijaisesti hyödyntää komponenttien proppeja ja pyrkiä välttämään komponenttien ulkoasun muokkausta.
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.
Ä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.
h
-tagin sijaan Heading
-komponenttia, ul-listan sijaan List
-komponenttia.KDS tarjoaa joukon CSS-apuluokkia, joiden valikoima on rajallinen.
Komponenttien CSS-muuttujat, jotka alkavat --kds-c
-etuliitteellä (esim. --kds-c-alert-bg-color
) ovat yksityisiä muuttujia, jotka saattavat vaihtua tai poistua.
testId
-propin kautta data-testid
-attribuutti ja käytä sitä elementtien hakemiseen.id
-attribuutit saattavat vaihtua (generointiin käytetään Reactin useId(Avautuu uuteen välilehteen)-hookkia).