v3.10.0

[3.10.0] - Sep, 04, 2024

React

Added

• [ssr] getCriticalHdsRulesSync, a syncronous version of the getCriticalHdsRules

Changed

• [Accordion] Component accepts all div element properties
• [Breadcrumb] Component accepts all nav element properties
• [Button] Component accepts all button element properties
• [Card] Component accepts all div element properties
• [Checkbox] Component accepts all input element properties
• [Columns] Component accepts all div element properties
• [DateInput] Component accepts all input element properties
• [Dialog] Component and its subcomponents accept all native elements properties
• [FileInput] Component accepts all div element properties
• [ErrorSummary] Component accepts all div element properties
• [Fieldset] Component accepts all fieldset element properties
• [Footer] Component and its subcomponents accept all native elements properties
• [Header] Component and its subcomponents accept all native elements properties
• [Hero] Component and its subcomponents accept all native elements properties
• [Highlight] Component accepts all figure element properties
• [ImageWithCard] Component accepts all div element properties
• [Koros] Component accepts all div element properties
• [Logo] Component accepts all img element properties
• [Notification] Component accepts all div element properties
• [SearchInput] Component and its subcomponents accept all native elements properties
• [Pagination] Component accepts all nav element properties
• [Section] Component accepts all div element properties
• [StatusLabel] Component accepts all span element properties
• [StepByStep] Component accepts all div element properties
• [Stepper] Component accepts all div element properties
• [Tabs] Component accepts all div element properties
• [Tags] Component accepts all div element properties
• [TextInput] Component accepts all input element properties
• [ToggleButton] Component accepts all button element properties
• [ToolTip] Component accepts all div element properties
• [BreadCrumb] ariaLabel is marked deprecated and aria-label should be used.
• [Footer.Base] ariaLabel is marked deprecated and aria-label should be used.
• [Footer.Custom] ariaLabel is marked deprecated and aria-label should be used.
• [Footer.Link] ariaLabel is marked deprecated and aria-label should be used.
• [Footer.Navigation] ariaLabel is marked deprecated and aria-label should be used.
• [Footer.Utilities] ariaLabel is marked deprecated and aria-label should be used.
• [Footer] ariaLabel is marked deprecated and aria-label should be used.
• [Header.ActionBar] ariaLabel is marked deprecated and aria-label should be used.
• [Header.ActionBarItem] ariaLabel is marked deprecated and aria-label should be used.
• [Header.LanguageSelector] ariaLabel is marked deprecated and aria-label should be used.
• [Header.NavigationMenu] ariaLabel is marked deprecated and aria-label should be used.
• [Header.HeaderUniversalBar] ariaLabel is marked deprecated and aria-label should be used.
• [Link] ariaLabel is marked deprecated and aria-label should be used.
• [Logo] dataTestId is marked deprecated and data-testid should be used.
• [Notification] dataTestId is marked deprecated and data-testid should be used.
• [Pagination] dataTestId is marked deprecated and data-testid should be used.
• [SideNavigation] ariaLabel is marked deprecated and aria-label should be used.
• [StatusLabel] dataTestId is marked deprecated and data-testid should be used.
• [Step] dataTestId is marked deprecated and data-testid should be used.
• [Stepper] dataTestId is marked deprecated and data-testid should be used.
• [Icon] ariaLabel, ariaLabelledby and ariaHidden are marked deprecated and aria-* should be used.
• [Skiplink] ariaLabel is marked deprecated and aria-label should be used.
• [Table] dataTestId is marked deprecated and data-testid should be used.

Fixed

• [Header] Fixed an issue with ActionBarItem dropdowns not inside the menu in mobile
• [Header] Fix broken layout in mobile menu animations
• [Dialog] Fix broken scrolling and zooming in mobile devices

Documentation

Added

• [ssr] Solution to use HDS styles with Next.js app router.

Changed

• [ssr] Improved documentation about using HDS styles with Next.js pages router.
• [Header] Added more detailed documentation.

Fixed

• [Grids] Fixed breakpoint-xs margin value from 12px to 16px to match implementation

v3.9.0

[3.9.0] - June, 2nd, 2024

React

Added

• [Login] GraphQL module with api token integration
• [Header.LoginButton] Button to start the login process and handle errors.
• [Header.LogoutSubmenuButton] Button to start the logout process from the menu and handle errors.
• [Header.UserMenuButton] Button for a user menu that renders user's name and initials.
• [Header.ActionBarButton] A Button without dropdown items (as in Header.ActionBarItem)
• [Header.ActionBar] Add possibility to give the menu button a label with menuButtonLabel prop.
• [Header.ActionBarSubItem] Component for creating menus in Header
• [Header.ActionBarSubItemGroup] Container for creating grouped subitems with headings.

