CHANGELOG.md

@hashicorp/design-system-components

4.17.1

4.17.1 documentation

Minor Changes

Tag - Truncated any text that is longer than about 20 characters, and added a tooltip with the full text when truncation occurs

Tag - Added @tooltipPlacement argument

#2655

MaskedInput - Added support for externally controlled content masking

#2716

Badge - Updated foreground and background colors to improve contrast for a11y

BadgeCount - Updated foreground color of neutral variant to improve contrast for a11y

#2695

CodeBlock - Added @copyButtonText argument to CodeBlock and @text argument to the CodeBlock::CopyButton subcomponent to customize the aria-label of the Copy Button. The default label is still "Copy".

CodeEditor - Added @copyButtonText argument to customize the aria-label of the Copy Button. The default label is still "Copy".

#2696

hds-code-editor modifier - Added language syntax highlighting support for JavaScript and Rego

CodeEditor - Added language syntax highlighting support for JavaScript and Rego

Dependencies - added @codemirror/lang-javascript

#2684

Time - Updated visual style to display a dotted underline when the hasTooltip argument is true

RichTooltip - Fixed Safari bug causing the dotted underline style not to display

#2725

hds-code-editor modifier - Added hasLineWrapping named argument that sets line wrapping behavior within the code editor.

CodeEditor - Added @hasLineWrapping argument that is passed to the hds-code-editor modifier

#2712

Patch Changes

Time - Fixed type declarations

CodeEditor - Added missing @lezer/highlight dependency

#2700 - Thanks @aklkv for the contribution! 🙏

hds-tooltip - Changed structure of tooltip content to add a wrapper that is always in the DOM and set aria-controls on trigger elements for a11y improvements with toggled content

Tooltip - Changed structure of tooltip content to add a wrapper that is always in the DOM and set aria-controls on button for a11y improvements with toggled content

#2648

CopyButton - Fixed issue preventing copying of empty string and zero number values

CopySnippet - Fixed issue preventing copying of empty string and zero number values

#2685

CodeEditor - Fixed import path for HdsCodeEditorModifierSignature

#2681

Swapped unmaintained ember-composable-helpers with @nullvoxpopuli/ember-composable-helpers

#2493 - Thanks @aklkv for the contribution! 🙏

Migrated our tooling from yarn to pnpm and updated our JavaScript compiler configuration

Updated decorator-transforms from 1.2.1 to 2.3.0

#2671 - Thanks @aklkv for the contribution! 🙏

AdvancedTable - Refactored keyboard navigation to a new modifier hds-advanced-table-cell for reusability, and disabled default behavior for arrow keys in focused cells.

#2659

Table - Removed unused updateAriaLabel function and event listener

#2690

Tooltip - Removed style import from Tippy.js, copied arrow positioning styles into component styles

#2726

4.16.0

4.16.0 documentation

Minor Changes

Table - Updated the visual design of Table cells by adding borders, making them more distinguishable when spanning rows or columns.

#2588

Added global tokens for border radius

#2595

CodeEditor - Added new CodeMirror 6 supported code editor component

hds-code-editor modifier - Added new code editor modifier which converts the element it is applied to into a CodeMirror 6 code editor

#2573

SuperSelect - Added searchFieldPosition="before-options" to fix a11y issue in Multiple component

#2612

AdvancedTable - Added AdvancedTable component and related sub-components

Add tabbable as a dependency.

#2615

Patch Changes

Upgraded the following dependencies:

• @ember/render-modifiers from 2.0.5 to 2.1.0
• @ember/addon-shim from 1.8.7 to 1.9.0
• clipboard-polyfill from 4.1.0 to 4.1.1
• decorator-transforms from 1.1.0 to 1.2.1
• ember-a11y-refocus from 4.1.3 to 4.1.4
• ember-element-helper from 0.8.5 to 0.8.6
• ember-focus-trap from 1.1.0 to 1.1.1
• ember-modifier from 4.1.0 to 4.2.0
• ember-power-select from 8.2.0 to 8.6.2
• sass from 1.69.5 to 1.83.0

#2625

Table - Fixed the aria-labels for select row and select all checkboxes so they do not change based on the state of the checkbox.

#2596

Breadcrumb - Implemented aria-controls in Breadcrumb::Truncation for a11y improvements with toggled content from PopoverPrimitive

