v3.7.0

[3.7.0] - April, 11, 2024

React

Added

• [CookieConsent] A new cookie is set containing version number of consents.

Changed

• [Link] Possibility to style a Link as button with useButtonStyles prop.
• [Header] Fixed an issue with inconsistent css-class order in SSR.
• [Select] Marked most props as deprecated. The redesigned next major version will have different props.
• [CookieConsent] Consent cookie's default domain was changed to window.location.hostname.
• [Combobox] Marked the component as deprecated
• [Footer.Base] Added aria-hidden to separators

Fixed

• [FileInput] FileInput accepts capitalized extensions (.png vs .PNG)
• [TextInput] Fix info, success and error icon shrinking when the description was long.

Core

Changed

• [Link] Possibility to style a Link as button.

Fixed

• [TextInput] Fix info, success and error icon shrinking when the description was long.

Documentation

Added

• [Hero] Added note that hero should not be used with side navigation.

Changed

• [CookieConsent] Cookie guidelines recommend using subdomains
• [Dropdown] Added notification about deprecated Combobox and deprecated Select props
• [Link] Added examples of styling Link as a button.
• [CookieConsent] Updated the list of cookies
• Updated Getting started-section for designers from Sketch/Abstract guidelines to Figma guidelines
  • This includes: Contributing guide, FAQ, Versioning, and a new Figma tutorial

Fixed

• [Typography] Fixed typo in Typography table, mobile heading title had extra x.

Figma

Changed

• [Design kit] The name on the project, file and cover is updated from HDS UI kit to HDS Design kit as per change of naming conventions to match the implementation more.
• [Footer] Copyright year updated from 2023 to 2024

Fixed

• [Button] Focus ring stroke width fixed from 2px to 3px
• [Dialog] Fixed icon on Danger-dialog from info to alert to match implementation
• [NavigationPattern] Broken hero on NavigationPattern medium size example fixed.

v3.6.0

[3.6.0] - March, 6, 2024

React

Changed

• [Tag] Marked changed and removed properties in the next major release

Fixed

• Warnings about "unmet peer dependency".
• Removed old & deprecated individual lodash dependencies and replaced with the full package and importing the needed functions only.
• [HeaderActionBarItemWithDropdown] Removed useless @layer css style which caused Jest/jsdom tests output errors.
• [Checkbox] Layout issue when using external label with htmlLabelFor-attribute
• [Table] Append className prop instead of overriding the existing classes

Core

Fixed

• [Icons] Document-group icon wrong colors
• [Button] Some iOS-versions rendering rounded link buttons wrongly

Documentation

Added

• [Icons] Added missing icons to site icons list
• Added links to React and Core Storybooks to Resources and Components pages

Fixed

• [Button] Fix wrong label on secondary Button variant example.
• [Notification] Fix Core showing and hiding Toast Notification example

Figma

Fixed

• [Icons] Fixed document-group icon, removed stroke from the vector. Removed few export settings and fixed box’s black color to use HDS-token.

Icon kit

Fixed:

• [Forms and information] Fixed document-group icon svg, removed stroke from the vector.

v2.17.1

Changelog

[2.17.1] - Feb, 7, 2024

React

Fixed

• Removed old & deprecated individual lodash dependencies and replaced with the full package and importing the needed functions only.

v3.5.0

[3.5.0] - February, 6, 2024

React

Changed

• [Hero] Add support for showing an arrow-icon in the bottom left corner with theming support
• Normalize is now removed from the hds-core package which React-package relies on. If it causes trouble, it can be included in projects separately.

Fixed

• [TextInput] Hide native password reveal icon (Edge browser)
• The way styles were imported was broken and could result in faulty styles

Core

Changed

• [Hero] Add support for showing an arrow-icon in the bottom left corner with theming support
• Normalize is now removed from the package, if it causes trouble, it can be included in projects separately.

Fixed

• [Text input] Hide native password reveal icon (Edge browser)

Documentation

Added

