@hashicorp/design-system-components@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

@hashicorp/design-system-tokens@2.2.1

Patch Changes

Updated design tokens for Vagrant primary gradient to match Figma.

#2366

@hashicorp/design-system-components@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

@hashicorp/design-system-codemods@0.4.0

Minor Changes

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

@hashicorp/design-system-components@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

@hashicorp/design-system-codemods@0.3.0

Minor Changes

v4/icon

Adds a codemod for converting FlightIcon components to Hds::Icon components

See README for details

#2207

@hashicorp/design-system-tokens@2.2.0

Minor Changes

AppHeader - Added design tokens:

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

#2161

@hashicorp/design-system-components@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

@hashicorp/flight-icons@3.5.0

Minor Changes

mongodb and twilio icons have been added.

#2260

@hashicorp/ember-flight-icons@5.1.3

Patch Changes

🔄 Updated dependencies:

• @hashicorp/flight-icons@3.5.0