From 0487c4eb5c44cc5bbe80762391cee46be1a60c98 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 27 Jun 2022 13:48:14 +0300 Subject: [PATCH 1/9] Update CHANGELOG --- CHANGELOG.md | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ca38c28f3d..d5d6ddbf16 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,124 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [2.0.0] - June, 27, 2022 + +### Design Tokens +#### Breaking Changes +#### Changed +- [Typography] Typography tokens to match hel.fi new visual identity + +#### Fixed +- [Colour] The grayscale tokens hex value to match the percentage name + +### Core +#### Breaking Changes +#### Changed +- [Card, Notification, Table] Typography styles updated +- [Container] Only container-width-xl is restricting the container maximum width. Other maximum width restrictions for smaller screens have been removed. +- [Button] Update Supplementary button icon spacing +- +### React Components +#### Breaking Changes +#### Changed +- [Accordion, Card, Dialog, Footer, Linkbox, Navigation, Notification, Stepper, Table, Tooltip] Typography styles updated +- [Container] Only container-width-xl is restricting the container maximum width. Other maximum width restrictions for smaller screens have been removed. +- [Dialog] Updated Dialog header and content spacing to match the design +- [Link] The default size of link to medium font size from small font size +- [Button] Update Supplementary button icon spacing + +### Design kit + +#### Added +- [Typography] HDS heading styles have been synced with the new Hel.fi styles +- [Typography] New XXL heading size (64px) + - This also means that the total amount of heading levels has been increased from 5 to 6 +- [Typography] New XL-Mobile heading size (40px) +- [Accordion] Two additional Accordion sizes, L (Large) and S (Small) +- [Links] Two additional sizes for the Standalone link, S (Small) and M (Medium) + +#### Changed +- [Typography] Made changes to HDS heading font sizes to match Hel.fi styles + - XL from 52 to 48px + - L from 36 to 32px +- [Typography] Made changes to HDS heading line heights to match Hel.fi styles + - XL from 62 to 48 + - L from 43 to 32 + - M from 29 to 32 + - S from 24 to 28 + - XS from 22 to 24 +- [Typography] Made changes to HDS heading font weights to match Hel.fi styles + - XL from Bold to Regular + - L from Bold to Regular + - M from Bold to Medium + - S from Bold to Medium +- [Typography] Made changes to HDS body font sizes to match Hel.fi styles + - Sizes available sizes are now 14, 16, 18 and 20px + - The L size (18px) is now marked as the default size +- [Typography] Made changes to HDS body text line heights to match Hel.fi styles + - S from 26 to 24 + - L from 27 to 28 + - XL from 30 to 32 +- [Typography] Updated line height token descriptions +- [Typography] Updated typography example artboards with new heading styles +- Updated all HDS example artboards with new heading styles +- [Accordion] Optional “Close” button at the bottom of Accordions +- [Accordion] Renamed and grouped the current set of Accordions under “M” size +- [Accordion] Increased the size of the collapse icon from 24x24 to 32x32 of M size symbols +- [Accordion] Small spacing changes to “Empty” accordion symbols +- [Grids and Breakpoints] Updated example artboards to reflect the new container width changes +- [Accordion] Updated symbols with new heading styles +- [Accordion] Small spacing changes to accommodate new heading styles +- [Accordion] The symbol now properly supports multi-line headers +- [Cards] Updated symbols with new heading styles +- [Cards] Small spacing changes to accommodate new heading styles +- [Footer] Updated symbols with new heading styles +- [Form Components] Updated date picker and error summary with new heading styles +- [Modals and Notifications] Updated symbols with new heading styles +- [Modals and Notifications] Small spacing changes to Notifications to accommodate slightly altered heading styles +- [Modals and Notifications] Small height changes to Dialogs to accommodate slightly altered body styles +- [Navigation] Updated symbols with new heading styles +- [Navigation] Updated the mobile symbol to use XSS heading token +- [Table] Small spacing changes to accommodate newly sized labels + +#### Fixed +- [Cards] Fixed smart layout scaling of Text + heading Card with borders +- [Colour] Updated grayscale token hex values to match their exact percentage values + - color-black-70 from #4c4c4c to #4d4d4d + - color-black-40 from #999898 to #999999 + - color-black-30 from #b2b2b2 to #b3b3b3 + - color-black-10 from #e5e5e5 to #e6e6e6 + - color-black-5 from #f1f1f1 to #f2f2f2 + +#### Removed +- [Typography] Heading styles with Bussi colour (in the future, Black and White styled headings are recommended) + +### Documentation +- The HDS 2.0 update features a rebuilt documentation site. The old version 1 documentation site can still be accessed at hds.hel.fi/v1. All changes included in this update are targeted at the new documentation site. The old documentation site will stay unchanged. + +#### Added +- New documentation site + - The new documentation site is entirely built with HDS components and is accessible. We hope that the new documentation site will act as an example both for using HDS components and building accessible websites with them. + - New documentation site features include; new page structure, redesigned component pages, live code editing for component examples, component customisation documentation, redesigned design token pages, redesigned getting started section + - 2.0 guide pages (general explanation and migration guide) + - FAQ page with answers to general, design, implementation and accessibility questions + - New HDS structure images to home and getting started pages + - A notification to Navigation, Footer and SideNavigation about the upcoming Hel.fi update + +#### Changed +- Updated the Typography documentation +- Updated the Colour documentation to reflect new grayscale colour changes +- Updated the Breakpoint design token documentation to reflect new Container component changes +- Updated the Grid guidelines documentation to reflect new Container component changes +- Updated the What is new page +- Updated the Roadmap page +- Updated the accessibility statement +- Updated the following component statuses +- DateInput, Dialog, Link and Table from “Draft” to “Stable” + +#### Removed +- Migration guide to the 1.0 version (can be still found at the version 1 documentation site) + ## [1.15.0] - May, 30, 2022 ### React Components From 06945aee34d9c8d8c549883b8521283169469a28 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 27 Jun 2022 13:54:51 +0300 Subject: [PATCH 2/9] Update Grammar --- CHANGELOG.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5d6ddbf16..280d39dc06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,14 +22,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [Card, Notification, Table] Typography styles updated - [Container] Only container-width-xl is restricting the container maximum width. Other maximum width restrictions for smaller screens have been removed. - [Button] Update Supplementary button icon spacing -- + ### React Components #### Breaking Changes #### Changed - [Accordion, Card, Dialog, Footer, Linkbox, Navigation, Notification, Stepper, Table, Tooltip] Typography styles updated - [Container] Only container-width-xl is restricting the container maximum width. Other maximum width restrictions for smaller screens have been removed. - [Dialog] Updated Dialog header and content spacing to match the design -- [Link] The default size of link to medium font size from small font size +- [Link] The default size of the link to medium font size from small font size - [Button] Update Supplementary button icon spacing ### Design kit @@ -46,7 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [Typography] Made changes to HDS heading font sizes to match Hel.fi styles - XL from 52 to 48px - L from 36 to 32px -- [Typography] Made changes to HDS heading line heights to match Hel.fi styles +- [Typography] Made changes to HDS heading line-heights to match Hel.fi styles - XL from 62 to 48 - L from 43 to 32 - M from 29 to 32 @@ -64,7 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - S from 26 to 24 - L from 27 to 28 - XL from 30 to 32 -- [Typography] Updated line height token descriptions +- [Typography] Updated line-height token descriptions - [Typography] Updated typography example artboards with new heading styles - Updated all HDS example artboards with new heading styles - [Accordion] Optional “Close” button at the bottom of Accordions @@ -104,11 +104,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 #### Added - New documentation site - The new documentation site is entirely built with HDS components and is accessible. We hope that the new documentation site will act as an example both for using HDS components and building accessible websites with them. - - New documentation site features include; new page structure, redesigned component pages, live code editing for component examples, component customisation documentation, redesigned design token pages, redesigned getting started section + - New documentation site features include; a new page structure, redesigned component pages, live code editing for component examples, component customisation documentation, redesigned design token pages, redesigned getting started section - 2.0 guide pages (general explanation and migration guide) - - FAQ page with answers to general, design, implementation and accessibility questions + - FAQ page with answers to general, design, implementation, and accessibility questions - New HDS structure images to home and getting started pages - - A notification to Navigation, Footer and SideNavigation about the upcoming Hel.fi update + - A notification to Navigation, Footer, and SideNavigation about the upcoming Hel.fi update #### Changed - Updated the Typography documentation @@ -119,7 +119,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Updated the Roadmap page - Updated the accessibility statement - Updated the following component statuses -- DateInput, Dialog, Link and Table from “Draft” to “Stable” +- DateInput, Dialog, Link, and Table from “Draft” to “Stable” #### Removed - Migration guide to the 1.0 version (can be still found at the version 1 documentation site) From f917d01f9e6867f6afdc7a76abccd14919d2298c Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 27 Jun 2022 13:56:44 +0300 Subject: [PATCH 3/9] Bump up version numbers to 2.0.0 --- packages/core/package.json | 4 ++-- packages/design-tokens/package.json | 2 +- packages/react/package.json | 4 ++-- site/package.json | 8 ++++---- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 1937de22d0..88ee69b216 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "hds-core", - "version": "1.15.0", + "version": "2.0.0", "description": "Core styles for the Helsinki Design System", "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme", "license": "MIT", @@ -26,7 +26,7 @@ "@storybook/html": "6.4.18", "copyfiles": "2.2.0", "cssnano": "4.1.10", - "hds-design-tokens": "1.15.0", + "hds-design-tokens": "2.0.0", "normalize.css": "8.0.1", "postcss": "8.2.15", "postcss-cli": "8.3.1", diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 02a717ac40..4756655394 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "hds-design-tokens", - "version": "1.15.0", + "version": "2.0.0", "description": "Design tokens for the Helsinki Design System", "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme", "license": "MIT", diff --git a/packages/react/package.json b/packages/react/package.json index f6d46ad1e1..86e98dff77 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "hds-react", - "version": "1.15.0", + "version": "2.0.0", "description": "React components for the Helsinki Design System", "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme", "license": "MIT", @@ -106,7 +106,7 @@ "@react-aria/visually-hidden": "3.2.0", "date-fns": "2.16.1", "downshift": "6.0.6", - "hds-core": "1.15.0", + "hds-core": "2.0.0", "lodash.isequal": "4.5.0", "lodash.isfunction": "3.0.9", "lodash.pickby": "^4.6.0", diff --git a/site/package.json b/site/package.json index f77e92db70..7d9a47350a 100644 --- a/site/package.json +++ b/site/package.json @@ -2,7 +2,7 @@ "name": "site", "private": true, "description": "Documentation for Helsinki Design System", - "version": "1.15.0", + "version": "2.0.0", "workspaces": { "nohoist": [ "gatsby", @@ -38,9 +38,9 @@ }, "devDependencies": { "eslint-config-react-app": "^7.0.1", - "hds-core": "^1.15.0", - "hds-design-tokens": "^1.15.0", - "hds-react": "^1.15.0", + "hds-core": "2.0.0", + "hds-design-tokens": "2.0.0", + "hds-react": "2.0.0", "postcss": "8", "prettier": "2.5.1", "stylelint": "^14.8.3", From 314ef54e235b9530c19edd885ef412d78ffec371 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 27 Jun 2022 14:01:50 +0300 Subject: [PATCH 4/9] Add missing theme variable removes --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 280d39dc06..3800b8c392 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [Link] The default size of the link to medium font size from small font size - [Button] Update Supplementary button icon spacing +#### Removed +- [Accordion] Removed deprecated --button-border-color-hover theme variable +- [Table] Removed deprecated --header-background-color theme variable + ### Design kit #### Added From a4168ac79af81bfc5290648d99d1809decefa79d Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 27 Jun 2022 14:24:14 +0300 Subject: [PATCH 5/9] Update what-is-new --- site/src/docs/about/what-is-new.mdx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/site/src/docs/about/what-is-new.mdx b/site/src/docs/about/what-is-new.mdx index 7978e021ac..d604874ab0 100644 --- a/site/src/docs/about/what-is-new.mdx +++ b/site/src/docs/about/what-is-new.mdx @@ -15,9 +15,13 @@ import LeadParagraph from '../../components/LeadParagraph'; ## Releases ### 2.0.0 -*xx.xx.2022* - Release notes +*27.6.2022* - Release notes -- **Added**: TBA +- **Change**: Typography updates in multiple components to match new hel.fi visual identity +- **Added**: New documentation site +- **Change**: Container component maximum width is restricted only with the --container-width-xl value +- **Fixed**: Grayscale design tokens' values to match the percentage names +- **Removed**: Deprecated theme variables ## Releases before the version 2.0 From 0903548165c6f2f50eb62e1d57bc6392a201e9e9 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 27 Jun 2022 14:35:29 +0300 Subject: [PATCH 6/9] Update roadmap --- site/src/docs/about/roadmap.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/site/src/docs/about/roadmap.mdx b/site/src/docs/about/roadmap.mdx index 29b0fc9923..da79bf5768 100644 --- a/site/src/docs/about/roadmap.mdx +++ b/site/src/docs/about/roadmap.mdx @@ -23,21 +23,21 @@ For previously released features, see changelogs in the [What is new section](/a ### Q1 2022 - ~~Pattern: Multi-step forms~~ - ~~Component: Form stepper~~ + +### Q2 2022 +- ~~Update: Typography~~ +- ~~**HDS 2.0.0 Release**~~ - Pattern: Cookie consent - Component: Cookie consent -- Update: Typography - Update: Navigation improvements - Update: Footer improvements - Component: Breadcrumbs - Component: File download - -### Q2 2022 - Component: Hero - Component: Maps - Component: Slider - Component: Carousel - Component: Article highlights and quotes -- **HDS 2.0.0 Release** ### Q3/Q4 2022 - Pattern: Image usage instructions @@ -75,4 +75,4 @@ For previously released features, see changelogs in the [What is new section](/a - ~~Component: Basic tables~~ - ~~Icons: Next set of icons~~ - ~~Update: Koros improvements~~ -- ~~Update: Smaller improvements and fixes to multiple components~~ \ No newline at end of file +- ~~Update: Smaller improvements and fixes to multiple components~~ From 47c82939674181d8cd82c833b10d867dd7ffb070 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 27 Jun 2022 15:24:59 +0300 Subject: [PATCH 7/9] Fix design tokens changelog --- CHANGELOG.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3800b8c392..95aec477b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,8 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Design Tokens #### Breaking Changes +#### Added +- [Typography] New XXL heading size (64px) +- [Typography] New XL-Mobile heading size (40px) + #### Changed -- [Typography] Typography tokens to match hel.fi new visual identity +- [Typography] Made changes to HDS heading font sizes to match Hel.fi styles + - XL from 52 to 48px + - L from 36 to 32px +- [Typography] Line-height tokens are no longer used for headings. All headings now have their own line-height value. Use helper CSS classes from Core to easily follow the new values. #### Fixed - [Colour] The grayscale tokens hex value to match the percentage name From 663394133bc9837e7ad72a1c7dd91489392a2065 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 27 Jun 2022 15:25:21 +0300 Subject: [PATCH 8/9] Add missing core helper classes mention --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 95aec477b6..a7e5a451d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Core #### Breaking Changes +#### Added +- [Typography] Heading helper classes + #### Changed - [Card, Notification, Table] Typography styles updated - [Container] Only container-width-xl is restricting the container maximum width. Other maximum width restrictions for smaller screens have been removed. From cd128122f452c34358f06f5cb6d84ff750526e05 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 27 Jun 2022 15:25:39 +0300 Subject: [PATCH 9/9] Tweak design tokens changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a7e5a451d1..e2f0df15a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,7 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [Typography] Line-height tokens are no longer used for headings. All headings now have their own line-height value. Use helper CSS classes from Core to easily follow the new values. #### Fixed -- [Colour] The grayscale tokens hex value to match the percentage name +- [Colour] The grayscale tokens' hex values to match the percentage names ### Core #### Breaking Changes