Release notes

npm package: @hashicorp/design-system-components

4.15.0

4.15.0 documentation

Minor changes

Time - Added Time component, Time service, and related libraries (luxon 2.x or 3.x and ember-concurrency)

#2515

Table - Exposed the index of the @each loop over the @model as rowIndex

#2554

Patch changes

Dropdown - Fixed an issue with the ToggleIcon to make the focus ring visible on mouse click

#2574

PageHeader - Fixed issue with extra space below title when no metadata is present

#2581

Alert - Removed default color applied to the hds-alert__text container (text color is applied via @color argument)

#2598

Dropdown - Fixed ResizeObserver-related errors in tests RichTooltip - Fixed ResizeObserver-related errors in tests

Upgraded @floating-ui/dom to 1.6.12

#2550

Fixed deprecated Sass syntax (map-get replaced with map.get and @import with @use)

#2594

IconTile - Updated visual design of IconTile to make it distinguishable from secondary IconButton.

#2555

Aligned private properties of the HDS modifiers to follow a standardized notation

hds-anchored-position
hds-register-event
hds-tooltip

#2583

Aligned private class properties to follow a standardized notation

Accordion
Alert
AppHeader
AppSideNav
CodeBlock
Copy::Button
Copy::Snippet
DisclosurePrimitive
Dropdown
Flyout
Form::SuperSelect
Form::TextInput
Icon
Modal
Pagination::Compact
Pagination::Numbered
PopoverPrimitive
Reveal
Table
Tabs

#2562

🔄 Updated dependencies:

@hashicorp/design-system-tokens@2.2.2
@hashicorp/flight-icons@3.8.0

4.14.0

4.14.0 documentation

Minor changes

Dropdown - Added @matchToggleWidth argument

#2530

hds-clipboard - Added clipboard-polyfill to support product usage in non-secure environments; this impacts Copy::Button, Copy::Snippet, CodeBlock, and MaskedInput

#2525

Patch changes

SideNav - Made a11y related improvements including:

Changed List::Title to h3 & added visually hidden h2 to AppSideNav
Replaced aria-label for ToggleButton with aria-labelledby and aria-expanded

#2536

Fixed instances where arguments are passed into tracked properties at declaration:

MaskedInput
TextInput
Pagination::Compact
Pagination::Numbered
SideNav
Table
Table::ThSelectable
Tabs

#2488

SideNav - Fixed bug with hidden panels sometimes causing unnecessary overflow scrolling

#2535

Dropdown - Fixed the height of the chevron in ToggleButton

#2522

4.13.1

Patch changes

Hds::Flyout

Fixed error in Description and Body subcomponents, caused by not passing the args argument from the constructor to super

Hds::Modal

Fixed error in Body subcomponent, caused by not passing the args argument from the constructor to super

#2511

Export TypeScript signatures for all components and modifiers

#2499 - Thanks @aklkv for the contribution! 🙏

Alert - Removed role="alert" and aria-live="polite" attributes from Alerts with color set to "neutral" or "highlight"

#2500

4.13.0

4.13.0 documentation

Minor changes

Modal - Added @returnFocusTo argument to control where the browser focus is returned once the modal is closed

Flyout - Added @returnFocusTo argument to control where the browser focus is returned once the flyout is closed

#2497

CodeBlock - Added @lineNumberStart option to set custom starting number for line numbering

#2467

SuperSelect::Multiple - Added @resultCountMessage argument to enable override

#2502

Patch changes

Dropdown

Fixed content being preserved in the DOM when closed
Removed the @isOpen yielded argument
Added @preserveContentInDom to optionally control rendering of the content

#2490

Modal - Fixed isDismissDisabled functionality Flyout - Removed isDismissDisabled from signature (not an actual argument)

#2485

SuperSelect - Update the the default state of selected list items to Foreground / Primary to match other list items and the Dropdown.

#2479

SuperSelect::Multiple - Fixed placeholder style and layout

#2473

Dropdown - Update the color of the text and icons in the selected state checkmark list item to match the styling of the ListItems (Radio and Checkbox).

#2464

CodeBlock - Decoupled the display of line numbers from highlightLines

#2474

Dropdown - Fixed dropdown content not being preserved when interacted with

#2506

Upgraded ember-style-modifier to 4.4.0

#2482

🔄 Updated dependencies:

@hashicorp/flight-icons@3.7.0

4.12.0

4.12.0 documentation

