The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Release notes

npm package: @hashicorp/design-system-components npm version

3.0.2

Patch changes

explicitly added ember-element-helper as dependency for the components package

#1751


3.0.1

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@4.0.1

3.0.0

Major changes

Drop support for Node 14

#1634


Hds::Form::VisibilityToggle - Added component as a form base element

Hds::Form::TextInput::Field - Added Hds::Form::VisibilityToggle to password inputs (controlled via @hasVisibilityToggle - Notice that this is set to be visible by default now)

Hds::Form::MaskedInput - Refactored to use Hds::Form::VisibilityToggle

Hds::Form::MaskedInput - Renamed @isMasked to @isContentMasked

To migrate:

  • in Hds::Form::MaskedInput instances replace @isMasked arguments with @isContentMasked

#1634


Hds::Dropdown – Removed @listPosition left and right (use bottom-left and bottom-right, respectively).

To migrate:

  • in Hds::Dropdown instances:
  • replace @listPosition="left" with @listPosition="bottom-left"
  • replace @listPosition="right" with @listPosition="bottom-right"

#1634


SideNav - Renamed extraBefore/After generic containers to ExtraBefore/After (uppercase E).

To migrate:

  • rename all the extraBefore/After instances yielded within the <Hds::SideNav> component to ExtraBefore/After

#1634


Form::RadioCard - Remove the @layout property.

Form::RadioCard::Group - Repurposed the @layout property to either horizontal (default) or vertical

To migrate Form::RadioCard and Form::RadioCard::Group instances without encountering visual changes:

  • make sure all instances with @layout="fixed" have a @maxWidth defined, then remove the @layout="fixed" definition
  • remove all @layout="fluid" definitions

#1634


Minor changes

Dropdown::ListItem::CopyItem - Changed defaults for @color (now secondary) and @isTruncated (now true).

Consumers should review the defaults values for this (sub)component in their codebases, to make sure they match the intended visual designs.

#1634


Button, Interactive - Converted components to TypeScript.

#1634


Copy::Snippet - Fixed the way in which β€œwidth/full-width” is applied to the component + Internal update to the β€œtruncation” implementation.

  • the component is not full-width anymore by default (the width now fits the content); use @isFullWidth=true to have a full-width layout
  • the internal class name hds-copy-snippet__text--truncated has been changed to hds-copy-snippet--is-truncated (and moved)

Consumers should review the pages where this component is used to make sure its width matches the intended visual designs (in case, use the @isFullWidth argument to control its full-width). In case they're using the hds-copy-snippet__text--truncated class name, they should also update their code to adapt to the new implementation.

#1634


Removed ember-cli-clipboard as dependency and introduced a custom hds-clipboard modifier (using the web Clipboard API)

Copy::Button - Multiple updates:

  • replaced third-party clipboard modifier with hds-clipboard
  • removed @container argument (not needed anymore, it was used in the third party library as a hack to account for focus trapping and focus shifting)
  • added @onSuccess/onError callbacks

Copy::Snippet - Multiple updates:

  • replaced third-party clipboard modifier with hds-clipboard
  • added @onSuccess/onError callbacks
  • Dropdown::ListItem::CopyItem
  • the change to the underlying Copy::Snippet has fixed an issue with the focus being lost on copy (causing the dropdown to close on copy)

Consumers should remove the @container argument from all the instances of Copy::Button (not needed anymore) and double check that the Copy::Button/Snippet instances work exactly as before.

#1634


Patch changes

Copy::Snippet - Fixed background colors for different states according to Figma specs (main change is the default/base background is now transparent, not white).

#1634


Form::MaskedInput - Changed copy logic for CopyButton used inside the component.

#1634


Accordion - Replaced internal text styling (using Text component).

ApplicationState - Replaced internal text styling (using Text component).

Copy::Snippet - Replaced internal text styling (using Text component).

Dropdown - Replaced internal text styling (using Text component).

Form:** - Replaced internal text styling (using Text component).

Flyout - Replaced internal text styling (using Text component).

Modal - Replaced internal text styling (using Text component).

PageHeader - Replaced internal text styling (using Text component).

Pagination - Replaced internal text styling (using Text component).

Stepper - Replaced internal text styling (using Text component).

Tag - Replaced internal text styling (using Text component).

No impact is expected on the consumers' applications.

#1634


Button - Applied explicit text alignment to the text to fix alignment on "link" buttons.

#1634


πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@4.0.0

2.15.0

Minor changes

Button - updated horizontal padding of icon-only variant

