Siirry sisältöön
Kela Design System KDS

14.5.4

Versiohistoria

Kooste KDS:n eri versioiden tärkeimmistä muutoksista.

14.5.4

Julkaistu 2.9.2025

  • Ei KDS:n käyttäjiin vaikuttavia muutoksia.

14.5.3

Julkaistu 24.4.2025

  • Ei KDS:n käyttäjiin vaikuttavia muutoksia.

14.5.2

Julkaistu 30.1.2025

Korjattu

  • Korjattu Multiselect-komponentin ongelmia:
    • Korjattu ongelma, jossa ruudunlukija luki kentän otsikon kahteen kertaan käytettäessä filter-varianttia.
    • Korjattu komponentille asetettujen oletusvalintojen lukeminen ruudunlukijalla.
    • Korjattu Modal- ja Multiselect-komponenteissa ongelma, joka esti sovelluksen käytön, kun arvo valittiin Modalissa sijaitsevasta Multiselectistä.

14.5.1

Julkaistu 16.12.2024

Korjattu

14.5.0

Julkaistu 4.12.2024

Korjattu

  • Korjattu Tabs-komponentin HTML-rakennetta.

Muutettu

  • Poistettu Multiselect-komponentilta käyttämättömät a11yTextItemRemoved ja a11yTextItemSelected-propit.
  • Muutettu Panel-komponenttia seuraavasti:
    • Poistettu legend käytöstä automaattisesti, kun elementtinä ei ole fieldset.
    • Lisätty legend-prop, jolla voi poistaa legend-elementin käytöstä myös elementin ollessa fieldset.
    • Lisätty legendText-prop, jolla voi asettaa legend-elementille eri tekstin kuin otsikolle.
    • Lisätty headingId-prop, jolla voi välittää id:n otsikolle.
    • Muutettu heading-prop ei-pakolliseksi.
    • Korjattu avattavan paneelin HTML-rakennetta painikkeen osalta.

Lisätty

14.4.0

Julkaistu 8.11.2024

Korjattu

  • Korjattu Select-komponentin bugi, jossa valikon avaava nuolielementti sai liian suuren z-index-arvon.
  • Korjattu LinkBox-komponentin contentAs-propin tyypitystä.

Muutettu

  • Päivitetty saavutettavuus-ohjeistusta kohdistuksen siirtämisen osalta.
  • Muutettu Chip-komponenttia seuraavasti:
    • Muutettu teksti rivittymään automaattisesti ja tarvittaessa katkeamaan myös sanojen sisältä.
    • Automaattisen rivittymisen saa pois disableLineBreak-propilla.
    • Lisätty mahdollisuus antaa sisältö children-propin kautta.
  • Tiivistetty Combobox-komponentin valikkoa käytettäessä sm tai xs-kokoista komponenttia.
  • Kasvatettu lg-kokoluokan ikonien viivanpaksuutta.
  • Päivitetty ikonikirjastojen dokumentaatiota.
  • Päivitetty Input-komponentin dokumentaatiota ja siirretty InputLabel ja InputText samalle sivulle Input-komponentin kanssa.
  • Exportattu useSort-hookin tyypitykset ja muutettu palautuva data tyypittymään hookille annetun datan mukaisesti.

Lisätty

  • Lisätty useNonInteractiveFocus-hook, jolla voi siirtää kohdistuksen ei-interaktiivisiin HTML-elementteihin.
  • Lisätty CSS-apuluokkia kohdistuksen visuaaliseen korostamiseen ja flex-wrap-ominaisuudelle.
  • Lisätty 27 kpl kuvitusikoneita.
  • Lisätty Alert-komponentille onDismiss-funktio, jota kutsutaan, kun ilmoitus suljetaan.
  • Lisätty DatePickerV2-komponentille errorTextId-prop, jota voi käyttää räätälöityjen virheilmoitusten toteuttamiseen.
  • Lisätty ComboboxV2-komponentille maxLength-prop, joka määrittää input-kentän maksimipituuden syötteelle.
  • Lisätty MainBar-komponentin toiminnolle (MainBarAction) active-prop, jolla asetetaan valitun tai aktiivisen toiminnon visuaalinen korostus.
  • Lisätty Ohjeet ja mallit -osioon ohjesivu Kanta-teeman elementtien pyöristyksistä.

14.3.0

Julkaistu 19.9.2024