Minor changes

Dropdown - Made the isOpen state available in the yielded block

#2443

Patch changes

IconTile - Fixed @color argument type signature

#2452

Interactive - Aligned types with LinkTo

#2455

DialogPrimitive - Fixed issue with box-sizing inheritance

Modal/Flyout - Updated box-sizing inheritance via DialogPrimitive fix

#2442

Upgraded eslint-plugin-ember to 12.2.0

AppFooter, AppFrame, SideNav - refactored subcomponents to use TemplateOnlyComponent instead of empty classes.

#2427

RadioCard

Fixed selected border colors to match Figma and interactive states.
Updated icon, label, and description colors to use disabled-foreground when the RadioCard is disabled.

#2445

MaskedInput - Changed textarea scrollbar-width to "thin" to reduce overlap with toggle button.

CodeBlock - Changed textarea scrollbar-width to "thin" to reduce overlap with copy button.

#2444

Removed ember-keyboard dependency

#2460

Tabs - Fixed signatures for subcomponents

#2448

Table - Fixed signatures for subcomponents

#2449

BadgeCount - updated the type of the text argument to allow numbers

TooltipButton - made the default value for the placement argument 'top' and fixed the type definition

TooltipButton - made the extraTippyOptions argument optional and allowed to be a partial object

#2447

DialogPrimitive - added a guard so the yielded close function is always defined

#2453

Hds::SideNav - Fixed a couple of bugs where SideNav would remain inert when no longer minimized (or would not be inert when minimized)

#2431 - Thanks @DingoEatingFuzz for the contribution! 🙏

Button - aligned type names to convention

#2457

Fixed issue with icon sprite not initiated

#2433 - Thanks @aklkv for the contribution! 🙏

4.11.0

4.11.0 documentation

Minor changes

Hds::Table

Added @selectableColumnKey argument which enables sorting by row selection state and specifies the corresponding selection state key.

Hds::Table::Tr

Added @selectableColumnKey argument which enables sorting by row selection state and specifies the corresponding selection state key.
Added @sortBySelectedOrder argument which determines the state of the sort button in the selected item column.
Added @onClickSortBySelected argument which is the callback for the sort button in the selected item column.

Hds::Table::ThSelectable

Added @onClickSortBySelected argument which is the callback for the sort button in the selected item column.
Added @sortBySelectedOrder argument which determines the state of the sort button in the selected item column.

#2387

Patch changes

SideNav: remove usage of Ember.testing because it is deprecated.

#2403

CopyButton - Updated icon colors to match interactive states of the component.

CopySnippet - Prevent the color from adhering to interactive states when status is success or error.

Stepper - Updated to use semantic token over palette token in Stepper::Indicator::Step.

#2419

Dropdown, RadioCard, SuperSelect, Stepper, Table - Fixed optional arguments in signatures

#2421

Dropdown::Toggle::Chevron - fix subcomponent signature

hds-clipboard modifier - extend error when copy action fails

#2418

Hds::Pagination::Compact & Hds::Pagination::Numbered

Added assertion and more strict typing to ensure that a routing argument (@model, @models, or @route) are present when using @onPageChange to control routing.

#2400

🔄 Updated dependencies:

@hashicorp/flight-icons@3.6.0

4.10.0

4.10.0 documentation

Minor changes

SuperSelect - Converted components to TypeScript

#2356

SideNav - Added a default value of "#hds-main" for a11yRefocusSkipTo AppHeader - Changed default value of a11yRefocusSkipTo from "#main" to "#hds-main" AppFrame::Main - Added id with default value of "hds-main" which a11yRefocusSkipTo points to

#2399

simplify components reexports and add types reexports

update HdsCard reexport to reflect correct component name HdsCardContainer

#2320 - Thanks @aklkv for the contribution! 🙏

AppHeader:

Hide the closed menu content in mobile view using CSS instead of conditionally rendering/not rendering the menu content.
Add NavigationNarrator with associated arguments to provide a "skip link".

#2306

Accordion: Added @titleTag argument

Alert: Added @tag argument to [A].Title

ApplicationState: Updated the @titleTag argument to only accept "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

CodeBlock: Added @tag argument to [CB].Title

DialogPrimitive: Added @titleTag argument to DialogPrimitive::Header

#2353

Hds::Pagination - Converted component to Typescript

#2174

Hds::SideNav::Header::IconButton - Deprecate the component. Use the Hds::Button component with isIconOnly set to true as a replacement.