Dropdown - Implemented aria-controls in Dropdown::Toggle::Button for a11y improvements with toggled content from PopoverPrimitive

PopoverPrimitive - Implemented aria-controls in toggle element for a11y improvements with toggled content

RichTooltip - Removed explicitly setting aria-controls in RichTooltip::Toggle as it is now set through the PopoverPrimitive

#2639

Tabs - Implement aria-controls in tab for a11y improvements with toggled content

#2637

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

#2619

Dropdown - Fixed z-index bug which caused the focus ring of the toggle icon to not be visible when the component was nested in a container.

#2638

🔄 Updated dependencies:

• @hashicorp/design-system-tokens@2.3.0
• @hashicorp/flight-icons@3.9.0

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

4.1.1

🚨 Caution: This version is missing the pre-compiled CSS 🚨

You can still use this version if you import styles as Sass and don't require design-system-components.css

Patch Changes

Flyout - Fixed issue with Sass operators failing in old versions of Sass

#1994

4.1.0

4.1.0 documentation

Minor Changes

DismissButton - Converted component to TypeScript

#1980 - Thanks @WenInCode for the contribution! 🙏

Added image error handling to Dropdown::Toggle::Icon

#1906 - Thanks @cbfx for the contribution! 🙏

Patch Changes

Enable glint

#1976 - Thanks @natmegs for the contribution! 🙏

Upgraded ember-truth-helpers from 3.1.1 to 4.0.3

#1976 - Thanks @natmegs for the contribution! 🙏

Added missing aria-label support to copy-snippet component.

#1963

Removed dialog-polyfill dependency

#1977

🔄 Updated dependencies:

• @hashicorp/design-system-tokens@2.1.0
• @hashicorp/ember-flight-icons@5.0.1

4.0.0

4.0.0 documentation

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

Form::CharacterCount - refactored the component, removing onInsert callback and adding use @value argument

To migrate:

• for standalone Form::CharacterCount instances, you must pass in a @value argument representing the value of the referenced input
• when used as a contextual component F.CharacterCount in Form::[MaskedInput|TextInput|Textarea]::Field make sure the form control is updating the associated @value on input (usually using on "input" (fn this.updateValue) function)

#1896 - Thanks @meirish for the contribution! 🙏

Table - Multiple updates to the main component and its subcomponents:

• Updated table headers to support tooltips
• Updated visual treatment and location of the "sort" button in the table headers
• Refactored CSS code to simplify usage of hds-table-related class names

Table::ThSort:

• Added support for tooltip via the @tooltip argument
• Updated visual treatment and location of the "sort" button
• Updated DOM structure of the <th> content
• Remove class hds-table__th-sort--button-content
• Replaced class hds-table__th-sort with classes hds-table__th + hds-table__th--sort
• Replaced class hds-table__th-sort--text--[left|center|right] with hds-table__th--align-[left|center|right]
• Renamed onClick callback to onClickSort

Table::Th:

• Added support for tooltip via the @tooltip argument
• Updated DOM structure of the <th> content
• Replaced class hds-table__th--text-[left|center|right] with hds-table__th--align-[left|center|right]

Table::Td:

• Replaced class hds-table__td--text-[left|center|right] with hds-table__td--align-[left|center|right]

To migrate run the codemod v4/table (see readme file)

#1860

Pagination - Removed handling of query parameters from onPageSizeChange function for Pagination::Numbered

Unfortunately, it's not possible to cover this breaking change with a codemod. Consumers should review their usage of the onPageSizeChange callback and, if necessary, implement the persistence of the "page number" and "page size" values via query parameters themselves.

#1913

Renamed namespaced contextual components as follows:

• Alert::Link::Standalone to Alert::LinkStandalone
• ApplicationState::Footer::Link::Standalone to ApplicationState::Footer::LinkStandalone
• Form::Checkbox::Group::Checkbox::Field to Checkbox::Group::CheckboxField
• Form::Radio::Group::Radio::Field to Form::Radio::Group::RadioField
• Form::Toggle::Group::Toggle::Field to Form::Toggle::Group::ToggleField
• Toast::Link::Standalone to Toast::LinkStandalone

#1884

Minor Changes

Table - Added multi-select functionality

#1859

Tabs - Added @size argument with new "large" size variant

#1937

Patch Changes

