Siirry sisältöön
Kela Design System KDS

16.1.0

Versiohistoria

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

16.1.0

Julkaistu 23.10.2025

Korjattu

  • Korjattu DateRangePickerV2-komponentin kalenterin tyhjennä-painikkeen toimintaa.
  • Korjattu AccordionToggle-komponentilta iconBefore-propin kanssa ylimääräinen data-testid-attribuutti.
  • Korjattu Multiselect-komponentin ongelma, jossa viimeinen valinta ei poistunut, kun komponenttia päivitettiin ulkopuolelta.
  • Korjattu Textarea-komponenttia seuraavasti:
    • Tekstikentän korkeus kasvaa kun sen sisältöä päivitetään komponentin ulkopuolelta.
    • Proppina annettu onInput ei enää ylikirjoita komponentin sisäistä onInput-käsittelijää.
    • Komponentin data-replicated-value-attribuuttia ei enää päivitetä turhaan autogrow-propin ollessa false.
  • Korjattu Table-komponentin ongelma, joka värjäsi avattavan rivin sisällä olevan taulukon virheellisesti variant-propin mukaisesti.

Muutettu

  • Deprekoitu Modal-komponentin toggle-prop, joka korvautuu onClose-propilla versiossa 17.0.0. Poistuva ominaisuus
  • Päivitetty Haku-suunnittelumallin yksinkertaisen ja sivustokohtaisen haun ohjetta.

Lisätty

  • Lisätty Accordion-komponentille uusi ulkoasuvaihtoehto: Korttimainen haitarielementti.
  • Lisätty Modal-komponentille seuraavat uudet ominaisuudet:
    • returnFocus: määrittää palautetaanko kohdistus dialogin sulkeutuessa elementtiin, joka avasi dialogin
    • onAfterClose: funktio, jota kutsutaan juuri ennen dialogin sulkeutumista
  • Lisätty tiedon visualisoinnin värit ja tyylit saataville design-muuttujina.
  • Lisätty interaktiivisia ja teemoittuvia esimerkkejä tilastokuviot-sivulle.
  • Lisätty DropdownMenu-komponentille maxHeight-prop valikon maksimikorkeuden asettamiseen.
  • Lisätty uusi ProgressBar-komponentti edistymispalkin toteuttamiseen.
  • Lisätty InputLabel-komponentille cursor-prop, jonka default-arvoa voi käyttää, jos nimilappu ei ole klikattava.
  • Lisätty Taulukot ja listat -suunnittelumalli.
  • Lisätty TableV2-komponentille uusi hasScrollHint-prop sekä uusi TableV2ScrollHint-komponentti, jotka asettavat vieritettävälle taulukolle visuaalisen vihjeen.
  • Lisätty uusi MainBarNav-komponentti.

16.0.0

Julkaistu 2.9.2025

Korjattu

  • Korjattu DatePickerV2 ja DateRangePickerV2-komponenttien näppäimistönavigaation fokuksen järjestys vuosi- ja kuukausivalikon kanssa.
  • Korjattu saavutettavuushuomioita lisäämällä ikoneille, kuvakkeille ja logoille oletuksena aria-hidden, jos niille ei ole annettu aria-label-, aria-labelledby- tai aria-describedby-attribuuttia.
    • Aseta aria-hidden={undefined} manuaalisesti, jos elementin saavutettava nimi on asetettu jotenkin muuten Rikkova muutos
  • Korjattu Nav-komponentin linkkien oikeanpuoleista marginaalia pienemmäksi, jotta navigaation teksteille jää enemmän tilaa.
  • Korjattu Modal-komponenttia seuraavasti:
    • className-prop ei enää yliaja Modal-komponentin CSS-luokkia.
    • Kohdistus palautuu oikein dialogin avaavaan elementtiin NVDA + Chrome / Edge -yhdistelmällä, kun dialogi on avattu selaustilassa.