#2354

Dropdown::ListItem::Interactive

Adds a yielded block.
Yields the Hds::Badge component.
Deprecates the @text argument.

New codemod: v4/dropdown-list-item-interactive

Converts Dropdown::ListItem::Interactive @text arguments to content within a yielded block.

#2347

Flyout: Changed the HTML element wrapping the tagline and title from a <div> to a <h1>

Modal: Changed the HTML element wrapping the tagline and title from a <div> to a <h1>

#2358

Dropdown - added @enableCollisionDetection and @isOpen arguments

Dropdown, Breadcrumb::Truncation - replaced MenuPrimitive with PopoverPrimitive

MenuPrimitive - marked as deprecated and will be removed in the next major version

#2309

AppFrame:

Modified sticky/fixed position to turn off when viewport height is under 480px in height
Refactored styles to make AppFrame responsible for sticky/fixed layout of SideNav and AppHeader

AppHeader:

Styled inoperable actions as disabled (which occurs when the SideNav is expanded in mobile view)

SideNav:

Removed the withAppHeader option as it is no longer needed.

#2299

Table - Converted component and sub-components to TypeScript

#2297

Patch changes

DismissButton, RadioCard::Group, RichTooltip::Toggle - Type safety fixes

#2401

SideNav & AppHeader - Fixed styling issue to prevent Button and Dropdown nested within another Dropdown from inheriting dark theme.

#2359

AppHeader - Fixed issue with mobile menu to prevent tabbing to hidden content and hiding it from assistive technology when closed.

#2351

Breadcrumb: fix background hover color for Breadcrumb::Truncation

#2397

Update ember-a11y-refocus to 4.1.3

#2352

Accordion: changed the default name of the Accordion item toggles. Now, they are labelled by the content in the Accordion title.

#2383

BadgeCount: updated the color tokens to use palette tokens.

#2392

Badge: update the color tokens to use palette tokens.

#2393

Stepper::Indicator::Task: Updated palette tokens to use semantic tokens.

#2390

Migrated all internal instances of FlightIcon to Hds::Icon

#2339

🔄 Updated dependencies:

@hashicorp/design-system-tokens@2.2.1

4.9.0

4.9.0 documentation

Minor changes

Icon - Added component:

Hds::Icon is meant to replace usage of the FlightIcon component from ember-flight-icons.

Displays block by default. (FlightIcon displays inline-block by default)
Exposes a set of predefined "foreground" colors via the @color argument

#2207

CodeBlock: Converted component to TypeScript

#2313

TooltipButton: Converted component to TypeScript

#2317

4.8.0

4.8.0 documentation

Minor changes

AppHeader - Added new component.

SideNav - Added new withAppHeader option.

#2161

Dropdown - Converted component to TypeScript

MenuPrimitive - Converted component to TypeScript

TooltipModifier - Converted modifier to TypeScript

#2272

Breadcrumb - Converted component to TypeScript

#2304

ApplicationState:

Spacing and alignment updates
New @align (left (default), center) argument for aligning content
Added new yielded Media child component

ApplicationState::Header:

The header now supports an optional @titleTag argument that can override the default title element (div)

ApplicationState::Footer:

The footer now yields Button and Dropdown components as well as LinkStandalone
The visual separator has been removed to modernize the component’s visual look

#2274

SegmentedGroup - Converted component to TypeScript

#2094

Patch changes

Add explicit ember-get-config dependency for use in the icon sprite initializer

#2283

🔄 Updated dependencies:

@hashicorp/design-system-tokens@2.2.0

4.7.0

4.7.0 documentation

Minor changes

FileInput, MaskedInput, Select, TextInput, Textarea - Converted to TypeScript

#2244

Loads the hds-icon sprite in the components package, and ensures it is only loaded once.

#2198

Form::TextInput - added support for "month", "week", and "tel" input types

#2251

DialogPrimitive - Added set of utility "dialog" sub-components to act as primitives for Modal and Flyout (and to be used as standalone subcomponents if needed)

Modal - Replaced internal subcomponents to use the DialogPrimitive components.

Flyout - Replaced internal subcomponents to use the DialogPrimitive components.

#2211

Modal: Converted component to TypeScript

#2258

Converted form primitives to TypeScript

#2217

Checkbox, Radio, RadioCard, Toggle - Converted components to TypeScript

#2240

Flyout: Converted component to TypeScript

