Release 4.0.0 #1439

mrTuomoK · 2024-11-21T14:12:49Z

[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

Outside click is not detected if any component in the DOM tree calls e.preventDefault() until it reaches the window. Capturing prevents this kind of "cancel"

…initTests renderWithHelpers returns better helpers. Default id of the select changed where initTests() was used so snapshots changed too.

This is to suppress "not found" errors with some *.module.scss

Best to keep selectors with the HTML code. Selectors are needed when resolving where user interactions with mouse/keyboard happened. Also used to shift focus when navigating with keyboard.

Used to find out which kind of element had an event and where to find an element and pick siblings etc for navigation.

… events

Handles: - when menu is opened focus is moved to first element - when list loses focus, it is closed - when a tag is removed focus is moved to first tag / button - button is focused after many changes Tracks active-descendant for screen readers Calls also blur / focus callbacks

Commented out recordVideo-prop or VSCode plugin records videos

There will be many more utils, so this is better namings

If options are random, visual tests fail. Added also ids to find components in PW tests

…lit optimization

…ract-from-CHANGELOG.template remove Sketch & Abstract from CHANGELOG.template since obsolete

(release-4.0.0) HDS-2532 fix events

…51024 (Release-4.0.0) HDS-2069: Select docs

… site settings template

Local settings were committed at some point.

…nent root page

Revert login props

github-actions · 2024-11-21T14:30:13Z

Test Results

1 files 64 suites 11m 43s ⏱️
60 tests 60 ✅ 0 💤 0 ❌
120 runs 120 ✅ 0 💤 0 ❌

Results for commit 333e5a1.

NikoHelle added 30 commits November 7, 2024 10:28

(hds-2069) Added filter input to data, types and utils

1785ba6

(hds-2069) Added filter input to components

33e2b41

(hds-2069) Change useOutsideClick to use event capturing

9b97d76

Outside click is not detected if any component in the DOM tree calls e.preventDefault() until it reaches the window. Capturing prevents this kind of "cancel"

(hds-2069) Added search input to data, types and utils

b59fc60

(hds-2069) Added search to components

703f650

(hds-2069) Added screen reader notifications to data, types and utils

e88b0d7

(hds-2069) Added screen reader notifications to components

f5054c0

(hds-2069) Updated ref images

a34e930

(hds-2069) Test util to accept "filter" and use renderWithHelpers in …

1dbbec1

…initTests renderWithHelpers returns better helpers. Default id of the select changed where initTests() was used so snapshots changed too.

(hds-2069) Added filter input to data, types and utils

96f9064

(hds-2069) Added filter input to components

a23d17a

(hds-2069) Added search input to data, types and utils

5f171b7

(hds-2069) Added search to components

f025ba4

(hds-2069) Added screen reader notifications to data, types and utils

7ceee9a

(hds-2069) Added screen reader notifications to components

f0b461b

(hds-2069) Fix <Button> usage with children

79885d7

(hds-2069) Fix input labeling issue

52ed9bf

(hds-2069) Added global.d.ts to included ts files

bcf5ca9

This is to suppress "not found" errors with some *.module.scss

(hds-2069) Added and export option selectors

68cb9d0

Best to keep selectors with the HTML code. Selectors are needed when resolving where user interactions with mouse/keyboard happened. Also used to shift focus when navigating with keyboard.

(hds-2069) Hook for detecting and querying elements

b21a427

Used to find out which kind of element had an event and where to find an element and pick siblings etc for navigation.

(hds-2069) New element refs for element detection

2ba840e

(hds-2069) Utility functions to get secondary element from blur/focus…

8359acd

… events

(hds-2069) onFocus, onBlur, active-descendant and focusTarget to data

57d7729

(hds-2069) Story with onFocus / onBlur

37e984a

(hds-2069) Change playwright config to take pics on failurs

d393d59

Commented out recordVideo-prop or VSCode plugin records videos

(hds-2069) Rename e2e "helpers" to "playwright" util

aaf6a06

There will be many more utils, so this is better namings

(hds-2069) Active-descendant to button

952ed5c

(hds-2069) Select stories to keep options constants

6289b69

If options are random, visual tests fail. Added also ids to find components in PW tests

(hds-2069) Hook for handling keyboard commands

f213485

timwessman and others added 26 commits November 21, 2024 13:23

fix: navigation links

10f106e

remove console logs

a7dba3e

test versions

75bac7d

Test just latest versions

ddd87ad

test without prefix for navigation

f7f5856

fix: spotted broken pages

f5f5947

feat: Selected -style for ActionBarSubItem

d162ef5

fix: site home page layout, wrong navigation items

8c448e8

fix: use old hds correctly with old documentation, removed webpack sp…

2408e7c

…lit optimization

feat: add to changelog. Remove commmented out code

ebd9d55

fix: docs home page style fix

20f3555

Merge pull request #1436 from City-of-Helsinki/remove-sketch-and-abst…

9086c1f

…ract-from-CHANGELOG.template remove Sketch & Abstract from CHANGELOG.template since obsolete

Merge pull request #1435 from City-of-Helsinki/hds-2532-fix-events

5f1772e

(release-4.0.0) HDS-2532 fix events

Merge pull request #1389 from City-of-Helsinki/hds-2069-select-docs-2…

db7c978

…51024 (Release-4.0.0) HDS-2069: Select docs

feat: common cookies

7d17c71

fix: change *.hel.fi to INSERT_YOUR_DOMAIN_NAME_HERE.hel.fi in common…

6e7518c

… site settings template

fix: change file name to common_sitesettings.json

c4d091b

fix: change cookie setting file name in documentation

0a628c4

fix: fixed common_sitesettings.json references

3cead4c

Revert login props

6822e4b

Local settings were committed at some point.

fix: reroute urls of missing component (of version) urls to the compo…

e20c07d

…nent root page

fix: refactor

da22ed2

Merge pull request #1438 from City-of-Helsinki/revert-login-props

91e22ac

Revert login props

update changelog

36d42d3

bump versions

f4690b9

Updated icon library

333e5a1

NikoHelle approved these changes Nov 21, 2024

View reviewed changes

mrTuomoK merged commit d936f63 into master Nov 21, 2024
7 checks passed

mrTuomoK deleted the release-4.0.0 branch November 21, 2024 14:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Release 4.0.0 #1439

Release 4.0.0 #1439

mrTuomoK commented Nov 21, 2024

github-actions bot commented Nov 21, 2024

Release 4.0.0 #1439

Release 4.0.0 #1439

Conversation

mrTuomoK commented Nov 21, 2024

[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

github-actions bot commented Nov 21, 2024

Test Results