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

21 Nov 15:06

mrTuomoK

v4.0.0

d936f63

v4.0.0 Latest

Latest

[4.0.0] - November, 21, 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
[Dropdown/Combobox] replaced with Select
[Dropdown/Select] replaced with Select

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.
[Select] New Select component replaces the old one

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

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

[CookieConsent] Updated cookie documentation to match new component

Added

Documentation of older versions (3.11 & 2.17) of HDS is also available on the documentation site.
[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.
[Shadow] Documentation about box-shadow 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.

Fixed

[Component] What bugs/typos are fixed?
Links to old brand guide have been corrected with the new ones

Figma

Added

[Select, Multiselect] New components to replace Dropdown.
[CookieConsent] New component replacing previous CookieConsent
[Variables] The first variable named Deprecated is introduced.
[Design kit] New page and documentation for Shadow styles. Shadow in the Overview. New Getting started-section.

Fixed

[Checkbox, DateInput, FileInput, NumberInput, PasswordInput, PhoneInput, SelectionGroup, TextArea, TextInput, TimeInput] Refactored required indicator asterisk.
[RadioButton, SearchInput, ToggleButton] Required indicator removed as unnecessary.
[Dialog] Confirm variant has the correct question-mark icon now.

Changed

[Checkbox] Removed paddings around checkbox and above label. Checkbox height changed from 28px to 24px.
[Design kit] Components have a new configuration: Each component has its own page now. Moved documentation components to new page etc. Updated Colours-documentation page.
[Local styles] Headings have new line-heights (check .txt. for details)
[Local styles] Drop shadow-style removed, replaced by Shadow styles S-M matching HDS Shadow tokens
[Dialog, Notification] Switched shadow effect to use Shadow L to match implementation
[SelectionGroup] Removed 2px left and right padding and adjusted inner gaps.
[Tag] Updated paddings for visually better icon alignments.
[Tag] Changed icon property names to iconStart and iconEnd.
[SearchInput] Replaced deprecated Dropdown.Option with new SearchInput.Option subcomponent.
[PhoneInput] Replaced deprecated Dropdown component with Select in CountryCode variant

Deprecated

[Dropdown] Component is now deprecated and will be removed in the future major version.

Hds-js

Breaking

[cookieConsentController] Removed
[cookieController] Removed
[getContent] Removed

Added

[cookieConsentCore] New component for cookie consent handling
[standalone/cookieConsentCore] Standalone version of the cookie consent component

Assets 5

20 Nov 11:54

mrTuomoK

v4.0.0-beta.3

35f40fe

v4.0.0-beta.3 Pre-release

Pre-release

[4.0.0-beta.3] - November, 20, 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 using 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

[CookieConsent] Updated cookie documentation to match new component

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.
[Shadow] Documentation about box-shadow 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.

Fixed

[Component] What bugs/typos are fixed?
Links to old brand guide have been corrected with the new ones

Figma

Breaking

[Component] What are the breaking changes?

Added

[Component] What is added?

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Sketch/Abstract

Breaking

[Component] What are the breaking changes?

Added

[Component] What is added?

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Icon kit

Breaking

[Component] What are the breaking changes?

Added

[Component] What is added?

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Hds-js

Breaking

[cookieConsentController] Removed
[cookieController] Removed
[getContent] Removed

Added

[cookieConsentCore] New component for cookie consent handling
[standalone/cookieConsentCore] Standalone version of the cookie consent component

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Assets 2

14 Nov 11:07

mrTuomoK

v4.0.0-beta.2

3234cbb

v4.0.0-beta.2 Pre-release

Pre-release

[4.0.0-beta.2] - November, 14, 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

[CookieConsent] Updated cookie documentation to match new component

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.

Fixed

[Component] What bugs/typos are fixed?

Figma

Breaking

[Component] What are the breaking changes?

Added

[Component] What is added?

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Sketch/Abstract

Breaking

[Component] What are the breaking changes?

Added

[Component] What is added?

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Icon kit

Breaking

[Component] What are the breaking changes?

Added

[Component] What is added?

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Hds-js

Breaking

[cookieConsentController] Removed
[cookieController] Removed
[getContent] Removed

Added

[cookieConsentCore] New component for cookie consent handling
[standalone/cookieConsentCore] Standalone version of the cookie consent component

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Assets 2

11 Nov 09:31

mrTuomoK

v4.0.0-beta.1

6b86514

v4.0.0-beta.1 Pre-release

Pre-release

[4.0.0-beta.1] - November, 11, 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 using 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.

Fixed

[Component] What bugs/typos are fixed?

Figma

Breaking

[Component] What are the breaking changes?

Added

[Component] What is added?

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Sketch/Abstract

Breaking

[Component] What are the breaking changes?

Added

[Component] What is added?

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Icon kit

Breaking

[Component] What are the breaking changes?

Added

[Component] What is added?

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Hds-js

Breaking

[cookieConsentController] Removed
[cookieController] Removed
[getContent] Removed

Added

[cookieConsentCore] New component for cookie consent handling
[standalone/cookieConsentCore] Standalone version of the cookie consent component

Changed

Changes that are not related to specific components

[Component] What has been changed

Fixed

[Component] What bugs/typos are fixed?

Assets 2

07 Nov 14:25

mrTuomoK

v4.0.0-beta.0

0a8f906

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.

Assets 5

31 Oct 09:21

timwessman

v3.11.0

312d2ae

v3.11.0

[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

Assets 5

09 Oct 08:21

NikoHelle

v3.10.1

a62421b

v3.10.1

[3.10.1] - Oct, 09, 2024

React

Fixed

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

Assets 5

04 Sep 11:54

NikoHelle

v3.10.0

857b35d

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

Assets 5

02 Jul 12:52

mrTuomoK

v3.9.0

b2713bb

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.

Assets 5

07 May 10:38

mrTuomoK

v3.8.0

bc78874

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

Assets 5

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

v4.0.0

[4.0.0] - November, 21, 2024

React

Breaking

Added

Changed

Fixed

Core

Breaking

Added

Fixed

Design tokens

Breaking

Documentation

Breaking

Added

Changed

Fixed

Figma

Added

Fixed

Changed

Deprecated

Hds-js

Breaking

Added

v4.0.0-beta.3

[4.0.0-beta.3] - November, 20, 2024

React

Breaking

Added

Changed

Fixed

Core

Breaking

Added

Changed

Fixed

Design tokens

Breaking

Documentation

Breaking

Added

Changed

Fixed

Figma

Breaking

Added

Changed

Fixed

Sketch/Abstract

Breaking

Added

Changed

Fixed

Icon kit

Breaking

Added

Changed

Fixed

Hds-js

Breaking

Added

Changed

Fixed

v4.0.0-beta.2

[4.0.0-beta.2] - November, 14, 2024

React

Breaking

Added

Changed

Fixed

Core

Breaking

Added

Changed

Fixed

Design tokens

Breaking