#2264

DialogPrimitive - Converted component to TypeScript

#2249

Patch changes

Badge: updated @text argument type to include numbers.

#2270

🔄 Updated dependencies:

@hashicorp/flight-icons@3.5.0
@hashicorp/ember-flight-icons@5.1.3

4.6.0

4.6.0 documentation

Minor changes

PopoverPrimitive - Converted to TypeScript

#2105

hds-register-event (internal modifier) - Converted to TypeScript

#2103

hds-anchored-position (internal modifier) - Converted to TypeScript

#2104

RichTooltip - Converted to TypeScript

#2106

Accordion - added @forceState, @onClickToggle arguments Accordion - added close function to <:content>

#2147

Accordion - added @size, @type, and @isStatic arguments. While previously equivalent to large the default Accordion size is now medium; use @size="large" to maintain the original appearance.

#2156

Patch changes

Removed popover-polyfill dependency and instantiating code

#2214

4.5.3

Patch changes

🔄 Updated dependencies:

@hashicorp/ember-flight-icons@5.1.2

4.5.2

🚨 Caution: This version has been deprecated 🚨

Patch changes

🔄 Updated dependencies:

@hashicorp/ember-flight-icons@5.1.1

4.5.1

🚨 Caution: This version has been deprecated 🚨

Patch changes

Fixed syncing of <F.Error /> ids to the aria-describedby attribute

#2177 - Thanks @fivetanley for the contribution! 🙏

4.5.0

🚨 Caution: This version has been deprecated 🚨

4.5.0 documentation

Minor changes

SideNav - Adds option to exclude query params from route transition/focus management

#2158

Tabs - Converted component to TypeScript

#2168

ApplicationState - Converted component to TypeScript

#2155

PageHeader - Converted component to TypeScript

#2160

SideNav - Converted component to TypeScript

#2102

Patch changes

Alert - Fixed typo in HdsAlertTypes

#2154

Dropdown::Toggle::Icon - Fixed inconsistencies with Button including:

Added missing text color
Reduced icon sizes

#2178

🔄 Updated dependencies:

@hashicorp/ember-flight-icons@5.1.0

4.4.1

Patch changes

🔄 Updated dependencies:

@hashicorp/ember-flight-icons@5.0.3

4.4.0

4.4.0 documentation

Minor changes

Added re-export entries for TypeScript components

#2129 - Thanks @aklkv for the contribution! 🙏

CopyButton - Converted component to TypeScript

#2100

CopySnippet - Converted component to TypeScript

#2100

hds-clipboard - Converted modifier to TypeScript

#2120

Patch changes

Template Registry - Removed redundant entries

#2127

Fix missing TypeScript declaration

#2122 - Thanks @aklkv for the contribution! 🙏

Hds::BadgeCount - Fixed typo in template registry declaration

#2124

4.3.0

4.3.0 documentation

Minor changes

Added hds-register-event modifier (for internal use)

#2017

Published type declarations

#2004 - Thanks @natmegs for the contribution! 🙏

Tag - Converted component to TypeScript

#2089

IconTile - Converted component to TypeScript

#2033

SuperSelect - added components for single and multiple selection based on PowerSelect

#2022

BadgeCount - Converted component to TypeScript

#2088

DisclosurePrimitive - Converted component to TypeScript

#2025 - Thanks @WenInCode for the contribution! 🙏

Added hds-anchored-position modifier (for internal use)

#2020

AppFooter - Converted component to TypeScript

#2096

Stepper::Step::Indicator - Converted to TypeScript Stepper::Task::Indicator - Converted to TypeScript

#2115

Badge - Converted component to TypeScript

#1991 - Thanks @chris-hut for the contribution! 🙏

Accordion - Converted component to TypeScript

#2101

Dropdown - Added support for trailing icon in ListItem::Interactive subcomponent

#2042

PopoverPrimitive - Added low-level (internal) headless component to provide anchoring, collision detection, and popover functionalities.

RichTooltip - Added component to provide tooltips that can contain more complex and structured content.

#2069

AppFrame - converted component to TypeScript

#2098

Toast - Converted component to TypeScript

#2023 - Thanks @WenInCode for the contribution! 🙏

Reveal - Converted component to TypeScript

#2097

ButtonSet - Converted component to TypeScript

#2099

Separator - Converted component to TypeScript

#2114

Patch changes

Alert::Description - Fixed typo in template-registry.ts file declaration

