Siirry sisältöön
Kela Design System KDS

15.1.0

Versiohistoria

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

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: ctrl + alt + z
    • Ulkoasutilan vaihtaminen: ctrl + 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.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.