Korjattu

  • Korjattu Multiselect-komponentin valintojen lukemista Firefox & NVDA -yhdistelmällä.
  • Korjattu Table-komponentin bugi, jossa avattavan taulukon rivi ei korostunut oikein käytettäessä striped-proppia.

Muutettu

  • Eriytetty komponenttien focus ja hover tyylit toisistaan.
  • Muutettu TimeInput-komponentin leveyttä pienemmäksi.
    • Jos komponenttien tyylitiedostot on importoitu yksitellen, tulee time-input.min.css lisätä sovellukseen.
  • Päivitetty Tietojen esitystavat-ohjeita.
  • Deprekoitu Media-komponentti, joka poistuu versiossa 16.0.0. Poistuva ominaisuus

Lisätty

  • Lisätty border-radius design-muuttujia ja CSS-apuluokkia.
  • Lisätty Multiselect-komponentille mahdollisuus estää yksittäisiä valintoja.
  • Lisätty Multiselect-komponentille toiminto kaikkien valintojen valitsemiseen.
  • Lisätty ChatMessage-komponentille rounded ja variant-propit sekä lisätty position-propille arvo none.
  • Lisätty Dropdown-komponentille a11yHideSelectors-proppi, jolla voi piilottaa elementtejä ruudunlukijalta kohdistuksen siirtymisen estämiseksi.
  • Lisätty 6 kpl käyttöliittymäkuvakkeita.
  • Julkaistu design-muuttujat ja tyylit, sekä ikonit ja logot erillisinä npm-paketteina, ilman muita riippuvuuksia. Katso lisätiedot käyttöönotto-ohjeesta (Muut asennusvaihtoehdot).

14.2.0

Julkaistu 2.7.2024

Korjattu

  • Korjattu TableHeader-komponentin tekstin tasaus onClick-proppia käytettäessä.
  • Korjattu ContentHighlight-komponentin ikonien värit Kanta-teemaan.

Muutettu

  • Muutettu seuraavien komponenttien taustavärejä:
    • Asetettu Accordion-komponentille valkoinen taustaväri.
    • Lisätty ContentHighlight-komponentin outline-variantille valkoinen taustaväri.
    • Lisätty Pagination-komponentin painikkeille valkoinen taustaväri.
    • Poistettu Tabs-komponentin ei-aktiivisten välilehtien taustaväri.
  • Muutettu CardIcon-komponentin bgColor -proppi vaihtoehtoiseksi.

Lisätty

  • Lisätty uudet haku- ja suodatus suunnittelumallit.
  • Lisätty MainBar-komponentille sticky -proppi ruudun yläreunaan tarrautumisen asettamiseksi.
  • Lisätty uusi ComboboxV2Async-komponentti valintojen hakemiseen asynkronisesti, kun syöttökenttään kirjoitetaan.
    • Samalla aiempi Combobox-komponentti on deprekoitu ja se poistuu versiossa 16.0.0 Poistuva ominaisuus
    • Merkittävimmät erot aiempaan Combobox-komponenttiin verrattuna ovat:
      • defaultOptions-proppia ei enää käytetä ja oletusvaihtoehdot toteutetaan lapsielementteinä.
      • asyncOptions-propin kautta voi muokata viivettä, jonka jälkeen valintojen hakeminen aloitetaan.
      • loadOptions-funktiota voi käyttää myös valikkoa avatessa valintojen noutamiseen.
      • loadOptions palauttaa listan ComboboxV2OptionValue-objekteja, joilla voi olla label ja value tai pelkkä value.
  • Lisätty uusia käyttöliittymäkuvakkeita (15 kpl) ja kuvitusikoneita (2 kpl).

14.1.0

Julkaistu 30.5.2024

Korjattu

  • Gestalt-hahmolait-sivun rikkinäiset linkit.
  • Korjattu Accordion-komponentin HTML-koodi ja dokumentaation esimerkkien rakenne validiksi.
  • Korjattu puuttuvat z-index-apuluokat.