Dropdown - Fixed dropdown list missing an accessible name when Checkmark items were passed in

#1910

Flyout - Reduced gap between Flyout and edge of screen from 40px to half of the minimized SideNav width in medium view

#1957

Removed ember-deep-tracked dependency that was not used

#1950

SideNav - Fixed issue with navigation elements remaining interactive when minimized

#1909

🔄 Updated dependencies:

• @hashicorp/ember-flight-icons@5.0.0
• @hashicorp/design-system-tokens@2.0.0

3.6.0

3.6.0 documentation

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

3.5.0 documentation

Minor Changes

IconTile - updated component adding support for vault-radar product

#1904

Patch Changes

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

#1899

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

#1903

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

#1905

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

#1893

🔄 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

#1887

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

#1853

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

#1892

3.4.0

Minor Changes

Button - Added @isInline argument

#1854

Table - Added support for baseline vertical alignment

#1861

Patch Changes

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

#1867

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

#1869

Tabs - Fixed subcomponents' backing-class names

#1883

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

#1811

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

#1856

🔄 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

#1802

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

#1840

3.2.0

Minor Changes

CodeBlock - Added language support for Ruby syntax

#1834

Table - Updated @columns object to support isVisuallyHidden argument

• Table::Th - Updated to support isVisuallyHidden argument

#1819

Patch Changes

SideNav - Reduced the width of SideNav::ToggleButton

#1807

🔄 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

#1790

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

#1786

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

#1798

3.1.1

Patch Changes

Added @ember/string as a direct dependency

#1782

🔄 Updated dependencies:

• @hashicorp/ember-flight-icons@4.0.3

3.1.0

Minor Changes

CodeBlock - Added new component

#1687

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

#1756

Breadcrumb - Added support for external links

#1774

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

#1761

Button - Fixed HdsInteractiveSignature type import

#1769

🔄 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

#1751

3.0.1

Patch Changes

🔄 Updated dependencies:

• @hashicorp/ember-flight-icons@4.0.1

3.0.0

Major Changes

Dropped support for Node 14

#1634

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

#1634

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"

#1634

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

#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

• #1421 b8a45d6e7 Thanks @didoo! - Table - Exposed the internal sorting properties and methods setSortBy, sortBy and sortOrder

• #1377 437c253dd Thanks @jorytindall! - Adds PageHeader component

• #1393 38fb21e60 Thanks @alex-ju! - Add Separator component

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

• #1381 02cdeacd5 Thanks @KristinLBradley! - Add new Reveal component

Patch Changes

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

2.5.0

Minor Changes

• #1391 0a7c53886 Thanks @alex-ju! - Embed page scroll management into the Modal and Flyout components

2.4.3

Patch Changes

• #1388 56a6b94df Thanks @didoo! - Fixed SideNav issue with content resizing when transitioning its width

2.4.2

Patch Changes

• #1380 cd16ccc19 Thanks @MelSumner! - A11y Fix: removes aria-label from stepper/indicator and from task/indicator, which was causing an accessibility test error.

2.4.1

Patch Changes

• Updated dependencies [2c7d70868]:
  • @hashicorp/ember-flight-icons@3.0.3

2.4.0

Minor Changes

• #1371 aa2be65cf Thanks @KristinLBradley! - Refactor Hds::Disclosure internal utility component into two new components:
  • Rename the original Hds::Disclosure component to Hds::MenuPrimitive
  • Add a new Hds::DisclosurePrimitive component stripped of the “click outside/unfocus/esc to close” functionality

Patch Changes

• #1373 b2949f208 Thanks @MelSumner! - Updates aria-label support for consistency. Consumers can now see in the component API docs where @ariaLabel is supported for a custom value, and what the fallback value is.

• #1364 3e1543077 Thanks @alex-ju! - Prevent Tooltip content from overflowing

2.3.3

Patch Changes

• #1350 be5c5aad8 Thanks @KristinLBradley! - RadioCard - Update CSS to enable wrapping of long strings in label which were overflowing the container

• #1353 0ed127294 Thanks @didoo! - removed z-index value from AppFrame::Footer

2.3.2

Patch Changes

• #1344 6d6cf3ea8 Thanks @cbfx! - SideNav::Portal::Target - Fixed a possible source of flickering when a panel has already been rendered

2.3.1

Patch Changes