Dropdown::ToggleIcon - updated sizing of the "small" variant to match the height of the "small" variant Button

#1690

Patch changes

Pagination - Removed handling of query parameters from onPageSizeChange function.

#1736

Notice: while technically this is a breaking change, we consider this a fast-follow fix for the previous release.

2.14.2

Patch changes

Pagination - updated the logic for β€œCompact” variant to expose @currentPageSize and handle controlled/uncontrolled changes

#1724


Tabs - replace assert with warn in setIndicator function

#1716

2.14.1

Patch changes

Tabs - Fixed issue with @isSelected dynamically changed within #each loops

#1709

2.14.0

Minor changes

Pagination::Compact - Added option to show "SizeSelector" element

#1700


Tabs - Refactored logic for Tabs component + Tab/Panel sub-components to support more complex use cases:

  • introduced @selectedTabIndex argument to control the "selected" tab from the consuming application, e.g. via query params (effort spearheaded by @MiniHeyd)
  • fixed issue with nested tabs not initializing the "selected" indicator correctly
  • fixed issue with dynamic tab content not updating the "selected" indicator correctly

#1688

2.13.0

Minor changes

AppFooter - Added new component

#1623


SideNav - add @isCollapsible (to control if users can collapse the sidenav on 'desktop' viewports) and @isMinimized (to control the default state on 'desktop' viewports) arguments

#1630

Patch changes

Tag - Updated padding for dismiss button for WCAG conformance

#1696


Link::Standalone – increase target size

#1678


πŸ”„ Updated dependencies:

  • @hashicorp/design-system-tokens@1.9.0

2.12.2

Patch changes

PowerSelect - fix style overrides when the list is positioned above

#1655


Text - Fixed issue with whitespace adding extra underline when used in links (eg. inside a Link::Inline)

#1652


πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@3.1.3

2.12.1

Patch changes

Pagination - Bugfix aria-label on the component

#1627


Dropdown - changed @height property to use max-height instead of a fixed height.

#1635

2.12.0

Minor changes

IconTile - updated component to include vault-secrets product option

#1640

Patch changes

Text - Removed leftover console.log from code

#1615


Refactored the layout of the Dropdown checkbox and radio inputs to make the gap between the inputs and the associated text, as well as the icon and count, clickable.

#1618


Hds::Link::Standalone - Changed font-weight from 500 to 400 to match font-weight of Hds::Button.

#1617


Stepper - removed some CSS declarations that were not used/applied

#1628


πŸ”„ Updated dependencies:

  • @hashicorp/design-system-tokens@1.8.0
  • @hashicorp/ember-flight-icons@3.1.2

2.11.0

Minor changes

Hds::Text - Added new Text component

#1490


Hds::Form::MaskedInput - Add hasCopyButton argument

#1587

Patch changes

Form::Indicator - Remove aria-hidden from the "optional" <span>

#1577 - Thanks @DingoEatingFuzz for the contribution! πŸ™


Removed ember-named-blocks-polyfill as all consumers of HDS are on Ember 3.25 or later now. This can be installed locally if it is still needed.

#1606


Alert, Toast: Fixed an issue with anchor tag color styles within Description that had been overriding Hds::Link color; changed the default color for HTML links within Description to "neutral" to better align with existing guidance for links in the actions and improve accessible contrast.

#1576


πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@3.1.1

2.10.0

Minor changes

Added new FileInput component

#1535

Patch changes

Remove unnecessary export of hds/copy/index.js

#1570


Hds::Tabs - Fix missing tab indicator when used in Modal or Flyout

#1575


Copy::Snippet - Added support for container and updated API docs

#1567


Hds::Tabs - Fixed tabs and panels misbehaving on route change

#1571


#1568

Copy::Button, Copy::Snippet - Updated error icon


Hds::SegmentedGroup - Prevent border-radius from interfering with underlying elements

#1555


Table - Resolved issue where ThSort was not supporting right-aligned text properly

#1565


πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@3.1.0

2.9.0

Minor changes

Added the Hds::CopyButton and Hds::CopySnippet components.

#1488

Patch changes

Adjusted closing brace on copywrite headers to avoid terminal noise

#1539


Hds::Modal - reduce test flakiness around closing Modal when using @ember/test-helpers

#1549 - Thanks @fivetanley for the contribution! πŸ™


Fix Embroider warnings caused by incorrect export of internal utility functions

#1530


Hds::Flyout - reduce test flakiness around closing Flyout when using @ember/test-helpers

#1552


Hds::Form::Field - Fix error message for unexpected @layout values

#1529


πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@3.0.9