Muutettu

  • Päivitetty React versioon 19.1.0(Avautuu uuteen välilehteen) Rikkova muutos
    • Vanhempia React-versioita ei enää tueta.
  • Muutettu Multiselect-komponenttia seuraavasti:
    • Lisätty filterItems-prop, joka mahdollistaa valintojen suodatuksen räätälöinnin omalla funktiolla.
    • Poistettu valintojen suodatuksen aksenttimerkkien normalisointiin käytetty remove-accents-kirjasto. Rikkova muutos
      • Normalisointi tehdään nyt seuraaville Unicode-merkeille: U+0300 – U+036F.
      • Laajemmat tarpeet voi toteuttaa filterItems-funktiolla.
  • Mahdollistettu HTML-muotoisten style-attribuuttien käyttö komponenttien HTML-esimerkeissä.
  • Muutettu Chip-komponenttia seuraavasti:
    • Vaalennettu hieman primary-variantin väriä.
    • Päivitetty teemamuuttujien nimeämistä. Rikkova muutos
    • Lisätty appearance-prop, jolle voi antaa solid ja outline arvot ulkoasun määrittämiseen.
    • Lisätty variant-propille arvo primary-subtle vaaleamman Chipin toteuttamiseen.
    • Aiemmin käytössä ollut variant="outline" on poistettu. Rikkova muutos
    • Komponentti lisää role- ja tabindex-attribuutit ainoastaan silloin, kun komponentti renderöi jonkin muun kuin button- tai a-elementin.
    • Päivitetty HTML- ja tyyliesimerkkejä variant- ja appearance-tyylien osalta.
  • Päivitetty Ylätunniste-suunnittelumallia palvelun nimen näyttämisen osalta.
  • Muutettu TimeInput-komponenttia seuraavasti:
    • Komponentti toteuttaa nyt kokonaisen komponentin nimilappuineen ja ohjeteksteineen, pelkän input-elementin sijasta. Rikkova muutos
    • Aiempi räätälöity toteutus on korvattu HTML:n natiivilla time-tyyppisellä input-kentällä. Rikkova muutos
    • Päivitetty getTimeValidator:n oletusvirhetekstejä ja lisätty sille withSeconds- ja format-parametrit. Rikkova muutos
  • Poistettu autoSize-proppi sitä käyttäviltä komponenteilta: Rikkova muutos
  • Poistettu TextInput-komponentilta select- ja multiline-propit. Rikkova muutos
  • Poistettu seuraavat komponentit: Rikkova muutos
    • ButtonToolbar
    • Media
    • Combobox
  • Muutettu ButtonGroup-komponentin size-propin toimintaa. Rikkova muutos
    • size-prop asettaa komponentin välistykset painikkeiden koon muuttamisen sijaan.
    • size-prop hyväksyy xs ja md-arvot.
  • Poistettu LogoHandelsbanken logo. Rikkova muutos
  • Muutettu Radio- ja Checkbox-komponentteja seuraavasti:
    • Tiivistetty hieman peräkkäisten xs-kokoisten elementtien välistystä.
    • Muutettu peräkkäisten elementtien marginaali CSS-apuluokilla ylikirjoitettavaksi.
  • Asetettu DropdownMenu-komponentille oletuksena maksimikorkeus ja overflow: auto.
  • Muutettu useThrottle- ja useDebounce-hookkeja seuraavasti:
    • Hookit palauttavat objektin funktion sijasta. Rikkova muutos
    • Hookkien palauttamaa cancel-funktiota ei tarvitse enää kutsua sovelluksessa, vaan molemmat hookit suorittavat sen automaattisesti.
    • Parannettu tyypityksiä.
  • Poistettu DescriptionList-komponentin käyttämä Row-komponentti.
    • HTML-rakenteesta voi poistaa kds-row-luokan.
    • Muutos ei vaikuta React-komponentin käyttäjiin.
  • Parannettu useMode-hookin SSR-yhteensopivuutta.
  • Deprekoitu ListGroup-komponentti, joka poistetaan versiossa 17.0.0 Poistuva ominaisuus
  • Peruttu AccordionTitle-komponentin deprekointi.
  • Nimetty käyttöliittymäikonit ja kuvitusikonit uudelleen: Rikkova muutos
    • Kuvitusikonit alkavat IconDeco.
    • Käyttöliittymäkuvakkeeet alkavat IconUi.
  • Päivitetty Card-komponentin HTML-rakennetta ja CSS-luokkia kuvan tai ikonin sisältävien korttien osalta. Rikkova muutos
  • Muutettu MainBar-komponentin aktiivisen linkin taustaväri tummemmaksi.

Lisätty

15.3.1

Julkaistu 2.9.2025

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

15.3.0

Julkaistu 2.6.2025

Korjattu

  • Korjattu Multiselect-komponentin valintojen valitseminen Chrome / TalkBack -yhdistelmällä.
  • Korjattu useSelectionLasso pitämään valittu teksti valittuna preventInteraction={false}-propin kanssa.

