Merge pull request #1183 from City-of-Helsinki/release-3.2.0

Release 3.2.0

.github/workflows/build-icon-library.yml

@@ -12,7 +12,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v4
         with:
           node-version: '20.3.1'
           registry-url: 'https://registry.npmjs.org'
@@ -51,7 +51,7 @@ jobs:
         run: cp ./release/icon-kit-template-CHANGELOG.txt ./icon-library/CHANGELOG.txt
 
       - name: Create release zip file
-        uses: TheDoctor0/zip-release@0.7.1
+        uses: TheDoctor0/zip-release@0.7.6
         with:
           filename: 'release/hds-icon-kit.zip'
           path: './icon-library'

.github/workflows/development.yml

@@ -19,7 +19,7 @@ jobs:
         id: nvmrc
 
       - name: setup node ${{ steps.nvmrc.outputs.NODE_VERSION }}
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4
         with:
           node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/gh-pages.yml

@@ -17,7 +17,7 @@ jobs:
         id: nvmrc
 
       - name: setup node ${{ steps.nvmrc.outputs.NODE_VERSION }}
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4
         with:
           node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/prerelease.yml

@@ -19,7 +19,7 @@ jobs:
         id: nvmrc
 
       - name: setup node ${{ steps.nvmrc.outputs.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
           registry-url: 'https://registry.npmjs.org'

CHANGELOG.md

@@ -5,6 +5,79 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.2.0] - December, 5, 2023
+
+### React
+
+#### Added
+
+- [DateInput] Support for customising date styles
+- [Login] Support for getting api tokens from Keycloak
+- [Accordion] Support for customising close button styles
+
+#### Changed
+
+- [Button] CSS supports reset and button types
+
+#### Fixed
+
+- [Header.NavigationMenu] Fixed navigation menu on mobile
+- [Header.ActionBar] Added `aria-hidden` for separator
+- [Checbox] Fixed Checkbox label taking space even if label not given (when using an external component as the label for it)
+
+### Core
+
+#### Changed
+
+- [Button] CSS supports reset and button types
+
+#### Fixed
+
+- [Checkbox] Small changes to styles not to add padding when label not used (by using `hds-checkbox__label--hidden` class)
+
+### Templates
+
+#### Added
+
+- Added new template for error page
+
+### Documentation
+
+#### Changed
+
+- [Checkbox] Small addition to guide not to use the label-property at all when using an external label for the Checkbox
+- [Accordion] Add close button theming properties
+
+### Figma
+
+#### Added
+
+- [Icons] Added a new vector icon for X, replacing Twitter
+
+#### Changed
+
+- [Footer] Replaced old Twitter icon with X icon
+- [SearchInput] Improved responsiveness with auto layout
+
+#### Fixed
+
+- [Tabs] Background colour removed to support different application background colours. Note! When using Tabs with a scroll-button in Figma, ensure to adjust the button's gradient fill to match the application's background for visual consistency
+
+### Sketch & Abstract
+
+#### Changed
+- Updated HDS Sketch libraries to Sketch version 99.1. Please update your Sketch and files accordingly
+
+### Icons
+
+#### Added
+
+- [Icons] Added a new vector icon for X
+
+#### Changed
+
+- [Icons] Renamed twitter to xx_twitter to indicate it's deprecated state
+
 ## [3.1.0] - October, 31, 2023
 
 ### React

DEVELOPMENT.md

@@ -9,7 +9,7 @@
 - [Nvm](https://github.com/nvm-sh/nvm)
 - [Node](https://nodejs.org/en/)
 - [Yarn](https://yarnpkg.com/)
-- [Docker](https://www.docker.com/) (for visual regression tests)
+- [Docker](https://www.docker.com/) (For visual regression tests. Read more [here](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/react/DEVELOPMENT.md#visual-regression-tests).)
 
 ### Setting up local development environment
 

package.json

@@ -23,6 +23,11 @@
     "rimraf": "^5.0.1"
   },
   "resolutions": {
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2",
+    "@types/react-dom/@types/react": "17.0.2",
+    "@types/react-dom/**/@types/react": "17.0.2",
+    "**/@types/react-dom/**/@types/react": "17.0.2",
     "multer": "1.4.4-lts.1",
     "jpeg-js": "0.4.4",
     "json5": "2.2.2"

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Core styles for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "copyfiles": "2.2.0",
     "cssnano": "4.1.10",
-    "hds-design-tokens": "3.1.0",
+    "hds-design-tokens": "3.2.0",
     "normalize.css": "8.0.1",
     "postcss": "8.2.15",
     "postcss-cli": "8.3.1",

packages/core/src/components/button/button.css

@@ -63,15 +63,20 @@
  * Normalize.css rules
  * Correct the inability to style clickable types in iOS and Safari.
  */
-.hds-button[type="button"], .hds-button[type="reset"], .hds-button[type="submit"] {
+.hds-button[type="button"],
+.hds-button[type="reset"],
+.hds-button[type="submit"] {
   -webkit-appearance: button;
 }
 
 /*
  * Normalize.css rules
  * Remove the inner border and padding in Firefox.
  */
-.hds-button::-moz-focus-inner, .hds-button[type="button"]::-moz-focus-inner, .hds-button[type="reset"]::-moz-focus-inner, .hds-button[type="submit"]::-moz-focus-inner {
+.hds-button:-moz-focus-inner,
+.hds-button[type="button"]:-moz-focus-inner,
+.hds-button[type="reset"]:-moz-focus-inner,
+.hds-button[type="submit"]:-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
@@ -80,7 +85,10 @@
  * Normalize.css rules
  * Restore the focus styles unset by the previous rule.
  */
-.hds-button:-moz-focusring, .hds-button[type="button"]:-moz-focusring, .hds-button[type="reset"]:-moz-focusring, .hds-button[type="submit"]:-moz-focusring {
+.hds-button:-moz-focusring,
+.hds-button[type="button"]:-moz-focusring,
+.hds-button[type="reset"]:-moz-focusring,
+.hds-button[type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
@@ -97,12 +105,7 @@
   color: var(--color-hover);
 }
 
-.hds-button:focus-visible {
-  background-color: var(--background-color-focus, transparent);
-  color: var(--color-focus);
-  outline: none;
-}
-
+.hds-button:focus-visible,
 .hds-button:active {
   background-color: var(--background-color-focus, transparent);
   color: var(--color-focus);
@@ -120,10 +123,7 @@
   cursor: not-allowed;
 }
 
-.hds-button:focus-visible:hover {
-  background-color: var(--background-color-hover-focus, transparent);
-}
-
+.hds-button:focus-visible:hover,
 .hds-button:active:hover {
   background-color: var(--background-color-hover-focus, transparent);
 }
@@ -132,19 +132,12 @@
   border-color: var(--border-color-hover, transparent);
 }
 
-.hds-button:not(:disabled):focus-visible {
-  border-color: var(--border-color-focus, transparent);
-}
-
+.hds-button:not(:disabled):focus-visible,
 .hds-button:not(:disabled):active {
   border-color: var(--border-color-focus, transparent);
 }
 
-.hds-button:not(:disabled):focus-visible:hover {
-  border-color: var(--border-color-hover-focus, transparent);
-  color: var(--color-hover-focus);
-}
-
+.hds-button:not(:disabled):focus-visible:hover,
 .hds-button:not(:disabled):active:hover {
   border-color: var(--border-color-hover-focus, transparent);
   color: var(--color-hover-focus);
@@ -162,32 +155,33 @@
   width: var(--size);
 }
 
-.hds-button:focus-visible:after {
-  --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));
-
-  border-color: var(--focus-outline-color);
-}
-
+.hds-button:focus-visible:after,
 .hds-button:active:after {
   --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));
 
   border-color: var(--focus-outline-color);
 }
 
 input[type="submit"].hds-button,
+input[type="reset"].hds-button,
+input[type="button"].hds-button,
 .hds-button__label {
   font-weight: inherit;
   line-height: 1.25em;
   padding: var(--spacing-s);
 }
 
-input[type="submit"].hds-button {
+input[type="submit"].hds-button,
+input[type="reset"].hds-button,
+input[type="button"].hds-button {
   cursor: pointer;
   padding: var(--spacing-s) var(--spacing-l);
 }
 
-/* submit input */
-input[type="submit"].hds-button:focus-visible {
+/* submit/reset/button input */
+input[type="submit"].hds-button:focus-visible,
+input[type="reset"].hds-button:focus-visible,
+input[type="button"].hds-button:focus-visible {
   box-shadow: 0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color), 0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color);
 }
 
@@ -196,13 +190,11 @@ input[type="submit"].hds-button:focus-visible {
   margin: 0 var(--spacing-2-xs);
 }
 
-input[type="submit"].hds-button--small,
 .hds-button--small .hds-button__label {
   line-height: var(--lineheight-s);
   padding: var(--spacing-2-xs) var(--spacing-xs);
 }
 
-
 /* supplementary with right icon */
 .hds-button--supplementary .hds-button__label:first-child {
   padding-right: var(--spacing-2-xs);
@@ -229,7 +221,10 @@ input[type="submit"].hds-button--small,
   padding: 0;
 }
 
-input[type="submit"].hds-button--small {
+input[type="submit"].hds-button--small,
+input[type="reset"].hds-button--small,
+input[type="button"].hds-button--small {
+  line-height: var(--lineheight-s);
   padding: var(--spacing-2-xs) var(--spacing-m);
 }
 

packages/core/src/components/checkbox/checkbox.css

@@ -135,6 +135,10 @@
   position: relative;
 }
 
+.hds-checkbox .hds-checkbox__label--hidden {
+  padding-left: 0;
+}
+
 /* ERROR */
 .hds-checkbox__error-text {
   background-color: var(--color-error-light);

packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-design-tokens",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Design tokens for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",

packages/react/DEVELOPMENT.md

@@ -52,13 +52,9 @@ To run the visual regression tests, you must first build the storybook by runnin
 
 ### Updating reference images
 
-When adding a new component or after making visual changes to some existing component, you must update the corresponding reference image. Before you can do this, you must start the local react storybook by issuing the following command in the root of the whole project:
+When adding a new component or after making visual changes to some existing component, you must update the corresponding reference image. Before you can do this, you must first build the storybook by running `yarn build-storybook`.
 
-```bash
-yarn start:react
-```
-
-Then leave the storybook on the background and switch to another terminal window. Go to packages/react and issue this command:
+Then you can issue this command:
 
 ```bash
 yarn update-reference-images --storiesFilter "<name or part of the name of the story>"