2.8.1

Patch changes

  • #1516 f2192cad7 Thanks @didoo! - Hds::SideNav - Fixed issue with links still being interactive (even if visually hidden) when the navigation is "minimized"

  • #1518 5fd48e31e Thanks @didoo! - Hds::PageHeader - Fixed overflow of non-breaking text for title, subtitle and description elements

  • #1494 169a85b63 Thanks @natmegs! - Hds::Form::TextInput - Add support for datetime-local type

  • #1500 b6c2867a4 Thanks @didoo! - Hds::SideNav - updated layout styling for the SideNav::List::Title element

  • #1520 7f7ec22c3 Thanks @alex-ju! - Upgrade ember-style-modifier to 3.0.1

  • Updated dependencies [fd5953633]:

  • @hashicorp/design-system-tokens@1.7.0

  • @hashicorp/ember-flight-icons@3.0.8

2.8.0

Minor changes

  • #1492 a17e5b2ac Thanks @KristinLBradley! - Hds::Card - Updated default value of @overflow argument to "visible" to address an area of consumer confusion and better support the most common use cases.

    Technically, this is a breaking change as it will require consumers relying upon the previous hidden default value to now manually set the value. The result of not setting the a hidden value can cause square edges of some images to "stick out" and overlap the rounded corners of the Card itself. We considered this to be a fairly minor, low-impact issue however which would not affect functionality or usability.

  • #1452 c277d0366 Thanks @alex-ju! - Hds::Form::TextInput - Add loading state on "search" type

  • #1468 b0a766ccf Thanks @alex-ju! - Add Hds::Form::MaskedInput component

  • #1423 5ac340c8c Thanks @KristinLBradley! - Add Hds::Accordion component

Patch changes

  • #1466 cdda7ae8e Thanks @alex-ju! - Hds::PageHeader – Set position to 'relative'

  • #1470 0ea2ccfd0 Thanks @alex-ju! - Hds::Textarea – Fix border and text color for readonly state

  • #1456 b4237e73b Thanks @alex-ju! - Hds::Modal – Prevent onClose callback function invocation when isDismissDisabled is true

  • #1469 ef98ed4ed Thanks @didoo! - Set the font-weight of the button mixin explicitly to regular instead of relying on inheritance (components using this mixin: Button, Dropdown::ToggleButton and soon Accordion) - No visual difference expected

  • Updated dependencies [b2ec25b39]:

  • @hashicorp/design-system-tokens@1.6.0

  • @hashicorp/ember-flight-icons@3.0.7

2.7.1

Patch changes

  • #1438 ae852e7f8 Thanks @didoo! - TooltipButton - added text-align: inherit to the "button" element

  • #1444 5a4d036e1 Thanks @MelSumner! - Internal accessibility tweaks for dropdown component

  • #1395 e6e0c22c5 Thanks @alex-ju! - Upgraded Ember.js to latest stable release 4.12, including upgrades to:

  • ember-auto-import from 2.6.0 to 2.6.3

  • ember-cli-htmlbars from 6.1.0 to 6.2.0

    Upgraded the following dependencies:

  • ember-focus-trap from 1.0.1 to 1.0.2

  • ember-keyboard from 8.1.0 to 8.2.0

  • ember-truth-helpers from 3.0.0 to 3.1.1

  • sass from 1.58.3 to 1.62.1

    Shifted our supported version of Node.js from 12.* || 14.* || >= 16 to 14.* || 16.* || >= 18

  • #1425 921aa03b9 Thanks @didoo! - Table - Set min-height instead of height for the table head cells + Updated the cells' internal padding to align with the design specs in Figma

  • #1433 9aa5291d1 Thanks @didoo! - - Updated CSS code of components to use flex gap

  • Fixed an issue with Hds::Sidenav::Link that was generating an empty node

    This will lead to a minimal visual impact on some edge cases of Alert/Toast (multiple description items) and SideNav (text + generic content)

  • #1426 1f8886a2d Thanks @MelSumner! - Style tweaks to standalone link

  • #1434 eadefc4bd Thanks @alex-ju! - Fix scroll management on Hds::Modal and Hds::Flyout resulting in stray style attribute on <body> element

  • Updated dependencies [e6e0c22c5]:

  • @hashicorp/ember-flight-icons@3.0.6

2.7.0

Minor changes

Patch changes

  • #1415 555c86d3f Thanks @didoo! - Hds::Table - Changed the way in which the column @width defined by the user is applied

  • Updated dependencies []:

  • @hashicorp/ember-flight-icons@3.0.5

2.6.0