• #1338 2bc23fd20 Thanks @didoo! - SideNav - Fix issue with links being clickable even if not visible

• #1339 ea8edb9bf Thanks @didoo! - SideNav - Updated CSS declaration that was causing an horizontal scrollbar to appear in some conditions

2.3.0

Minor Changes

• #1283 d0ae66503 Thanks @KristinLBradley! - - Add new TooltipButton component and hds-tooltip modifier

  • Add design tokens for Tooltip

• #1316 5763ffbca Thanks @alex-ju! - Add SegmentedGroup component

Patch Changes

• #1329 216ce51a8 Thanks @didoo! - SideNav::Portal::Target - Removed extra call to commitStyles

• #1328 095caf4d4 Thanks @didoo! - SideNav::Portal::Target - Made the :hover:focus state (the one the links finds itself once clicked) identical to the :active/.active state

• #1334 f6fa1e15e Thanks @didoo! - SideNav - added missing override of Dropdown::ToggleButton

• Updated dependencies [d0ae66503]:

  • @hashicorp/design-system-tokens@1.5.0

2.2.0

Minor Changes

• #1284 050a2afa5 Thanks @didoo! - Added AppFrame component

• #1321 6cb5f55b1 Thanks @didoo! - Extracted Hds::SideNav::Base from the Hds::SideNav component

• #1304 038d8306a Thanks @didoo! - Extended the Hds::SideNav component to support responsiveness (animation/transition) and content portaling by adapting existing implementation for Cloud UI

• #1315 e900dbcca Thanks @didoo! - Added a @isInline argument to the Hds::Dropdown component

• #1309 ef7eeff66 Thanks @jorytindall! - Add Hds::Flyout::Footer as generic block to Hds::Flyout

• #1317 fa3a328a1 Thanks @didoo! - Changed order of "modal" container element in the DOM for the AppFrame component

Patch Changes

• #1312 cd1527ef5 Thanks @alex-ju! - Add min-height to Hds::Textarea

• #1313 5a2f5778d Thanks @didoo! - Added design tokens for SideNav component

• #1306 e993f6c42 Thanks @alex-ju! - Fix PowerSelectMultiple style overrides when search is enabled

• Updated dependencies [5a2f5778d]:

  • @hashicorp/design-system-tokens@1.4.2

2.1.0

Minor Changes

• #1258 3466d2279 Thanks @MelSumner! - Adds Hds::ApplicationState component

Patch Changes

• #1291 b2c21a86e Thanks @didoo! - Fixed missing inset shadow for TextInput, Textarea, Checkbox, Radio, PowerSelect overrides

2.0.0

Major Changes

• #1185 a883e7fd7 Thanks @alex-ju! - Add Checkmark, Checkbox and Radio as Hds::Dropdown::ListItems

  Rename Hds::Dropdown::ListItem internal CSS classes as follows:

  • hds-dropdown-list-item--copy-item → hds-dropdown-list-item--variant-copy-item
  • hds-dropdown-list-item--description → hds-dropdown-list-item--variant-description
  • hds-dropdown-list-item--generic → hds-dropdown-list-item--variant-generic
  • hds-dropdown-list-item--interactive → hds-dropdown-list-item--variant-interactive
  • hds-dropdown-list-item--separator → hds-dropdown-list-item--variant-separator
  • hds-dropdown-list-item--title → hds-dropdown-list-item--variant-title

  Note: If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.

• #1212 6e79216a8 Thanks @alex-ju! - Add Hds::Dropdown::Header and Hds::Dropdown::Footer as generic blocks to Hds::Dropdown

  Rename Hds::Dropdown internal CSS class hds-dropdown-list → hds-dropdown__list

  The hds-dropdown__list element is now wrapped in a hds-dropdown__content element to accommodate the new header and footer elements. As a result, the following modifiers will be applied to the wrapper element.

  • hds-dropdown-list--fixed-width → hds-dropdown__content--fixed-width
  • hds-dropdown-list--position-left → hds-dropdown__content--position-left
  • hds-dropdown-list--position-right → hds-dropdown__content--position-right

  Note: If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.

