@hashicorp/design-system-components 3.3.0 → 3.4.1

package/CHANGELOG.md

@@ -1,14 +1,89 @@
 # @hashicorp/design-system-components
 
+## 3.4.1
+
+### Patch Changes
+
+`Modal` - Removed `close` event listener on destroy
+`Flyout` - Removed `close` event listener on destroy
+
+<small class="doc-whats-new-changelog-metadata">[#1887](https://github.com/hashicorp/design-system/pull/1887)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`CodeBlock` - Fixed issues with dynamic content, compile warning, and line number alignment
+
+<small class="doc-whats-new-changelog-metadata">[#1853](https://github.com/hashicorp/design-system/pull/1853)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`SegmentedGroup` - Fixed issue with border-radius of single child element being overridden
+
+<small class="doc-whats-new-changelog-metadata">[#1892](https://github.com/hashicorp/design-system/pull/1892)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+## 3.4.0
+
+### Minor Changes
+
+`Button` - Added `@isInline` argument
+
+<small class="doc-whats-new-changelog-metadata">[#1854](https://github.com/hashicorp/design-system/pull/1854)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Table` - Added support for `baseline` vertical alignment
+
+<small class="doc-whats-new-changelog-metadata">[#1861](https://github.com/hashicorp/design-system/pull/1861)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+### Patch Changes
+
+`AppFooter` - Changed visual alignment from right-aligned to centered.
+
+<small class="doc-whats-new-changelog-metadata">[#1867](https://github.com/hashicorp/design-system/pull/1867)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Tooltip` - Fixed issue with text alignment, which was inherited from the parent container (now it's always left aligned).
+
+<small class="doc-whats-new-changelog-metadata">[#1869](https://github.com/hashicorp/design-system/pull/1869)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Tabs` - Fixed subcomponents' backing-class names
+
+<small class="doc-whats-new-changelog-metadata">[#1883](https://github.com/hashicorp/design-system/pull/1883)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`AppFooter` - Updated default accessibility URL to https://hashicorp.com/accessibility
+
+<small class="doc-whats-new-changelog-metadata">[#1811](https://github.com/hashicorp/design-system/pull/1811)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Form::Fieldset` as consumed by `Form::Checkbox::Group`, `Form::Radio::Group`, `Form::RadioCard::Group`, and `Form::Toggle::Group` - Changed spacing between `legend` and content from 4px to 8px
+
+<small class="doc-whats-new-changelog-metadata">[#1856](https://github.com/hashicorp/design-system/pull/1856)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+**🔄 Updated dependencies:**
+
+- @hashicorp/ember-flight-icons@4.0.5
+
 ## 3.3.0
 
 ### Minor Changes
 
-`Hds::Form::CharacterCount` - Added new component
-`Hds::Form::Field` - Added `CharacterCount` contextual component
-`Hds::Form::MaskedInput::Field` - Added `CharacterCount` contextual component
-`Hds::Form::TextInput::Field` - Added `CharacterCount` contextual component
-`Hds::Form::Textarea::Field` - Added `CharacterCount` contextual component
+`Form::CharacterCount` - Added new component
+`Form::Field` - Added `CharacterCount` contextual component
+`Form::MaskedInput::Field` - Added `CharacterCount` contextual component
+`Form::TextInput::Field` - Added `CharacterCount` contextual component
+`Form::Textarea::Field` - Added `CharacterCount` contextual component
 
 <small class="doc-whats-new-changelog-metadata">[#1802](https://github.com/hashicorp/design-system/pull/1802)</small>
 
@@ -16,11 +91,11 @@
 
 ### Patch Changes
 
-`Button` - updated DOM structure to contain only `span` elements
+`Button` - Updated DOM structure to contain only `span` elements
 
-`Dropdown` - updated button elements DOM structure to contain only `span` elements
+`Dropdown` - Updated button elements DOM structure to contain only `span` elements
 
-`Link::Standalone` - updated DOM structure to contain only `span` elements
+`Link::Standalone` - Updated DOM structure to contain only `span` elements
 
 <small class="doc-whats-new-changelog-metadata">[#1840](https://github.com/hashicorp/design-system/pull/1840)</small>
 
@@ -36,9 +111,9 @@
 
 <div class="doc-whats-new-changelog-separator"></div>
 
-`Hds::Table` - updated `@columns` object to support `isVisuallyHidden` argument
+`Table` - Updated `@columns` object to support `isVisuallyHidden` argument
 
-- `Hds::Table::Th` - updated to support `isVisuallyHidden` argument
+- `Table::Th` - Updated to support `isVisuallyHidden` argument
 
 <small class="doc-whats-new-changelog-metadata">[#1819](https://github.com/hashicorp/design-system/pull/1819)</small>
 
@@ -147,7 +222,7 @@ Upgraded the following dependencies:
 
 ### Patch Changes
 
-explicitly added `ember-element-helper` as dependency for the `components` package
+Explicitly added `ember-element-helper` as dependency for the `components` package
 
 <small class="doc-whats-new-changelog-metadata">[#1751](https://github.com/hashicorp/design-system/pull/1751)</small>
 
@@ -165,33 +240,33 @@ explicitly added `ember-element-helper` as dependency for the `components` packa
 
 ### Major Changes
 
-Drop support for Node 14
+Dropped support for Node 14
 
 <small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
 <div class="doc-whats-new-changelog-separator"></div>
 
-`Hds::Form::VisibilityToggle` - Added component as a form base element
+`Form::VisibilityToggle` - Added component as a form base element
 
-`Hds::Form::TextInput::Field` - Added `Hds::Form::VisibilityToggle` to password inputs (controlled via `@hasVisibilityToggle` - Notice that this is set to be visible by default now)
+`Form::TextInput::Field` - Added `Form::VisibilityToggle` to password inputs (controlled via `@hasVisibilityToggle` - Notice that this is set to be visible by default now)
 
-`Hds::Form::MaskedInput` - Refactored to use `Hds::Form::VisibilityToggle`
+`Form::MaskedInput` - Refactored to use `Form::VisibilityToggle`
 
-`Hds::Form::MaskedInput` - Renamed `@isMasked` to `@isContentMasked`
+`Form::MaskedInput` - Renamed `@isMasked` to `@isContentMasked`
 
 To migrate:
 
-- in `Hds::Form::MaskedInput` instances replace `@isMasked` arguments with `@isContentMasked`
+- in `Form::MaskedInput` instances replace `@isMasked` arguments with `@isContentMasked`
 
 <small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
 <div class="doc-whats-new-changelog-separator"></div>
 
-`Hds::Dropdown` – Removed `@listPosition` `left` and `right` (use `bottom-left` and `bottom-right`, respectively).
+`Dropdown` – Removed `@listPosition` `left` and `right` (use `bottom-left` and `bottom-right`, respectively).
 
 To migrate:
 
-- in `Hds::Dropdown` instances:
+- in `Dropdown` instances:
   - replace `@listPosition="left"` with `@listPosition="bottom-left"`
   - replace `@listPosition="right"` with `@listPosition="bottom-right"`
 
@@ -203,7 +278,7 @@ To migrate:
 
 To migrate:
 
-- rename all the `extraBefore/After` instances yielded within the `<Hds::SideNav>` component to `ExtraBefore/After`
+- rename all the `extraBefore/After` instances yielded within the `SideNav` component to `ExtraBefore/After`
 
 <small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 

package/addon/components/hds/app-footer/legal-links.js

@@ -60,7 +60,8 @@ export default class HdsAppFooterLegalLinksComponent extends Component {
    */
   get hrefForAccessibility() {
     return (
-      this.args.hrefForAccessibility ?? 'mailto:accessibility@hashicorp.com'
+      this.args.hrefForAccessibility ??
+      'https://www.hashicorp.com/accessibility'
     );
   }
 }

package/addon/components/hds/button/index.ts

@@ -26,6 +26,7 @@ export interface HdsButtonSignature {
     icon?: string;
     iconPosition?: HdsButtonIconPosition;
     isIconOnly?: boolean;
+    isInline?: boolean;
     isFullWidth?: boolean;
   };
   Element: HdsInteractiveSignature['Element'];
@@ -165,9 +166,6 @@ export default class HdsButtonIndexComponent extends Component<HdsButtonSignatur
   get classNames() {
     let classes = ['hds-button'];
 
-    // add a class based on the @size argument
-    classes.push(`hds-button--size-${this.size}`);
-
     // add a class based on the @color argument
     classes.push(`hds-button--color-${this.color}`);
 
@@ -176,11 +174,19 @@ export default class HdsButtonIndexComponent extends Component<HdsButtonSignatur
       classes.push('hds-button--width-full');
     }
 
-    // add a class if it's icon-only
+    // add a class based on isIconOnly argument
     if (this.isIconOnly) {
       classes.push('hds-button--is-icon-only');
     }
 
+    // add a class based on the @isInline argument
+    if (this.args.isInline) {
+      classes.push('hds-button--is-inline');
+    }
+
+    // add a class based on the @size argument
+    classes.push(`hds-button--size-${this.size}`);
+
     return classes.join(' ');
   }
 }

package/addon/components/hds/code-block/index.hbs

@@ -9,19 +9,16 @@
     {{~yield (hash Description=(component "hds/code-block/description"))~}}
   </div>
   <div class="hds-code-block__body">
+    {{! content within pre tag is whitespace-sensitive; do not add new lines! }}
     <pre
       class="hds-code-block__code"
       {{style maxHeight=@maxHeight}}
       data-line={{@highlightLines}}
       id={{this.preCodeId}}
       tabindex="0"
-    >
-      {{~! ~}}
-      <code {{did-insert this.setPrismCode}} {{did-update this.setPrismCode this.code @language}}>
+    ><code {{did-insert this.setPrismCode}} {{did-update this.setPrismCode this.code @language}}>
         {{~this.prismCode~}}
-      </code>
-      {{~! ~}}
-    </pre>
+      </code></pre>
 
     {{#if @hasCopyButton}}
       <Hds::CodeBlock::CopyButton @targetToCopy="#{{this.preCodeId}}" aria-describedby={{this.preCodeId}} />

package/addon/components/hds/code-block/index.js

@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
+import { next, schedule } from '@ember/runloop';
 import { htmlSafe } from '@ember/template';
 import { guidFor } from '@ember/object/internals';
 
@@ -107,27 +108,30 @@ export default class HdsCodeBlockIndexComponent extends Component {
     const grammar = Prism.languages[language];
 
     if (code) {
-      if (language && grammar) {
-        this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
-      } else {
-        this.prismCode = htmlSafe(Prism.util.encode(code));
-      }
-
-      // Force prism-line-numbers plugin initialization, required for Prism.highlight usage
-      // See https://github.com/PrismJS/prism/issues/1234
-      Prism.hooks.run('complete', {
-        code,
-        element,
+      next(() => {
+        if (language && grammar) {
+          this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
+        } else {
+          this.prismCode = htmlSafe(Prism.util.encode(code));
+        }
+
+        // Force prism-line-numbers plugin initialization, required for Prism.highlight usage
+        // See https://github.com/PrismJS/prism/issues/1234
+        Prism.hooks.run('complete', {
+          code,
+          element,
+        });
+
+        // Force prism-line-highlight plugin initialization
+        // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
+        if (this.args.highlightLines) {
+          // we need to delay re-evaluating the context for prism-line-highlight for as much as possible, and `afterRender` is the 'latest' we can use in the component lifecycle
+          schedule('afterRender', () => {
+            // we piggy-back on the plugin's `resize` event listener to trigger a new call of the `highlightLines` function: https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L337
+            if (window) window.dispatchEvent(new Event('resize'));
+          });
+        }
       });
-
-      // Force prism-line-highlight plugin initialization
-      // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
-      if (this.args.highlightLines) {
-        setTimeout(() => {
-          // we piggy-back on the plugin's `resize` event listener to trigger a new call of the `highlightLines` function: https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L337
-          if (window) window.dispatchEvent(new Event('resize'));
-        }, 100);
-      }
     }
   }
 

package/addon/components/hds/flyout/index.hbs

@@ -7,6 +7,7 @@
   ...attributes
   aria-labelledby={{this.id}}
   {{did-insert this.didInsert}}
+  {{will-destroy this.willDestroyNode}}
   {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
 >
   {{yield (hash Header=(component "hds/flyout/header" id=this.id onDismiss=this.onDismiss))}}

package/addon/components/hds/flyout/index.js

@@ -67,6 +67,14 @@ export default class HdsFlyoutIndexComponent extends Component {
     return classes.join(' ');
   }
 
+  @action registerOnCloseCallback() {
+    if (this.args.onClose && typeof this.args.onClose === 'function') {
+      this.args.onClose();
+    }
+
+    this.isOpen = false;
+  }
+
   @action
   didInsert(element) {
     // Store references of `<dialog>` and `<body>` elements
@@ -94,13 +102,7 @@ export default class HdsFlyoutIndexComponent extends Component {
     }
 
     // Register "onClose" callback function to be called when a native 'close' event is dispatched
-    this.element.addEventListener('close', () => {
-      if (this.args.onClose && typeof this.args.onClose === 'function') {
-        this.args.onClose();
-      }
-
-      this.isOpen = false;
-    });
+    this.element.addEventListener('close', this.registerOnCloseCallback, true);
 
     // If the flyout dialog is not already open
     if (!this.element.open) {
@@ -108,6 +110,17 @@ export default class HdsFlyoutIndexComponent extends Component {
     }
   }
 
+  @action
+  willDestroyNode() {
+    if (this.element) {
+      this.element.removeEventListener(
+        'close',
+        this.registerOnCloseCallback,
+        true
+      );
+    }
+  }
+
   @action
   open() {
     // Make flyout dialog visible using the native `showModal` method

package/addon/components/hds/modal/index.hbs

@@ -7,6 +7,7 @@
   ...attributes
   aria-labelledby={{this.id}}
   {{did-insert this.didInsert}}
+  {{will-destroy this.willDestroyNode}}
   {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
 >
   {{yield (hash Header=(component "hds/modal/header" id=this.id onDismiss=this.onDismiss))}}

package/addon/components/hds/modal/index.js

@@ -93,6 +93,29 @@ export default class HdsModalIndexComponent extends Component {
     return classes.join(' ');
   }
 
+  @action registerOnCloseCallback() {
+    if (
+      !this.isDismissDisabled &&
+      this.args.onClose &&
+      typeof this.args.onClose === 'function'
+    ) {
+      this.args.onClose();
+    }
+
+    // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed
+    if (this.isDismissDisabled) {
+      // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail
+      // so we add this safeguard condition that checks for the `<dialog>` to have a parent
+      if (this.element.parentElement) {
+        // As there is no way to `preventDefault` on `close` events, we call the `showModal` function
+        // preserving the state of the modal dialog
+        this.element.showModal();
+      }
+    } else {
+      this.isOpen = false;
+    }
+  }
+
   @action
   didInsert(element) {
     // Store references of `<dialog>` and `<body>` elements
@@ -120,28 +143,7 @@ export default class HdsModalIndexComponent extends Component {
     }
 
     // Register "onClose" callback function to be called when a native 'close' event is dispatched
-    this.element.addEventListener('close', () => {
-      if (
-        !this.isDismissDisabled &&
-        this.args.onClose &&
-        typeof this.args.onClose === 'function'
-      ) {
-        this.args.onClose();
-      }
-
-      // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed
-      if (this.isDismissDisabled) {
-        // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail
-        // so we add this safeguard condition that checks for the `<dialog>` to have a parent
-        if (this.element.parentElement) {
-          // As there is no way to `preventDefault` on `close` events, we call the `showModal` function
-          // preserving the state of the modal dialog
-          this.element.showModal();
-        }
-      } else {
-        this.isOpen = false;
-      }
-    });
+    this.element.addEventListener('close', this.registerOnCloseCallback, true);
 
     // If the modal dialog is not already open
     if (!this.element.open) {
@@ -149,6 +151,17 @@ export default class HdsModalIndexComponent extends Component {
     }
   }
 
+  @action
+  willDestroyNode() {
+    if (this.element) {
+      this.element.removeEventListener(
+        'close',
+        this.registerOnCloseCallback,
+        true
+      );
+    }
+  }
+
   @action
   open() {
     // Make modal dialog visible using the native `showModal` method

package/addon/components/hds/table/index.js

@@ -10,7 +10,7 @@ import { assert } from '@ember/debug';
 
 const DENSITIES = ['short', 'medium', 'tall'];
 const DEFAULT_DENSITY = 'medium';
-const VALIGNMENTS = ['top', 'middle'];
+const VALIGNMENTS = ['top', 'middle', 'baseline'];
 const DEFAULT_VALIGN = 'top';
 
 export default class HdsTableIndexComponent extends Component {
@@ -116,7 +116,7 @@ export default class HdsTableIndexComponent extends Component {
    * @param valign
    * @type {string}
    * @default 'top'
-   * @description Determines the vertical alignment of the table cells; options are: "top", "middle". If no valign is defined, "top" is used.
+   * @description Determines the vertical alignment of the table cells; options are: "top", "middle", "baseline". If no valign is defined, "top" is used.
    */
   get valign() {
     let { valign = DEFAULT_VALIGN } = this.args;

package/addon/components/hds/tabs/panel.js

@@ -8,7 +8,7 @@ import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
-export default class HdsTabsIndexComponent extends Component {
+export default class HdsTabsPanelComponent extends Component {
   /**
    * Generate a unique ID for the Panel
    * @return {string}

package/addon/components/hds/tabs/tab.js

@@ -8,7 +8,7 @@ import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
-export default class HdsTabsIndexComponent extends Component {
+export default class HdsTabsTabComponent extends Component {
   /**
    * Generate a unique ID for the Tab
    * @return {string}

package/app/styles/components/app-footer.scss

@@ -14,7 +14,7 @@ $app-footer-icon-text-gap: 6px;
   display: flex;
   flex-wrap: wrap;
   gap: $app-footer-gap;
-  justify-content: flex-end;
+  justify-content: center;
   padding: 24px;
   color: var(--app-footer-foreground-color);
   border-top: 1px solid var(--app-footer-border-top-color);
@@ -31,7 +31,7 @@ $app-footer-icon-text-gap: 6px;
   flex-wrap: wrap;
   gap: $app-footer-gap;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
   width: fit-content;
   min-width: 0;
   margin: 0;

package/app/styles/components/button.scss

@@ -73,10 +73,6 @@
   text-align: center;
 }
 
-
-// SIZE
-@include hds-button-size-classes("hds-button");
-
 // COLORS & STATES
 // Note: the order of the pseuo-selectors need to stay the way they are; it doesn't match the Figma file but it's the correct order for browsers to render the styles correctly.
 
@@ -96,6 +92,14 @@
   @include hds-button-color-critical();
 }
 
+// SIZE
+@include hds-button-size-classes("hds-button");
+
+// ISINLINE
+.hds-button--is-inline {
+  display: inline-flex;
+}
+
 
 // SPECIAL
 

package/app/styles/components/code-block/index.scss

@@ -131,7 +131,7 @@ $code-block-code-padding: 16px;
   padding: $code-block-code-padding;
   overflow: auto;
   font-size: 0.8125rem;
-  font-family: var(--hds-typography-code-200);
+  font-family: var(--token-typography-code-200-font-family);
   border-radius: inherit;
 
   ::selection {

package/app/styles/components/form/group.scss

@@ -15,7 +15,7 @@
 }
 
 .hds-form-group__legend { // notice: this is a <legend> element
-  margin: 0 0 4px 0;
+  margin: 0 0 8px 0;
   padding: 0;
 }
 

package/app/styles/components/segmented-group.scss

@@ -14,7 +14,7 @@
   > .hds-dropdown,
   > .hds-form-select,
   > .hds-form-text-input {
-    &:first-child {
+    &:first-child:not(:only-child) {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
 
@@ -26,7 +26,7 @@
       }
     }
 
-    &:last-child {
+    &:last-child:not(:only-child) {
       margin-left: -1px;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
@@ -39,7 +39,7 @@
       }
     }
 
-    &:not(:first-child, :last-child) {
+    &:not(:first-child, :last-child, :only-child) {
       margin-left: -1px;
       border-radius: 0;
 

package/app/styles/components/table.scss

@@ -150,6 +150,10 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
   .hds-table--valign-middle & {
     vertical-align: middle;
   }
+
+  .hds-table--valign-baseline & {
+    vertical-align: baseline;
+  }
 }
 
 // TABLE CELL TEXT ALIGNMENT (LEFT IS DEFAULT)

package/app/styles/components/tooltip.scss

@@ -79,6 +79,8 @@
     // prevent this container from potentially inheriting other values
     // such as `white-space: nowrap` that would cause content overflow
     white-space: normal;
+    // we want to have the text always aligned to the left (by design
+    text-align: left;
   }
 
   // works with Tippy's custom SVG arrow variation:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -44,7 +44,7 @@
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
     "@hashicorp/design-system-tokens": "^1.9.0",
-    "@hashicorp/ember-flight-icons": "^4.0.4",
+    "@hashicorp/ember-flight-icons": "^4.0.5",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",