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...

v0.14.0

[0.14.0] - October 15, 2020

Core

Changed

• [Icons] Added role="img" to all icons. in (#268)
• [Notification] Changed wrapping HTML element from div to section. in (#273)
• [Notification] Added role="alert" for toast notifications. Removed role attribute from inline notifications. in (#273)
• [Notification] Added role="heading" and aria-level="2" to the notification label. in (#273)

Removed

• [Checkbox] Removed redundant aria-checked (already using type="checkbox"). in (#271)
• [Radio button] Removed redundant aria-checked (already using type="radio"). in (#271)

Design kit

Added

• New component: Footer
• New component: Tag (documentation coming soon)
• New component: Card (implementation coming soon)
  • Example card layouts (Card on top of a photo, Image card)
• New component: Placeholders
  • Image placeholder (e.g. for a blog post which is missing the thumbnail image)
  • Avatar placeholder (e.g. for a user that is missing an avatar)
• New version of Multiselect Dropdown component. The multiselect component was divided into two separate components; Select and Combobox. Select will act like the old implementation, but it does not offer filtering. Combobox will work similarly, but it will include filtering. This change was made for accessibility reasons. Separating the implementation was needed to make keyboard and screen reader use working well and according to standards.

Changed

• HDS Library symbol naming and structure standardized to follow new HDS Sketch guidelines. This includes naming changes to most symbols but below you can find a list of the most important changes.
  • Internal (only used in HDS libraries) symbols are now grouped in x_Parts symbol folder
  • Internal (only used in HDS libraries) section symbols are now grouped in x_Sections symbol folder
  • Renamed and rearranged multiple symbol showcase artboards
  • [Buttons] Changed local text style in Button 02 Secondary hover states to use shared style
  • [Navigation] Changed symbol folder hierarchy for easier symbol swapping
  • [Modals and Notifications] Changed layer order in symbols to match layout
  • [Modals and Notifications] Fixed sub-pixel positioning in Default Alert Toast
  • [Typography] Added text styles used in HDS Footer: Body S - Medium - 05 Link - Black and Body S - Medium - 05 Link - White
• Renamed "HDS Text and Photo" library to "HDS Cards"
• [Cards] Moved current "Text+Photo" symbols to new "Example card layouts" page
• [Cards] Converted current "Text+Photo" symbols to use new Card symbols
• [Cards] Renamed "Text+Photo" symbols to "Card on top of a photo"
• [Form Components] Replaced old checkbox symbols in Multiselect with current symbols
• [Form Components] Old Multiselect Dropdown symbols were moved to xx_Deprecated category. These will be removed in future updates, but you may continue to use them if you do not have time to upgrade to the new design.
• [Form Components] Updated Dropdown option hover style to use brand colours. Same style is also used when browsing the options with keyboard.
• [Form Components] Symbolized error text (was previously a styled Assistive text)
• [Form Components] Moved the error icon from inside the input to the front of the error text.
• [Form Components] Added assistive text below the error description in all related component error states. This change was made to increase accessibility in situations where assistive text is essential information to fix input errors.
• [Form Components] Updated Dropdown symbol showcase artboards to reflect new changes and features.
• [Navigation] Added 2 Rows variant to 02 Dark
• [Navigation] Added Mobile sizes open variant to 02 Dark
• [Navigation] Renamed some layers to better match their usage

Removed

• [Form Components] Unnecessary overrides from Dropdown option symbols
• [Navigation] Redundant folders from Navigation symbols

Documentation

Added

• Footer documentation
• [Icons] Added a recommendation to use aria-hidden="true" instead of role="presentation
• [Logo] Added guidelines for adding aria-labels for logos and service names

Changed

• Made improvements to focus colour guideline in Colour token page
• Made documentation page titles dynamic (now titles also feature page names)
• [Dropdown] Updated Dropdown documentation to reflect implementation changes
• [Dropdown] Made improvements and clarifications to the Dropdown accessibility documentation

Removed

• Broken mailto-link from the Support page

React

Added

• Footer component. in (#253)

Changed

• [Dropdown] The Dropdown component has gone through a complete overhaul, and the component was divided into two components; Select and Combobox. in (#258)
• [Icons] Added role="img" to all icons. in (#268)
• [Koros] Added aria-hidden="true" to the wave SVG. in (#269)
• [Logo] Added role="img" to logo SVG. in (#272)
• [Navigation] Added role="search to Navigation search wrapping div. in (#270)
• [Notification] Changed wrapping HTML element from div to section. in (#273)
• [Notification] Added role="alert" for toast notifications. Removed role attribute from inline notifications. in (#273)
• [Notification] Added role="heading" and aria-level="2" to the notification label. in (#273)

Fixed

• [Navigation] Fixed an issue where search appeared below navigation links in the mobile menu. in (#270)

Removed

• [Checkbox] Removed redundant aria-checked (already using type="checkbox"). in (#271)
• [Radio button] Removed redundant aria-checked (already using type="radio"). in (#271)

Deprecated

• [Dropdown] The Dropdown component has been deprecated and will be removed in a future release, please use Select or Combobox instead. in (#258)

v0.13.3

[0.13.3] - October 5, 2020

Documentation

Added

• lang attributes for Finnish colour names in Colour documentation Brand colour table
• lang attributes for verbose language description examples in Localisation guidelines
• Title attributes to front page image links (could not repeat the original issue of reading alt tags in wrong language)
• h3 headings after h2 “Usage” in component documentation pages, that missed a h3 heading level

Changed

• Moved Contribution category above Resources page in documentation site navigation
• Updated the roadmap to reflect new beta release plans and accessibility work
• Markdown links to Link component with external prop for links that open an new window
• component documentation code example h5 headings to h4
• component documentation code example heading text "React:" to "React code example:"
• component documentation code example heading text "Core:" to "Core code example:"

Fixed

• Japanese language code JP to JA in Localisation guidelines
• Spanish language code SP to ES in Localisation guidelines
• Insufficient link text "Here" to more descriptive in Logo guidelines
• Insufficient link text "filterable" to more descriptive "filterable variant" and added alt tag in Dropdown documentation
• Fixed <b> tags to <strong>
• Fixed <i> tags to <em>

Removed

• Removed the link to #designsystem-dev Slack channel in Support page (does not exist anymore)
• Removed a text about issue labeling in Support page (mentioned label does not exist anymore)

React

Added

• Added a CommonJS bundle back to the package. in (#265)

Fixed

• Fixed the wrong sideEffects value that caused the core base styles to be tree shaken in CRA production builds. in (#265)
• [Navigation] Fixed the wrong maximum width of the component. in (#265)
• [Dropdown] Fixed the label font weight. in (#265)
• [TextArea] Fixed the label font weight. in (#265)
• [TextInput] Fixed the label font weight. in (#265)

v0.13.2

[0.13.2] - September 21, 2020

Documentation

Added

• Sketch file and symbol guidelines to the Contributing section
• Logo component documentation page
• HDS Colour contrast accessibility examples and guidelines
• Localisation guidelines

Changed

• Improved styling of documentation site html elements to improve readability and visuals
• Search bar placeholder text

Removed

• Links to HDS Core Logo documentation (Logo is not implemented in HDS Core yet)

React

Fixed

• [Navigation] Fixed an issue where the component didn't work correctly in production builds. in (#255)
  • The problem was caused by the navigation component names getting mangled in production builds.

v0.13.1

[0.13.1] - September 9, 2020

Documentation

Added

• First version of date and time format guidelines
• All components' statuses are now marked with labels. You can find the label explanations in the Component overview page

Changed

• Updated For Designers section Abstract and Sketch screenshots

Fixed

• Fixed the core component storybook links

React

Fixed

• Fixed typings for the Button, Checkbox, RadioButton, TextArea and TextInput components. in (#240)
• [Dropdown] Fixed an issue where the label hover color couldn't be overridden for multiselect dropdowns. in (#241)