What is new

Here you will find summarized patch notes of major releases of HDS. For full patch notes for each release, please refer to the GitHub releases.



12.7.2022 - Release notes

  • Fixed: Navigation title font size styles


30.6.2022 - Release notes

  • Added: Navigation DropdownLink
  • Fixed: Dialog unwanted content scrolling


27.6.2022 - Release notes

  • Change: Typography updates in multiple components to match new hel.fi visual identity
  • Added: New documentation site
  • Change: Container component maximum width is restricted only with the --container-width-xl value
  • Fixed: Grayscale design tokens' values to match the percentage names
  • Removed: Deprecated theme variables

Releases before the version 2.0


30.5.2022 - Release notes

  • Added: AriaLabel property to Navigation and SideNavigation to distinguish different navigational components
  • Fixed: SideNavigation keyboard navigating on smaller screens
  • Fixed: initializing of useMobile hook. Used in Navigation component
  • Fixed: Tabs' Tab OnClick callback is called also when a tab is selected with the keyboard


5.5.2022 - Release notes

  • Added: className prop for dialog action button container to enable customisation
  • Added: ref prop for Link to fix preloading content with Next.js framework
  • Added: Support for React 17
  • Fixed: Wrapping of dialog action buttons on desktop


20.4.2022 - Release notes

  • Added: Pagination Core component
  • Fixed: Dialog re-rendering when content state changes


22.3.2022 - Release notes

  • Added: Indeterminate Checkbox state
  • Added: Tabs initiallyActiveTab and Tab onClick properties
  • Removed: Node engine restriction


8.3.2022 - Release notes

  • Fixed: Core table header's default background color


23.2.2022 - Release notes

  • Added: Stepper component
  • Added: Inclusive design guideline
  • Added: Multi-page form patterns documentation
  • Added: Box-shadow design token
  • Added: Box shadow support for elevated components: Card, Dialog, Notification, and Tooltip
  • Added: Dense property variant for Koros types
  • Added: Clear-button support for single Select and Combobox


31.1.2022 - Release notes

  • Added: Thumb icons
  • Added: Documentation guideline page for Koros
  • Changed: Add support to use Tabs child components in Tabs namespace, for example, Tabs.TabList
  • Fixed: Footer's back-to-top will focus on the first focusable element
  • Fixed: Prevent text inputs' rounded corners in iOS


5.1.2022 - Release notes

  • Added: Possibility to rotate Koros
  • Added: Support for a placeholder in Search Input
  • Added: WP and Drupal notes to the developers’ Getting Started documentation
  • Added: An example of asking the user’s gender in a form in the Form pattern documentation
  • Fixed: Resolved critical security threats in the new documentation site


9.12.2021 - Release notes

  • Added: 9 new icons
  • Added: Support for customising Tabs with theme
  • Added: Support for Search Input onChange property
  • Added: Support for hiding Search Input's search button
  • Added: Support for icons in multi-select variants of Select and Combobox components
  • Fixed: Fix previous and next month focus disappearing in DateInput's Datepicker
  • Fixed: Clicking Search Input's suggestion triggers onSubmit
  • Fixed: Removing selectedItem with the Enter key press and with space keypress in Search Input
  • Fixed: Add focus outline to Buttons to preserve outline on click also in Safari


25.11.2021 - Release notes

  • Added: React Table component
  • Added: Favicon documentation
  • Added: DateInput supports disabling dates based on custom logic
  • Changed: Logo language and size variants documentation
  • Fixed: Resetting Select value to null
  • Fixed: DateInput's datepicker keyboard navigation when min or max date is set


28.10.2021 - Release notes

  • Added: Table to HDS core
  • Added: Calm variant of Koros
  • Fixed: Notification animations not firing with some build configurations, often in production builds


22.9.2021 - Release notes

  • Added: File Input
  • Added: Info text to inform the user of dynamic input value changes
  • Added: Shopping cart icon
  • Changed: Accordion to open via header click


7.9.2021 - Release notes

  • Added: Linkbox
  • Added: SideNavigation
  • Added: Guideline page for choosing between checkboxes, radiobuttons, and toggles
  • Added: Whatsapp icon
  • Fixed: NumberInput onChange event when using stepper buttons


11.8.2021 - Release notes

  • Changed: Color Spåra (color-tram) token value from #009246 to #008741 to achieve better accessibility
  • Changed: Added support for clearing DateInput value programmatically
  • Fixed: Multiple bug fixes


9.8.2021 - Release notes

  • Added: Link
  • Added: Upcoming breaking changes page which lists near future changes that may be considered breaking
  • Added: Guideline page for contributing for implementation
  • Added: Tutorial page for getting started with Abstract
  • Fixed: Multiple bug fixes


21.6.2021 - Release notes

  • Added: Fieldset
  • Added: Toggle button
  • Added: Documentation and guidelines for creating new HDS icons
  • Added: Documentation for error messages related to multiple input fields
  • Changed: Renamed all “Fixed” components to “Read-only” in the Design kit to match naming used in the implementation
  • Fixed: Text input error and success text alignments


25.5.2021 - Release notes

  • Added: Password input field
  • Added: Examples for colour usage
  • Added: Icon variations for labels
  • Added: colour usage examples
  • Changed: Improvements for sizing in tags and labels
  • Changed: Improvements for colour usage documentation
  • Fixed: Date picker positioning
  • Fixed: Improvements for Storybook examples loading time


3.5.2021 - Release notes

  • Changed: Documentation and component statuses updated for the 1.0 version
  • Fixed: Small fixes and improvements for multiple components
  • Removed: Previously deprecated Dropdown component

Releases before the version 1.0

0.25.0 (beta)

14.4.2021 - Release notes

  • Added: Phone input component
  • Added: Dialog component
  • Fixed: Select component content overlap with long labels
  • Removed: Deprecated labelText property from TextInput, TextArea, Number Input, Checkbox and RadioButton components

0.24.0 (beta)

29.3.2021 - Release notes

  • Added: Number input component
  • Added: Loading button component
  • Added: 10 new icons
  • Fixed: Navigation component SSR logout bug

0.23.0 (beta)

12.3.2021 - Release notes

  • Added: Time input to React package
  • Fixed: Navigation component server-side rendering bug

0.22.0 (beta)

4.3.2021 - Release notes

  • Added: Date input with a date picker to React package
  • Fixed: Removed unwanted footer border in Safari browser

0.21.0 (beta)

19.1.2021 - Release notes

  • Added: Search input to Core package
  • Changed: Updated statuses of multiple components
  • Fixed: Multiple bug fixes

0.20.0 (beta)

5.1.2021 - Release notes

  • Added: New component Tabs

0.19.0 (beta)

22.12.2020 - Release notes

  • Added: New component Accordion

0.18.0 (beta)

8.12.2020 - Release notes

  • Added: New component Search field
  • Added: New pattern Form validation

0.17.0 (beta)

24.11.2020 - Release notes

  • Added: New component Container
  • Added: Koros to the Core package
  • Changed: Removed non-semantic rounded corners from all of the components

0.16.0 (beta)

13.11.2020 - Release notes

  • Added: New components Loading spinner, Selection group, Tag
  • Fixed: Accessibility issues in the Notification component

0.15.0 (beta)

29.10.2020 - Release notes

  • Added: First pattern Forms
  • Added: New components Tooltip, Card
  • Added: New icons, fill variants for notification icons
  • Changed: Colour token names and values of light/dark variants
  • Reworked: Visual style of some icons to more accessible
  • Fixed: Multiple accessibility improvements to existing components. All released components have now passed the accessibility audit.
  • Fixed: Multiple bug fixes existing components.

0.14.0 (alpha)

15.10.2020 - Release notes

  • Added: New component Footer
  • Reworked: Dropdown has gone through a complete overhaul, and the component was divided into two components; Select and Combobox.
  • Fixed: Multiple accessibility improvements to existing components

0.13.0 (alpha)

1.9.2020 - Release notes

  • Added: New components Navigation, Logo
  • Reworked: Notification component
  • Changed: You can now import specific HDS React components instead of having to import the whole package
  • Changed: Breakpoint and container width tokens slightly changed to allow bigger outside margins in edge cases
  • Fixed: Multiple bug fixes and improvements to existing components

0.12.0 (alpha)

14.8.2020 - Release notes

  • Added: New component Status label
  • Added: Core .css files are now available as minified and non-minified version
  • Added: Required field indicator styles to the Core TextInput and TextArea components
  • Changed: Removed all global styles
  • Changed: Removed all component-specific design tokens
  • Changed: Updated typography tokens to allow variable heading scale
  • Changed: Changes to breakpoint and content width tokens
  • Changed: Small changes to UI status colours to achieve better accessibility

0.11.0 (alpha)

2.6.2020 - Release notes

  • Added: New icons
  • Added: New design tokens for breakpoints and maximum content widths
  • Changed: Updated HDS icon library and documentation

0.10.0 (alpha)

26.5.2020 - Release notes

  • Added: New components Button, Checkbox, Dropdown, Koros, Radio button, Text input, and Text area
  • Added: New design tokens for Colour, Typography, and Spacing
  • Changed: Updated documentation site with new content for Getting started, Guidelines, Visual elements, About and Contributing sections