Minor changes

Patch changes

  • Updated dependencies []:
  • @hashicorp/ember-flight-icons@3.0.4

2.5.0

Minor changes


Read the full changelog

npm package: @hashicorp/design-system-tokens npm version

1.9.0

Minor changes

Added design tokens for SideNav with @isCollapsible (to control if users can collapse the sidenav on 'desktop' viewports) and @isMinimized (to control the default state on 'desktop' viewports) arguments

#1630

1.8.0

Minor changes

Added color tokens for β€œVault Secrets” product

#1640

1.7.0

Minor changes

Added JSON output format for marketing target (and in the process refactored internal logic for tokens generation)

#1513 - Thanks @dstaley for the contribution! πŸ™

1.6.0

Minor changes

Added design token for loading state icon on search input

#1452

1.5.0

Minor changes

  • Added new TooltipButton component and hds-tooltip modifier
  • Added design tokens for Tooltip

#1283

1.4.2

Patch changes

Added design tokens for SideNav component

#1313

1.4.1

Patch changes

  • Scoped group layout styles to nested child components.
  • Fixed bug with --token-pagination-child-spacing-vertical value so that it adds "px" unit.

#1204

1.4.0

Minor changes

Added design tokens for Pagination component

#661

1.3.1

Patch changes

Updated design system name to "Helios"

#1036

1.3.0

Minor changes

Added design tokens for indeterminate Checkbox

#740

1.2.0

Minor changes

Patch changes

1.1.0

Minor changes

1.0.1

Patch changes

  • #555 0b245333 Thanks @didoo! - Added design tokens for code-200 and code-300 typographic styles

1.0.0

Major changes

This release signifies the first major release of the HashiCorp Design System. Moving forward we expect to respect SemVer as we make additional changes to the design system.

Note: Even though this is a major version bump, there should not be any breaking changes from the last minor releases.

Minor changes

  • added specific design tokens for the form controls components

0.8.1

Patch changes

0.8.0

Minor changes

  • #136 c17f142c Thanks @didoo! - Updated the font-stack design tokens in β€œtypography”

  • removed SF Pro Display/Text in Display/Text (we can rely on -apple-system + BlinkMacSystemFont)

  • replaced Segoe UI Display/Text with Segoe UI in Display/Text

  • added Helvetica, Arial to the sans block in Display/Text

  • added explicit emoji support for Display/Text

  • replaced SF Mono with ui-monospace in Code

  • added Menlo to Code

0.7.0

Minor changes

  • #98 411cd9b9 Thanks @didoo! - refactored β€œfocus-ring” tokens and CSS helpers to support both β€œaction” and β€œcriticalβ€œ colors

0.6.1

Patch changes

  • #83 df267ec6 Thanks @didoo! - Added β€œforeground-action-visited-hover” color token to DevDot

0.6.0

Minor changes

πŸ’₯ Breaking change

