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.6.0

Minor changes

Since this is an update brand colors and product icons, we consider this a minor version release

πŸ”„ Updated dependencies:

  • @hashicorp/design-system-tokens@1.11.0
  • @hashicorp/ember-flight-icons@4.1.0

3.5.0

Minor changes

IconTile - updated component adding support for vault-radar product

Patch changes

SideNav::List::Title, SideNav::List::BackLink, SideNav::List::Link: fixed issue with long text strings without spaces not wrapping

Added hds- prefix to Sass variables for component styles (where missing).

Tabs - removed @cached decorator and the associated ember-cached-decorator-polyfill

CodeBlock - Fixed the default token color in the syntax highlighting theme.

πŸ”„ Updated dependencies:

  • @hashicorp/design-system-tokens@1.10.0
  • @hashicorp/ember-flight-icons@4.0.6

3.4.1

Patch changes

Modal - Removed close event listener on destroy Flyout - Removed close event listener on destroy

CodeBlock - Fixed issues with dynamic content, compile warning, and line number alignment

SegmentedGroup - Fixed issue with border-radius of single child element being overridden

3.4.0

Minor changes

Button - Added @isInline argument

Table - Added support for baseline vertical alignment

Patch changes

AppFooter - Changed visual alignment from right-aligned to centered.

Tooltip - Fixed issue with text alignment, which was inherited from the parent container (now it's always left aligned).

Tabs - Fixed subcomponents' backing-class names

AppFooter - Updated default accessibility URL to https://hashicorp.com/accessibility

Form::Fieldset as consumed by Form::Checkbox::Group, Form::Radio::Group, Form::RadioCard::Group, and Form::Toggle::Group - Changed spacing between legend and content from 4px to 8px

πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@4.0.5

3.3.0

Minor changes

Form::CharacterCount - Added new component Form::Field - Added CharacterCount contextual component Form::MaskedInput::Field - Added CharacterCount contextual component Form::TextInput::Field - Added CharacterCount contextual component Form::Textarea::Field - Added CharacterCount contextual component

Patch changes

Button - Updated DOM structure to contain only span elements

Dropdown - Updated button elements DOM structure to contain only span elements

Link::Standalone - Updated DOM structure to contain only span elements

3.2.0

Minor changes

CodeBlock - Added language support for Ruby syntax

Table - Updated @columns object to support isVisuallyHidden argument

  • Table::Th - Updated to support isVisuallyHidden argument

Patch changes

SideNav - Reduced the width of SideNav::ToggleButton

πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@4.0.4

3.1.2

Patch changes

AppFooter – Fixed predefined statuses by replacing critical with outage and prevented statusIconColor from being overridden by status

SideNav - Fixed visible scrollbar in collapsed SideNav when scroll bar is set to be always visible

CodeBlock - Fixed @hasLineWrapping style to make long strings wrap when they overflow the container

3.1.1

Patch changes

Added @ember/string as a direct dependency

πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@4.0.3

3.1.0

Minor changes

CodeBlock - Added new component

Patch changes

Upgraded the following dependencies:

  • @ember/test-waiters from 3.0.2 to 3.1.0
  • ember-cli-htmlbars from 6.2.0 to 6.3.0
  • ember-focus-trap from 1.0.2 to 1.1.0
  • ember-keyboard from 8.2.0 to 8.2.1
  • sass from 1.62.1 to 1.69.5

Breadcrumb - Added support for external links

Upgraded the following dependencies:

  • ember-cached-decorator-polyfill from 0.1.4 to 1.0.2
  • ember-cli-babel from 7.26.11 to 8.2.0
  • ember-cli-sass from 10.0.1 to 11.0.1
  • ember-composable-helpers from 4.5.0 to 5.0.0

Button - Fixed HdsInteractiveSignature type import

πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@4.0.2

3.0.2

Patch changes

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

3.0.1

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@4.0.1

3.0.0

Major changes

Dropped support for Node 14

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

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

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

Form::MaskedInput - Renamed @isMasked to @isContentMasked

To migrate:

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

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

To migrate:

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

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

To migrate:

  • rename all the extraBefore/After instances yielded within the SideNav component to ExtraBefore/After

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

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.

Button, Interactive - Converted components to TypeScript.

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.

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.

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).

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

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.

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

πŸ”„ 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

Patch changes

Pagination - Removed handling of query parameters from onPageSizeChange function.

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

Tabs - replace assert with warn in setIndicator function

2.14.1

Patch changes

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

2.14.0

Minor changes

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

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

2.13.0