#2090

Dropdown::ListItem::Checkmark - Fixed issue with leading icon spacing

#2084

Tooltip - Fixed max-width applied to the "bubble" (it was 304px, now is 280px per design specs)

#2050

Alert, Badge, BadgeCount, Button, Card::Container, DisclosurePrimitive, DismissButton, IconTile, Interactive, Link::Inline, Link::Standalone, Tag, Text - Standardized class names and signatures

#2108

CodeBlock - Re-mapped class-name variable to color-blue

#2027

Fixed default export warnings by preventing types.js files from being reexported

#2030 - Thanks @WenInCode for the contribution! 🙏

Tabs - Fixed issue with z-index of the active tab "indicator"

#2085

🔄 Updated dependencies:

@hashicorp/ember-flight-icons@5.0.2

4.2.0

4.2.0 documentation

Minor changes

Link::Inline - Converted component to TypeScript

#2013 - Thanks @WenInCode for the contribution! 🙏

Card - Converted component to TypeScript

#1997 - Thanks @valeriia-ruban for the contribution! 🙏

Link::Standalone - Converted component to TypeScript

#2010 - Thanks @WenInCode for the contribution! 🙏

Text - Converted component to TypeScript

#1984 - Thanks @natmegs for the contribution! 🙏

Alert - Converted component to TypeScript

#1990 - Thanks @WenInCode for the contribution! 🙏

Patch changes

Modal, Flyout - Fixed flaky tests by running @ember/test-waiters in all environments

#2011 - Thanks @fivetanley for the contribution! 🙏

4.1.2

Patch changes

This version is a re-release of @hashicorp/design-system-components@4.1.1 containing the missing pre-compiled CSS

Read the full changelog

npm package: @hashicorp/design-system-tokens

2.2.2

Patch changes

Upgraded style-dictionary to 4.2.0

#2560

2.2.1

Patch changes

Updated design tokens for Vagrant primary gradient to match Figma.

#2366

2.2.0

Minor changes

AppHeader - Added design tokens:

--token-app-header-height
--token-app-header-home-link-size
--token-app-header-logo-size

#2161

2.1.0

Minor changes

Added new pipeline to Style Dictionary for cloud-email - email/sass-variables to be used in email templating

#1965

2.0.0

Major changes

New tokens added for large and medium size Tab variants. The "medium" tokens replace the former equivalent tokens which were not differentiated by size.

--token-tabs-tab-height-medium (Replaces --token-tabs-tab-height)
--token-tabs-tab-height-large (New)
--token-tabs-tab-padding-horizontal-medium (Replaces --token-tabs-tab-padding-horizontal)
--token-tabs-tab-padding-horizontal-large (New)

#1937

1.11.0

Minor changes

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

#1914

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

#1915

1.10.0

Minor changes

Added color tokens for “Vault Radar” product

#1904

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

#629 a079992f Thanks @didoo! - added component-level design tokens for Tabs component
#646 ecbe26df Thanks @jorytindall! - Updated the box-shadow values for overlay tokens.

Patch changes

#636 27a283a5 Thanks @Dhaulagiri! - Add copyright notice to license file

1.1.0

Minor changes

#584 258c06d9 Thanks @didoo! - added specific design tokens for the RadioCard component

1.0.1

Patch changes

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

Read the full changelog

npm package: @hashicorp/flight-icons

3.8.0

Minor changes

Postgres service icon added.

#2563

3.7.0

Minor changes

Confluent icon added

#2505

Updated okta and okta-color to reflect updated branding.

#2489

3.6.0

Minor changes

bucket icon added.

#2424

3.5.0

Minor changes

mongodb and twilio icons have been added.

#2260

3.4.0

Minor changes

service-now and pager-duty icons added.

#2191

Patch changes

search icon (16px only) has been increased in size to better fit within the bounding box and more closely align with other icons of the same size

#2175

3.3.0

Minor changes

vagrant, vagrant-color, vagrant-fill, vagrant-fill-color, vagrant-square, vagrant-square-color icons were updated per brand changes.

#2144

3.2.0

Minor changes

Added two icon logos: minio and git.

#2058

sparkle icon added

#2081

3.1.0

Minor changes

Reorganized the icons within the "Core" icon set into 16 more descriptive categories.

#1986

Patch changes

Added "category" to the icons' metadata in the catalog.json file.

#1967

3.0.0

Major changes

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

#1927

2.25.0