Changes the output path for tokens to include `dist/ in the path

Before

/products/css/tokens.css

After

/dist/products/css/tokens.css

0.5.2

Patch changes


Read the full changelog

npm package: @hashicorp/flight-icons npm version

2.20.0

Minor changes

Added "static" version of the animated icons:

  • loading-static
  • running-static

Added new set of icons for Google services:

  • google-docs
  • google-forms
  • google-slides
  • google-sheets
  • google-drive

#1657

2.19.0

Minor changes

Added Vault Secrets icon.

#1638

2.18.0

Minor changes

Added Vercel and Jira icons

#1585


Added twitter-x icon, and older twitter icon. Also the aws-cdk and jfrog icons.

#1610

2.17.0

Minor changes

Added new clipboard-x icon

#1532

2.16.0

Minor changes

Added elastic-observability and new-relic icons

#1515

2.15.0

Minor changes

Added Venafi service icon

#1487

2.14.0

Minor changes

Added robot icon (for Service Principals)

#1428

2.13.1

Patch changes

Fix color for connection-gateway icon

#1420

2.13.0

Minor changes

Added ampersand icon

#1412

2.12.0

Minor changes

Remove unnused icons as CSS props

#727

Notice: as an exception, we are releasing this change as minor instead of major for the reason that no one is actually using these files.


Added figma and loom icons

#689

2.11.1

Patch changes

2.11.0

Minor changes

2.10.0

Minor changes

2.9.0

Minor changes

  • #524 f2b3398e Thanks @hashibot-hds!
  • Add service icons for azure-aks
  • Update css exports to include recently added service icons

2.8.0

Minor changes

  • #481 c8221e26 Thanks @hashibot-hds! - Add new Service icons to Flight

  • aws-cloudwatch

  • aws-cloudwatch-color

  • aws-s3

  • aws-s3-color

  • azure-aks

  • azure-aks-color

  • azure-blob-storage

  • azure-blob-storage-color

  • azure-vms

  • azure-vms-color

  • bridgecrew

  • bridgecrew-color

  • cisco

  • cisco-color

  • datadog

  • datadog-color

  • digital-ocean

  • digital-ocean-color

  • grafana

  • grafana-color

  • helm

  • helm-color

  • infracost

  • infracost-color

  • lightlytics

  • lightlytics-color

  • linode

  • linode-color

  • microsoft-teams

  • microsoft-teams-color

  • saml

  • saml-color

  • snyk

  • snyk-color

  • splunk

  • splunk-color

  • vantage

  • vantage-color

2.7.0

Minor changes

  • #468 c2f2e4ce Thanks @didoo! - Updated Flight icons pipeline to distribute assets as CSS props (mainly for Consul)

2.6.0

Minor changes

2.5.0

Minor changes

2.4.0

Minor changes

2.3.1

Patch changes


Read the full changelog

npm package: @hashicorp/ember-flight-icons npm version

4.0.1

Patch changes

Added missing dependency on ember-get-config

#1747


4.0.0

Major changes

Drop support for Node 14

#1634


3.1.3

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.20.0

3.1.2

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.19.0

3.1.1

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.18.0

3.1.0

Minor changes

Added opt in flag to allow consumers to move sprite loading out of index.html

#1543

3.0.9

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.17.0

3.0.8

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.16.0

3.0.7

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.15.0

3.0.6

Patch changes

Upgraded Ember.js to latest stable release 4.12, including upgrades to:

  • ember-auto-import from 2.6.0 to 2.6.3
  • ember-cli-htmlbars from 6.1.0 to 6.2.0

Upgraded the following dependencies:

  • ember-focus-trap from 1.0.1 to 1.0.2
  • ember-keyboard" from 8.1.0 to 8.2.0
  • ember-truth-helpers from 3.0.0 to 3.1.1
  • sass from 1.58.3 to 1.62.1

Shifted our supported version of Node.js from 12.* || 14.* || >= 16 to 14.* || 16.* || >= 18

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.14.0

#1395

3.0.5

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.13.1

3.0.4

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.13.0

3.0.3

Patch changes

Fix error message for mismatched icon @name

#1375 2c7d70868

3.0.2

Patch changes

3.0.1

Patch changes

3.0.0

Major changes

  • #580 55f38cb3 Thanks @didoo! - updated the Ember FlightIcon component to throw an error if a non-existing icon name is used

Patch changes

2.0.12

Patch changes

  • Updated dependencies [4e557797]:
  • @hashicorp/flight-icons@2.10.0

2.0.11

Patch changes

  • Updated dependencies [f2b3398e]:
  • @hashicorp/flight-icons@2.9.0

2.0.10

Patch changes

  • Updated dependencies [c8221e26]:
  • @hashicorp/flight-icons@2.8.0

2.0.9

Patch changes

  • Updated dependencies [c2f2e4ce]:
  • @hashicorp/flight-icons@2.7.0

Read the full changelog

Components library

Figma library: HDS Product - Components

September 15th, 2023

IconTile and IconTile-Logo - Added a new product variant for Vault Secrets.

August 17th, 2023

SideNav - Changed the icon from User to Help in the first dropdown at the top of the SideNav.

July 31st, 2023

Field/Date, Field/Time, Field/Datetime - Fixed the default width of the components to match the browser default.

July 13th, 2023

Added new components:

  • Accordion
  • MaskedInput

July 12th, 2023

Added a β€œForm Primitives” page to house the Fieldset component.

June 9th, 2023

Reveal - Added the component.

June 1st, 2023

Breaking change

Dropdown - Fixed a spacing issue between the label and chevron in the ToggleButton.

May 31st, 2023

ApplicationState - Updated the text style to reduce the prominence.

May 11th, 2023

Added new utility components:

  • Cursor
  • Scrollbar

May 10th, 2023

SegmentedGroup - Refactored the component, including:

  • Fixing a bug that created an β€œinception” style loop of the inheritance between the published component library and the local components.
  • Adding more straightforward support for the focus state of the Select component when nested within a SegmentedGroup.

Select - Updated the focus state to bring consistency in how the Select and the other form controls account for this interactive state.


Read the full changelog

Foundations library

Figma library: HDS Product - Foundations


Read the full changelog