Muutettu

  • Muutettu Combobox-komponentin aria-attribuutteja
    • aria-controls asetetaan komponentille vain kun valikko on avattuna.
    • korjattu tilanne jossa aria-describedby-arvo saattoi jäädä tyhjäksi merkkijonoksi.
  • Päivitetty Table-komponentin ohjeistusta avattavan taulukon osalta.
  • Päivitetty komponenttien fokus-tilan korostusta käytettäessä suuren kontrastin tilaa.
  • Muutettu koodiesimerkkien taustaväri ruudulliseksi.
    • Muokattavien esimerkkien taustaväriä saa vaihdettua esimerkin työkalupalkin valikosta.
  • Päivitetty Status-komponentin ohjeistusta.
  • Kirkastettu kela-blue-värisävyjä 10, 20 ja 30, kela-yellow-värisävyjä 10 ja 20, sekä success-green-värisävyjä 10, 20 ja 30.
  • Muutettu Nav-komponenttia seuraavasti:
    • Muutettu avattava navigaatiorakenne sisentymään automaattisesti.
    • Muutettu NavLinkToggle-komponentti kontrolloitavaksi, komponentin ulkopuolelta.
    • Lisätty NavLinkToggle-komponentille children- ja iconAriaLabel-propit.
    • Korjattu komponentin tyypityksiä.
    • Päivitetty dokumentaation esimerkkejä kattavammiksi.
  • Muutettu DatePickerV2 ja DateRangePickerV2-komponenttien input-kentän maksimileveyttä.
  • Päivitetty Välistysohjeita.
  • Muutettu Dropdown-komponentin näppäimistökäsittelyä:
    • Tabilla selatessa valikosta pääsee pois ja valikko suljetaan kohdistuksen poistuessa valikosta tai sen avaavasta painikkeesta (kutsutaan onClick-funktiota).

Lisätty

  • Lisätty uusi kds-cursor-pointer-apuluokka.
  • Lisätty Combobox-komponentin Inputille välitettävät addonBefore ja addonAfter-propit.
  • Päivitetty useSort-hookkia:
    • lisätty palautuville requestSort ja setSort-funktioille sortFunction ja valueFunction parametrit kustomoidun järjestämisen toteuttamiseen.
    • lisätty hookin dokumentaatioon esimerkki näiden käytöstä.
  • Toteutettu seuraavat muutokset ContentHighlight-komponentille:
    • Suurennettu ikonia ja pienennetty otsikkokokoa.
    • Vaihdettu käyttöliittymäkuvakkeet kuvitusikoneihin.
    • Lisätty appearance, icon ja variant-propit komponentin ulkoasun määrittämiseen.
    • Komponentin type-prop poistuu versiossa 15.0.0 (siirry käyttämään icon- ja variant-proppeja) Poistuva ominaisuus
  • Lisätty Timeline-komponentille uusi start-proppi, jolla asetetaan numero josta aikajanan numerointi alkaa.
  • Lisätty DescriptionList-komponentille uusi align-proppi sisällön tasaamista varten.
  • Lisätty Heading-komponentille color -proppi värin asettamiseen erikoistapauksissa.
  • Lisätty Checkbox-komponentin dokumentaatioon esimerkki tietojen ryhmittelystä.
  • Lisätty uusi ComboboxV2-komponentti:
    • Komponentti ei vielä tue valintojen noutamista asynkronisesti. Ominaisuus toteutetaan myöhemmin.
    • Komponenttia voi käyttää helpommin kontrolloituna komponenttina value- ja onChange-proppien avulla.
    • inputRef ei enää ole käytössä ja ref välitetään komponentin input-elementille, eikä ref:n mukana aiemmin palautuneita setValue- ja reset-funktioita enää ole.
    • defaultValue-arvon voi antaa merkkijonona tai objektina.
    • onChange palauttaa input-kentän arvon ja se päivittyy aina kun kentän arvo päivittyy.
    • onSelect palauttaa merkkijonon tai objektin, kun arvo valitaan.
    • Parannettu saavutettavuutta siten, että komponentti lukee hakuvalintojen määrän kun käyttäjä lopettaa kirjoittamisen.
    • Saavutettavuuteen liittyviä tekstejä voi muokata a11yOptions-propin kautta.
  • Lisätty viisi uutta käyttöliittymäkuvaketta: IconBan, IconCheckmark, IconNotice, IconPhone ja IconSortVertical.

14.0.1

Julkaistu 13.5.2024

Korjattu

14.0.0

Julkaistu 16.4.2024

Muutettu

  • Muutettu ContentHighlight-komponentin otsikon visuaaliseksi kooksi h4-otsikkoa vastaava koko.
  • Otettu käyttöön TypeScript 5.3.3(Avautuu uuteen välilehteen) tyypitysten generoimiseen Rikkova muutos
    • Toistaiseksi tyypitykset toimivat myös 4-versiolla, mutta tulevaisuudessa yhteensopivuutta ei enää varmisteta.
    • Sovellusten kannattaa siirtyä myös TypeScript 5 version käyttöön.
  • Muutoksia Tabs-komponentissa:
    • Muutettu hover-tyylejä, fontin väriä ja aktiiviselle Tabille lisätty taustaväri.
    • Poistettu visuaalisten muutosten myötä turhaksi jäänyt flush-prop. Rikkova muutos
  • Päivitetty DatePicker-komponenttien käyttämä react-day-picker-kirjasto versioon 8.10.0 ja date-fns versioon 3.3.1.
  • Siirretty lomakekomponenttien virheilmoitukset kenttien alapuolelle Rikkova muutos
    • Muutos on rikkova siltä osin, että yksittäisistä lomakekomponenteista kootut kenttäryhmät tulee päivittää vastaamaan valmiimpia komponentteja.
  • Muutettu komponenttien kokoluokkia säätelevät propit yhtenäiseksi size-propiksi. Rikkova muutos
  • Muutettu Container-komponentin oletusmaksimileveydeksi 3xl. Entisen leveyden saa palautettua antamalla maxWidth-propin arvoksi xl. Rikkova muutos
  • Muutettu TitleBar-komponenttia seuraavasti:
    • logo-prop on pakollinen Rikkova muutos
    • Maksimileveys on sama kuin Container-komponentilla (3xl). Entisen leveyden saa palautettua antamalla maxWidth-propin arvoksi xl. Rikkova muutos
  • Parannettu sisällön skaalautumista kun selaimessa muutetaan pelkkää tekstikokoa.
  • Muutettu xs-breakpoint arvosta 0, arvoon 428 px. Rikkova muutos
    • Aiemman xs-muuttujan voi korvata base-muuttujalla.
  • Muutettu ButtonGroup-komponentin breakpointteja Rikkova muutos
    • horizontal={true} asettaa painikkeet vierekkäin
    • horizontal="xs" käyttää muokattua xs-breakpointtia
  • Päivitetty ListGroup-komponentin ohjeistusta.
  • Päivitetty Modal-komponentin ohjeistusta dialogin, jota ei voi ohittaa osalta.
  • Mahdollistettu vaakamallinen kortin asettelu myös CardImage-komponentin kanssa.
  • Muutettu --kds-dropdown-z-index-teemamuuttuja --kds-z-dropdown-muuttujaksi.Rikkova muutos
  • Päivitetty Pagination-komponenttia ja sen ohjeistusta:
    • Muutettu PaginationButton tukemaan myös linkkejä, painikkeiden lisäksi.
    • Muutettu PaginationGroup-komponentit rivittymään, jos ne eivät mahdu ruudulle.
    • Lisätty usePagination-hook helpottamaan sivutuksen toteutusta.
    • Lisätty kattavampia koodiesimerkkejä sivutuksen toteuttamiseen.
  • Muutettu Tabs-komponentin scrollable-propin oletusarvoksi true sekä korjattu scrollable-propin toiminta.
    • Päivitetty ohjeistusta vieritettävän välilehtikomponentin osalta.
  • Päivitetty Sidebar-komponentin toteutusta ja dokumentaatiota:
    • SidebarNavItem-käyttää sisäisesti NavLink-komponenttia.
    • SidebarNavHeading-käyttää sisäisesti NavHeading-komponenttia.
    • Päivitetty Sidebar-komponentin dokumentaation koodiesimerkki Nav-komponentin käytöstä Sidebarin kanssa.
    • Komponentin navLinks-prop poistuu versiossa 15.0.0. Käytä jatkossa children-proppia. Poistuva ominaisuus
    • SidebarNavItem- ja SidebarNavHeading-komponentit poistuvat versiossa 15.0.0 (siirry käyttämään Nav-komponentteja). Poistuva ominaisuus
  • Lisätty FileInput-komponentille appearance-prop.

Poistettu

  • Poistettu Accordion-komponentilta borderless-proppi. Käytä jatkossa appearance="borderless". Rikkova muutos
  • Poistettu Tile-komponentilta highlightValues-proppi sekä light- ja secondary-variantit. Rikkova muutos
  • Poistettu Dropdown-komponentilta useLegacyMenu-proppi. Rikkova muutos
  • Poistettu Row-komponentilta form-proppi. form-propin käytön voi korvata gx={2}-propilla. Rikkova muutos

Lisätty

Korjattu

  • Korjattu avattavien taulukkorivien lukemista ruudunlukijalla, kun rivit ovat suljettuina.