• #1266 082842b59 Thanks @alex-ju! - Add @icon, @count, @badge and @badgeCount to Dropdown::Toggle::Button

  Hds::Dropdown::Toggle::Button and Hds::Dropdown::Toggle::Icon now share the chevron element. As a result, we renamed internal CSS classes as follows:

  • hds-button__text → hds-dropdown-toggle-button__text
  • hds-button__icon → hds-dropdown-toggle-chevron

  The icon element within Hds::Dropdown::Toggle::Icon no longer has the hds-dropdown-toggle-icon__chevron class and it's currently wrapped in the hds-dropdown-toggle-chevron container, similar to Hds::Dropdown::Toggle::Button.

  The Hds::Dropdown::Toggle::Icon now has a solid border, for consistency with Hds::Dropdown::Toggle::Button and the secondary style of Hds::Button.

  Note: If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.

Minor Changes

• #1276 5ad29412d Thanks @alex-ju! - Allow small @size on Dropdown::Toggle::Icon

• #1262 3eb78b8de Thanks @alex-ju! - Add new @listPositions for Dropdown as follows:

  • bottom-left
  • bottom-right (default)
  • top-left
  • top-right

  Note: left and right are now deprecated and will be removed in a future major release

1.8.1

Patch Changes

• #1260 8eb0d1ff6 Thanks @didoo! - Added @ember/render-modifiers as explicit dependency

• #1256 451d98842 Thanks @alex-ju! - Make the Disclosure mechanism more resilient

1.8.0

Minor Changes

• #1163 992fde13f Thanks @KristinLBradley! - Add new SideNav components

1.7.3

Patch Changes

• #1242 f1a947db2 Thanks @Dhaulagiri! - Revert ember-truth-helpers & ember-keyboard dependency updates

1.7.2

Patch Changes

• #1234 2fa69aca7 Thanks @alex-ju! - Fix checkmark and disabled state on power-select style overrides

1.7.1

Patch Changes

• #1232 9d1a73da3 Thanks @alex-ju! - Make ember-body-class a dev dependency

1.7.0

Minor Changes

• #1201 5b11fe34c Thanks @KristinLBradley! - Add @label argument to Pagination::SizeSelector component and associated @sizeSelectorLabel argument to Pagination::Numbered component to make Pagination::SizeSelector label text customizeable.

• #1160 b71c0c07f Thanks @MelSumner! - Added new custom sort feature support to table component:

  • Adds sortingFunction support in @columns declaration
  • Adds sortedMessageText support for custom sorting message
  • Updates the aria-sort to fallback to "none" instead of "null" (per spec)
  • Adds support for the \{\{each\}\} loop's key to be defined with identityKey (optional; falls back to the Ember default if none is provided)

Patch Changes

• #1217 c021b0527 Thanks @alex-ju! - Update ember-cli to 4.10.0 alongside other patch and minor dependency updates

• #1208 583f7559d Thanks @MelSumner! - Updates table styles to include scoped row support

• #1226 2b0a028b8 Thanks @didoo! - Changed inner logic for ThSort arguments

• #1181 2ef00f654 Thanks @KristinLBradley! - Add a style to prevent accidental display of hidden Hds::Tabs::Panel

• #1204 fcbaff90b Thanks @KristinLBradley! - * Scope group layout styles to nested child components.

  • Fix bug with --token-pagination-child-spacing-vertical value so that it adds "px" unit.

• Updated dependencies [fcbaff90b]:

  • @hashicorp/design-system-tokens@1.4.1

1.6.1

Patch Changes

• #1193 0f76e60 Thanks @fivetanley! - Fix Hds::Table compile error for Ember 3.28 or lower

1.6.0

Minor Changes

• #661 2c6024a38 Thanks @KristinLBradley! - Add new Pagination component (Numbered, Compact)

• #1070 91b004f93 Thanks @alex-ju! - Add Flyout component

Patch Changes

• Updated dependencies [2c6024a38]:
  • @hashicorp/design-system-tokens@1.4.0

1.5.2

Patch Changes

• #1036 b1756288e Thanks @Dhaulagiri! - Update design system name to Helios

• #971 fa819fedf Thanks @alex-ju! - Fix repetitive required field indicator for screen readers

• #1130 34fb0fe18 Thanks @MelSumner! - Moves icon and count inside of tab (button element) for WCAG conformance

• #1157 39b645296 Thanks @MelSumner! - Fixes malformed CSS classes in table component

• #1080 1dde47948 Thanks @didoo! - Added onSort callback to Hds::Table component

