@hashicorp/design-system-components 3.4.0 → 3.4.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @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
@@ -18,7 +41,7 @@
 
 ### Patch Changes
 
-`Hds::AppFooter` - Changed visual alignment from right-aligned to centered.
+`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>
 
@@ -56,11 +79,11 @@
 
 ### 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>
 
@@ -68,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>
 
@@ -88,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>
 
@@ -199,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>
 
@@ -217,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"`
 
@@ -255,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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",