Minor changes

AppFooter - Added new component

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

Patch changes

Tag - Updated padding for dismiss button for WCAG conformance

Link::Standalone – increase target size

πŸ”„ Updated dependencies:

  • @hashicorp/design-system-tokens@1.9.0

2.12.2

Patch changes

PowerSelect - fix style overrides when the list is positioned above

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

πŸ”„ Updated dependencies:

  • @hashicorp/ember-flight-icons@3.1.3

2.12.1

Patch changes

Pagination - Bugfix aria-label on the component

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

2.12.0

Minor changes

IconTile - updated component to include vault-secrets product option

Patch changes

Text - Removed leftover console.log from code

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.

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

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

πŸ”„ Updated dependencies:

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

Read the full changelog

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

1.11.0

Minor changes

Updated vault, vault-secrets, and vault-radar brand color values

Added design token for terraform-brand-on-dark color

1.10.0

Minor changes

Added color tokens for β€œVault Radar” product

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

1.8.0

Minor changes

Added color tokens for β€œVault Secrets” product

1.7.0

Minor changes

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

1.6.0

Minor changes

Added design token for loading state icon on search input

1.5.0

Minor changes

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

1.4.2

Patch changes

Added design tokens for SideNav component

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.

1.4.0

Minor changes

Added design tokens for Pagination component

1.3.1

Patch changes

Updated design system name to "Helios"

1.3.0

Minor changes

Added design tokens for indeterminate Checkbox

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

Read the full changelog

npm package: @hashicorp/flight-icons npm version

3.0.0

Major changes

vagrant, vault-radar, and vault-secrets icons have been updated. Also added boxed versions of all product logos.

2.25.0

Minor changes

vault-radar icons added. vault-secrets icons updated per Brand guidance.

2.24.0

Minor changes

rabbitmq, openid, jwt, meetup, and transform-data icons added.

2.23.0

Minor changes

accessibility, channel, minus-circle-fill, plus-circle-fill icons added. Fixed the size and position of the plus-circle icon.

2.22.0

Minor changes

Added IconName type to iconNames export

2.21.0

Minor changes

Added static SVG sprite sheet file

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

2.19.0

Minor changes

Added Vault Secrets icon.

2.18.0

Minor changes

Added Vercel and Jira icons

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

2.17.0

Minor changes

Added new clipboard-x icon

2.16.0

Minor changes

Added elastic-observability and new-relic icons

2.15.0

Minor changes

Added Venafi service icon

2.14.0

Minor changes

Added robot icon (for Service Principals)

2.13.1

Patch changes

Fix color for connection-gateway icon

2.13.0

Minor changes

Added ampersand icon

2.12.0

Minor changes

Remove unnused icons as CSS props

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

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

Read the full changelog

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

4.1.0

Minor changes

Since this is an update brand colors and product icons, we consider this a minor version release

Improved resilience of SVG sprite loading script

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@3.0.0

4.0.6

Patch changes

remove unused contextRootURL function

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.25.0

4.0.5

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.24.0

4.0.4

Patch changes

When lazyEmbed is true, use dynamic import() to bundle the sprite separately

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.23.0

4.0.3

Patch changes

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.22.0

4.0.2

Patch changes

Upgraded the following dependencies:

  • ember-cli-babel from 7.26.11 to 8.2.0

Upgraded the following dependencies:

  • ember-cli-htmlbars from 6.2.0 to 6.3.0

πŸ”„ Updated dependencies:

  • @hashicorp/flight-icons@2.21.0

4.0.1

Patch changes

Added missing dependency on ember-get-config

4.0.0

Major changes

Drop support for Node 14

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

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

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

3.0.2

Patch changes


Read the full changelog

Components library

Figma library: HDS Product - Components

November 6th, 2023

CodeBlock - Added new component.

November 3rd, 2023

Breadcrumb - Updated the number of breadcrumb / _items to the component.

October 23rd, 2023

Button - Updated icon only button variants to be square to match the ToggleIcon.

Dropdown / ToggleIcon - Fixed the small variant so that it’s the correct size (28px height) to match the other small Buttons and ToggleButton.

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.


Read the full changelog

Foundations library

Figma library: HDS Product - Foundations

November 2nd, 2023

Elevation / Mid - Fixed style not being correctly published to consuming libraries.

October 31st, 2023

Components / Code Block / Code / 200 - Added component-specific text style for the CodeBlock.

October 20th, 2023

Components / Code Block / Syntax - Added syntax highlighting styles used by the CodeBlock component.


Read the full changelog