• #1127 4eaf727e7 Thanks @MelSumner! - Adds missing aria-label to breadcrumb truncation toggle for WCAG conformance.

• Updated dependencies [b1756288e]:

  • @hashicorp/design-system-tokens@1.3.1

1.5.1

Patch Changes

• #867 a26f3da41 Thanks @MelSumner! - Bugfix: removed extra space in label that was causing label and legend to be inconsistent. Moved the   to the required indicator instead for consistency.

1.5.0

Minor Changes

• #827 c775030b0 Thanks @MelSumner! - PR 760 Finalized Hds::Table component; resolved text alignment and column width invocation options. Added support for th elements with the scope of row.

Patch Changes

• #816 325cdaa2a Thanks @jorytindall! - Updated the modal border radius based on revised design guidelines.

1.4.1

Patch Changes

• #740 cd1a09307 Thanks @alex-ju! - Add indeterminate style to Checkbox component

• Updated dependencies [92c83961f]:

  • @hashicorp/design-system-tokens@1.3.0

1.4.0

Minor Changes

• #631 5d4b1811 Thanks @alex-ju! - Add Modal component and DismissButton utility component (used by Alert, Toast and Modal)

• #722 58a52103 Thanks @MelSumner! - Add Table component

Patch Changes

• #681 6f08ddd2 Thanks @KristinLBradley! - Explicitly set aria-selected to true or false

• #698 db8a1caf Thanks @alex-ju! - Add @layout parameter to RadioCard

• Updated dependencies [aeff4e02]:

  • @hashicorp/ember-flight-icons@3.0.2

1.3.2

Patch Changes

• #668 3c3b6706 Thanks @alex-ju! - Fix whitespace issue in Link::Inline and Interactive utility component

1.3.1

Patch Changes

• #663 1397d52c Thanks @nfagerlund! - Tabs::Panel: Regress modern helper syntax for 3.24 compatibility

1.3.0

Minor Changes

• #548 5d1e2cb4 Thanks @KristinLBradley! - Add new Tabs component

Patch Changes

• #618 11d39410 Thanks @alex-ju! - Update ember to 4.7.0

• #660 4d0826a6 Thanks @alex-ju! - Update the Hds::Button style when rendered as a link

• #638 90182235 Thanks @Dhaulagiri! - explicitly add ember-style-modifiers as a dependency

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

• Updated dependencies [a079992f, 11d39410, 27a283a5, ecbe26df]:

  • @hashicorp/design-system-tokens@1.2.0
  • @hashicorp/ember-flight-icons@3.0.1

1.2.0

Minor Changes

• #576 ab821911 Thanks @alex-ju! - Add RadioCard component

Patch Changes

• #586 55ec4246 Thanks @Dhaulagiri! - make ember-truth-helpers a dependency

• Updated dependencies [55f38cb3, 258c06d9]:

  • @hashicorp/ember-flight-icons@3.0.0
  • @hashicorp/design-system-tokens@1.1.0

1.1.0

Minor Changes

• #539 5b548865 Thanks @alex-ju! - Add custom styles for ember-power-select add-on

• #577 2f5a2c21 Thanks @alex-ju! - Add small variant to Hds::Dropdown::ToggleButton

Patch Changes

• #545 6d2a6298 Thanks @didoo! - Small cleanup (reformatting, linting) of the Sass files. Should have zero visual impact on the components.

• #565 0f5247f0 Thanks @didoo! - added stylelint to the codebase and re-organized CSS declarations

• Updated dependencies [0b245333]:

  • @hashicorp/design-system-tokens@1.0.1

1.0.4

Patch Changes

• #534 65cde6ad Thanks @alex-ju! - Fix label indicator for assistive technologies

• Updated dependencies []:

  • @hashicorp/ember-flight-icons@2.0.12

1.0.3

Patch Changes

• #529 b956be8f Thanks @alex-ju! - Fix required attribute on form fields

1.0.2

Patch Changes

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

1.0.1

Patch Changes

• #516 a81a3580 Thanks @alex-ju! - Fix text wrapping in alert description

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

Stepper component

• #470 96d47264 Thanks @jorytindall! - Added Stepper component structure and step/task components

ButtonSet component

• #486 3ea2ad55 Thanks @KristinLBradley! - Add new ButtonSet component to standardize button spacing

Tag component