• [Hero] Added examples and code of the arrow-icon

Figma

Added

• [Hero] Added a visual arrow
• [Hero] Added a photographer information
• [Tag] Two new variants: Link (underlined) and Action (bordered) with interaction states
• [Icons] New icons in the Forms category: document-group, document-blank, document-blank-group, folder, folder-group & box

Changed

• [Hero] Variants named according to code implementation
• [Tag] Adjusted focus state offset to 2px

Fixed

• [Hero] Fixes for multiple variants e.g fonts, colours, paddings and improved Koro element usage and layout structure.

Removed

• [Tag] Removed state variants for informative tags
• [Hero] Removed the "new value" variant as it was unnecessary.

Icon kit

Added:

• [Icons] New icons in the Forms category: document-group, document-blank, document-blank-group, folder, folder-group & box

v3.4.0

[3.4.0] - January, 16, 2024

React

Changed

• [Header] Theme supports max-width and logo-height variables
• [TextInput] Support using TextInput component as a simple search field

Fixed

• [Dropdown] Clearing values from disabled Dropdowns is prohibited
• [Header.ActionBarItem] Fix click event handling issue in icons

Added

• [IconX] New icon for X service

Core

Added

• [Icon] New icon for X service

Changed

• [Text input] Support using Text input component as a simple search field

Documentation

Added

• [Hero] Note about scaling to diagonal koros examples
• [ErrorSummary] Add documentation for Error Summary component
• [Focus colour] Use of Focus style widths
• [Icons] New icon for X service added to assets list
• [Search input] Advice using a Text input as a simple search field if no suggestions and/or results are provided

Fixed

• Fixed Wave motifs links to Helsinki Brand pages
• [Header] Small fixes
• [Notification] Fix size texts

Figma

Changed

• [Icons] Old Twitter icon renamed back to its original name so that Glyphfig script works correctly

Hds-js

Added

• [cookieConsentController] The Cookie Consent controller for City of Helsinki cookies
• [cookieController] Controller for reading and writing City of Helsinki cookies
• [getContent] Common content for City of Helsinki cookies
• [login] Vanilla JS version of the login system

v3.3.0

[3.3.0] - December, 19, 2023

React

Added

• [Header.ActionBarItem] New property "preventButtonResize" to prevent menu button shifting when clicked
• [Header.NavigationMenu] Mobile menu has open and close animation

Changed

• [Tag] Default value for id marked to be removed in the next major release.
• [Table] Default values for headingId and id marked marked to be removed in the next major release.
• [Select] Placeholder text inherits background color

Fixed

• [Header.LanguageSelector] Added aria-current to currently selected language button

Documentation

Changed

• Updated grid documentation with information about the new Header

Fixed

• Add missing Next.js and Gatsby code snippets to foundations / server side rendering

Figma

Changed

• [UI Kit] Component frames now locked in the file to prevent accidental moving

v3.2.0

[3.2.0] - December, 5, 2023

React

Added

• [DateInput] Support for customising date styles
• [Login] Support for getting api tokens from Keycloak
• [Accordion] Support for customising close button styles

Changed

• [Button] CSS supports reset and button types

Fixed

• [Header.NavigationMenu] Fixed navigation menu on mobile
• [Header.ActionBar] Added aria-hidden for separator
• [Checbox] Fixed Checkbox label taking space even if label not given (when using an external component as the label for it)

Core

Changed

• [Button] CSS supports reset and button types

Fixed

• [Checkbox] Small changes to styles not to add padding when label not used (by using hds-checkbox__label--hidden class)

Templates

Added

• Added new template for error page

Documentation

Changed

• [Checkbox] Small addition to guide not to use the label-property at all when using an external label for the Checkbox
• [Accordion] Add close button theming properties

Figma

Added

• [Icons] Added a new vector icon for X, replacing Twitter

Changed

• [Footer] Replaced old Twitter icon with X icon
• [SearchInput] Improved responsiveness with auto layout

