Skip to content

Releases: City-of-Helsinki/helsinki-design-system

v4.0.0-beta.0

07 Nov 14:25
Compare
Choose a tag to compare
v4.0.0-beta.0 Pre-release
Pre-release

[4.0.0-beta.0] - November, 07, 2024

React

Breaking

  • [Tag] Rewritten Tag component
  • [Button] Renewed Button component with theming support
  • [Link] iconLeft prop is renamed to iconStart, size prop is now enum (LinkSize.Small, .Medium and .Large). Aria-label is now native so ariaLabel prop is now obsolete -> use aria-label.
  • [Accordion] Changed size prop to use AccordionSize enum (AccordionSize.Small, AccordionSize.Medium and AccordionSize.Large) or without usin Typescript ("small", "medium" and "large"). Also theming has changed variables.
  • [Notification] Changed size prop to enum (NotificationSize.Small, NotificationSize.Medium and NotificationSize.Large) or without using Typescript ("small", "medium" and "large"). The "default" size was removed and replaced with "medium".
  • [ErrorSummary] Changed size prop to enum (ErrorSummarySize.Medium and ErrorSummarySize.Large) or without using Typescript ("medium" and "large"). The "default" size was removed and replaced with "medium".
  • [Icon] Icon size changed to enum (IconSize.ExtraSmall, IconSize.Small, IconSize.Medium, IconSize.Large and IconSize.ExtraLarge) or without Typescript ("extraSmall", "small", "medium", "large" and "extraLarge").
  • [Hero] The optional arrow icon takes vertical space and may require background color to be set.
  • [SelectionGroup] Updated element spacings
  • Typography changes to heading line-heights and letter-spacings
  • [Hero] heading typography changes
  • [Header] heading typography changes
  • [Header.ActionBarSubItem] iconLeft and iconRight props renamed to iconStart and iconEnd
  • [Dialog] heading typography changes
  • [Dialog.Header] iconLeft prop renamed to iconStart
  • [CookieConsent] heading typography changes
  • [Accordion] heading typography changes
  • [Pagination] Active element changed from "a" element to "span" element
  • [Hero] content spacing changes
  • [Icon] ariaLabel, ariaLabelledby and ariaHidden replaced by native aria-* counterparts.
  • [StatusLabel] iconLeft prop renamed to iconStart
  • [Table] dataTestId prop changed to "data-testid"
  • [Notification] dataTestId prop changed to "data-testid"
  • [Logo] dataTestId prop changed to "data-testid"
  • [Pagination] dataTestId prop changed to "data-testid"
  • [StatusLabel] dataTestId prop changed to "data-testid"
  • [Stepper] dataTestId prop changed to "data-testid"
  • [Breadcrumb] ariaLabel prop changed to "aria-label"
  • [Footer] ariaLabel prop changed to "aria-label"
  • [Footer.Base] ariaLabel prop changed to "aria-label"
  • [Footer.Custom] ariaLabel prop changed to "aria-label"
  • [Footer.Utilities] ariaLabel prop changed to "aria-label"
  • [Footer.Navigation] ariaLabel prop changed to "aria-label"
  • [Footer.Link] ariaLabel prop changed to "aria-label"
  • [Header] ariaLabel prop changed to "aria-label"
  • [Header.ActionBar] ariaLabel prop changed to "aria-label"
  • [Header.ActionBarItem] ariaLabel prop changed to "aria-label"
  • [Header.LanguageSelector] ariaLabel prop changed to "aria-label"
  • [Header.NavigationMenu] ariaLabel prop changed to "aria-label"
  • [Header.Universalbar] ariaLabel prop changed to "aria-label"
  • [SideNavigation] ariaLabel prop changed to "aria-label"
  • [SkipLink] ariaLabel prop changed to "aria-label"
  • [CookieConsent] Rewritten CookieConsent component

Added

  • [Hero] New information element below the hero for photographer credits
  • [StatusLabel] Added SCSS support and scss files are exported too. See documentation about usage.
  • [Breadcrumbs] Added SCSS support and scss files are exported too. See documentation about usage.
  • [Checkbox] Added SCSS support and scss files are exported too. See documentation about usage.
  • [Button] Added SCSS support and scss files are exported too. See documentation about usage.
  • [Table] Added SCSS support and scss files are exported too. See documentation about usage.
  • [Notification] Added SCSS support and scss files are exported too. See documentation about usage.