• #443 7756c855 Thanks @alex-ju & @agendelHC! - Add tag component

Form controls components

• #447 0b1e9855 Thanks @didoo!

  • Added the form TextInput controls (Base, Field)
  • Added the form Textarea controls (Base, Field)
  • Added the form Select controls (Base, Field)
  • Added the form Checkbox controls (Base, Field, Group)
  • Added the form Radio controls (Base, Field, Group)
  • Added the form Toggle controls (Base, Field, Group)
  • Added the form "base" low-level elements: Label, HelperText, Error, Legend, Field, Fieldset

Patch Changes

• Updated dependencies [0b1e9855]:
  • @hashicorp/design-system-tokens@1.0.0

0.12.15

Patch Changes

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

0.12.14

Patch Changes

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

0.12.13

Patch Changes

• #461 71465b37 Thanks @alex-ju! - Fix computation error on disclosure (take 2)

0.12.12

Patch Changes

• #456 d0634a62 Thanks @alex-ju! - Fix computation error on disclosure utility

0.12.11

Patch Changes

• #426 ff236b25 Thanks @didoo! - Updated font-weight to "medium" for "Badge" and "BadgeCount" components

0.12.10

Patch Changes

• #428 599dca97 Thanks @didoo! - Fixed issue with "disabled" visual state for "Hds::Button" when is a link

0.12.9

Patch Changes

• #418 981e2bd9 Thanks @alex-ju! - Determine an accessible name for alertdialog alerts #418

• #416 824e53d1 Thanks @alex-ju! - Remove stray aria-describedby in alert component

• #415 c6842109 Thanks @didoo! - Added @levelHover and @levelActive arguments to Card::Container component

0.12.8

Patch Changes

• #400 d87d622b Thanks @alex-ju! - Determine alert component's role based on the presence of interactive elements

0.12.7

Patch Changes

• #406 3c3f49b9 Thanks @alex-ju! - Fix badge vertical alignment

0.12.6

Patch Changes

• #399 62e3077e Thanks @alex-ju! - Enable programmatic close on dropdown component

0.12.5

Patch Changes

• #391 0d8515f0 Thanks @didoo! - Fixed bug in Link::Standalone and Link::Inline components that added target="_blank" and rel="noopener noreferrer” attributes in any case/condition.

• #354 e7997ee6 Thanks @didoo! - small update to the yield helper component - this is used in Alert and Toast but the changes should have no impact

0.12.4

Patch Changes

• #343 a74711c8 Thanks @MelSumner! - Fixes copy-item bug in FireFox

• #328 32b36ab1 Thanks @didoo! - updated font-weight to medium for Link::Standalone component (to be in sync with design specs)

• #319 7c96344f Thanks @didoo! - updated the Hds::Dropdown::ListItem::Interactive to support the isLoading state

• Updated dependencies []:

  • @hashicorp/ember-flight-icons@2.0.8

0.12.3

Patch Changes

• Updated dependencies [a46fc035]:
  • @hashicorp/design-system-tokens@0.8.1

0.12.2

Patch Changes

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

0.12.1

Patch Changes

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

0.12.0

Minor Changes (Some Breaking)

• #217 210edd17 Thanks @didoo!

Interactive

• Introduced <Hds::Interactive> (a generic, "utility" component used internally by all the interactive elements like buttons and links)

Button

• updated the button API to handle also links as <a>/<LinkTo/LinkToExternal>
  • it can be used in place of the <Hds::Link/LinkTo::CTA> component (see below)
  • when the button is a link - the text is underlined for differentiation with a normal button - ⚠️ Visual change! - the button responds to space key event
• removed the @type argument from the API in favour of the type native attribute - 🚨 Breaking change!

Link/LinkTo::CTA

• removed the <Hds::Link/LinkTo::CTA> component, in favour of <Hds::Button> component (see above) - 🚨 Breaking change!

Link::Inline

• added the <Hds::Link::Inline> component (with API very similar to the <Hds::Link::Standalone>)

Dropdown

• Updated the Dropdown::ListItem::Interactive to use the new <Hds::Interactive> component

Alert/Toast components

• Removed the <LinkTo::Standalone> action (now you can use directly <Link::Standalone>)

0.11.2

Patch Changes

• #301 4976379e Thanks @alex-ju! - Convey the disclosure state to assistive tech for dropdown and truncated breadcrumbs