Minor changes

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

#1901

2.24.0

Minor changes

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

#1873

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.

#1839

2.22.0

Minor changes

Added IconName type to iconNames export

#1776 - Thanks @dstaley for the contribution! 🙏

2.21.0

Minor changes

Added static SVG sprite sheet file

#1763 - Thanks @dstaley for the contribution! 🙏

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

Read the full changelog

npm package: @hashicorp/ember-flight-icons

5.1.3

Patch changes

🔄 Updated dependencies:

@hashicorp/flight-icons@3.5.0

5.1.2

Patch changes

This version is a re-release of @hashicorp/ember-flight-icons@5.1.0 containing the missing dist

5.1.1

🚨 Caution: This version has been deprecated 🚨

5.1.0

🚨 Caution: This version has been deprecated 🚨

Minor changes

FlightIcon - converted component to TypeScript and published types

#2142 - Thanks @aklkv for the contribution! 🙏

Patch changes

🔄 Updated dependencies:

@hashicorp/flight-icons@3.4.0

5.0.3

Patch changes

🔄 Updated dependencies:

@hashicorp/flight-icons@3.3.0

5.0.2

Patch changes

FlightIcon component - Removed initial whitespace (newline) from template

#2049

🔄 Updated dependencies:

@hashicorp/flight-icons@3.2.0

5.0.1

Patch changes

🔄 Updated dependencies:

@hashicorp/flight-icons@3.1.0

5.0.0

Major changes

Converted Ember packages to v2 addon format.

To migrate update Sass configuration in ember-cli-build.js to include the paths for ember-flight-icons and design-system-components:

sassOptions: {
  precision: 4,
  includePaths: [
    './node_modules/@hashicorp/design-system-tokens/dist/products/css',
    './node_modules/@hashicorp/ember-flight-icons/dist/styles',
    './node_modules/@hashicorp/design-system-components/dist/styles',
  ],
},

Alternatively, you can import the CSS by adding this configuration in ember-cli-build.js.

app.import(
  "node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css",
);

#1872

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

#1920

🔄 Updated dependencies:

@hashicorp/flight-icons@3.0.0

4.0.6

Patch changes

remove unused contextRootURL function

#1900

🔄 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

#1803 - Thanks @meirish for the contribution! 🙏

🔄 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

#1761

Upgraded the following dependencies:

ember-cli-htmlbars from 6.2.0 to 6.3.0

#1756

🔄 Updated dependencies:

@hashicorp/flight-icons@2.21.0

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

Read the full changelog

Components library

Figma library: HDS Components UI Kit

January 15th, 2025

Figma v2.0 Changelog

All items in this release are a part of the release of HDS Components UI Kit v2.0.

Accordion - Exposed nested instances for individual Accordion Items in the properties panel.

Alert

Consolidated separate components (page, inline, and compact) into a single component.
Content properties (including icon swapping, text, and actions) have been exposed in the properties panel.
- To enable this, a nested local component has been created for alert content. This local component is shared with the Toast.

AppFooter

Added local tokens for dark theme colors (these are hidden from publishing).
Removed text property on ".copyright" to avoid unnecessary editing.
In ".Link" subcomponent: added leading icon as a boolean property to match code.
- Leading icon now has instance swap.

ApplicationState - Small cleanup changes only.

Badge - Updated color mapping in the Figma component and in the component in code (as a bug fix) to correct surface and border colors being incorrectly mapped to foreground tokens. This results in no visual changes in the component.

BadgeCount

Now exists on its own page (decoupled from Badge), mirroring the Helios website.
Updated the color mapping in the Figma component and in the component in code (as a bug fix) to correct surface and border colors being incorrectly mapped to foreground tokens. This results in no visual changes in the component.

Breadcrumb

Merged Breadcrumb/Item, Breadcrumb/Current, and Truncated/_Item into a single nested .Item component for easier maintenance.
- Due to the merged subcomponents, .Item now has addition boolean properties: isCurrent and isTruncationButton.
Exposed the nested properties for Breadcrumb::Item and Breadcrumb::Truncation on Breadcrumb.
Updated the naming conventions to match components in code.

Button

The "master" buttons for each size have been removed for easier maintenance.
- Button now contains additional properties that wer previously within the nested master element.
Disabled is no longer an option within the state properties, it is now a separate boolean property to better align with code, and with the treatment of other components in the system.

Card

