npm package: @hashicorp/design-system-components
4.24.1
Patch changes
CodeBlock - Fixed a11y issue with its CopyButton by adding copySuccessMessageText parameter to an aria-live region to announce to screen readers when content has been copied
CopyButton - Fixed a11y issue by adding ariaMessageText parameter to an aria-live region to announce to screen readers when content has been copied
FileInput - Added width of 100% to prevent the component from overflowing its container and making it consistent with other Input components
Button - Fixed color inheritance for Buttons within DialogPrimitive based components (such as the Modal and Flyout) when triggered from within the SideNav or AppHeader
SideNav - Fixed color inheritance for Buttons within DialogPrimitive based components (such as the Modal and Flyout) when triggered from within the SideNav
AppHeader - Fixed color inheritance for Buttons within DialogPrimitive based components (such as the Modal and Flyout) when triggered from within the AppHeader
AppFooter - Updated company name in copyright text
SuperSelect - Fixed issue with tabbing to SuperSelectMultiple with search enabled by adding tabindex of "0"
Modal - Refactored the component to not use ember-render-modifiers which fixes issues where the DOM may not be cleaned up when the Modal is closed.
Flyout - Refactored the component to not use ember-render-modifiers which fixes issues where the DOM may not be cleaned up when the Flyout is closed.
SuperSelect - Fixed color style for disabled option items.
🔄 Updated dependencies:
- @hashicorp/flight-icons@3.14.0
4.24.0
Minor changes
PopoverPrimitive - Added support for dynamic swap/injection of the toggle element.
AdvancedTable - Added support for column reordering.
- Added
@hasReorderableColumnsargument. When set totrue, enables column reordering. - Added optional
@columnOrderargument for setting the initial order of columns by their keys. - Added optional
@onColumnReorderargument which accepts a callback function that is called when reordering is completed. - Added optional
@reorderedMessageTextwhich overrides the default message text that is rendered in the table caption when a column is reordered.
Patch changes
Table - Update the model and returned B.data to use generic types, so the type of the data is retained.
KeyValueInputs - Update the data and returned R.rowData to use generic types, so the type of the data is retained.
#3150 - Thanks @aklkv for the contribution! 🙏
🔄 Updated dependencies:
- @hashicorp/design-system-tokens@3.0.0
4.23.1
Patch changes
Stepper::Nav - Fixed bug with stacking context styles causing step content's z-index to not work as expected
🔄 Updated dependencies:
- @hashicorp/design-system-tokens@2.3.1
4.23.0
Minor changes
CodeEditor - Added a cspNonce argument which passes a value of the same name to the hds-code-editor modifier. cspNonce is used to add a nonce value to the style tag
Time - removed deprecated @task decorator to avoid warnings
#3144 - Thanks @aklkv for the contribution! 🙏
Card - Updated all exported types to use template literals instead of enum values.
IconTile - Updated exported HdsIconTileColors type to use template literals instead of enum values.
AdvancedTable - Added features and fixed issues for column pinning including:
- Added support for pinning first column in context menu
- Translated template strings in context menu
- Fixed style for scroll indicator when first column is sticky and has a px width
AdvancedTable - Fixed bug with automatic column resizing and scroll-shadow placement.
AppHeader - return close callback to the :logo named block so the menu actions can be hidden programmatically when the component is in a mobile view.
Patch changes
AdvancedTable - simplified AdvancedTable::Tr type signature so the @selectionKey argument is not incorrectly marked as required.
PopoverPrimitive - Updated the type of the hidePopover callback to allow an optional event to be passed.
RichTooltip - Updated the type of the close callback to allow an optional event to be passed.
Dropdown - Updated the type of the close callback to allow an optional event to be passed and to make it always returned.
AppHeader - Fixed classname so that non-active controls in the AppHeader will be styled as disabled when the AppSideNav is expanded and in overlay mode
Button - Removed CSS declaration for pseudo element in disabled state
Dropdown - Removed CSS declaration for pseudo element in disabled state
FileInput - Removed CSS declaration for pseudo element in disabled state that led to invalid CSS (ignored by browsers)
🔄 Updated dependencies:
- @hashicorp/flight-icons@3.13.0
4.22.1
Patch changes
AdvancedTable - Fixed styles for right and center aligned cells.
AppFrame - Changed media query styles for frame header and sidebar containers to use level 3 vs level 4 CSS syntax
4.22.0
Minor changes
Added ember-intl as a dependency
- Added
hdsIntlservice for translations in HDS components with default fallback values - Added
hds-thelper which uses thehds-intlservice to provide translations in HSD templates
AdvancedTable - Translated template strings. Removed extraneous screen-reader-only text.
AppFooter - Translated template strings
AppSideNav - Translated template strings
ApplicationState - Translated template strings
CodeEditor - Translated template strings
DismissButton - Translated template strings
MaskedInput - Translated template strings
SuperSelect - Translated template strings
Pagination - Translated template strings
SideNav - Translated template strings
Table - Translated template strings
Time - Translated template strings
Reveal - Added support for the aria-describedby attribute on the toggle.
Patch changes
AppHeader - Changed the default breakpoint from lg to md.
Stepper::List - Fixed type for status argument in List::Step to be HdsStepperStatuses instead of enum HdsStepperStatusesValues
AdvancedTable::Tr - Updated @isSelected argument type from false to boolean
Table::Tr - Updated @isSelected argument type from false to boolean
CodeEditor - Fixed the type of the CodeEditor signature to indicate that the [CE].Title and [CE].Description have bound arguments.
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
npm package: @hashicorp/design-system-tokens
3.0.0
Major changes
Upgraded Style Dictionary to version 5
- Updated format of the
srcJSON tokens files to use the community standard DTCG format - Updated the tokens pipeline scripts to use the new format
Note: this is only a breaking change for consumers who use the src files to generate their own design tokens. For consumers using the design tokens in their compiled format, directly or via the @hashicorp/design-system-components package, this change will have no impact at all.
2.3.1
Patch changes
cloud-ui/email - Fixed CSS helpers for "elevation" styles
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
npm package: @hashicorp/flight-icons
3.14.0
Minor changes
Added openstack and openstack-color icons.
jenkins and jenkins-color icons added.
3.13.0
Minor changes
pin-off icon added.
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! 🙏
Components library
Figma library: HDS Components UI Kit v2.0
October 1st, 2025
This changelog corresponds with the 4.24 release.
AdvancedTable - Added support for reordering columns.
StepperNav - Fixed a bug that was preventing the progress line from scaling property.
Form / Layout - Updated the order of actions to correspond with button organization guidelines.
SuperSelect / Multiple - Added Separator and GroupTitle list items to the component.
September 4th, 2025
This changelog corresponds with the 4.23 release.
AdvancedTable - Added support for toggling pinning the first column in context menu and fixed visual bug for focus state for the table cells.
AppHeader - Added size property for breakpoint definition.
August 7th, 2025
This changelog corresponds with the 4.22 release.
Modal - Fixed a color inheritance bug for the tagline.
SuperSelect - Updated the tags to better reflect the Ember component functionality. Added missing boolean property for helper text.
Tab - Fixed an auto layout bug to correct indicator length for longer text.
RadioCard - Fixed a color override bug for the icons within each card.
Form Primitives - Added a text property for the number/count in CharacterCount.
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.
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
August 7th, 2025
Description List - Added a new Template to standardize how key-value pairs are displayed.
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