v0.22.0

[0.22.0] - March 4, 2021

Design kit

Added

• Date field and date picker

Fixed

• Incorrect text color in TextInput Disabled state

React Components

Added

• New Date Input component with Datepicker

Fixed

• Remove unwanted footer border in Safari browser

Tooling

• Improve React component scaffolding script

Documentation

Added

• Date input and date picker documentation

Changed

• HDS roadmap updated
• Add active link state to Navigation examples

Fixed

• Fix spelling in documentation
• Localisation page URL use British English
• Clarified data format guidelines for leading zeros for dates (leading zeros are not used for dates)

v0.21.0

[0.21.0] - January 19, 2021

Core

Added

• New component: Search input (in #345)

React

Added

• Added autocomplete attribute for applicable fields in form validation examples (in #359)

Fixed

• [LoadingSpinner] Fixed a bug related to cleaning of the notification area (in #355)

• [TextInput, TextArea] Fixed focus outline animation glitch inside grid layout (in #356)

Documentation

Changed

• Updated status of multiple components to reflect their current completeness
  • Tooltip from Pre-release to Stable
  • Accordion from Pre-release to Stable
  • Card from Pre-release to Stable
  • Tag from Pre-release to Stable
  • SelectionGroup from Pre-release to Stable
• Removed New status from components that have been released more than 1 major release ago

v0.20.0

[0.20.0] - January 5, 2021

Design kit

Changed

• Renamed “HDS Pagination” to “HDS Tabs and Pages”
• [Cards] Optimized images to reduce library file size
• [Cards] Updated links to shared typography styles

Added

• New library HDS Tabs and Pages
  • [Tabs and Pages] Tab list symbols of two sizes; Default and Small
  • [Tabs and Pages] Overflow tab list variant. This can be used in smaller screens and spaces where all tabs do not fit horizontally on the view.
  • [Tabs and Pages] Symbols for single tabs. These can be used to build tab lists with custom widths etc.
  • Library also includes old pagination symbols but they are not yet implemented into HDS and the design is subject to change
• [Color] Shared style for a lighter (2px) focus border. This style can be used in tight spaces or when the default 3px focus border is too visually distractive.

Documentation

Added

• Documentation for Tabs component

Changed

• [TextField] Added a note about autocomplete WCAG requirement

React

Added

• New component: Tabs (in #343)

v0.19.0

[0.19.0] - December 22, 2020

Design kit

Added

• HDS Accordion library, including
  • Two accordion symbols; Basic and With card variants
  • Empty accordion variant for building custom accordions
  • Tips how to build custom accordions using Buttons with icons

Changed

• [Buttons] Decreased Default Supplementary button minimum width from 136px to 124px

Documentation

Added

• Accordion component documentation

Changed

• [Card] Small clarification about component intractability
• [Status label] Small clarification about icon usage with the component

Fixed

• Added Search input component to the Component overview list (was missing in the previous release)

Core

Fixed

• [Text input, Textarea] Fixed placeholder text color on Firefox (in #342)

React

Changed

• [Footer] Added logoLanguage prop to Footer component (in #339)

Fixed

• [TextInput, TextArea, Combobox] Fixed placeholder text color on Firefox (in #342)
• [Combobox] Fixed placeholder text alignment on Firefox (in #342)

Added

• New component: Accordion (in #331)
• New hook: useAccordion for implementing custom accordions (in #331)

v0.18.0

[0.18.0] - December 8, 2020

Design kit

Added

• [Form Components] Search field input symbols
• [Form Components] Search suggestion symbols
• [Form Components] Error summary symbols. These can be used to list all errors in a form when using a static validation approach.
• [Form Components] Error state for Checkbox, Radio button and Selection group symbols
• [Form Components] Success state for Text Input and Text Area symbols
• [Typography] Default link style for small sized medium body text

Changed

• Updated all HDS library files to Sketch 70 file version
• [Form Components] Renamed “Text field/01 Input/06 Fixed” to “Text field/01 Input/07 Fixed”
• [Typography] Default link text style colour from #0072c6 to #0000bf to ensure better contrast on varying backgrounds

Fixed

• [Form Components] Incorrect order numbering in TextInput example artboards

Removed

• [Form Components] Redundant internal symbols

Documentation

Added

• Documentation for the SearchInput component
• Documentation for the Form validation pattern

Changed

• Updated Roapmap to reflect the current state and plans of the project

Core

Changed

• [TextInput, TextArea] Error icon moved below the input next to the error text (in #320)

Added

• New component: Error summary (in #320)
• [Text input, textarea, checkbox, selection group] Added error text for validation error message (in #320)
• [Text input, textArea] Added success text (in #320)

React

Changed

• [TextInput, TextArea] Error icon moved below the input next to the error text (in #320)

Removed

• Removed aria-hidden attribute from input required indicator ("*") (in #320)

Added

• New component: ErrorSummary (in #320)
• New component: SearchInput (in #317)
• Added examples of form validation using Yup and Formik (in #320)
• [TextInput, TextArea] Added successText prop for success state message (in #320)
• [TextInput, TextArea, Checkbox, SelectionGroup] Added errorText prop for validation error message (in #320)
• [TextInput, TextArea] Added aria-describedby input attribute to reference error text, success text and assistive text (in #320)
• Visual regression tests using Loki (in #323)
• Accessibility tests using jest-axe (in #334)

v0.17.0

[0.17.0] - November 24, 2020

Design kit

Changed

• Removed non-semantic rounded corners from HDS to more accurately match the brand guidelines
  • [Form Components] Changed corner radius from 2px to 0px in Checkbox symbols
  • [Form Components] Changed corner radius from 2px to 0px in Radio button symbols
  • [Form Components] Changed corner radius from 2px to 0px in Combobox symbols
  • [Form Components] Changed corner radius from 2px to 0px in Select symbols
  • [Form Components] Changed corner radius from 2px to 0px in Text field symbols

Fixed

• [Form Components] Fixed an issue in Checkbox + Label symbols where the label was scaled incorrectly when the checkbox status was overridden
• [Modals and Notifications] Fixed incorrect scaling in Notification/Inline/Default symbols
• [Typography] Incorrect black colour in some of the shared body text styles

Removed

• [Form Components] Removed redundant internal symbols

Documentation

Added

• Link to Koros Core documentation to the Koros documentation page
• Koros Core to Component overview page
• Note about the Container component to Breakpoint token page
• Note about the Container component to Grid guideline page

Core

Changed

• [Checkbox] Removed rounded corners (in #319)
• [Textarea] Removed rounded corners (in #319)
• [Text input] Removed rounded corners (in #319)

Added

• New component: Koros (in #318)
• New component: Container (in #312)

React

Changed

• [Checkbox] Removed rounded corners (in #319)
• [Combobox] Removed rounded corners (in #319)
• [Select] Removed rounded corners (in #319)
• [TextArea] Removed rounded corners (in #319)
• [TextInput] Removed rounded corners (in #319)

Fixed

• [Navigation] Added missing aria-hidden attribute to dropdown menu icon (in #324)

Added

• New component: Container (in #312)

v0.16.1

[0.16.1] - November 19, 2020

React

Fixed

• [Navigation] - Fixed language selector menu not closing after language is selected (in #321)

v0.16.0

[0.16.0] - November 13, 2020

Design kit

Added

• New library HDS Loaders
  • New component: Loading spinner
  • New component: Loading skeleton (implementation still missing)
• [Form Components] Added horizontal version of selection groups (both for checkbox and radio button)

Changed

• [Form Components] Checkbox + label symbols to use Smart layout
• [Form Componenst] Radio button + label symbols to use Smart layout

Fixed

• [Form Components] Disabled state radio button borders now use shared styles

Documentation

Added

• Documentation for Loading spinner component
• Documentation for Tag component
• Documentation for Selection group component

Changed

• Added a link to Container component Storybook examples to Grid and Breakpoint documentation

Fixed

• Small fixes to Notification documentation subtitles
• Checkbox Playground examples are now interactable
• Radio button Playground examples are now interactable

Core

Added

• New component: Loading spinner (in #311)
• New component: Selection group (in #292)

React

Added

• New component: LoadingSpinner (in #311)
• New component: SelectionGroup (in #292)
• New component: Tag (in #308)

Fixed

• [Accessibility] Added missing aria-hidden attribute to the icon in Notification component (in #313)

v0.15.1

[0.15.1] - November 3, 2020

Documentation

Changed

• Updated Supplementary button examples
• Added accordion and form validation to roadmap

React

Fixed

• Fixed a stylesheet bundle issue with Navigation component, which caused invalid styles for mobile navigation with dropdown items.

v0.15.0

[0.15.0] - October 29, 2020

Breaking changes

Design tokens

• Renamed colour tokens
  • --color-coat-of-arms-blue to coat-of-arms
  • --color-coat-of-arms-gold to gold
  • --color-coat-of-arms-silver to silver
  • --color-[color name]-dark-50 to --color-[color name]-dark
  • --color-[color name]-light-20 to --color-[color name]-light
  • --color-[color name]-light-50 to --color-[color name]-medium-light
• Replaced tokens -light-05 with -light
• Changed colour token values of -light, -medium-light, and -dark:
  • --color-brick-light to #ffeeed
  • --color-brick-medium-light to #facbc8
  • --color-brick-dark to #800e04
  • --color-bus-light to #f0f0ff
  • --color-bus-medium-light to #ccccff
  • --color-bus-dark to #00005e
  • --color-coat-of-arms-light to #e6f4ff
  • --color-coat-of-arms-medium-light to #b5daf7
  • --color-coat-of-arms-dark to #005799
  • --color-gold-light to #f7f2e4
  • --color-gold-medium-light to #e8d7a7
  • --color-gold-dark to #9e823c
  • --color-silver-dark to #b0b8bf
  • --color-copper-light to #cffaf1
  • --color-copper-medium-light to #9ef0de
  • --color-copper-dark to #00a17d
  • --color-engel-light to #fff9db
  • --color-engel-medium-light to #fff3b8
  • --color-engel-dark to #dbc030
  • --color-fog-light to #e8f3fc
  • --color-fog-medium-light to #d0e6f7
  • --color-fog-dark to #72a5cf
  • --color-metro-light to #ffeee6
  • --color-metro-medium-light to #ffcab3
  • --color-metro-dark to #bd2f00
  • --color-summer-light to #fff4d4
  • --color-summer-medium-light to #ffe49c
  • --color-summer-dark to #cc9200
  • --color-suomenlinna-light to #fff0f7
  • --color-suomenlinna-medium-light to #ffdbeb
  • --color-suomenlinna-dark to #e673a5
  • --color-tram-light to #dff7eb
  • --color-tram-medium-light to #a3e3c2
  • --color-tram-dark to #006631

React

• [Navigation] in (#288)
  • The animateOpen prop was removed.
  • Replaced menuCloseAriaLabel and menuOpenAriaLabel props with a single menuToggleAriaLabel prop
  • The supported values for the theme prop were changed from white and black to light and dark.
  • [Navigation.Dropdown] The component was completely re-written. The old dropdown used a role="listbox" implementation that is intended be used in forms. It now uses a simple "menu button" implementation.
    • The component is still used the same way as before, but the supported props changed. The supported props can be seen here under the NavigationDropdown tab.
  • [Navigation.User] The dropdown used by the component was completely re-written for the same reason as above.
    • The component is still used the same way as before, but the supported props changed. The supported props can be seen here under the NavigationUser tab.
  • [Navigation.LanguageSelector] The component was completely re-written for the same reason as above.
    • The component no longer accepts options, instead it is used similarly as the Navigation.Dropdown component.

    <Navigation.LanguageSelector label="FI">
      <Navigation.Item href="#" label="Suomeksi" />
      <Navigation.Item href="#" label="På svenska" />
      <Navigation.Item href="#" label="In English" />
    </Navigation.LanguageSelector>

    The supported props can be seen here under the NavigationLanguageSelector tab.
  • [Navigation.Row]
    • The prop display was renamed to variant, and the supported values for the prop were changed from subNav and inline to default and inline.
  • [Navigation.Search]
    • The onSearchEnter callback was renamed to onSearch as it can now be fired by pressing enter, or the search button.
    • The focus event is no longer passed in the onFocus and onBlur callbacks.
• [Combobox] Added a required prop - toggleButtonAriaLabel - that is used to describe the menu toggle button to screen readers. in (#295)
• [TextArea] Replaced tooltipOpenButtonLabelText and tooltipCloseButtonLabelText props with a single tooltipButtonLabel prop. in (#283)
• [TextInput] Replaced tooltipOpenButtonLabelText and tooltipCloseButtonLabelText props with a single tooltipButtonLabel prop. in (#283)

Design kit

Added

• [Colours] New shared style for focus style on dark backgrounds
• [Navigation] New icon variant for Navigation dropdown options
• [Buttons] Icon left and icon right variants for all Small buttons.
• [Form Components] Added horizontal version of selection groups (both for checkbox and radio button)
• [Icons] Added new icons
  • cake (usage: birthday)
  • calendar-recurring
  • check-circle
  • drag (usage: draggable elements)
  • glyph-at
  • glyph-euro
  • layers
  • playback-play
  • playback-stop
  • playback-pause
  • playback-record
  • playback-next
  • playback-previous
  • playback-fastforward
  • playback-rewind
  • podcast
  • printer
  • refresh
  • rss
  • sliders (usage: filters)
  • sort
  • sort-ascending
  • sort-descending
  • sort-alphabetical-ascending
  • sort-alphabetical-descending
• [Icons] Added new icons fill-variants for better accessibility
  • error-fill
  • alert-circle-fill
  • info-circle-fill
  • check-circle-fill
  • cross-circle-fill
  • plus-circle-fill
  • minus-circle-fill
  • question-circle-fill

Changed

• Updated design library files to Sketch version 69
• [Colour] Renamed colour tokens to value-agnostic light, light-medium and dark
• [Colour] Adjusted token values light, light-medium and dark colour to improve theming
• [Navigation] In mobile navigation menu, moved the language selection from the bottom of the menu to the top navigation bar
  • Fixed issues reported in the accessibility audit.
  • Updated example artboards to reflect new language selection position
• [Navigation] Changed "sign out" button to use Supplementary/Small/Text and Icon Left symbol instead of the only Text variant
• [Buttons] Increased the height of Small button variants by 8 pixels to comply with WCAG 2.5.5 Target Size.
• [Buttons] Changed the minimum symbol width of Small buttons variants to 44 pixels to ensure complying with WCAG 2.5.5 Target Size.
• [Buttons] Improved Small button variant symbol scaling
• [Buttons] Shortened the spacing between icon and label in Supplementary button from 8px to 4px.
• [Form Components] Checkbox + label symbols to use Smart layout
• [Form Components] Radio button + label symbols to use Smart layout

Fixed

• [Form Components] Disabled state radio button borders now use shared styles
• [Form Components] Fixed small issues in Checkbox symbols
  • Fixed incorrect label spacing in Checkbox/Hover - selected
  • Fixed broken symbol link caused by Sketch 69 update in Checkbox/Unselected
• [Icons] Fixed legibility and pixel snapping of icons
  • microphone
  • microphone-crossed
  • volume-low
  • volume-high
  • arrow-up
  • arrow-right
  • arrow-left
  • arrow-down
  • arrow-undo
  • arrow-redo
  • angle-right
  • calendar-cross
  • clock-cross
  • check
  • download-cloud
  • display
  • cross
  • cross-circle
  • upload-cloud

Removed

• [Colour] Removed color tokens -light-05

Deprecated

• [Buttons] Supplementary button symbols without icons were deprecated and symbol will be completely removed in an upcoming release. This change was made to increase accessibility and usability of supplementary buttons.

Documentation

Added

• First HDS Pattern: Forms, documenting best practices and accessiblity considerations of designing and building forms with HDS
• [Tooltip] Component documentation
• [Card] Component documentation
• Documentation site content guidelines to the Contribution section

Changed

• Updated all Component statuses in the Component overview
  • All components were marked Accessible
  • All components except Navigation and Footer were marked Stable
• [Button] Updated the documentation to reflect changes to Supplementary and Small buttons
• [Colour] Changed HDS Colour library documentation to match design and implementation
• [Icons] Icon visual assets documentation to match additions and changes in implementation
• Documentation site accessibility guidelines and statement
• Guidelines were updated to describe the basis of HDS accessibility as well as the process of ensuring accessibility.
• The accessibility statement was updated to list all currently known accessibility issues of the HDS documentation site. The reason for not fixing the issues was also stated.
• Updated Roadmap
• Updated What’s new section

Fixed

• Fixed multiple broken links in the documentation site:
• Contribution page links on many pages
• Some Storybook links in the Component overview page
• Added links to dev.hel.fi site in Getting started, Contribution and Resources sections
• Added a small note about font purchase requirement for designers
• Changed the documentation page title to be dynamic (now includes the page name in the H...