Fixed

• [Tabs] Background colour removed to support different application background colours. Note! When using Tabs with a scroll-button in Figma, ensure to adjust the button's gradient fill to match the application's background for visual consistency

Sketch & Abstract

Changed

• Updated HDS Sketch libraries to Sketch version 99.1. Please update your Sketch and files accordingly

Icons

Added

• [Icons] Added a new vector icon for X

Changed

• [Icons] Renamed twitter to xx_twitter to indicate it's deprecated state

v3.1.0

[3.1.0] - October, 31, 2023

React

Added

• [Footer] Added onLogoClick callback
• [Container] Added a new attribute to align it with Header
• [Login] New login components and utilities to provide OIDC authentication and api tokens

Changed

• [Checkbox, DateInput, Dropdowns, FileInput, NumberInput, PasswordInput, PhoneInput, SelectionGroup, NumberInput, TextInput, TextArea, TimeInput] Improved readability and accessibility of error, success and info states

Fixed

• [StepByStep] Fixed React warnings about missing keys.
• [Header] onDidChangeLanguage is now called only when language is changed.
• [Header] Fixed header dropdown overflow issues
• [DatePicker] Fixed selected date getting reseted in a controlled state
• [CookieConsent, Dropdown, FileInput, NumberInput, SearchInput, TextInput] Fixed button focus inside input components
• [Tag] Fixed margins with several lines long texts

Core

Changed

• [Checkbox, NumberInput, PasswordInput, PhoneInput, SelectionGroup, NumberInput, TextInput, TextArea] Improved readability and accessibility of error, success and info states

Fixed

• [Tag] Border-radiuses and paddings to match designs
• [Link] Removed underline when using Button styles with Link

Documentation

Added

• [Footer] Added onLogoClick callback
• [Form validation] Live examples for validation pattern
• [Form validation] Links to multi-page guidelines and components
• [Login] Documentation for the new Login system

Changed

• [FileInput] Changed from beta to stable
• [Pagination] Changed from beta to stable
• [SearchInput] Changed from beta to stable

Fixed

Several new line issues breaking the documentation and examples
This is HDS -competition page was broken and not available
Unified error message implementation, examples and documentation

Design kit

Figma

We're excited to announce the availability of the HDS UI Kit in Figma (.fig) format! You can access it within the "hds-design-kit.zip" and import the file to use in your projects. Please be aware that this Figma file is independent and won't receive automatic updates from the original file.

If you're looking for an updatable Figma library, feel free to get in touch with the HDS team. An updatable version is accessible with Helsinki licenses, and we plan to make it available as a community file in the future. Stay tuned for updates!

Changed

• [Color styles] Quality of life improvement: added hex codes after color names for ease of access
• [Color styles] Changed greyscale color names to match token names, e.g. Grey-10 -> Black-10
• [Highlight] Changed the Quote to be a variant of Highlight component, not its own component, to match implementation

[HDS Form Components] Updated error, success and info text shared symbols in all input components

Removed

[Radio button] Removed error states for individual radio buttons, because individual radio buttons should not have an error state in any use cases.

Fixed

• [Highlight] Fixed paddings on all sizes and font, line-height to match implementation
• [Highlight] Linked text properties back to quote variants
• [Highlight] Correct color style attached to text color

Sketch/Abstract

Changed

• [HDS Form Components] Updated error, success and info text shared symbols in all input symbols

Removed

• [Radio button] Removed error states for individual radio buttons, because individual radio buttons should not have an error state in any use cases.

Fixed

• [Dropdown] Border for dropdown menu fixed from 2px to 1px and example updated according to that

v3.0.0

[3.0.0] - October, 4, 2023

React

Breaking

• [Navigation] Removed, use new Header instead
• [Footer] Redesigned and rebuilt
• [StatusLabel, Tag] Rectangular versions removed
• [LinkBox] Property name withBorder changed to border
• [Koros] Renamed variants Wave to Vibration and Storm to Wave

Added

