npm package: @hashicorp/design-system-components
4.21.1
Patch changes
AdvancedTable - Removed ember-math-helpers dev dependency
Form::RadioCard - Fixed styling bug where hover styles were visible when disabled
Make @ember/string a peerDependency to allow consuming apps to choose to use 3.x or 4.x. This unblocks apps that need 4.x for vite compatibility, while retaining 3.x support as well for older apps.
#3028 - Thanks @RobbieTheWagner for the contribution! 🙏
Form::SuperSelect - fix type for the @resultCountMessage argument so it can accept a string or a function.
AppSideNav::List::Link - Applied transparent background to the element to avoid overlapping with previous item's focus ring
AdvancedTable - Make the @hasResizableColumns argument optional for the ThSort component.
PopoverPrimitive - Updated type of the anchoredPositionOptions object in the setUpPrimitivePopover modifier to include arrowSelector from the hds-anchored-position modifier.
AppSideNav::List::Link - Removed extra transparent border and background when rendered as a <button> element
SideNav::List::Link - Removed extra transparent border when rendered as a <button> element
Tag - Fixed a performance issue when many tags are present on a page caused by the ResizeObserver
Dependencies - Added tracked-built-ins
#3033 - Thanks @meirish for the contribution! 🙏
AppSideNav::Panel - Fixed issue causing the focus ring of the first and last items within the Panel to be cut off
AppHeader - return close callback to the :globalActions and :utilityActions named blocks so the menu actions can be hidden programmatically when the component is in a mobile view.
Layout::Flex - Fixed issue in which gap value was improperly inherited by nested Flex components, added "0" as a supported gap value.
Layout::Grid - Fixed issue in which gap & columnMinWidth values were improperly inherited by nested Grid components, added "0" as a supported gap value.
4.21.0
Minor changes
Form - Added Form component and related sub-components for form layout
Added ember-math-helpers dependency.
AdvancedTable - Added hasResizableColumns argument. When true, allows the table's columns to be resized with both a click-and-drag and a keyboard interface.
AppHeader - Refactored the Home Link, removed the @ariaLabel argument, added @text (should replace @ariaLabel) and @isIconOnly arguments.
Form::KeyValueInputs - Added component and related sub-components.
Layout::Grid - Added @columnWidth to set "fixed" width for columns
Patch changes
Form::FileInput - Added @id and @ariaDescribedBy arguments to Form::FileInput::Base.
Form::Legend - Added @id argument.
Form::Label - Added @hiddenText argument, which adds visually hidden text inside the label.
Form::MaskedInput - Added @ariaDescribedBy argument to Form::MaskedInput::Base.
Form::Select - Added @id and @ariaDescribedBy arguments to Form::Select::Base.
Form::TextInput - Added @id and @ariaDescribedBy arguments to Form::TextInput::Base.
Form::Textarea - Added @id and @ariaDescribedBy arguments to Form::Textarea::Base.
Form::SuperSelect - Enhanced display of grouped options when only selected options are shown in the SuperSelect::Multiple
Upgraded: @nullvoxpopuli/ember-composable-helpers from 5.2.10 to 5.2.11
#2954 - Thanks @aklkv for the contribution! 🙏
🔄 Updated dependencies:
- @hashicorp/flight-icons@3.12.0
4.20.2
Patch changes
Upgraded the following dependencies:
@embroider/addon-shimfrom1.9.0to1.10.0@embroider/macrosfrom1.16.12to1.18.0@nullvoxpopuli/ember-composable-helpersfrom5.2.9to5.2.10ember-concurrencyfrom4.0.2to4.0.4ember-power-selectfrom8.6.2to8.7.1
Button - added missing types to the barrel export file
Layout::Flex - added missing types to the barrel export file
Layout::Grid - added missing types to the barrel export file
Modal - Reverted changes introduced in #2846 and #2902 related to the click behavior outside the modal when dismissing is disabled
🔄 Updated dependencies:
- @hashicorp/flight-icons@3.11.1
4.20.1
Patch changes
AdvancedTable - Fixed a bug that prevented the model from updating when the argument changes
Stepper::Nav - Updated signature to use WithBoundArgs instead of ComponentLike for contextual components to resolve linting issues
Accordion - Set aria-controls of Accordion::Item::Button to contentId from DisclosurePrimitive for a11y improvements with toggled content
DisclosurePrimitive - Changed DOM structure of content section and exposed contentId for a11y improvements with toggled content
Reveal - Set aria-controls of Reveal::Toggle to contentId from DisclosurePrimitive for a11y improvements with toggled content
Form::Field - Fixed focus order a11y issue for helper text links with @layout of flag
4.20.0
Minor changes
CodeBlock - Added height toggle control, which is present when a maxHeight is set and code content height exceeds the maxHeight value
breakpoints - Added responsive breakpoint values and helpers for responsiveness
Pagination - Replaced custom breakpoint (1000px) with standard lg (1088px) breakpoint
Stepper::Nav - Replaced custom breakpoint (550px) with standard sm (480px) breakpoint
AppHeader - Removed usage of --hds-app-desktop-breakpoint CSS variable and relied on the @breakpoint argument for override of mobile behavior
AppSideNav - Removed usage of --hds-app-desktop-breakpoint CSS variable, added @breakpoint argument, and relied on it for override of mobile behavior
Patch changes
CodeBlock - Updated signature to use WithBoundArgs instead of ComponentLike for contextual components to resolve linting issues
AppHeader - Fixed import path for hds-breakpoints
AppSideNav - Fixed import path for hds-breakpoints
#2886 - Thanks @aklkv for the contribution! 🙏
AppSideNav - Fixed bug where scrolling was blocked when the AppSideNav was expanded on desktop views. Also fixed bug which allowed user to focus links that were visually hidden.
Time - Fixed type error where the TooltipButton text could be undefined.
AppSideNav - Fixed component types for AppSideNav::Portal and AppSideNav::Portal::Target to no longer require @target or @name.
SideNav - Fixed component types for SideNav::Portal and SideNav::Portal::Target to no longer require @target or @name.
Form::Label - Forced the for HTML attribute to be converted to a string
AdvancedTable - Added @maxHeight argument, which sets the max height of the Advanced Table and automatically adds a sticky header to it. Also updated the container styles to constrain the Advanced Table width to the parent's width.
CodeBlock - Fixed issues with line numbers when line wrapping is present and when the number of lines changes dynamically; line highlighting when the Code Block is hidden from view initially such as when used inside a Tabs component; and line highlighting when hasLineNumbers is false.
Modal - Fixed bug with click event listener not properly removed
Stepper::Nav - Fixed issue in Safari with text alignment on interactive steps
CodeBlock - Added arguments @ariaLabel, @ariaLabelledBy, and @ariaDescribedBy. Added screen-reader only copy for highlighted lines.
hds-clipboard - Prevent screen-reader only text (text with the sr-only class) from being copied to the clipboard.
Introduce the hds-resolve-link-to-component utility to correctly resolve the LinkTo component when @isRouteExternal is set on HdsBreadcrumbItem or HdsInteractive. Consumers are now required to install ember-engines when @isRouteExternal is true.
#2867 - Thanks @aklkv for the contribution! 🙏
Layout::Flex - Added missing export of component/subcomponent
Layout::Grid - Added missing export of component/subcomponent
🔄 Updated dependencies:
- @hashicorp/flight-icons@3.11.0
4.19.0
Minor changes
Use luxon 3.x
#2839 - Thanks @RobbieTheWagner for the contribution! 🙏
CodeBlock - Updated focus ring colors in interactive elements to fix a11y color contrast issues
CodeEditor - Updated focus ring colors in interactive elements to fix a11y color contrast issues
SideNav - Updated focus ring colors in interactive elements to fix a11y color contrast issues
Update ember-stargate to 0.5.0
#2840 - Thanks @RobbieTheWagner for the contribution! 🙏
SideNav - Deprecated the SideNav component. Use the AppSideNav component in combination with the AppHeader component as a replacement.
AppHeader - Formally published the AppHeader component.
AppSideNav - Formally published the AppSideNav component.
SuperSelect - Updated the design to improve the experience when many items are selected.
Patch changes
Tag - Updated structure to prevent inheritance overrides for font styles
Modal - Fixed issue where conditionally disabling ability to dismiss the Modal breaks click outside to dismiss.
Dropdown - Updated Radio and Checkbox list items font weight to match other list items.
Modal - Fixed issue with focus trap when modal is displayed inline.
4.18.2
Patch changes
AdvancedTable - Improved accessibility by removing usage of aria-expanded="mixed" and moving the caption outside of the element with role="grid".
AdvancedTable - Fixed styling issues with the sticky column and scroll indicators.
hds-code-editor - Added the value and EditorView instance as arguments for the onLint callback. Added the EditorView instance as an argument to the onInput callback.
CodeEditor - Added the value and EditorView instance as arguments for the onLint callback. Added the EditorView instance as an argument to the onInput callback.
4.18.1
Minor changes
Time - Increase spacing above the dotted text decoration underline, that appears on the interactive variant, to 2px from the default.
RichTooltip - Increase spacing above the dotted text decoration underline to 2px from the default.
hds-code-editor modifier - Add extraKeys argument which supports custom keybinding
CodeEditor - Add @extraKeys argument which supports custom keybinding
Stepper::List - Added Stepper::List component and related sub-components
Stepper::Navigation - Added Stepper::Navigation component and related sub-components
Layout::Flex - Added Flex and Flex::Item components
hds-code-editor modifier - Add cspNonce argument and automate nonce detection
CodeEditor - Add cspNonce argument and automate nonce detection
AdvancedTable - Added @hasStickyFirstColumn argument and shadows to indicate to users that it is possible to scroll.
hds-code-editor modifier - Added isLintingEnabled and onLint named arguments. Linting is supported for the JSON language.
CodeEditor - Added @isLintingEnabled and @onLint arguments that are passed to the hds-code-editor modifier
Dependencies - Added @codemirror/lint
CodeBlock - Added onCopy argument which accepts a callback function that will be invoked when the "copy" action succeeds.
Layout::Grid - Added Grid and Grid::Item components
AdvancedTable - Added an expand all button to AdvancedTables with nested rows and changed the structure of the component so now nested rows are always in the DOM, even when they are not visible. To add the expand all button, add isExpandable: true to the desired column in the @columns argument.
hds-code-editor modifier - Add language syntax highlighting support for Markdown
CodeEditor - Add language syntax highlighting support for Markdown
Dependencies - added @codemirror/lang-markdown
Card - Add tag argument to choose between using a div tag (the default) or an li tag
Patch changes
Fixed multiple loading of flight icons in engines
#2799 - Thanks @RobbieTheWagner for the contribution! 🙏
SideNav - Conditionally set aria-labelledby attribute for toggle button based on if @ariaLabel argument is provided.
AdvancedTable - Refactored component to use a more declarative style
Upgraded prismjs from 1.29.0 to 1.30.0
Added @embroider/util dependency
Updated MaskedInput, TextInput, and Textarea to use ensure-safe-component helper
#2728 - Thanks @aklkv for the contribution! 🙏
AdvancedTable - Always set the select checkbox column width to min-content so it does not grow when the AdvancedTable is narrower than the container
AdvancedTable - Updated the icons used in th-button-expand component to match designs.
hds-code-editor - Attached EditorView instance to the modified element on instantiation
CodeEditor - Attached EditorView instance to the editor element (.hds-code-editor__editor)
Textarea - Fix issue with bottom margin on charcount so that a top margin is instead added to the error message, if one exists, following it
🔄 Updated dependencies:
- @hashicorp/flight-icons@3.10.0
4.17.1
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
MaskedInput - Added support for externally controlled content masking
Badge - Updated foreground and background colors to improve contrast for a11y
BadgeCount - Updated foreground color of neutral variant to improve contrast for a11y
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".
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
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
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
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
CopyButton - Fixed issue preventing copying of empty string and zero number values
CopySnippet - Fixed issue preventing copying of empty string and zero number values
CodeEditor - Fixed import path for HdsCodeEditorModifierSignature
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.
Table - Removed unused updateAriaLabel function and event listener
Tooltip - Removed style import from Tippy.js, copied arrow positioning styles into component styles
4.16.0
Minor changes
Table - Updated the visual design of Table cells by adding borders, making them more distinguishable when spanning rows or columns.
Added global tokens for border radius
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
SuperSelect - Added searchFieldPosition="before-options" to fix a11y issue in Multiple component
AdvancedTable - Added AdvancedTable component and related sub-components
Add tabbable as a dependency.
Patch changes
Upgraded the following dependencies:
@ember/render-modifiersfrom2.0.5to2.1.0@ember/addon-shimfrom1.8.7to1.9.0clipboard-polyfillfrom4.1.0to4.1.1decorator-transformsfrom1.1.0to1.2.1ember-a11y-refocusfrom4.1.3to4.1.4ember-element-helperfrom0.8.5to0.8.6ember-focus-trapfrom1.1.0to1.1.1ember-modifierfrom4.1.0to4.2.0ember-power-selectfrom8.2.0to8.6.2sassfrom1.69.5to1.83.0
Table - Fixed the aria-labels for select row and select all checkboxes so they do not change based on the state of the checkbox.
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
Tabs - Implement aria-controls in tab for a11y improvements with toggled content
Shifted our supported version of Node.js from 16* || >= 18 to >=18
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.
🔄 Updated dependencies:
- @hashicorp/design-system-tokens@2.3.0
- @hashicorp/flight-icons@3.9.0
4.15.0
Minor changes
Time - Added Time component, Time service, and related libraries (luxon 2.x or 3.x and ember-concurrency)
Table - Exposed the index of the @each loop over the @model as rowIndex
Patch changes
Dropdown - Fixed an issue with the ToggleIcon to make the focus ring visible on mouse click
PageHeader - Fixed issue with extra space below title when no metadata is present
Alert - Removed default color applied to the hds-alert__text container (text color is applied via @color argument)
Dropdown - Fixed ResizeObserver-related errors in tests
RichTooltip - Fixed ResizeObserver-related errors in tests
Upgraded @floating-ui/dom to 1.6.12
Fixed deprecated Sass syntax (map-get replaced with map.get and @import with @use)
IconTile - Updated visual design of IconTile to make it distinguishable from secondary IconButton.
Aligned private properties of the HDS modifiers to follow a standardized notation
hds-anchored-positionhds-register-eventhds-tooltip
Aligned private class properties to follow a standardized notation
AccordionAlertAppHeaderAppSideNavCodeBlockCopy::ButtonCopy::SnippetDisclosurePrimitiveDropdownFlyoutForm::SuperSelectForm::TextInputIconModalPagination::CompactPagination::NumberedPopoverPrimitiveRevealTableTabs
🔄 Updated dependencies:
- @hashicorp/design-system-tokens@2.2.2
- @hashicorp/flight-icons@3.8.0
4.14.0
Minor changes
Dropdown - Added @matchToggleWidth argument
hds-clipboard - Added clipboard-polyfill to support product usage in non-secure environments; this impacts Copy::Button, Copy::Snippet, CodeBlock, and MaskedInput
Patch changes
SideNav - Made a11y related improvements including:
- Changed
List::Titleto h3 & added visually hidden h2 to AppSideNav - Replaced aria-label for
ToggleButtonwith aria-labelledby and aria-expanded
Fixed instances where arguments are passed into tracked properties at declaration:
MaskedInputTextInputPagination::CompactPagination::NumberedSideNavTableTable::ThSelectableTabs
SideNav - Fixed bug with hidden panels sometimes causing unnecessary overflow scrolling
Dropdown - Fixed the height of the chevron in ToggleButton
4.13.1
Patch changes
Hds::Flyout
- Fixed error in
DescriptionandBodysubcomponents, caused by not passing theargsargument from the constructor tosuper
Hds::Modal
- Fixed error in
Bodysubcomponent, caused by not passing theargsargument from the constructor tosuper
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"
4.13.0
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
CodeBlock - Added @lineNumberStart option to set custom starting number for line numbering
SuperSelect::Multiple - Added @resultCountMessage argument to enable override
Patch changes
Dropdown
- Fixed content being preserved in the DOM when closed
- Removed the
@isOpenyielded argument - Added
@preserveContentInDomto optionally control rendering of the content
Modal - Fixed isDismissDisabled functionality
Flyout - Removed isDismissDisabled from signature (not an actual argument)
SuperSelect - Update the the default state of selected list items to Foreground / Primary to match other list items and the Dropdown.
SuperSelect::Multiple - Fixed placeholder style and layout
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).
CodeBlock - Decoupled the display of line numbers from highlightLines
Dropdown - Fixed dropdown content not being preserved when interacted with
Upgraded ember-style-modifier to 4.4.0
🔄 Updated dependencies:
- @hashicorp/flight-icons@3.7.0
4.12.0
Minor changes
Dropdown - Made the isOpen state available in the yielded block
Patch changes
IconTile - Fixed @color argument type signature
Interactive - Aligned types with LinkTo
DialogPrimitive - Fixed issue with box-sizing inheritance
Modal/Flyout - Updated box-sizing inheritance via DialogPrimitive fix
Upgraded eslint-plugin-ember to 12.2.0
AppFooter, AppFrame, SideNav - refactored subcomponents to use TemplateOnlyComponent instead of empty classes.
RadioCard
- Fixed selected border colors to match Figma and interactive states.
- Updated icon, label, and description colors to use
disabled-foregroundwhen theRadioCardis disabled.
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.
Removed ember-keyboard dependency
Tabs - Fixed signatures for subcomponents
Table - Fixed signatures for subcomponents
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
DialogPrimitive - added a guard so the yielded close function is always defined
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
Fixed issue with icon sprite not initiated
#2433 - Thanks @aklkv for the contribution! 🙏
4.11.0
Minor changes
Hds::Table
- Added
@selectableColumnKeyargument which enables sorting by row selection state and specifies the corresponding selection state key.
Hds::Table::Tr
- Added
@selectableColumnKeyargument which enables sorting by row selection state and specifies the corresponding selection state key. - Added
@sortBySelectedOrderargument which determines the state of the sort button in the selected item column. - Added
@onClickSortBySelectedargument which is the callback for the sort button in the selected item column.
Hds::Table::ThSelectable
- Added
@onClickSortBySelectedargument which is the callback for the sort button in the selected item column. - Added
@sortBySelectedOrderargument which determines the state of the sort button in the selected item column.
Patch changes
SideNav: remove usage of Ember.testing because it is deprecated.
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.
Dropdown, RadioCard, SuperSelect, Stepper, Table - Fixed optional arguments in signatures
Dropdown::Toggle::Chevron - fix subcomponent signature
hds-clipboard modifier - extend error when copy action fails
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@onPageChangeto control routing.
🔄 Updated dependencies:
- @hashicorp/flight-icons@3.6.0
4.10.0
Minor changes
SuperSelect - Converted components to TypeScript
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
simplify components reexports and add types reexports
- update
HdsCardreexport to reflect correct component nameHdsCardContainer
#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
NavigationNarratorwith associated arguments to provide a "skip link".
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
Hds::Pagination - Converted component to Typescript
Hds::SideNav::Header::IconButton - Deprecate the component. Use the Hds::Button component with isIconOnly set to true as a replacement.
Dropdown::ListItem::Interactive
- Adds a yielded block.
- Yields the
Hds::Badgecomponent. - Deprecates the
@textargument.
New codemod: v4/dropdown-list-item-interactive
- Converts
Dropdown::ListItem::Interactive@textarguments to content within a yielded block.
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>
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
AppFrame:
- Modified sticky/fixed position to turn off when viewport height is under 480px in height
- Refactored styles to make
AppFrameresponsible for sticky/fixed layout ofSideNavandAppHeader
AppHeader:
- Styled inoperable actions as disabled (which occurs when the
SideNavis expanded in mobile view)
SideNav:
- Removed the
withAppHeaderoption as it is no longer needed.
Table - Converted component and sub-components to TypeScript
Patch changes
DismissButton, RadioCard::Group, RichTooltip::Toggle - Type safety fixes
SideNav & AppHeader - Fixed styling issue to prevent Button and Dropdown nested within another Dropdown from inheriting dark theme.
AppHeader - Fixed issue with mobile menu to prevent tabbing to hidden content and hiding it from assistive technology when closed.
Breadcrumb: fix background hover color for Breadcrumb::Truncation
Update ember-a11y-refocus to 4.1.3
Accordion: changed the default name of the Accordion item toggles. Now, they are labelled by the content in the Accordion title.
BadgeCount: updated the color tokens to use palette tokens.
Badge: update the color tokens to use palette tokens.
Stepper::Indicator::Task: Updated palette tokens to use semantic tokens.
Migrated all internal instances of FlightIcon to Hds::Icon
🔄 Updated dependencies:
- @hashicorp/design-system-tokens@2.2.1
4.9.0
Minor changes
Icon - Added component:
Hds::Icon is meant to replace usage of the FlightIcon component from ember-flight-icons.
- Displays
blockby default. (FlightIcondisplaysinline-blockby default) - Exposes a set of predefined "foreground" colors via the
@colorargument
CodeBlock: Converted component to TypeScript
TooltipButton: Converted component to TypeScript
4.8.0
Minor changes
AppHeader - Added new component.
SideNav - Added new withAppHeader option.
Dropdown - Converted component to TypeScript
MenuPrimitive - Converted component to TypeScript
TooltipModifier - Converted modifier to TypeScript
Breadcrumb - Converted component to TypeScript
ApplicationState:
- Spacing and alignment updates
- New
@align(left(default),center) argument for aligning content - Added new yielded
Mediachild component
ApplicationState::Header:
- The header now supports an optional
@titleTagargument that can override the default title element (div)
ApplicationState::Footer:
- The footer now yields
ButtonandDropdowncomponents as well asLinkStandalone - The visual separator has been removed to modernize the component’s visual look
SegmentedGroup - Converted component to TypeScript
Patch changes
Add explicit ember-get-config dependency for use in the icon sprite initializer
🔄 Updated dependencies:
- @hashicorp/design-system-tokens@2.2.0
4.7.0
Minor changes
FileInput, MaskedInput, Select, TextInput, Textarea - Converted to TypeScript
Loads the hds-icon sprite in the components package, and ensures it is only loaded once.
Form::TextInput - added support for "month", "week", and "tel" input types
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.
Modal: Converted component to TypeScript
Converted form primitives to TypeScript
Checkbox, Radio, RadioCard, Toggle - Converted components to TypeScript
Flyout: Converted component to TypeScript
DialogPrimitive - Converted component to TypeScript
Patch changes
Badge: updated @text argument type to include numbers.
🔄 Updated dependencies:
- @hashicorp/flight-icons@3.5.0
- @hashicorp/ember-flight-icons@5.1.3
npm package: @hashicorp/design-system-tokens
2.3.0
Minor changes
Added global tokens for border radius
2.2.2
Patch changes
Upgraded style-dictionary to 4.2.0
2.2.1
Patch changes
Updated design tokens for Vagrant primary gradient to match Figma.
2.2.0
Minor changes
AppHeader - Added design tokens:
--token-app-header-height--token-app-header-home-link-size--token-app-header-logo-size
2.1.0
Minor changes
Added new pipeline to Style Dictionary for cloud-email - email/sass-variables to be used in email templating
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)
1.11.0
Minor changes
Updated vault, vault-secrets, and vault-radar brand color values
Added design token for terraform-brand-on-dark color
1.10.0
Minor changes
Added color tokens for “Vault Radar” product
1.9.0
Minor changes
Added design tokens for SideNav with @isCollapsible (to control if users can collapse the sidenav on 'desktop' viewports) and @isMinimized (to control the default state on 'desktop' viewports) arguments
1.8.0
Minor changes
Added color tokens for “Vault Secrets” product
1.7.0
Minor changes
Added JSON output format for marketing target (and in the process refactored internal logic for tokens generation)
#1513 - Thanks @dstaley for the contribution! 🙏
1.6.0
Minor changes
Added design token for loading state icon on search input
1.5.0
Minor changes
- Added new
TooltipButtoncomponent andhds-tooltipmodifier - Added design tokens for
Tooltip
1.4.2
Patch changes
Added design tokens for SideNav component
1.4.1
Patch changes
- Scoped group layout styles to nested child components.
- Fixed bug with
--token-pagination-child-spacing-verticalvalue so that it adds "px" unit.
1.4.0
Minor changes
Added design tokens for Pagination component
1.3.1
Patch changes
Updated design system name to "Helios"
1.3.0
Minor changes
Added design tokens for indeterminate Checkbox
1.2.0
Minor changes
#629
a079992fThanks @didoo! - added component-level design tokens forTabscomponent#646
ecbe26dfThanks @jorytindall! - Updated the box-shadow values for overlay tokens.
Patch changes
- #636
27a283a5Thanks @Dhaulagiri! - Add copyright notice to license file
1.1.0
Minor changes
npm package: @hashicorp/flight-icons
3.12.0
Minor changes
move-horizontal and resize-column icons added.
3.11.1
Patch changes
Removed extra space in PingID name, and updated description.
3.11.0
Minor changes
start, end, and text-wrap icons added. Fixed the vertical alignment of top and bottom.
3.10.0
Minor changes
duo and ping-identity service icons added.
3.9.0
Minor changes
confluence and confluence-color icons added.
3.8.0
Minor changes
Postgres service icon added.
3.7.0
Minor changes
Confluent icon added
Updated okta and okta-color to reflect updated branding.
3.6.0
Minor changes
bucket icon added.
3.5.0
Minor changes
mongodb and twilio icons have been added.
3.4.0
Minor changes
service-now and pager-duty icons added.
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
3.3.0
Minor changes
vagrant, vagrant-color, vagrant-fill, vagrant-fill-color, vagrant-square, vagrant-square-color icons were updated per brand changes.
3.2.0
Minor changes
Added two icon logos: minio and git.
sparkle icon added
3.1.0
Minor changes
Reorganized the icons within the "Core" icon set into 16 more descriptive categories.
Patch changes
Added "category" to the icons' metadata in the catalog.json file.
3.0.0
Major changes
vagrant, vault-radar, and vault-secrets icons have been updated. Also added boxed versions of all product logos.
2.25.0
Minor changes
vault-radar icons added. vault-secrets icons updated per Brand guidance.
2.24.0
Minor changes
rabbitmq, openid, jwt, meetup, and transform-data icons added.
2.23.0
Minor changes
accessibility, channel, minus-circle-fill, plus-circle-fill icons added.
Fixed the size and position of the plus-circle icon.
2.22.0
Minor changes
Added IconName type to iconNames export
#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-staticrunning-static
Added new set of icons for Google services:
google-docsgoogle-formsgoogle-slidesgoogle-sheetsgoogle-drive
Components library
Figma library: HDS Components UI Kit v2.0
July 2nd, 2025
This changelog corresponds with the 4.21 release.
KeyValueInputs - Added new [Template] component.
Form / Layout - Added new Form Layout [Template] component.
AppHeader - Added text property to the home link.
AdvancedTable - Added support for resizing columns, restructured the component to support functions within a context menu.
June 4th, 2025
This changelog corresponds with the 4.20 release.
CodeBlock - Added height toggle for overflowing code.
Breaking changes
AppHeader - Multiple changes include:
- Refactored the component to support a list coupled with the context switcher
- Reorganized the local component dependencies
- Updated the focus ring to use dark variables
May 7th, 2025
This changelog corresponds with the 4.19 release.
AppHeader and AppSideNav - Components added.
AdvancedTable [Template] - Multi-select column added.
CodeBlock, CodeEditor, SideNav - Updated styling for the focus ring.
SuperSelect::Multiple - Multiple design improvements including:
- Displaying a selected number in the trigger when not empty.
- Correcting truncation of tags to maintain the trigger height.
Select, TextInput, TextArea, and MaskedInput - Fixed the overflow to not extend beyond the container or wrap, which mirrors the overflow behavior in the browser.
RadioCard - Fixed a bug in the border setting.
Dropdown - Radio and Checkbox list items updated to match font weight.
SideNav - Deprecated the component. Use the AppHeader and AppSideNav instead.
April 24th, 2025
Button, StandaloneLink, Breadcrumb, Table Primitives - Removed interactive component variants
Unpublished all local variables for component-level tokens.
April 2nd, 2025
StepperList and StepperNav - Components added.
AdvancedTable - Multiple enhancements including:
- Added support for expanding and collapsing all rows.
- Added support for a sticky column in the [Template] components.
CodeBlock and CodeEditor - Improved the color contrast in the focus ring.
March 5th, 2025
CodeEditor - Added support for Javascript and Rego languages.
Badge - Updated colors for improved contrast and accessibility.
Tag - Updated to support truncation and tooltip. Content no longer wraps.
Advanced Table - Removed an unnecessary border from Header::Selection.
Breaking changes
Advanced Table - Restructured Cell::Selection to mimic the Table::Cell::Selection component.
This change alters the layer structure of the component and results in a breaking change for the Advanced Table cell "selection" components only.
January 23rd, 2025
Advanced Table - Added new component.
CodeEditor - Added new component.
Table - Added column borders.
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.
SideNav - No longer deprecated due to adjustments in prioritization.
Figma v2.0 Components
- Deprecated HDS Components UI Kit v1.0. It will no longer receive updates or support.
- Released HDS components UI Kit v2.0.
In many cases, replacing v1.0 library components with the components in the Figma v2.0 Library will result in breaking changes. For a comprehensive list of how these changes will impact your designs, refer to the changelog document.
General changes
- Improved consistency in component naming conventions
- Enhanced property panel customization options
- Reduced variant complexity through boolean properties
- Added local tokens for custom styling (hidden from publishing)
- Standardized nested component structure
Component organization updates
- Standardized naming conventions, nested structures, and boolean property usage to reduce complexity.
- Updated organization with "Form /" prefixes and DialogPrimitive as the base for modal components.
- Introduced [Template] components for common combinations.
- Improved nested component accessibility for easier customization.
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
alignmentproperty which can be set at the root level toleftorcenter. - 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/BoldtoDisplay/300/Bold - Changing the icon and the title color from
Foreground/FainttoForeground/Strong - Changing the body text color from
Foreground/FainttoForeground/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 / SelectionandCell / Selection. - Added support for a
Tooltipin theHeader Columncomponent. - Updated the visual language of the sort button in
Header Columnby decoupling the sort functionality into a nestedSort 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.
Foundations library
Figma library: HDS Foundations UI Kit v2.0
June 4, 2025
Breakpoints - Added new variables for each breakpoint including:
sm: 480md: 768lg: 1088xl: 1440xxl: 1920
April 2nd, 2025
Typography - Added font weight variables to each type style.
December 20th, 2024
- Deprecated HDS Foundations UI Kit v1.0. It will no longer receive updates or support.
- Released HDS Foundations UI Kit v2.0.
Migrating Figma designs from the v1.0 library to the v2.0 library mainly requires replacing Figma Styles with Variables and is considered a breaking change. A comprehensive list of how these changes will impact your designs can be found in the changelog document.
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.
Patterns library
Figma library: HDS Patterns UI Kit
June 4th, 2025
Application Template - Updated to include each of the breakpoints for their widths.
May 9th, 2025
This changelog corresponds with the 4.19 release.
Application Template - Updated to use the Enterprise Navigation components; AppHeader and AppSideNav.
December 20th, 2024
Released HDS Patterns UI Kit v2.0.
Utility libraries
Figma library: Utility libraries
September 25th, 2024
Released HDS Utilities UI Kit
September 12th, 2024
Released HDS Wireframes UI Kit
August 30th, 2024
Released HDS A11y Helper Annotations Kit