Skip to content

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

v4.1.0

09 Jan 17:11
@mrTuomoK mrTuomoK
v4.1.0
cc63550
Compare
Choose a tag to compare
v4.1.0 Latest
Latest

[4.1.0] - January, 09, 2025

React

Added

  • [LoginProviderWithApolloContext] Login Provider with automatic ApolloClient context.
  • [ApolloClientModule] New Login module for auto-appending api tokens to query headers.
  • [ApiTokenClientTracker] Util to track api token changes and renewals.
  • [TokenizedFetch] New Login module for auto-appending api tokens to fetch requests.

Changed

Changes that are not related to specific components

  • [GraphQLModule] Use the ApolloClient Module when available

Fixed

  • [Login] External modules with Strict mode throwed an error
  • [ssr] Login component works with SSR rendering
  • [Login] Event listeners with Strict mode were lost in double render

Documentation

Added

  • Technology tags to all components

Figma

Fixed

  • [Header] Other actions menu item color fixed in header dark version.

Deprecated

  • [PhoneInput] Country Code variant was deprecated. Still available in the library but will be removed in the next major release.

Hds-js

Added

  • [ApolloClientModule] New Login module for auto-appending api tokens to query headers.
  • [ApiTokenClientTracker] Util to track api token changes and renewals.

Changed

  • [GraphQLModule] Use the ApolloClient Module when available
Assets 5
Loading

v3.12.0

09 Jan 13:26
@timwessman timwessman
v3.12.0
4157a0e
Compare
Choose a tag to compare
v3.12.0

[3.12.0] - Jan, 9, 2025

React

Added

  • [LoginProviderWithApolloContext] Login Provider with automatic ApolloClient context.
  • [ApolloClientModule] New Login module for auto-appending api tokens to query headers.
  • [ApiTokenClientTracker] Util to track api token changes and renewals.
  • [TokenizedFetch] New Login module for auto-appending api tokens to fetch requests.

Changed

Changes that are not related to specific components

  • [GraphQLModule] Use the ApolloClient Module when available

Fixed

  • [ssr] Login component works with SSR rendering
  • [Login] External modules with Strict mode throwed an error
  • [Login] Event listeners with Strict mode were lost in double render

Hds-js

Added

  • [ApolloClientModule] New Login module for auto-appending api tokens to query headers.
  • [ApiTokenClientTracker] Util to track api token changes and renewals.
  • [TokenizedFetch] New Login module for auto-appending api tokens to fetch requests.

Fixed

  • [ssr] Login component works with SSR rendering
  • [Login] External modules with Strict mode throwed an error
  • [Login] Event listeners with Strict mode were lost in double render

Changed

  • [GraphQLModule] Use the ApolloClient Module when available
Assets 5
Loading

v4.0.0

21 Nov 15:06
@mrTuomoK mrTuomoK
v4.0.0
d936f63
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.0

[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
Loading

v4.0.0-beta.3

20 Nov 11:54
@mrTuomoK mrTuomoK
v4.0.0-beta.3
35f40fe
Compare
Choose a tag to compare
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
Loading

v4.0.0-beta.2

14 Nov 11:07
@mrTuomoK mrTuomoK
v4.0.0-beta.2
3234cbb
Compare
Choose a tag to compare
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
Loading

v4.0.0-beta.1

11 Nov 09:31
@mrTuomoK mrTuomoK
v4.0.0-beta.1
6b86514
Compare
Choose a tag to compare
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
Loading

v4.0.0-beta.0

07 Nov 14:25
@mrTuomoK mrTuomoK
v4.0.0-beta.0
0a8f906
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.
Assets 5
Loading

v3.11.0

31 Oct 09:21
@timwessman timwessman
v3.11.0
312d2ae
Compare
Choose a tag to compare
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
Loading

v3.10.1

09 Oct 08:21
@NikoHelle NikoHelle
v3.10.1
a62421b
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
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
Loading

v3.10.0

04 Sep 11:54
@NikoHelle NikoHelle
v3.10.0
857b35d
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
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
Loading