Skip to content

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

v1.7.1

29 Nov 09:27
c9bb20d
Compare
Choose a tag to compare

[1.7.1] - Nov, 29, 2021

React Components

Fixed

  • [Table] Fixed duplicate id bug regarding table checkboxes

Documentation

Fixed

  • Typo fixes
  • Fixed password input react storybook link

v1.7.0

25 Nov 11:25
b1952f9
Compare
Choose a tag to compare

[1.7.0] - Nov, 25, 2021

React Components

Added

  • Table
  • [Date Input] Support disabling dates with custom logic
  • [File Input] Support for tooltip

Fixed

  • [Select] Accept null as component value
  • [Date Input] Fix Datepicker dates keyboard navigation when min or max date is set
  • [Linkbox] Pass custom className property to container element for easier styling

Design kit

Added

  • [Logo] Added logo language versions and size variants (40px and 60px) for Swedish and Russian
  • [Tables] Symbols for table column sorting
  • [Tables] Symbols for row selection (checkbox) cells
  • [Tables] Symbols for empty header cells
  • [Tables] Symbols for row selection column (default and zebra)
  • [Tables] Detachable example tables for row selection

Changed

  • Updated HDS Sketch libraries to Sketch version 80 (80.0)
  • [Logo] Changed the component name to have a 2 letter prefix for all logo language variants. Simplified the symbol structure: logo symbols now have only three (3) colour variants; Black, White and Brand colour. The colour cannot be overridden for Black and White logos. If you need a brand colour Logo, use the “Logo/Brand colour” symbol and override with the desired brand colour.
  • [Tables] Updated Table examples to show zebra colouring and selectable rows

Removed

  • [Logo] Individual brand colour logo symbols. Use the new “Logo/Brand colour” symbol instead.

Documentation

Added

  • Favicon documentation to the Visual assets section
  • [Tables] Documentation and examples of interactive (React) tables

Changed

  • Updated Logo documentation to include the Russian language variant
  • Updated Roadmap
  • [Tables] Updated Table Playground examples to use React instead of HDS Core
  • [DateInput] Added a small note to the documentation about disabling DateInput dates

v1.6.0

28 Oct 12:15
4c36cc4
Compare
Choose a tag to compare

[1.6.0] - Oct, 28, 2021

React Components

Fixed

  • [Notification] Animations not firing with some build configurations, often in production builds

Added

  • [Koros] Calm variant of Koros

Core

Added

  • [Table] Table component
  • [Koros] Calm variant of Koros

Design kit

Added

  • [Tables] New Table symbols (new library file)
    • Column symbols
    • Cell symbols for custom tables
    • Example table symbols
  • [Koros] M-sized Tyyni (Calm) variant
  • [Typography] Text styles for right aligned body text

Changed

  • Updated HDS Sketch libraries to the Sketch version 78 (78.1)
  • [Koros] Clarified symbol layer naming in the override panel

Removed

  • [Table] Marked old Table symbols as Deprecated. These will be removed in a future update

Documentation

Added

  • [Table] Documentation for the Table component

Changed

  • [Form pattern] Updated form examples to explain required fields better

v1.5.1

11 Oct 11:23
063e486
Compare
Choose a tag to compare

[1.5.1] - Oct, 11, 2021

React Components

Fixed

  • [Combobox] Prevented resetting selected values on tab keypress
  • [Combobox] Fixed space keypress in the search, adds now a space into search term
  • [Combobox] Added missing aria-expanded attribute for the dropdown button
  • [File Input] Prevented unnecessary onChange calls on re-render
  • [Number Input] Fixed resetting input value as an empty value
  • [Time Input] Fixed value property

Design kit

Changed

  • Updated HDS Sketch libraries to Sketch 77 (77.1)
  • [Form Components] Moved Date input symbols to the “Date & Time” category

Fixed

  • [Form Components] Removed duplicate TextInput Active state symbols that were accidentally introduced last update
  • [Icons] Removed duplicate example artboard entry for fast-forward icon

Removed

  • [Form Components] “Date Input” category (symbols moved to “Date & Time”)

Documentation

Added

  • Link to the design kit to the designers’ Getting started page
  • Link to the icon kit to the Icon documentation page
  • Link to the favicon kit to the Logo documentation page
  • Notes about Button role attribute usage when the Button is used as a link
  • More Link component variation examples
    • Internal/external links, links that open in a new tab, links with icons

Changed

  • Updated Card examples to use role="link" in their Buttons

v1.5.0

22 Sep 09:40
931d172
Compare
Choose a tag to compare

[1.5.0] - Sep, 22, 2021

Core

  • [Text Input] Added Info message to inform user of dynamic input value changes
  • [Icons] New icons:
    • Shopping cart

React Components

Added

  • File Input
  • [Text Input, TextArea, Password Input, Number Input, Time Input, Date Input, File Input] Added Info message to inform user of dynamic input value changes
  • [Icons] New icons:
    • Shopping cart

Change

  • [Accordion] Changed Accordion to open via header click
  • [Accordion] Added support for accordion being open by default
  • Use Date Input and Phone Input in the form examples
  • Add Date Input and Phone Input validation in the form examples

Design kit

Added

  • [Form Components] File Input symbols
  • [Form Components] New InfoMessage element that can be used with all form components
  • Info message can be used to convey information to the user which otherwise could be left unnoticed. It is meant to inform the user if something has caused changes to the input.
  • [Icons] Shopping cart icon

Documentation

Added

  • File Input documentation
  • [Form validation pattern] Info message usage guidelines
  • Missing components to form pattern documentation

