v1.4.0

[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

[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

v1.1.0

[1.1.0] - May, 25, 2021

React Components

Added

• Password Input

Changed

• [Labels & Tags] Added icon support for StatusLabel
• [Labels & Tags] Increased the height of StatusLabel and Tag

Fixed

• [DateInput] Datepicker will use fallback positions if there is not enough space in the bottom and left

Design kit

Added

• [Color] Usage example images
• [Form Components] Password input symbols, including
• Input with a built-in visibility icon to display masked characters
• Input with external visibility icon buttons to reveal masked characters
• [Labels & Tags] StatusLabel with an icon variant

Changed

• [Color] Updated colour style example artboards to include some guidelines on how the colours can be used
• [Color] Separated fill colour example artboards into separate artboards Brand, Status and Grayscale
• [Form Components] Updated spacing and size of Select symbols to match newly sized Tag component
• [Form Components] Updated spacing and size of Combobox symbols to match newly sized Tag component
• [Color] Renamed “Focus - light border” style to “Focus - slim border”
• [Labels & Tags] Slightly increased the size of the Default StatusLabel variant to match with the new icon variant
• [Labels & Tags] Slightly increased the size of the Tag to match with the new StatusLabel with icon variant

Documentation

Added

• Documentation for the PasswordInput
• New examples of StatusLabel with an icon to the StatusLabel documentation page
• Link to colour usage example images to the Colour documentation page

Changed

• Updated Storybook to version 6.2.9 to improve loading times

v1.0.0

[1.0.0] - May, 3, 2021

React Components

Breaking Changes

Removed

• [Dropdowns] Removed deprecated Dropdown component

Changed

• Replaced alert and helper text icons with fill icons in form components
• Replaced notifications' icons with fill icons

Fixed

• [TextInput] Fixed text input height inside flexbox
• [DateInput] Fixed ref property
• [DateInput] Added datepicker min-width

Design kit

Added

• [Logo] New favicon symbols with Light, Dark, Light transparent and Dark transparent variations
  • Favicon 16×16
  • Favicon 32×32
  • Favicon 48×48
  • MSTile 150×150
  • Apple touch icon 180×180
  • Android/Chrome favicon 192×192
  • Android/Chrome favicon 256×256
  • Safari pinned tab 260×260

Changed

• Updated all HDS libraries to Sketch version 71 (71.2)
• [Color] Cleaned up layer naming
• [Footer] Updated typography and icon library links
• [Form Components] Error text icon now uses a fill icon variant (alert-circle-fill)
• [Form Components] Success text icon now uses a fill icon variant (check-circle-fill)
• [Form Components] Updated Tag symbol library links
• [Form Components] Changed DateInput assistive text date format from DD.MM.YYYY to D.M.YYYY
• [Koros] Cleaned up layer naming and order
• [Labels and Tags] Updated typography and icon library links
• [Navigation] Mobile navigation symbols now use full-width button symbols. This fixes the issue where it was not possible to alter mobile navigation button labels without detaching the symbol.
• [Navigation] Updated icon library links
• [Modals and Notifications] Improved example artboard naming
• [Modals and Notifications] Notification title icon now uses fill icon variants
• [Modals and Notifications] Notification title icon now uses a corresponding status colour instead of black
• [Page templates] Updated mobile page template example with a correct content width
• [Page templates] Cleaned up artboard and layer naming
• [Placeholders and templates] Improved example artboard spacing
• [Placeholders and templates] Updated typography library links
• [Tabs] Renamed “HDS Tabs and Pages” to “HDS Tabs” to better match the library contents
• [Typography] Cleaned up layer naming and order

Fixed

• [Modals & Notifications] Clarified layer naming of Inline Notification variant symbols
• [Navigation] Incorrect icon library links
• [Navigation] Improved mobile navigation symbol scaling when instance size is increased horizontally

Removed

• [Accordion] Previously deprecated “List” symbols
• [Buttons] Previously deprecated Supplementary button symbols
• [Footer] Previously deprecated Footer symbols
• [Form Components] Previously deprecated multi-select dropdown symbols
• [Tabs] Paging symbols since they have not been implemented yet

Documentation

Added

• Tutorial for transitioning to the HDS 1.0 version from older versions

Changed

• Component Pre-release status is now known as Draft
• Slightly updated the Draft status description on the Component overview page
• Updated multiple component statuses for the production release
• Loading spinner from Draft to Stable
• Tabs from Draft to Stable
• ImageWithCard from Draft to Stable
• Section from Draft to Stable
• Removed beta mentions from the website
• Updated Roadmap and What’s new section
• Updated Form pattern example images to use the fill icon style in error and success messages
• Updated Dialog code examples to follow better practices

Fixed

• Typos on most documentation pages

Removed

• Previously deprecated Dropdown component from the Component overview page table
• Redundant rows of LockOpen icon from the Icons page table

v0.25.0

[0.25.0] - April 15, 2021

React Components

Breaking Changes

Removed

• [TextInput, TextArea, Number Input, Checkbox, RadioButton] Removed deprecated labelText property

Added

• Phone Input
• Dialog

Fixed

• [Select] Fixed content overlap with long labels

Documentation

Added

• Dialog documentation
• Phone number input documentation
• Links to supportive resources

Changed

• Updated Roadmap
• Clarified definition of stable

Design kit

Added

• [Buttons] Full-width button symbols. These are visually identical to default HDS Buttons but can be stretched in width (i.e. they use no smart layout which would resize the buttons).
• [Color] Added a shared fill style for a screen overlay
• [Form Components] Phone number input field symbols
• [Modals and Notifications] Dialog symbols with following variants: Confirm, Info, Danger and Scrollable

Removed

• [Form Components] Removed deprecated phone number input from Text field > Input

v0.24.0

[0.24.0] - March 29, 2021

Design kit

Added

• [Buttons] Loading button which can be shown during a loading action triggered by a button press
• [Form Components] Number input symbols
• [Icons] New set of icons, including customer-bot-negative, customer-bot-neutral, customer-bot-positive, document, headphones, save-diskette-fill, save-diskette, text-bold, text-italic and text-tool

Changed

• [Buttons] Changed the button state example artboard to use new Supplementary button symbols
• [Buttons] Increased Supplementary button inner spacing between icon and text label from 4px to 8px. Shorter spacing did not work well with icons with a large padding. This change is not fully implemented yet.
• [Form Components] Increased spacing between input field action buttons from 8px to 16px. This change was made to make it easier to tap actions on smaller screen sizes. This change is not fully implemented yet.
• [Icons] Divided icons into descriptive groups
• [Icons] Updated icon symbol export options

React Components

Added

• Number Input
• [Buttons] Loading Button
• [Icons] New icons:
  • customer-bot-negative
  • customer-bot-neutral
  • customer-bot-positive
  • document
  • headphones
  • save-diskette-fill
  • save-diskette
  • text-bold
  • text-italic
  • text-tool

Fixed

• Navigation Component logout problem in SSR

Core

Added

• Number Input
• [Buttons] Loading Button
• [Icons] New icons:
  • customer-bot-negative
  • customer-bot-neutral
  • customer-bot-positive
  • document
  • headphones
  • save-diskette-fill
  • save-diskette
  • text-bold
  • text-italic
  • text-tool

Documentation

Added

• Number input documentation
• [Buttons] Loading button documentation
• [Icons] Documentation for new icons
• More detailed documentation about body text usage on mobile screens

Fixed

• Broken Storybook links for TextInput and TextArea
• Broken link in TimeInput documentation
• Incorrect text colour in TextInput error state examples

v0.23.1

[0.23.1] - March 15, 2021

Design kit

Changed

• [Form Components] Combined Date and Time input under the same symbol group “Date and time”

Fixed

• [Form Components] Incorrect typography styles in the example artboards

Removed

• [Form Components] Time select symbols that were left out of the implementation. Use HDS Select instead.

Documentation

Changed

• Updated Roadmap

v0.23.0

[0.23.0] - March 3, 2021

Design kit

Added

• Time Input

React Components

Added

• New Time Input component

Fixed

• Navigation component server side rendering issue

Documentation

Added

• Time Input component documentation

Changed

• HDS roadmap updated