Changed

Changes that are not related to specific components

  • [Hero] The optional arrow element does not overlap with the element below
  • [Notification] Change auto closing notification progressbar to decrease instead of increase.
  • [LinkBox] Change size prop to an enum (LinkboxSize.Small, LinkboxSize.Medium, LinkboxSize.Large), not a breaking change though since the enum values are identical to the old ones.
  • [Logo] Changed size prop to enum (LogoSize.Small, LogoSize.Medium, LogoSize.Large and LogoSize.Full) which correspond to previous values "small", "medium", "large" and "full".

Fixed

  • [TextInput] Fixed issues with custom colors not applied to all elements.

Core

Breaking

  • [Hero] The optional arrow icon takes vertical space and may require background color to be set. Typography changes.
  • [Tag] Rewritten Tag component
  • [Button] Renewed Button component with theming support
  • [Link] Renamed hds-icon-left class to hds-icon-start
  • [Table] id and headingId props do not have default values anymore. Affects also the id of the CheckBox inside the Table. Also removed default dataTestId
  • [Stepper] Removed default dataTestId.
  • [Pagination] Removed default dataTestId.
  • [SelectionGroup] Updated element spacings
  • Typography changes to heading line-heights and letter-spacings
  • [Table] heading typography changes
  • [StepByStep] heading typography changes
  • [Notification] heading typography changes
  • [Highlight] heading typography changes
  • [Pagination] Active element changed from "a" element to "span" element

Added

  • [Hero] New information element below the hero for photographer credits

Changed

Changes that are not related to specific components

  • [Component] What has been changed

Fixed

  • [TextInput] Fixed issues with custom colors not applied to all elements.

Design tokens

Breaking

  • Changed colour black-60 from #666666 to #595959 due to contrast issues and the accessibility and readability improvement.

Documentation

Breaking

  • [Component] What are the breaking changes?

Added

  • [StatusLabel] Documentation about SCSS usage.
  • [Breadcrumbs] Documentation about SCSS usage.
  • [Checkbox] Documentation about SCSS usage.
  • [Button] Documentation about SCSS usage.
  • [Table] Documentation about SCSS usage.
  • [Notification] Documentation about SCSS usage.

Changed

Changes that are not related to specific components

  • [Breadcrumbs] Changed Breadcrumbs status to stable
  • [Dropdown] Changed Dropdown status to deprecated
  • [Header] Changed Header status to beta
  • [Hero] Added documentation and examples for new information element
  • [Tag] Document the new Tag component and it's uses
  • [Button] Renewed Button component with theming support
  • [Notification] Changed according to new size enum.
  • [ErrorSummary] Changed according to new size enum.
  • [Icon] Document the size prop as enum usage.
  • Changes to the line-heights in foundation/typography.

v3.11.0

31 Oct 09:21
Compare
Choose a tag to compare

[3.11.0] - Oct, 31, 2024

React

Changed

  • [Header.LoginButton] Added onClick callback and props to append parameters to the login redirection url
  • [Header.LogoutSubmenuButton] Added onClick callback and props to append parameters to the logout redirection url
  • [LoginButton] Added onClick callback and props to append parameters to the login redirection url

v3.10.1

09 Oct 08:21
a62421b
Compare
Choose a tag to compare

[3.10.1] - Oct, 09, 2024

React

Fixed

  • [Logo] Fixed data-testid attribute not being set with native props
  • [Login] Fixed GraphQLModule exports

v3.10.0

04 Sep 11:54
857b35d
Compare
Choose a tag to compare

[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

02 Jul 12:52
b2713bb
Compare
Choose a tag to compare

[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

07 May 10:38
bc78874
Compare
Choose a tag to compare

[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

11 Apr 09:48
08116a6
Compare
Choose a tag to compare

[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

06 Mar 09:58
e6ef08c
Compare
Choose a tag to compare

[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

07 Feb 11:52
Compare
Choose a tag to compare

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

06 Feb 09:23
301c849
Compare
Choose a tag to compare

[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