Hashicorp Design System Versions Save

Helios Design System

@hashicorp/[email protected]

1 month ago

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! 🙏

@hashicorp/[email protected]

1 month ago

This version is a re-release of @hashicorp/[email protected] containing the missing pre-compiled CSS

@hashicorp/[email protected]

1 month ago

[!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

@hashicorp/[email protected]

1 month ago

Minor Changes

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

#1965

@hashicorp/[email protected]

1 month ago

Minor Changes

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

#1986

Patch Changes

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

#1967

@hashicorp/[email protected]

1 month ago

Patch Changes

🔄 Updated dependencies:

@hashicorp/[email protected]

1 month ago

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/[email protected]

2 months ago

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

@hashicorp/[email protected]

2 months ago

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 @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/[email protected]

2 months ago

Major Changes

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

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

#1937