Changed

• FileInput Added minSize property (default 0) for cases when the uploaded file must have non-zero length content

Fixed

• [TextInput, TextArea] Fix read-only input focus styles.

Core

Fixed

• [TextInput, TextArea] Fix read-only input focus styles.

Documentation

Added

• [Patterns] New page for Login pattern, instructions how HDS Login and Header.login should work together
• [Getting started] Added a link to HDS Figma tutorial
• [Header] Documented new features.
• [Login] GraphQL module documentation
• More detailed information on upcoming releases 4.0.0 and 5.0.0

Changed

• [Header] New documentation for ActionBarItems and Header.Login

Fixed

• [Getting started] Fixed old mentions of Abstract & Sketch

Figma

Added

• [Header] New functionalities for Actionbar: Action items can have an option for dropdown menus. For now only Logged in user has custom user menu and button (Header.Login)
• [Header] In mobile breakpoints (XS-M) login button and logged-in user menu jump inside the Header.Mobilemenu that has a special accordion menu for dropdown.
• [Header] Added missing Breadcrumbs to dark theme.
• [Linkbox] Added four more tags into all variants. Reveal more tags from the layers. Nested instances also revealed. Example added to component frame.
• [Navigation pattern] Added header functionalities documentation for Header.Login (in the future these will be on Header component page)
• [TextInput, TextArea] Added missing read-only variants and redesigned focus ring.
• [PhoneInput, PasswordInput] Added missing read-only focus ring.

Fixed

• [Header] Mobilemenu link 2nd level names changed to Second level.
• [Header] Mobilemenu now aligned to right border. Menu button should always be the rightmost element in mobile breakpoints.
• [Hero] Flipped image 180 degrees in imageLeft, imageRight, imageBottom in XS size and diagonalKoros in all sizes.

Changed

• [Header] Login button now has sign-in icon instead of user - old Login actionitem is removed, please use Header.Login.
• [Header] Breakpoint width numbers added to property names to match Footer
• [Header] Nested instances revealed
• [Header] Actionitems have an updated focus styles
• [Header] Some header subcomponents have updated names. Header.Actionbar.Mobilemenu -> Header.Mobilemenu , to accommodate new features such as Header.Mobilemenu.Login
• [Header] Language select dropdown is now 320px wide like other Actionbar dropdowns.
• [Linkbox] Border-variants now have inside stroke, for better experience when building layouts
• [PhoneInput, PasswordInput] Read-only variants renamed to ReadOnly for consistency.

release-3.8.0

[3.8.0] - May, 7, 2024

React

Added

• [CookieConsent] Data stored by the HDS login component is now in the common cookies.
• [Login] Added a utility function to detect login callback error that could be ignored.
• [DateInput] Added example how to handle date ranges.

Changed

• [Login] API tokens are removed when user token renewal starts
• [Notification] Change auto closing notification progressbar to decrease instead of increase.
• [CookieConsent] Fixed SSR problem with "document not defined"

Fixed

• [Component] What bugs/typos are fixed?
• [Footer] Fix Koros height issue (Calm type was of wrong height)
• [Login] Fixed initialization failure in React strict mode when external modules are used.
• [ErrorSummary] Change wrong error icon to correct one

Core

Changed

• [ErrorSummary] Change wrong error icon to correct one

Documentation

Added

• [Login] Improved LoginProvider and api token client documentation.
• Added measure and outline addons to Storybook
• [DateInput] Added examples how to handle date ranges and validation.

Changed

• [Login] Login system is good enough to start using in production as well. We still welcome feedback and improve the component.
• [CookieConsent] Data stored by the HDS login component added to common cookie list.

Fixed

• [Component] What bugs/typos are fixed?
• [ErrorSummary] Change wrong error icon to correct one

Figma

Added:

• [Hero] Added secondary buttons and a responsive wrapper to buttons.
• [Hero] Added buttons for the NoImage variant.
• [Hero] Introduced XXL variant sizes.

Fixed:

• [Hero] Adjusted arrow and photographer info for improved responsiveness and ensured all variants are built using the same component structure.

Removed:

• [Hero] Replaced preselected images with placeholders.
• [Hero] Replaced Diagonal variant's image with Placeholder image component (breaking change – resets used image).
• [Hero] Replaced ImageBottom variant's links with buttons (breaking change).

Hds-js

Added

• [login] Added a utility function to detect login callback error that could be ignored.

Hds-js

Changed

• [Login] API tokens are removed when user token renewal starts

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