Releases: City-of-Helsinki/helsinki-design-system
Releases · City-of-Helsinki/helsinki-design-system
v1.7.1
[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
[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
[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
[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
[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
[1.4.1] - Sep, 9, 2021
React Components
Fixed
- [SideNavigation] Invalid CSS generating problems with testing libraries
v1.4.0
[1.4.0] - Sep, 7, 2021
Core
Added
- [Icons] New icons:
React Components
Added
- Linkbox
- SideNavigation
- [Icons] New icons:
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
[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
[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
[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