0.11.1

Patch Changes

• #284 ba409885 Thanks @alex-ju! - Change focus management in disclosure utility component

• #289 bf3a00e5 Thanks @didoo! - "Alert" and "Toast" components - converted "title" and "description" arguments to be contextual components

0.11.0

Minor Changes (Some Breaking)

• #245 c6de1018 Thanks @didoo!
  • Added Alert component
  • Added Toast component
• #259 478b3069 Thanks @didoo!
  • removed autofocus on first item for Disclosure component (and as a result also for Breadcrumb and Dropdown components) (🚨 Breaking)
  • updated focus state treatment for Dropdown component (🚨 Breaking)

Patch Changes

• #225 f1f07179 Thanks @Dhaulagiri! - update to ember-keyboard@8.1.0 in packages/components

• #265 79bc3e99 Thanks @Dhaulagiri! - npx ember-cli-update@4.3.0 dependency updates

• #253 21786983 Thanks @MelSumner! - bugfix for icon size in copy-item component

0.10.0

Minor Changes (Some Breaking)

• #200 a8072537 Thanks @didoo! - Updated Dropdown component:

  • added chevron animation for toggle elements
  • fixed issue with list-item/interactive height
  • added handling of dynamic width for the list
  • exposed an onClose event
  • removed the default icon for toggle/icon (🚨 Breaking)
  • removed icon requirement from the critical list item (🚨 Breaking)
  • updated the documentation and integration tests
  • some code refactorings, reorganizations and cleanups

0.9.2

Patch Changes

• #209 6021d433 Thanks @didoo! - Re-ordered declarations of CSS states

0.9.1

Patch Changes

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

0.9.0

Minor Changes

• #66 29e2ce55 Thanks @MelSumner! - Adds dropdown component to the design system

Patch Changes

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

0.8.0

Minor Changes

• #115 caff569b Thanks @didoo! - added “Link::CTA“ and “LinkTo::CTA” components

0.7.1

Patch Changes

• #184 12056051 Thanks @didoo! - Fixed issue with "click outside" in Safari for "Disclosure/Breadcrumb/Dropdown"

0.7.0

Minor Changes (Some Breaking)

• #150 c236c159 Thanks @didoo! - removed “box-sizing“ declarations from the components (we assume the consumers codebase already have set it to “border-box“ by default (🚨 Breaking)

0.6.0

Minor Changes

• #136 bce712a7 Thanks @didoo! - updated font-stack definitions in design tokens, will impact the visual aspect of all the components for certains combinations of OS/browser

Patch Changes

• Updated dependencies [c17f142c]:
  • @hashicorp/design-system-tokens@0.8.0

0.5.1

Patch Changes

• #133 6ed18c7f Thanks @didoo! - small change to the “noop“ guard in the “@didInsert“ method of the “Disclosure“ component

0.5.0

Minor Changes (Some Breaking)

• #127 fa13190f Thanks @didoo! - removed the “isDisabled“ prop from the “Button” component; added instructions for developers to manually add it themselves if needed. (🚨 Breaking)

Patch Changes

• #125 b0ff180c Thanks @didoo! - updated border radius of “Badge” from 4px to 5px

• #126 7b639915 Thanks @didoo! - updated the internal padding of the “Button” component to match design specifications

0.4.0

Minor Changes

• #117 e78f6df8 Thanks @didoo! - added a stacking context for the “Button” component so that the focus z-index is isolated in the button

0.3.2

Patch Changes

• #112 2be08081 Thanks @didoo! - added missing helpers for “color” and “typography” in “components” package

0.3.1

Patch Changes

• #98 411cd9b9 Thanks @didoo! - refactored the “focus-ring” mixins to support both “action” (default) and “critical“ colors

• Updated dependencies [411cd9b9]:

  • @hashicorp/design-system-tokens@0.7.0

0.3.0

Minor Changes

• #48 971efb9e Thanks @didoo! - Added "Breadcrumb" component

0.2.0

Minor Changes

• #76 48a82d54 Thanks @didoo! - Added the "tertiary" color variant to the "Button" component

• #77 c08711e4 Thanks @didoo! - Fixed the "elevation" treatment for the "Button" component

0.1.2

Patch Changes

• Updated dependencies [04db4d9e]:
  • @hashicorp/design-system-tokens@0.6.0