Muutettu

  • Päivitetty Breadcrumb-komponentin dokumentaatiota:
    • Lisätty koodiesimerkki ja ohjeistus murupolun sisällön lyhentämisestä.
    • Lisätty komponentille esimerkit HTML- ja tyylimääritysten hyödyntämisestä.
  • Deprekoitu AccordionTitle-komponentti, joka poistetaan versiossa 17.0.0 Poistuva ominaisuus
  • Nimetty uudestaan väripalettien seuraavat värit:
    • success-green → kela-success-green
    • warning-yellow → kela-warning-yellow
    • warning-red → kela-danger-red
    • kanta-warning-red → kanta-danger-red
    • black-100 → black
    • black-90 → black-soft
    • Vanhat väripaletit success-green, warning-yellow, warning-red, kanta-warning-red ja arvot black-90, black-100 poistuvat versiossa 17.0.0 Poistuva ominaisuus
  • Deprekoitu Kelan lisävärit dark-orange, dark-red, dark-purple, dark-turquoise, bright-blue, bright-lime, jotka poistuvat versiossa 17.0.0 Poistuva ominaisuus
  • Päivitetty Pagination-komponentin dokumentaatiota taulukon sivutuksen toteuttamisen osalta.

Lisätty

15.2.0

Julkaistu 24.4.2025

Korjattu

  • Korjattu FileInput-komponentin ongelma, jossa samaa tiedostoa ei voinut lisätä heti uudestaan.
  • Korjattu Chat-komponentin tumman teeman saavutettavuusongelma, jossa kontrastivaatimus ei täyttynyt näytettäessä viestikuplassa virhetilaisia lomekekomponentteja.
    • Muutettu oikeanpuoleisen viestikuplan oletusulkoasua tummassa teemassa; annettu kuplalle tummempi taustaväri ja lisätty reunaviiva.
  • Korjattu Select-komponentin ongelma, joka aiheutti nuolen sijoittumisen valinnan tekstin päälle.
  • Korjattu List-komponentti säilyttämään sisäkkäiset listat unstyled-propin kanssa ilman tyylejä.
  • Korjattu ComboboxV2-komponentin kohdistus näkymään virhetilaisessa kentässä.
  • Korjattu useBackToTop-hookin toiminnallisuutta:
    • Painike pysyy edelleen näkyvillä, kun sivu vieritetään nopeasti loppuun asti.
    • Painike piilotetaan, kun sivua vieritetään hitaasti alaspäin ja määritelty raja-arvo threshold.scroll ylittyy.
    • Painike tulee näkyville vasta raja-arvon threshold.top ylittyessä, jos threshold.bottom ja threshold.scroll arvoja on kasvatettu.

Muutettu

  • Päivitetty komponenttien ja hookien API-kuvausten ulkoasua ja rakennetta dokumentaatiossa, mahdollistettu useamman hookin API-kuvauksen näyttäminen samalla sivulla.
  • Muutettu Link, LinkBox ja LinkWithInfo-komponentit välittämään ref-attribuutti renderöitävälle elementille.
  • Päivitetty lomakekomponenttien nimilapun, ohje- ja aputekstien, sekä valikoiden kokoa tiiviimmäksi xs- ja sm-koossa.
    • Nimilapun, ohje- ja aputekstien tiivistäminen vaatii lisäksi autoSize-propin seuraavien komponenttien kanssa:
    • autoSize-prop on käytössä väliaikaisesti versioon 16.0.0 asti, jossa se poistetaan ja tiiviimmät lomaketekstit tulevat automaattisesti käyttöön Poistuva ominaisuus
  • Muutettu näppäinoikotiet teeman ja ulkoasutilan vaihtamiseen Firefox-selaimen uudessa versiossa olleen päällekkäisyyden vuoksi.
    • Teeman vaihtaminen: shift + alt + z
    • Ulkoasutilan vaihtaminen: shift + alt + x
  • Päivitetty DescriptionList-komponentin toimintaa:
    • Lisätty DescriptionList-komponentille as,itemAs ja itemContentAs-propit elementtien vaihtamista varten.
    • Lisätty DescriptionListItem-komponentille as ja contentAs-propit elementtien vaihtamista varten.
    • DescriptionList-komponentin listaelementit muuttuvatspan-elementiksi, jos DescriptionList on p-elementti ja div-elementeiksi, jos DescriptionList on div.
  • Merkitty ButtonToolbar-komponentti poistuvaksi versiossa 16.0.0 Poistuva ominaisuus
    • Siirry käyttämään sisäkkäisiä ButtonGroup-komponentteja isToolbar-propilla.
  • Merkitty ButtonGroup-komponentin size-prop osittain poistuvaksi versiossa 16.0.0 Poistuva ominaisuus
    • size-prop tulee asettamaan ainoastaan painikekomponenttien välistykset, eikä se muuta painikkeiden kokoa.
    • Painikkeiden koko tulee asettaa suoraan painikkeille.
    • Arvo lg poistuu käytöstä.
  • Päivitetty List-komponentin numeroimattoman listan ulkoasua.