Changed color variant names to match the code API (from neutral-0 to neutral-primary and neutral-50 to neutral-secondary).
Enabled instance swap on the ".GenericInstance" within the card.
Removed the "Card-Container / Basic" component. Now that instance swap is common practice, the "basic" card is unnecessary.
Renamed this new single component to Card.

CodeBlock

Added local variables for custom color values (these are hidden from publishing).
Added local type variable for custom text, hidden from publishing to not be confused with the code style in the Foundation v2.0 Library.

Copy

Copy / Button

Added focus interactive state for the success status.
Added error status to match the Ember component.
Code API includes a text argument that can be used to override the label, but since this component uses a nested Button that is not exposed in the properties panel (due to the number of settings that should not be overridden in the CopyButton), consumers will need to click into the text layer in order to change the text.

Copy / Snippet

Added focus state for the success status.
Added error status to match the Ember component.

DialogPrimitive - Moved to the "Utilities" section of the file to mirror the organization of the Helios website component pages.

Dropdown

Exposed nested instances for the Toggle and ListItems within the Dropdown and exposed nested properties from Dropdown::ToggleButton, Dropdown::DropdownList, and Dropdown::ListItem.
Disabled is no longer an option within the state property, it is now a separate isDisabled boolean to better align with code and the treatment of other components in the system.
Simplified the layer structure and build of all ListItem components as well as Toggle components, resulting in breaking changes.

Flyout

Now uses Dialog Primitive as a base component
Now features max-width settings in Figma that match the property in code.
Added a [Template] component that combines the Flyout with the Overlay.

Form

All components that fall under the Form category have been reordered in the library file and, rather than using the table of contents structure, are now named with "Form /" as a prefix on the page name.

Primitives

New .Label local component to account for repeated label elements.
- Instead of using booleans for required and optional (which allowed consumers to accidentally enable both at once), these have been combined into an indicator property to better align with code.
Changed the name of .baseText to .ValueText to use a more semantic name.

Checkbox

Changed all naming to better match the component in code and subcomponent names.
Removed unnecessary variants with Checkbox::Field, migrated to use booleans, and exposed nested properties to simplify the component usability.
Created local nested instances for .Checkmark and .Indeterminate icons for easier maintenance.

File Input

Changed the structure fo FileInput::Field to expose nested properties rather than using additional variants for control state, labels, helper text, and error message.

Masked Input

Simplified the construction of MaskedInput::Field by exposing nested component instances for label, character count, control, helper text, and error message.

Radio

Changed the structure of Radio::Field to expose nested properties rather than using additional variants for radio settings, helper text, and error message.
Exposed nested instances on Radio::Group to make it easier to customize each line item within the group.

Radio Card

Updated .RadioCard::Item to include text properties for all customizable text fields.
Updated RadioCard::Group to expose nested instances of helper text, error text, and card items.

Select

OptionList / Item and OptionGroupLabel have been hidden in favor of the use of [Browser] OptionList and/or [Template] Select.
- Note: the naming difference in these components is due to their lack of corresponding component in code. These are Figma equivalents to the default browser UI that end-users will see in Chrome on MacOS
Select::Base now allows text customization in the properties panel or hiding of the text with a boolean property.
Select::Field now exposes nested component properties from Select::Base for control state, text within the control, label text, and label indicator (required/optional).
Added a [Template] component for easier use of combined components in dropdown layouts.

Super Select

Text is now customizable as part of the ".value" nested component rather than text layer. This allows the text value to be customized in the properties panel.
Generic placeholders have been exposed in the properties panel for easier customization.
Component names have been changed for clarity around intended use:
- "ListItem / Checkmark" is now "ListItemSingle"
- "ListItem / Checkbox" is now "ListItemMultiple"
"ListItemSingle" has been reduced in variant number and component complexity using boolean attributes for checkmark.
Footer components for the dropdown list have been consolidated into the "AfterOptions" set of components.
"SuperSelect::Multiple::Base" now exposes properties for each nested Tag.
"SuperSelect::Multiple::Field" has been simplified in structure using exposed nested components for the control, label, helper text, and error message.
"OptionsListMultiple" now exposes properties for each list item within the list as well as the "BeforeOptions" and "AfterOptions".
"SuperSelect::Single::Base" now allows the control to use placeholder text or a filled style in addition to the generic instance.
"SuperSelect::Single::Field" has been simplified in structure using exposed nested components for the control, label, helper text, and error message.

Text Input

