v2.0.0

[2.0.0] - June, 27, 2022

Design Tokens

Breaking Changes

Added

• [Typography] New XXL heading size (64px)
• [Typography] New XL-Mobile heading size (40px)

Changed

• [Typography] Made changes to HDS heading font sizes to match Hel.fi styles
  • XL from 52 to 48px
  • L from 36 to 32px
• [Typography] Line-height tokens are no longer used for headings. All headings now have their own line-height value. Use helper CSS classes from Core to easily follow the new values.

Fixed

• [Colour] The grayscale tokens' hex values to match the percentage names

Core

Breaking Changes

Added

• [Typography] Heading helper classes

Changed

• [Card, Notification, Table] Typography styles updated
• [Container] Only container-width-xl is restricting the container maximum width. Other maximum width restrictions for smaller screens have been removed.
• [Button] Update Supplementary button icon spacing

React Components

Breaking Changes

Changed

• [Accordion, Card, Dialog, Footer, Linkbox, Navigation, Notification, Stepper, Table, Tooltip] Typography styles updated
• [Container] Only container-width-xl is restricting the container maximum width. Other maximum width restrictions for smaller screens have been removed.
• [Dialog] Updated Dialog header and content spacing to match the design
• [Link] The default size of the link to medium font size from small font size
• [Button] Update Supplementary button icon spacing

Removed

• [Accordion] Removed deprecated --button-border-color-hover theme variable
• [Table] Removed deprecated --background-color theme variable

Design kit

Added

• [Typography] HDS heading styles have been synced with the new Hel.fi styles
• [Typography] New XXL heading size (64px)
  • This also means that the total amount of heading levels has been increased from 5 to 6
• [Typography] New XL-Mobile heading size (40px)
• [Accordion] Two additional Accordion sizes, L (Large) and S (Small)
• [Links] Two additional sizes for the Standalone link, S (Small) and M (Medium)

Changed

• [Typography] Made changes to HDS heading font sizes to match Hel.fi styles
  • XL from 52 to 48px
  • L from 36 to 32px
• [Typography] Made changes to HDS heading line-heights to match Hel.fi styles
  • XL from 62 to 48
  • L from 43 to 32
  • M from 29 to 32
  • S from 24 to 28
  • XS from 22 to 24
• [Typography] Made changes to HDS heading font weights to match Hel.fi styles
  • XL from Bold to Regular
  • L from Bold to Regular
  • M from Bold to Medium
  • S from Bold to Medium
• [Typography] Made changes to HDS body font sizes to match Hel.fi styles
  • Sizes available sizes are now 14, 16, 18 and 20px
  • The L size (18px) is now marked as the default size
• [Typography] Made changes to HDS body text line heights to match Hel.fi styles
  • S from 26 to 24
  • L from 27 to 28
  • XL from 30 to 32
• [Typography] Updated line-height token descriptions
• [Typography] Updated typography example artboards with new heading styles
• Updated all HDS example artboards with new heading styles
• [Accordion] Optional “Close” button at the bottom of Accordions
• [Accordion] Renamed and grouped the current set of Accordions under “M” size
• [Accordion] Increased the size of the collapse icon from 24x24 to 32x32 of M size symbols
• [Accordion] Small spacing changes to “Empty” accordion symbols
• [Grids and Breakpoints] Updated example artboards to reflect the new container width changes
• [Accordion] Updated symbols with new heading styles
• [Accordion] Small spacing changes to accommodate new heading styles
• [Accordion] The symbol now properly supports multi-line headers
• [Cards] Updated symbols with new heading styles
• [Cards] Small spacing changes to accommodate new heading styles
• [Footer] Updated symbols with new heading styles
• [Form Components] Updated date picker and error summary with new heading styles
• [Modals and Notifications] Updated symbols with new heading styles
• [Modals and Notifications] Small spacing changes to Notifications to accommodate slightly altered heading styles
• [Modals and Notifications] Small height changes to Dialogs to accommodate slightly altered body styles
• [Navigation] Updated symbols with new heading styles
• [Navigation] Updated the mobile symbol to use XSS heading token
• [Table] Small spacing changes to accommodate newly sized labels

Fixed

• [Cards] Fixed smart layout scaling of Text + heading Card with borders
• [Colour] Updated grayscale token hex values to match their exact percentage values
  • color-black-70 from #4c4c4c to #4d4d4d
  • color-black-40 from #999898 to #999999
  • color-black-30 from #b2b2b2 to #b3b3b3
  • color-black-10 from #e5e5e5 to #e6e6e6
  • color-black-5 from #f1f1f1 to #f2f2f2

Removed

• [Typography] Heading styles with Bussi colour (in the future, Black and White styled headings are recommended)

Documentation

• The HDS 2.0 update features a rebuilt documentation site. The old version 1 documentation site can still be accessed at hds.hel.fi/v1. All changes included in this update are targeted at the new documentation site. The old documentation site will stay unchanged.

Added

• New documentation site
  • The new documentation site is entirely built with HDS components and is accessible. We hope that the new documentation site will act as an example both for using HDS components and building accessible websites with them.
  • New documentation site features include; a new page structure, redesigned component pages, live code editing for component examples, component customisation documentation, redesigned design token pages, redesigned getting started section
  • 2.0 guide pages (general explanation and migration guide)
  • FAQ page with answers to general, design, implementation, and accessibility questions
  • New HDS structure images to home and getting started pages
  • A notification to Navigation, Footer, and SideNavigation about the upcoming Hel.fi update

Changed

• Updated the Typography documentation
• Updated the Colour documentation to reflect new grayscale colour changes
• Updated the Breakpoint design token documentation to reflect new Container component changes
• Updated the Grid guidelines documentation to reflect new Container component changes
• Updated the What is new page
• Updated the Roadmap page
• Updated the accessibility statement
• Updated the following component statuses
• DateInput, Dialog, Link, and Table from “Draft” to “Stable”

Removed

• Migration guide to the 1.0 version (can be still found at the version 1 documentation site)

v1.15.0

[1.15.0] - May, 30, 2022

React Components

Added

• [Navigation] add ariaLabel property
• [SideNavigation] add ariaLabel property

Fixed

• [Navigation] initializing of useMobile hook
• [SideNavigation] Keyboard navigation on small screens
• [Tabs] Tab OnClick callback is called also when a tab is selected with the keyboard

Design kit

Changed

• Updated HDS Sketch libraries to Sketch 88.1

v1.14.0

[1.14.0] - May, 5, 2022

React Components

Added

• [Dialog] className prop for dialog action button container to enable customisation
• [Link] ref prop to fix preloading content with Next.js framework
• Added support for React 17

Fixed

• [Dialog] Wrapping of dialog action buttons on desktop

Design kit

Changed

• Updated HDS Sketch libraries to Sketch 86

v1.13.0

[1.13.0] - Apr, 21, 2022

Core

Added

• Pagination

React Components

Fixed

• [Dialog] Prevent unnecessary re-rendering when content state changes

Design kit

Added

• New library: HDS Pagination
• Includes symbols for a Pagination component

Changed

• Updated HDS Sketch libraries to Sketch 85 (85.1)
• [Table] Removed smart layout from the Table Checkbox cell symbol (this allows hiding the Checkbox without changing the cell height)

Documentation

Added

• Documentation for the Pagination component

v1.12.0

[1.12.0] - Mar, 22, 2022

Core

Added

• [Checkbox] Indeterminate state

React Components

Added

• [Checkbox] Indeterminate state
• [Tabs] initiallyActiveTab property for setting initially active tab (default is the first tab)
• [Tabs] Tab onClick property for adding callback for tab click

Removed

• Node engine restriction by replacing node-sass lib with sass

Design kit

Added

• [Form Components] Indeterminate state for the Checkbox component

Documentation

Added

• [Checkbox] Documentation for the indeterminate checkbox state

v1.11.1

[1.11.1] - Mar, 8, 2022

Core

Fixed

• [Table] The header default background color

v1.11.0

[1.11.0] - Feb, 23, 2022

Design Tokens

Added

• Box shadow design tokens

Core

Added

• [Koros] Dense property for rendering denser patterns
• [Table] Add theme variable and a default value for table content cells' background-color
• [Card, Notification] Add possibility to add a box-shadow to elevate component

React Components

Added

• Stepper
• [Koros] Dense property for rendering denser patterns
• [Table] ClassName property for table heading
• [Select, Combobox] Add clear button to Select and Combobox in single select mode
• [Card] Add possibility to customise heading aria-level
• [Table] Add theme variable and a default value for table content cells' background-color
• [Card, Dialog, Notification, Tooltip] Add possibility to add a box-shadow to elevate component

Changed

• [Select, Combobox] Set focus to input after the clear button is pressed

Fixed

• [ErrorSummary] Adds missing focus styles

Design kit

Added

• [Form Components] Multi-page form Stepper component
• [Form Components] Multi-page form Stepper + heading templates
• New library: HDS Shadow
  • Includes three levels of shadow tokens; S, M and L
  • Please refer to the HDS token documentation before using shadows!
• [Koros] Dense koro variant
• [Koros] Angled koro variant

Changed

• Updated HDS Sketch libraries to Sketch version 83.2
• [Cards] An optional shadow to Card symbols
• [Footer] Added a possibility to use the new dense koro variant
• [Modals and Notifications] An optional shadow to Dialog symbols
• [Modals and Notifications] An optional shadow to Notification (Toast) symbols
• [Modals and Notifications] An optional shadow to Tooltip symbols
• [Modals & Notifications] Changed Small Tooltip symbol smart layout alignment from Left to Center. This change makes it easier to use inside other components when the tooltip text is edited.

Fixed

• [Typography] Incorrect link colour of the Medium Regular Centered body text

Documentation

Added

• Multi-page form Stepper component documentation
• Multi-page forms Pattern documentation
• Box shadow token documentation
• [Koros] Code and usage examples for the new dense koro variant
• First draft of the inclusivity guidelines and best practices

Changed

• Set Fieldset, Number Input, Password Input, Phone Input, Time Input, and Toggle Button as stable components
• Replace Playground stories knobs tab with controls

Removed

• Removed deprecated Storybook addon/knobs library. Removes knobs-tab from stories.

v1.10.0

[1.10.0] - Jan, 31, 2022

Core

Added

• [Icons] Thumb icons

Fixed

• [TextInput, TextArea] Prevent rounded corners in iOS browsers

React

Added

• [Icons] Thumb icons

Changed

• [Tabs] Add support to use Tabs child components in Tabs namespace, for example, Tabs.TabList

Fixed

• [TextInput, TextArea] Prevent rounded corners in iOS browsers
• [Footer] Back-to-top will focus on the first focusable element

Design kit

Added

• [Icons] Thumb icons
  • Thumbs up
  • Thumbs up filled
  • Thumbs down
  • Thumbs down filled

Changed

• Updated HDS Sketch libraries to Sketch 82 (82.1)

Documentation

Added

• [Icons] Thumb icons to the Visual assets documentation
• [Koros] Guideline page on how to use Koro shapes

Changed

• [Tabs] Tabs child components use the Tabs namespace, for example, Tabs.TabList
• Updated Roadmap section

Fixed

• [Koros] Remove confusing inline style rotate from example

v1.9.0

[1.9.0] - Jan, 5, 2022

Core

Added

• [Koros] Added possibility to rotate Koros
• [Search Input] Support for a placeholder

React

Added

• [Koros] Added possibility to rotate Koros
• [Search Input] Support for a placeholder

Changed

• For local development of HDS React, restricted node version to supported versions 12-14

Design kit

Changed

• Updated HDS Sketch libraries to Sketch 81 (81.1)

Documentation

Added

• WP and Drupal notes to the developers’ Getting Started documentation
• An example of asking the user’s gender in a form in the Form pattern documentation

Changed

• [Koros] Added an example of a rotated wave motif shape
• [SearchInput] Added a placeholder text to all Playground and code examples

Fixed

• Resolved some critical dependency security threats for the new documentation site

v1.8.0

[1.8.0] - Dec, 9, 2021

Core

Added

• [Icons] New icons
  • 4 45 deg angled arrows
  • Event
  • Coffee
  • Copy
  • Restaurant
  • Sitemap

Fixed

• [Buttons] Add active state to HDS buttons to add focus outline to Safari on click

React Components

Added

• [Icons] New icons
  • 4 45 deg angled arrows
  • Event
  • Coffee
  • Copy
  • Restaurant
  • Sitemap
• [Search Input] Support for onChange property to listen to input value changes
• [Search Input] Support hiding search button
• [Tabs] Enable customisation through theme prop
• [Dropdown] Add icon support for multi-select variants of Select and Combobox components

Fixed

• [Buttons] Add active state to HDS buttons to add focus outline to Safari on click
• [Date Input] Fix previous and next month focus disappearing
• [Search Input] Clicking suggestion triggers onSubmit
• [Search Input] Removing selectedItem with an enter and a space keypress

Design kit

Added

• [Form Components] Multiselect (Select and Combobox) with icon variants
• [Icons] New icons
  • 4 45 deg angled arrows
  • Event
  • Coffee
  • Copy
  • Restaurant
  • Sitemap
• [Modals and Notifications] Added new arrow positions for Tooltip to better match the implementation. New arrow symbols allow setting the arrow closer to the edge of the Tooltip.
• [Modals and Notifications] Examples of all possible arrow positions

Changed

• Updated HDS Sketch libraries to Sketch 80.1
• [Modals and Notifications] Slightly altered the symbol structure of the internal Tooltip symbols
• [Modals and Notifications] Renamed Above and Below Tooltips to Top and Bottom to better match terms used in the implementation
• [Modals and Notifications] Swapped names of Left and Right Tooltips to better match terms used in the implementation

Documentation

Added

• New Icons: Icon set 12/2021
• Example of custom-themed Tabs
• Guidelines for using icons in Dropdown components