Lisätty

  • Lisätty seuraaville komponenteille size-prop koon asettamista varten:
  • Lisätty uusi TableV2-komponentti.
    • Aiempi Table-komponentti poistuu käytöstä versiossa 17.0.0 Poistuva ominaisuus
    • Uuden taulukkokomponentin käyttötapa on pääasiassa sama, mutta joidenkin komponenttien ja proppien nimet ovat vaihtuneet.
    • Komponentti toimii paremmin palvelinpuolella renderöitynä (SSR), staattisten ominaisuuksien osalta.
    • Kaikille elementeille voi välittää ref:n.
    • Uudet komponentit: TableV2Container, TableV2Caption, TableV2Footer ja TableV2SortButton.
    • ID:t ja data-testid:t muodostetaan yhtenäisemmin muiden komponenttien kanssa.
    • ID:n antaminen ei ole enää pakollista esimerkiksi avattavan rivin tai valintojen kanssa.
    • dense-prop ja/tai cellType helpottaa räätälöintien toteuttamista niiden solujen osalta, jotka tarvisevat tiiviimmän ulkoasun (avauspainikkeet, ikonit jne.).
    • CSS-tyyleistä on poistettu syvät selektorit, joten CSS-apuluokkien käyttö taulukon kanssa onnistuu paremmin.
    • Otsikkoriville lisättävien toimintojen toteutus on helpompaa.
    • Parannettu kelluva otsikkorivi -esimerkin suorituskykyä.
  • Lisätty Tooltip-komponentille id, joka välitetään avaavalle elementille.
  • Lisätty ButtonGroup-komponentille uusi size-arvo xs
  • Lisätty uusi IconFileLock-käyttöliittymäkuvake.

15.1.0

Julkaistu 27.3.2025

Korjattu

  • Korjattu laajennettavan Alert-komponentin otsikon väri Kanta-teemassa.
  • Korjattu tummassa Kela-teemassa komponenttien punaisten varianttien teksti- ja ikonivärin muuttuja-arvoja astetta vaaleammaksi, jotta kontrasti pysyy saavutettavana kaikissa tilanteissa.
  • Korjattu TableHeadRow- ja TableRow-komponenttien ref-tyypitykset.
  • Korjattu näppäimistöllä navigoidessa kohdistus pysymään Sidebar-komponentin sisällä isOverlay-tilassa ruudunlukijan kanssa.
    • Lisätty uusi focusTrap-proppi, joka lukitsee kohdistuksen komponentin sisälle.
  • Korjattu Dropdown-komponentin valikon asemointia mobiililaitteilla siten, ettei valikko avautuessaan venytä ruutua, esimerkiksi MainBar-komponentin kanssa.
  • Korjattu Select-komponentin ulkoasua ja toimintaa htmlSize- ja multiple-proppien kanssa.