"TextInput::Base" now has a nested component called ".Value" that allows customization of the text in the control from the properties panel.
All Text Input components use "TextInput::Base" and local components for error messaging, indicators, character count, and labels with exposed nested properties in order to reduce the number of variants and streamline maintenance of the entire component set.

Textarea

"Textarea::Base" now has a nested component called ".Value" that allows customization of the text in the control from the properties panel.
"Textarea::Field" now uses nested components for the control, label, helper text, error messaging, and character count in order to reduce the number of variants needed and streamline the maintenance of the component.

Toggle

"Toggle::Field" has been simplified using nested components with exposed properties for label, control, helper text, and error messaging.
"Toggle::Group" now has a horizontal layout option.

Icon Tile

Combined two components into a single component which better aligns to the component in code.

Link / Standalone Link

Small cleanup changes only.

Modal

Now uses Dialog Primitive as a base component.
Now features a max-width setting in Figma that match the code settings.
Created a [Template] component that combines the Modal with the Overlay.

Page Header

No longer has a property for iconTileType since there is now only one Icon Tile.

Pagination

"NavArrow / Previous" and "NavArrow / Next" have been merged into one local component to mirror the code component API more closely.
The truncation ellipsis has been moved from being contained within the "_NavNumber" to it's own local component to better match the code component API.
"Pagination::Compact" and "Pagination::Numbered" are now separate components to better match the code component API and allow compact pagination with or without labels on the "NavArrow" elements.

Reveal

Small cleanup changes only.

Rich Tooltip

The pointer shape for both Tooltip types has been consolidated into one ".Pointer" component.

December 20th, 2024

IconTile - Removed the border and updated the colors for improved contrast and to create a distinctive look that aligns better with the surrounding elements.

Deprecated HDS Components UI Kit v1.0. It will no longer receive updates or support.

Released HDS Components UI Kit v2.0.

SideNav - No longer deprecated due to adjustments in prioritization.

September 11th, 2024

Text Input - Added support for types Tel, Week and Month.

Dropdown - ListItem Interactive added support for the Badge component.

August 2nd, 2024

AppHeader - Added a new navigation component to contain global and utility navigation elements.

AppSideNav - Added a new component that shares features and functionality with the legacy SideNav.

Application Template - Added a template component that provides a consistent starting point for the UI chrome.

SideNav - Deprecated the legacy navigation component. It will be removed from the library once adoption of the AppHeader and AppSideNav is complete.

Breaking changes

ApplicationState - multiple enhancements including:

Added support for a media slot above the title.
Added an alignment property which can be set at the root level to left or center.
The footer now supports up to three actions at once. The actions are now organized in accordance with our Button Organization pattern.
Updated several visual styles including:
- Removing the divider
- Reducing the title from Display/400/Bold to Display/300/Bold
- Changing the icon and the title color from Foreground/Faint to Foreground/Strong
- Changing the body text color from Foreground/Faint to Foreground/Primary

Adding support for three actions within the ApplicationState results in a breaking change to the previous actions. Before updating the library, we recommend annotating the text and icon name (with a comment or otherwise) in files that are in progress or still being referenced by engineering.

February 27th, 2024

Breaking changes

Alert and Toast - Updated the StandaloneLink to the secondary variant from the primary variant to align with our documented usage recommendations.

Updating the StandaloneLink to the secondary variant will revert any changes you've made to the text and leading icon properties. Prior to updating the library we recommend annotating (with a comment or otherwise) work that is in progress or is still being referenced by engineering with the intended text and icon variant.

Table - multiple enhancements to the Table components including:

Added support for multi-selection with Header Column / Selection and Cell / Selection.
Added support for a Tooltip in the Header Column component.
Updated the visual language of the sort button in Header Column by decoupling the sort functionality into a nested Sort Button

Adding support for a Tooltip and updates to the Sort Button result in a breaking change in sortable variants. While the Label in the Header Column should persist, we recommend annotating (with a comment or otherwise) work that is in-progress or still being referenced by engineering with the columns that are intended to be sortable.

January 24th, 2024

IconTile - Added Vault Radar logo.

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.

Read the full changelog

Foundations library

Figma library: HDS Foundations UI Kit

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

Patterns library

Figma library: HDS Patterns UI Kit

December 20th, 2024

Released HDS Patterns UI Kit v2.0.

Read the full changelog

Utility libraries

Figma library: Utility libraries

On this page: