Versiohistoria

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

• Lisätty vaiheistuksen -design pattern.
• Lisätty useAriaLive-hook, jolla voi toteuttaa ilmoituksia ruudunlukijalle.
• Lisätty Card-komponentille rounded-prop.
• Lisätty 17 kpl uusia kuvitusikoneita ja 4 kpl uusia käyttöliittymäkuvakkeita.
• Lisätty Tabs-komponentille mahdollisuus liittää välilehden sisältö välilehtipainikkeeseen ruudunlukijalle.
• Lisätty Korttimaiset-esitystavat -design patterniin esimerkki taulukkomaisen datan esittämisestä nostokortissa.

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

• Korjattu XSS-haavoittuvuus Table-, Multiselect- ja Combobox-komponenttien ruudunlukijan ilmoituksessa.

14.0.0

Julkaistu 16.4.2024

• Versiopäivitysohjeesta löytyy tarkemmat ohjeet rikkovien muutosten korjaamiseen.

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 Container, Modal ja Toast-komponenttien maksimileveydet rem-arvoiksi.
  • Uudet relatiiviset container-leveydet löytyvät design-muuttujista.
• 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

• Ikoneista, kuvakkeista sekä logoista löytyvät uudet svg-muotoiset tiedostot dist/images-kansiosta.
• Lisätty uusia käyttöliittymäkuvakkeita (16 kpl) ja kuvitusikoneita (23 kpl).
• Lisätty InputText-komponentille mt ja mb -propit välistyksen muokkaamiseen.
• Lisätty tietoa KDS:n selaintuesta.
• Lisätty useMediaQuery-hook ja päivitetty Sivupohja Sidebar-navigaatiolla-esimerkki käyttämään sitä.
• Lisätty uusi Status-komponentti tilatiedon esittämiseen.
• Lisätty uudet z-index-design-muuttujat, teemamuuttujat sekä apuluokat.

Korjattu

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