Muutettu

  • Päivitetty komponenttien HTML-rakenteen ja tyylien hyödyntäminen -ohjetta.
  • Muutettu tummassa Kanta-teemassa virheilmoitusten tekstivärin sävy tummemmaksi.
  • Päivitetty Skeleton-komponenttia käyttäviä koodiesimerkkejä.
  • Muutettu DropdownToggle-komponentti välittämään ref-attribuutti renderöitävälle elementille.
    • Lisätty dokumentaatioon ohjeistus kohdistuksen palauttamisesta valikon avaavalle painikkeelle.
  • Muutettu useSort-hookki säilyttämään samalla arvolla olevien alkioiden suhteellinen järjestys.
  • Päivitetty DatePicker-komponenttien käyttämä react-day-picker-kirjasto versioon 9.6.2 ja date-fns versioon 4.1.0.
  • Päivitetty ComboboxV2- ja ComboboxV2Async-komponentteja seuraavasti:
    • Lisätty mahdollisuus avata ja sulkea valikko valikkopainikkeesta ruudunlukijan kanssa mobiililaitteissa.
      • Huom! Komponentille tulee antaa a11yOptions.resetButtonLabel-propin kautta kieliversioitu teksti painikkeelle, ruudunlukijoita varten.
    • Lisätty painike, jolla saa tyhjennettyä syöttökentän sisällön (showResetButton-prop, joka on oletuksena päällä).
      • Huom! Komponentille tulee antaa a11yOptions.toggleButtonCloseLabel- ja a11yOptions.toggleButtonOpenLabel-proppien kautta kieliversioitu teksti painikkeelle, ruudunlukijoita varten.
  • Päivitetty ComboboxV2Async-komponenttia seuraavasti:
    • Näytetään oletusvalintavaihtoehdot, kun valikko avataan ja input-kenttä on tyhjennetty.
    • Ei tuloksia -tekstiä tai muu vaihtoehto -valintaa ei enää näytetä, jos syöttökenttä tyhjennetään (mahdollista ylikirjoittaa palauttamalla loadOptions-funktiosta showNoResults tai showOtherOption).
    • loadOptions-funktio saa parametrina threshold- ja startsWith-proppien arvot, joita voi hyödyntää valintavaihtoehtojen suodatuksessa.
  • Päivitetty dokumentaation käytössä olleita näppäinkomentoja ja lisätty niistä maininnat tumman tilan ja Kanta-teeman ohjeisiin.
    • Teeman vaihtaminen: shift + alt + z
    • Ulkoasutilan vaihtaminen: shift + alt + x
  • Parannettu Multiselect-komponentin saavutettavuutta:
    • Korjattu virheellinen aria-activedescendant-attribuutin arvo, silloin kun mikään valinnoista ei ole aktiivinen.
    • Muutettu nimilapun klikkaus siirtämään kohdistus painikkeeseen.
    • Muutettu valintojen aria-checked → aria-selected attribuutiksi, joka on paremmin tuettu eri ruudunlukija- ja selainyhdistelmillä.
  • Päivitetty Kannan väripaletin kanta-warning-red vaaleita sävyjä.

Lisätty

  • Lisätty BackToTop-komponentti, joka luo painikkeen sivun yläosaan siirtymiseen.
  • Lisätty useBackToTop-hook, joka näyttää ja piilottaa BackToTop-komponentin valmiiden sääntöjen pohjalta.
  • Lisätty Badge-komponentin variant-propille uudet subtle värivaihtoehdot.
  • Lisätty Chat-komponentin saavutettavuusohjeisiin osio valintaryhmien toteutuksesta.
  • Lisätty FileInput-komponentille size-prop, eri kokovaihtoehtojen toteuttamiseen.
  • Lisätty dokumentaatioon esimerkit lomakekomponenttien kokovaihtoehdoista ja päivitetty tilanhallinnan esimerkkejä:
  • Lisätty seuraaville komponenteille esimerkit HTML- ja tyylimääritysten hyödyntämisestä:
  • Lisätty DatePickerV2- ja DateRangePickerV2-komponenteille mahdollisuus välittää attribuutteja input-kentälle.
    • DateRangePickerV2-komponentille attribuutit välitetään fromAttrs- ja toAttrs-proppien kautta.
  • Lisätty DatePickerV2- ja DateRangePickerV2-komponenteille helpers-prop aputoimintojen näyttämiseen.
  • Lisätty Haku-ohjeeseen esimerkki aputoimintojen käyttämisestä rajattaessa hakua päivämäärillä.
  • Lisätty ComboboxV2-komponentin tyypityksiin input-kentän attribuutit.
  • Lisätty Toisen puolesta asiointi -ohje.
  • Lisätty Multiselect-komponentille seuraavat ominaisuudet:
    • shouldFocusSearch-prop, joka siirtää kohdistuksen valmiiksi hakukenttään valikon avautuessa
    • groupBy-prop, jonka avulla voi ryhmitellä valinnat
    • data-testid-attribuutti jokaiselle valinnalle (muodostuu testId-propista ja valinnan value-arvosta)
  • Lisätty React-komponentteina tarjottaviin ikoneihin ja logoihin oletuksena role="img".
  • Lisätty NavLink ja DropdownMenuItem -komponenteille “danger”-variantti uloskirjautumislinkin toteuttamiseen.
  • Lisätty Sidebar-komponentille reunaviiva, jotta elementti erottuu paremmin taustasta myös tummassa teemassa.
  • Lisätty SelectionLasso-komponentti ja useSelectionLasso-hook valintalassotyökalun toteuttamiseen.
  • Lisätty Tietoa suunnittelumalleista-osio.
  • Lisätty ToggleSwitch-komponentti valinnan tekemiseen kahden toisensa pois sulkevan tilan väliltä.
  • Lisätty Input-komponentille seuraavat ominaisuudet:
    • forceAddon-prop, jolloin komponentti käyttää addon-proppien HTML-rakennetta.
    • inputClassName-prop, joka välittää CSS-luokan aina input-kentälle addon-proppeja käyttäessä.