Changed

  • [Form pattern] Added missing form components to the form pattern documentation
  • [Form pattern] Updated some of the images in the form pattern to use the current focus style
  • Changed heading colour in all documentation site and Storybook examples from --color-bussi to --color-black-90

v1.4.1

09 Sep 08:20
1714d26
Compare
Choose a tag to compare

[1.4.1] - Sep, 9, 2021

React Components

Fixed

  • [SideNavigation] Invalid CSS generating problems with testing libraries

v1.4.0

07 Sep 11:18
230f8aa
Compare
Choose a tag to compare

[1.4.0] - Sep, 7, 2021

Core

Added

  • [Icons] New icons:
    • Whatsapp

React Components

Added

  • Linkbox
  • SideNavigation
  • [Icons] New icons:
    • Whatsapp

Fixed

  • [Number Input] Using stepper button will call onChange callback

Design kit

Added

  • [Cards] Linkbox symbols, including
    • Empty Linkboxes
    • Linkboxes with heading and text
    • Linkboxes with image, heading and text
  • [Cards] Added custom Linkbox examples
  • [Icons] WhatsApp icon
  • [Navigation] Symbols for side navigation
    • Example navigation symbols both for Desktop and Mobile screen sizes
    • Side navigation item symbols for building custom content side navigations

Changed

  • Updated all HDS libraries to the Sketch version 76 (76.1)
  • [Cards] Updated symbol structure so it is easier to differentiate regular Card and Linkbox custom examples
  • [Navigation] Renamed “Navigation” symbols to “Main navigation” to make them more easily distinguishable from the new side navigation symbols

Fixed

  • [Cards] Text + heading with border symbol smart layout scaling

Documentation

Added

  • Side navigation documentation
  • Linkbox documentation
  • A guideline page about choosing between Checkbox, Radio button and Toggle button.

Changed

  • Remove brand colors from form examples headings
  • [Checkbox] Playground examples are now fully interactable
  • [Radio button] Playground examples are now fully interactable
  • Updated Roadmap

Fixed

  • Fixed typo in the link to aremycolorsaccesible.com

v1.3.1

11 Aug 09:58
a43ce47
Compare
Choose a tag to compare

[1.3.1] - Aug, 11, 2021

Design tokens

Changed

  • Update color Spåra (color-tram) token value from #009246 to #008741

React Components

Changed

  • [Navigation] Pass native event to onTitleClick
  • [DateInput] Support clearing DateInput value programmatically

Fixed

  • [Navigation] Remove border-radius from navigation focus style
  • [Navigation] Add warning if lang-attribute is missing from Navigation.LanguageSelector option
  • [Navigation] Fix Navigation component render when optional label property is missing
  • [Footer] Fix footer icon a11y problems

Design kit

Changed

  • [Color] Spåra from #009246 to #008741 for better accessibility
    • This ensures that the Spåra is now easier to use both as a background color and as a text color
  • [Form Components] Removed rounded corners from search input fields

Documentation

Changed

  • [Color] Updated documentation for the new Spåra (color-tram) color
  • Add note about Navigation.LanguageSelector option's lang attribute

v.1.3.0

09 Aug 13:45
66cddc3
Compare
Choose a tag to compare

[1.3.0] - Aug, 9, 2021

Core

Added

  • Link

React Components

Added

  • Link

Fixed

  • [Form Components] Tooltip focus style
  • [Form Components] Incorrect error icon
  • [Notification] Inline notification z-index
  • [TimeInput] Time input value on clear

Design kit

Breaking

  • Updated all HDS libraries to the Sketch version 74 (74.1)

Added

  • [Links] New Link symbols
  • Two main link variants
    • Inline links are positioned within a text element
    • Standalone links are used without an accompanying text element (similarly to buttons)
  • Variants for different link types
    • Internal/External
    • File
    • Phone number
    • Email address
  • [Color] Shared style for a visited link
  • [Typography] Shared styles for a visited link

Documentation

Added

  • Link component documentation
  • Upcoming breaking changes page which lists near future changes that may be considered breaking
  • Guideline page for contributing for implementation
  • Tutorial page for getting started with Abstract
  • Links to Abstract collections to the Designers Getting started page

Changed

  • Updated Roadmap
  • Added a small note about Sketch Assistant link requiring Sketch to be installed
  • Typo fixes
  • Fixes to broken links

v1.2.0

21 Jun 12:48
319a45c
Compare
Choose a tag to compare

[1.2.0] - June, 21, 2021

Core

Added

  • Fieldset

React Components

Added

  • Fieldset
  • Toggle Button

Fixed

  • [TextInput] Fixed error and success text alignments

Design kit

Added

  • [Buttons] Toggle button with two variants
    • Default toggle button
    • Toggle button with a horizontal label
  • [Form Components] Fieldset with two variants
    • Default fieldset
    • Fieldset with borders

Changed

  • [Form Components] Renamed all “Fixed” components to “Read-only” to match naming used in the implementation

Fixed

  • [Color] Corrected a typo (Spåra → Metro) in the Colour Accessibility artboard
  • [Grids & Breakpoints] Changed the XS template layout grid width from 296px to 288px (this now matches the HDS documentation)

Documentation

Added

  • Toggle button documentation and examples
  • Fieldset documentation and examples
  • Documentation and guidelines for creating new HDS icons
  • Documentation for error messages related to multiple input fields to Form validation pattern

Changed

  • Added a note to Checkbox documentation page about the choice between a Checkbox and a Toggle button

Fixed

  • Corrected typos “from” to “form” in Storybook validation examples