Skip to content

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

v2.3.0

14 Sep 14:35
@NikoHelle NikoHelle
v.2.3.0
e03dcf2
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.3.0

React Components

Added

  • [CookieModal] component for React
  • [CookiePage] component for React

Documentation

Added

  • Documentation for the React CookieConsent component
  • Cookie compliance Pattern documentation
  • Common Helsinki cookies Pattern documentation
  • Cookie consent Pattern documentation
Assets 5
Loading

v2.2.0

08 Sep 13:07
@VilleMiekkoja VilleMiekkoja
v2.2.0
e71ab4d
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.2.0

[2.2.0] - September, 8, 2022

React Components

Added

  • [Pagination] component for React
  • [Table] Support for providing side effects before or after the Table component is done sorting
  • [Notification] Accepts a custom aria-label for the notification section element

Documentation

Added

  • Documentation for the React Pagination component
  • Documentation for Table component's onSort property
  • Documentation for Notification component's notificationAriaLabel property
Assets 5
Loading

v2.1.1

12 Jul 07:24
@minevala minevala
v2.1.1
748d04e
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.1.1

[2.1.1] - July, 12, 2022

React Components

Fixed

  • [Navigation] Removed broken and unnecessary responsive CSS class causing problems with title font sizes
Assets 5
Loading

v2.1.0

30 Jun 11:46
@minevala minevala
v2.1.0
969cb86
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.1.0

[2.1.0] - June, 30, 2022

React Components

Added

  • [Navigation] DropdownLink component to support NavigationItem that can act as a link and as a menu toggle

Fixed

  • [Dialog] Enable content scrolling only when the scrollable property is set to true
Assets 5
Loading

v2.0.0

27 Jun 12:55
@minevala minevala
v2.0.0
984db72
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.0.0

[2.0.0] - June, 27, 2022

Design Tokens

Breaking Changes

Added

  • [Typography] New XXL heading size (64px)
  • [Typography] New XL-Mobile heading size (40px)

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] 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 values to match the percentage names

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.
  • [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 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 --background-color theme variable

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; 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
    • 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)
Assets 5
Loading

v1.15.0

30 May 10:46
@minevala minevala
v1.15.0
6f02d70
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v1.15.0

[1.15.0] - May, 30, 2022

React Components

Added

  • [Navigation] add ariaLabel property
  • [SideNavigation] add ariaLabel property

Fixed

  • [Navigation] initializing of useMobile hook
  • [SideNavigation] Keyboard navigation on small screens
  • [Tabs] Tab OnClick callback is called also when a tab is selected with the keyboard

Design kit

Changed

  • Updated HDS Sketch libraries to Sketch 88.1
Assets 5
Loading

v1.14.0

05 May 11:39
@VilleMiekkoja VilleMiekkoja
v1.14.0
80fe106
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v1.14.0

[1.14.0] - May, 5, 2022

React Components

Added

  • [Dialog] className prop for dialog action button container to enable customisation
  • [Link] ref prop to fix preloading content with Next.js framework
  • Added support for React 17

Fixed

  • [Dialog] Wrapping of dialog action buttons on desktop

Design kit

Changed

  • Updated HDS Sketch libraries to Sketch 86
Assets 5
Loading

v1.13.0

21 Apr 10:15
@minevala minevala
v1.13.0
5ed9d5d
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v1.13.0

[1.13.0] - Apr, 21, 2022

Core

Added

  • Pagination

React Components

Fixed

  • [Dialog] Prevent unnecessary re-rendering when content state changes

Design kit

Added

  • New library: HDS Pagination
  • Includes symbols for a Pagination component

Changed

  • Updated HDS Sketch libraries to Sketch 85 (85.1)
  • [Table] Removed smart layout from the Table Checkbox cell symbol (this allows hiding the Checkbox without changing the cell height)

Documentation

Added

  • Documentation for the Pagination component
Assets 5
Loading

v1.12.0

22 Mar 12:44
@minevala minevala
v1.12.0
9574ded
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v1.12.0

[1.12.0] - Mar, 22, 2022

Core

Added

  • [Checkbox] Indeterminate state

React Components

Added

  • [Checkbox] Indeterminate state
  • [Tabs] initiallyActiveTab property for setting initially active tab (default is the first tab)
  • [Tabs] Tab onClick property for adding callback for tab click

Removed

  • Node engine restriction by replacing node-sass lib with sass

Design kit

Added

  • [Form Components] Indeterminate state for the Checkbox component

Documentation

Added

  • [Checkbox] Documentation for the indeterminate checkbox state
Assets 5
Loading

v1.11.1

09 Mar 06:54
@minevala minevala
v1.11.1
58ba7ca
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v1.11.1

[1.11.1] - Mar, 8, 2022

Core

Fixed

  • [Table] The header default background color
Assets 5
Loading