15.0.0

Julkaistu 13.2.2025

Korjattu

  • Korjattu Heading-komponentin puuttuva API-kuvaus.
  • Korjattu IconLaptopClock-ikonin nimeksi IconLaptopLock.
  • Korjattu Panel-komponentin ongelma, jossa suljettu paneeli välähti ensimmäisellä renderöinnillä SSR-tilassa.
  • Korjattu Sidebar-komponentin ongelma, jossa overlay-tilassa näppäimillä ei päässyt kaikkiin elementteihin.

Muutettu

  • Päivitetty Multiselect-komponentin dokumentaation “Valintojen poistaminen komponentin ulkopuolelta” koodiesimerkkiä.
  • Päivitetty Chip-komponentin dokumentaatiota.
  • Muutettu Panel-komponenttia seuraavasti Rikkova muutos:
    • Panel käyttää oletuksena fieldset-elementin sijasta section-elementtiä, joka on yhdistetty automaattisesti aria-labelledby:lla otsikkoon.
    • Jos Panel-komponenttia käytetään lomake-elementtien ryhmittelyyn, tulee sille määrittää lisäksi role="group"-attribuutti.
  • Parannettu haitarikomponenttien saavutettavuutta lisäämällä otsikko avaavan painikkeen ympärille:
    • Muutokset eivät vaikuta komponenttien ulkoasuun, mutta otsikkotasot tulee määritellä loogisesti saavutettavuuden varmistamiseksi Rikkova muutos
    • Accordion: lisätty AccordionToggle-komponentille headingAs-prop, jolla voi määrittää otsikkotason (oletus h3).
    • Alert (laajennettava): lisätty collapseTitleAs-prop, jolla voi määrittää otsikkotason (oletus h2).
    • Panel (avattava): headingAs-propilla voi määrittää otsikkotason (oletus h2).
    • Collapse: lisätty CollapseToggle-komponentille renderToggle-prop, jolla voi tarvittaessa määrittää otsikkotason.
    • useCollapse: päivitetty koodiesimerkki huomioimaan otsikkotason.
  • Poistettu kaikilta komponenteilta deprekoitu util-prop, jonka voi korvata className-propilla. Rikkova muutos
  • Nimetty TitleBarAction-komponentin labelUtil-prop uudestaan nimelle labelClassName. Rikkova muutos
  • Nimetty MainBarAction-komponentin labelUtil-prop uudestaan nimelle labelClassName. Rikkova muutos
  • Muutettu Sidebar-komponentin toimintaa:
    • Poistettu SidebarNavItem sekä SidebarNavHeading-komponentit. Rikkova muutos
    • Poistettu Sidebar-komponentin navLinks-prop. Navigaatioelementit annetaan komponentille lapsielementteinä. Rikkova muutos
  • Poistettu deprekoidut DatePicker sekä DateRangePicker-komponentit. Rikkova muutos
  • Poistettu Page-komponentti. Rikkova muutos
  • Poistettu Footer-komponentilta copyrightText, links ja isLegacypropit. Rikkova muutos
  • Poistettu deprekoitu malli useSort(data, locale, options) parametrien välittämiseen useSort-hookille. Rikkova muutos
  • Poistettu deprekoitu MainBarSearch-komponentti. Rikkova muutos
  • Poistettu ContentHighlight-komponentin type-proppi. Rikkova muutos
  • Poistettu vanhat Bootstrapin CSS-apuluokat dist/css/legacy/legacy-utils.min.css. Rikkova muutos
  • Nimetty IconLeftArrowCircle-ikoni uudelleen nimelle IconArrowCircleLeft sekä IconRightArrowCircle nimelle IconArrowCircleRight. Rikkova muutos
  • Poistettu vanhat kuvitusikonit. Rikkova muutos
  • Muutettu DatePickerV2- ja DateRangePickerV2-komponenttien päivämäärä näkymään oletuksena ilman etunollia.
    • Aiemman toiminnan voi palauttaa asettamalla showLeadingZeros-propin arvoksi true.
  • Muutettu MainBar-komponentin sticky-propin oletusarvoksi false. Rikkova muutos
    • Lisätty dokumentaatioon osio kelluvan MainBarin toteutuksesta.
    • Päivitetty Asiointi esimerkkiä kirjautuneen asiakkaan nimen esittämisen osalta.
  • Muutettu TextInput-komponentti tyypittymään palautuvan komponentin (Input, Textarea tai Select) mukaisesti.
    • Muutos korjaa TextInput:lta puuttuvia proppien tyypityksiä.
    • Muutos voi aiheuttaa rikkovia muutoksia, jos exportoituja tyypityksiä on käytetty tai proppien tyypityksiä muuten laajennettu. Rikkova muutos
    • Merkitty select- ja multiline-propit poistuviksi versiossa 16.0.0. Siirry käyttämään element-proppia. Poistuva ominaisuus
  • Yhtenäistetty komponenttien tyypitykset käyttämään type aliasta interface:n sijaan. Rikkova Muutos
  • Päivitetty Table-komponentin CSS-toteutusta mahdollistamaan taulukon koon muuttamisen CSS-muuttujilla.
  • Muutettu Button-komponetin light-variantin tyyliä käytettäessä appearance="outline" tai appearance="link".
  • Muutettu z-index -muuttujien logiikkaa siten, että z-index-header saa pienemmän ja z-index-dropdown suuremman arvon.
  • Laajennettu värimuuttujien musta kahteen erilliseen arvoon: COLOR_BLACK_90, COLOR_BLACK_100. Rikkova Muutos
    • COLOR_BLACK_100 korvaa aiemman arvon COLOR_BLACK.
  • Muutettu $icon-size-xs-design-muuttujan arvo: 1em → 1rem. Rikkova muutos
    • Ikoneiden ja kuvakkeiden size="xs" käyttää arvoa 1rem.
    • Ikoneille ja kuvakkeille on lisätty uusi size="relative" arvo (oletus), jolla saa aiemman ympäröivän tekstin kokoon suhteutetun 1em-arvon palautettua.