• [Header] Added new Header-component
  • [Header.UniversalBar] Added new UniversalBar component
  • [Header.ActionBar] Added new ActionBar component
    • [Header.ActionBarItem] New component to display button icons
  • [Header.LanguageSelector] Added new language selector component
  • [Header.Link] Added new component to be used under Header components
  • [Header.NavigationMenu] Added new NavigationMenu component
• [Footer] (changed) is now redesigned with new components
  • [Footer.Custom] New component for custom content
  • [Footer.Link] New link component to be used under Footer components
  • [Footer.NavigationGroup] New component for displaying grouped navigation links
  • [Footer.UtilityGroup] New component for displaying grouped utility links
  • [Footer.GroupHeading] New component for group components headings
• [Header, Footer] Added navigation landmarks.

Changed

• Supported browserlist updated
• [RadioButton] Default value is not recommended anymore
• [Footer] Redesigned and rebuilt

Fixed

• [Breadcrumb] Theme variable typos
• [LoadingSpinner] Made more polite accessibility-wise, not interrupting screen readers anymore

Removed

• [StatusLabel, Tag] Removed rectangular versions
• [Navigation] New Header component is the replacement

Core

Changed

• [Koros] Rename Koros variants according to brand
• [Koros] Renamed variants Wave to Vibration and Storm to Wave

Removed

• [StatusLabel, Tag] Rectangular version (default)

Documentation

Added

• [Header] Added new Header and its sub-components' documentations
• [Footer] Added new Footer and its sub-components' documentations
• Added documention for focus colour tokens
• Added navigation pattern guidelines
• Added new releases page
• Added new guide how to migrate to 3.0.0

Changed

• [Koros] Rename Koros variants according to brand
• [Koros] Fix Storm and Wave Koros variant usage
• [Koros] Rename koros flipHorizontal to flipVertical
• Update contributing guide
• [Radiobutton, Checkbox, Toggle] Update guide for no default value
• [StatusLabel, Tag] Remove support for rectangular variants

Fixes

• [Breadcrumb, Hero] Added missing StatusLabelTooltips
• [Koros] Koros accessibility tab content copied from footer
• [Heros] Wrong css class in Hero component examples
• [LoadingSpinner] Change aria alert to polite
• [Breadcrumbs] Fixed typos in BreadCrumbCustomTheme variables

Design kit

Figma

There is a brand new Figma library available. The licenses are checked and provided separately, and currently available for a limited time. But if you're interested in switching to Figma, contact HDS team. It will be available with Helsinki licenses and in the future also as a community file.

Sketch/Abstract

Added

• [Footer] New symbols following the hel.fi visual style. New symbols also include changes to all Footer sections. Service title is now mandatory. The Helsinki logo moved to the Base section. Separate symbols for Footers with custom content (e.g. partner information). New variant for the Utility section which allow more utility links and link groups
• [Header] New component replacing HDS Navigation

Changed

• Updated HDS Sketch libraries to Sketch version 98.3. Please update your Sketch and files accordingly.
• [Koros] Renamed Storm to Wave and Wave to Vibration according to brand
• [Page templates] Breakpoint-XS padding fix from 12px to 16px
• [Heros] Fixes for paddings and Lead Text width in sizes M and S

Deprecated

• [Footer] Old Footer symbols deprecated. These will be removed in a future major release. Switch to new Footer symbols as soon as possible
• [Navigation] Marked as deprecated, will be removed in the next major release. Replaced by HDS Header. Switch to new Header symbols as soon as possible

v2.17.0

[2.17.0] - Aug, 18, 2023

React

Added

• [Highlight] New component for quotes and text highlights

Core

Added

• [Highlight] New component for quotes and text highlights

Documentation

Added

• [Highlight] Documentation for new Highlight component
• Document tokens for focus colours

Changed

• Improved docs for creating new react components
• Updated contributing guide

Fixed

• Updated package dependencies

Design kit

Added

• Figma API icon library export script