Lisätty

  • Lisätty teemakerrokseen tumman tilan (dark mode) tuki.
    • Uusittu ulkoasuteeman tekninen toteutus ja päivitetty teeman CSS-muuttujat. Huom! Saattaa aiheuttaa muutostarpeita, mikäli sovelluksessa on hyödynnetty KDS:n ulkoasuteeman CSS-muuttujia.
    • Siirretty vanhentuneet teemamuuttujat tarjolle omiin CSS-tiedostoihin (legacy-variables-kanta.min.css, legacy-variables-kela.min.css), jotka voi tarpeen mukaan ottaa käyttöön helpottamaan versiopäivitystä. Poistuva ominaisuus
    • Sallittu Alert ja Box -komponenteissa bgColor-propille arvo background, joka antaa komponentille sovelluksen teeman mukaisen taustavärin.
  • Lisätty ohjeet tumman tilan käyttöönotosta, soveltamisesta ja väreistä.
  • Lisätty useMode-hook ulkoasuteeman tilan (tumma/vaalea) tunnistamiseen ja vaihtamiseen.
  • Lisätty ohjeet ja resurssit neliöelementtien soveltamiseen Kanta-brändin mukaisissa verkkopalveluissa.
  • Lisätty esimerkki käytöstä poistuneen Page-komponentin toteuttamasta kohdistuksen siirto -elementistä saavuttavuusohjeisiin.
  • Lisätty työkaluja CSS-apuluokkien toteuttamiseen tekstiväreille, taustaväreille ja reunaviivan väreille.
  • Lisätty SelectionGroup-komponentille uusi requiredGroup-prop.
  • Lisätty ChatMessage-komponentille uusi isNameAlwaysVisible-proppi, joka mahdollistaa viestin lähettäjän nimen näyttämisen peräkkäisissä viesteissä.

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.