@hashicorp/design-system-components 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @hashicorp/design-system-components
 
+## 2.3.0
+
+### Minor Changes
+
+- [#1283](https://github.com/hashicorp/design-system/pull/1283) [`d0ae66503`](https://github.com/hashicorp/design-system/commit/d0ae665033e6b83a65c2dcde8630985f76872901) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - - Add new `TooltipButton` component and `hds-tooltip` modifier
+
+  - Add design tokens for `Tooltip`
+
+- [#1316](https://github.com/hashicorp/design-system/pull/1316) [`5763ffbca`](https://github.com/hashicorp/design-system/commit/5763ffbca564d3a23b8a497393acc43729d92de8) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `SegmentedGroup` component
+
+### Patch Changes
+
+- [#1329](https://github.com/hashicorp/design-system/pull/1329) [`216ce51a8`](https://github.com/hashicorp/design-system/commit/216ce51a81383f2e8a5d1f989c5148edf74268f6) Thanks [@didoo](https://github.com/didoo)! - `SideNav::Portal::Target` - Removed extra call to `commitStyles`
+
+- [#1328](https://github.com/hashicorp/design-system/pull/1328) [`095caf4d4`](https://github.com/hashicorp/design-system/commit/095caf4d430d459d848647ed3c1dba3155c358cf) Thanks [@didoo](https://github.com/didoo)! - `SideNav::Portal::Target` - Made the `:hover:focus` state (the one the links finds itself once clicked) identical to the `:active/.active` state
+
+- [#1334](https://github.com/hashicorp/design-system/pull/1334) [`f6fa1e15e`](https://github.com/hashicorp/design-system/commit/f6fa1e15ee52bc8962fc244a73640dd57d62769a) Thanks [@didoo](https://github.com/didoo)! - `SideNav` - added missing override of `Dropdown::ToggleButton`
+
+- Updated dependencies [[`d0ae66503`](https://github.com/hashicorp/design-system/commit/d0ae665033e6b83a65c2dcde8630985f76872901)]:
+  - @hashicorp/design-system-tokens@1.5.0
+
 ## 2.2.0
 
 ### Minor Changes

package/addon/components/hds/form/checkbox/field.hbs

@@ -13,7 +13,6 @@
   {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::Checkbox::Base
-      class="hds-form-field__control"
       @value={{@value}}
       name={{@name}}
       required={{@isRequired}}

package/addon/components/hds/form/field/index.hbs

@@ -24,7 +24,9 @@
       )
     )
   }}
-  {{yield (hash Control=(component "hds/yield") id=this.id ariaDescribedBy=this.ariaDescribedBy)}}
+  <div class="hds-form-field__control">
+    {{yield (hash Control=(component "hds/yield") id=this.id ariaDescribedBy=this.ariaDescribedBy)}}
+  </div>
   {{yield
     (hash
       Error=(component

package/addon/components/hds/form/radio/field.hbs

@@ -13,7 +13,6 @@
   {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::Radio::Base
-      class="hds-form-field__control"
       @value={{@value}}
       name={{@name}}
       required={{@isRequired}}

package/addon/components/hds/form/select/field.hbs

@@ -15,7 +15,6 @@
   {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::Select::Base
-      class="hds-form-field__control"
       @value={{@value}}
       @isInvalid={{@isInvalid}}
       @width={{@width}}

package/addon/components/hds/form/text-input/field.hbs

@@ -15,7 +15,6 @@
   {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::TextInput::Base
-      class="hds-form-field__control"
       @type={{@type}}
       @value={{@value}}
       @isInvalid={{@isInvalid}}

package/addon/components/hds/form/textarea/field.hbs

@@ -15,7 +15,6 @@
   {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::Textarea::Base
-      class="hds-form-field__control"
       @value={{@value}}
       @isInvalid={{@isInvalid}}
       @width={{@width}}

package/addon/components/hds/form/toggle/base.hbs

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class={{this.classNames}}>
+<div class="hds-form-toggle">
   <input class="hds-form-toggle__control" type="checkbox" ...attributes value={{@value}} role="switch" />
   <div class="hds-form-toggle__facade"></div>
 </div>

package/addon/components/hds/form/toggle/field.hbs

@@ -13,8 +13,6 @@
   {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::Toggle::Base
-      {{! template-lint-disable no-capital-arguments }}
-      @_wrapperClass="hds-form-field__control"
       @value={{@value}}
       required={{@isRequired}}
       ...attributes

package/addon/components/hds/segmented-group/index.hbs

@@ -0,0 +1,15 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-segmented-group" ...attributes>
+  {{yield
+    (hash
+      Button=(component "hds/button")
+      Dropdown=(component "hds/dropdown")
+      Select=(component "hds/form/select/base")
+      TextInput=(component "hds/form/text-input/base")
+      Generic=(component "hds/yield")
+    )
+  }}
+</div>

package/addon/components/hds/side-nav/portal/target.js

@@ -112,10 +112,7 @@ export default class SidenavPortalTarget extends Component {
         fill: 'forwards',
       }
     );
-    // Notice: we don't add the styles by default because it writes a `style` attribute to the element and it causes an additional re-render
-    if (DEBUG) {
-      anim.commitStyles();
-    }
+
     anim.finished.then(() => {
       // uncomment this if we need/want to scroll the element to the top
       // targetElement.scrollIntoView(true);

package/addon/components/hds/tooltip-button/index.hbs

@@ -0,0 +1,11 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<button
+  type="button"
+  class={{this.classNames}}
+  {{hds-tooltip this.text options=this.options}}
+  ...attributes
+>{{~yield~}}</button>

package/addon/components/hds/tooltip-button/index.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const PLACEMENTS = [
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+];
+
+export default class HdsTooltipIndexComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description text content for tooltip
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::TooltipButton" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  get options() {
+    let { placement } = this.args;
+
+    assert(
+      '@placement for "Hds::TooltipButton" must have a valid value',
+      placement == undefined || PLACEMENTS.includes(placement)
+    );
+
+    return {
+      ...this.args.extraTippyOptions,
+      // takes string
+      placement: placement,
+      // takes array of 2 numbers (skidding, distance): array(0, 0)
+      offset: this.args.offset,
+    };
+  }
+
+  /**
+   * @param isInline
+   * @type {boolean}
+   * @default true
+   * @description sets display for the button
+   */
+  get isInline() {
+    let { isInline = true } = this.args;
+    return isInline;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-tooltip-button'];
+
+    // add a class based on the @isInline argument
+    if (this.isInline) {
+      classes.push('hds-tooltip-button--is-inline');
+    } else {
+      classes.push('hds-tooltip-button--is-block');
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/modifiers/hds-tooltip.js

@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// Note: the majority of this code is a porting of the existing tooltip implementation in Cloud UI
+// (which was initially implemented in Structure)
+
+import Modifier from 'ember-modifier';
+import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+
+import tippy, { followCursor } from 'tippy.js';
+// used by custom SVG arrow:
+import 'tippy.js/dist/svg-arrow.css';
+
+function cleanup(instance) {
+  const { interval, needsTabIndex, tooltip } = instance;
+  if (needsTabIndex) {
+    tooltip?.reference?.removeAttribute('tabindex');
+  }
+  clearInterval(interval);
+  tooltip?.destroy();
+}
+
+/**
+ *
+ * `Tooltip` implements a modifier that uses Tippy.js to display a tooltip.
+ *
+ * Sample usage:
+ * ```
+ * <div {{hds-tooltip 'Text' options=(hash )}}>Hover me!</div>
+ * ```
+ *
+ * @see https://atomiks.github.io/tippyjs
+ * @class TooltipModifier
+ *
+ */
+export default class HdsTooltipModifier extends Modifier {
+  didSetup = false;
+
+  interval = null;
+  needsTabIndex = false;
+  tooltip = null;
+
+  constructor(owner, args) {
+    super(owner, args);
+    registerDestructor(this, cleanup);
+  }
+
+  hideOnEsc = {
+    name: 'hideOnEsc',
+    defaultValue: true,
+    fn({ hide }) {
+      function onKeyDown(event) {
+        if (event.keyCode === 27) {
+          hide();
+        }
+      }
+
+      return {
+        onShow() {
+          document.addEventListener('keydown', onKeyDown);
+        },
+        onHide() {
+          document.removeEventListener('keydown', onKeyDown);
+        },
+      };
+    },
+  };
+
+  modify(element, positional, named) {
+    assert('Tooltip must have an element', element);
+
+    if (!this.didSetup) {
+      this.#setup(element, positional, named);
+      this.didSetup = true;
+    }
+
+    this.#update(element, positional, named);
+  }
+
+  #setup(element, positional, named) {
+    const tooltipProps = this.#getTooltipProps(element, positional, named);
+    this.tooltip = tippy(element, tooltipProps);
+  }
+
+  #update(element, positional, named) {
+    const tooltipProps = this.#getTooltipProps(element, positional, named);
+    this.tooltip.setProps(tooltipProps);
+  }
+
+  #getTooltipProps(element, positional, named) {
+    const { options = {} } = named;
+    let [content] = positional;
+
+    let $anchor = element;
+
+    // Make it easy to specify the modified element as the actual tooltip.
+    if (typeof options.triggerTarget === 'string') {
+      const $el = $anchor;
+      switch (options.triggerTarget) {
+        case 'parentNode':
+          $anchor = $anchor.parentNode;
+          break;
+        default:
+          $anchor = $anchor.querySelectorAll(options.triggerTarget);
+      }
+      content = $anchor.cloneNode(true);
+      $el.remove();
+      options.triggerTarget = undefined;
+    }
+
+    // The {{hds-tooltip}} will just use the HTML content.
+    if (typeof content === 'undefined') {
+      content = $anchor.innerHTML;
+      $anchor.innerHTML = '';
+    }
+
+    if (options.trigger === 'manual') {
+      // If we are manually triggering, a out delay means only show for the
+      // amount of time specified by the delay.
+      const delay = options.delay || [];
+
+      if (typeof delay[1] !== 'undefined') {
+        options.onShown = (tooltip) => {
+          clearInterval(this.interval);
+          this.interval = setTimeout(() => {
+            tooltip.hide();
+          }, delay[1]);
+        };
+      }
+    }
+
+    const $trigger = $anchor;
+
+    if (!$trigger.hasAttribute('tabindex')) {
+      this.needsTabIndex = true;
+      $trigger.setAttribute('tabindex', '0');
+    }
+
+    return {
+      theme: 'hds',
+      triggerTarget: $trigger,
+      arrow: `
+        <svg class="hds-tooltip-pointer" width="16" height="7" viewBox="0 0 16 7" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" />
+        </svg>`,
+      // keeps tooltip itself open on hover:
+      interactive: true,
+      // fix accessibility features that get messed up with setting interactive: true
+      aria: {
+        content: 'describedby',
+        expanded: null,
+      },
+      content: () => content,
+      plugins: [
+        typeof options.followCursor !== 'undefined' ? followCursor : undefined,
+        this.hideOnEsc,
+      ].filter((item) => Boolean(item)),
+      ...options,
+    };
+  }
+}

package/app/components/hds/segmented-group/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/segmented-group/index';

package/app/components/hds/tooltip-button/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/tooltip-button/index';

package/app/modifiers/hds-tooltip.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/modifiers/hds-tooltip';

package/app/styles/@hashicorp/design-system-components.scss

@@ -31,12 +31,14 @@
 @use "../components/link"; // multiple components
 @use "../components/modal";
 @use "../components/pagination";
+@use "../components/segmented-group";
 @use "../components/side-nav";
 @use "../components/stepper";
 @use "../components/table";
 @use "../components/tabs";
 @use "../components/tag";
 @use "../components/toast";
+@use "../components/tooltip";
 // END COMPONENT CSS FILES IMPORTS
 
 // stylelint-disable-next-line selector-class-pattern

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

@@ -32,6 +32,9 @@
   }
 
   .hds-form-field__control {
+    display: flex; // to avoid extra whitespace when the content is an <input>, <select>, or <textarea> (inline elements)
+    justify-self: stretch; // allows <input> and <textarea> to go full-width
+
     &:not(:first-child) {
       margin-top: 8px;
     }
@@ -50,7 +53,6 @@
 .hds-form-field--layout-flag {
   display: grid;
   grid-auto-flow: row;
-  // stylelint-disable-next-line declaration-colon-space-after
   grid-template-areas:
     "control label"
     "control helper-text"
@@ -70,6 +72,7 @@
   }
 
   .hds-form-field__control {
+    display: flex; // to avoid extra whitespace when the content is an <input>, <select>, or <textarea> (inline elements)
     grid-area: control;
 
     &:not(:only-child) {

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

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SEGMENTED-GROUP
+//
+
+.hds-segmented-group {
+  display: inline-flex;
+
+  .hds-button,
+  .hds-dropdown,
+  .hds-form-select,
+  .hds-form-text-input {
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      &::before,
+      .hds-dropdown-toggle-button,
+      .hds-dropdown-toggle-button::before {
+        border-top-right-radius: inherit;
+        border-bottom-right-radius: inherit;
+      }
+    }
+
+    &:last-child {
+      margin-left: -1px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+
+      &::before,
+      .hds-dropdown-toggle-button,
+      .hds-dropdown-toggle-button::before {
+        border-top-left-radius: inherit;
+        border-bottom-left-radius: inherit;
+      }
+    }
+
+    &:not(:first-child, :last-child) {
+      margin-left: -1px;
+      border-radius: 0;
+
+      &::before,
+      .hds-dropdown-toggle-button,
+      .hds-dropdown-toggle-button::before {
+        border-radius: inherit;
+      }
+    }
+
+    &:focus,
+    &.mock-focus,
+    .hds-dropdown-toggle-button:focus {
+      z-index: 1;
+    }
+  }
+}

package/app/styles/components/side-nav/content.scss

@@ -95,6 +95,9 @@
     }
   }
 
+  // NOTICE: this is necessary to mitigate the flickering of the link when clicked (expecially noticeable with a badge)
+  // For details see: https://github.com/hashicorp/design-system/pull/1328
+  &:hover:focus,
   // notice: this ".active" extra class is used to match the corresponding `active` class assigned automatically
   // by the `<LinkTo>` Ember component (when the link is "current), so that consumers get it for free if they want
   // otherwise they can use the `@isActive` argument to set this visual state directly

package/app/styles/components/side-nav/header.scss

@@ -84,7 +84,8 @@
 // dropdown overrides
 
 .hds-side-nav__dropdown { // ⬅︎ add this class name to the `Hds::Dropdown` component to apply the style overrides
-  .hds-dropdown-toggle-icon {
+  .hds-dropdown-toggle-icon,
+  .hds-dropdown-toggle-button {
     @include hds-side-nav-icon-button($add-visible-border: true);
   }
 }

package/app/styles/components/tooltip.scss

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// TOOLTIP & TOOLTIP-BUTTON
+//
+
+@use "../mixins/focus-ring" as *;
+
+.hds-tooltip-button {
+  @include hds-focus-ring-with-pseudo-element(
+    $top: var(--token-tooltip-focus-offset),
+    $right: var(--token-tooltip-focus-offset),
+    $bottom: var(--token-tooltip-focus-offset),
+    $left: var(--token-tooltip-focus-offset),
+  );
+}
+
+// The special declarations below are used to allow the button to inherit styles from the parent element
+// without preventing the consumers from applying these styles via HDS or custom classes if they want
+//
+// Since the `:where()` selector has a specificity of `0` (see https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
+// the styles declared below are applied to the `<button>` element, but are overwritten by any other style applied via classname
+//
+// If you want to see the effect of this selector, try to comment it and look at the "Inheritance" demo in the showcase:
+// https://hds-showcase.vercel.app/components/tooltip
+
+:where(.hds-tooltip-button) {
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  background-color: inherit;
+  border: none;
+}
+
+:where(.hds-tooltip-button--is-inline) {
+  display: inline-flex;
+}
+
+:where(.hds-tooltip-button--is-block) {
+  display: flex;
+}
+
+
+// Tippy.js styling
+// https://atomiks.github.io/tippyjs/
+
+.tippy-box[data-theme~="hds"] {
+  padding: var(--token-tooltip-padding-vertical) var(--token-tooltip-padding-horizontal);
+  color: var(--token-tooltip-color-foreground-primary);
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-200-font-size);
+  font-family: var(--token-typography-body-200-font-family);
+  line-height: var(--token-typography-body-200-line-height);
+  overflow-wrap: break-word;
+  background-color: var(--token-tooltip-color-surface-primary);
+  border-radius: var(--token-tooltip-border-radius);
+  box-shadow: var(--token-elevation-higher-box-shadow);
+  transition-property: transform, visibility, opacity;
+
+  &[data-animation="fade"][data-state="hidden"] {
+    opacity: 0;
+  }
+
+  &[data-inertia][data-state="visible"] {
+    transition-timing-function: var(--token-tooltip-transition-function);
+  }
+
+  .tippy-content {
+    position: relative;
+    z-index: 1;
+    // This needs to go here because Tippy generates a javascript
+    // max-width on .tippy-box.
+    max-width: var(--token-tooltip-max-width);
+  }
+
+  // works with Tippy's custom SVG arrow variation:
+  .tippy-svg-arrow {
+    fill: var(--token-tooltip-color-surface-primary);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
-    "@hashicorp/design-system-tokens": "^1.4.2",
+    "@hashicorp/design-system-tokens": "^1.5.0",
     "@hashicorp/ember-flight-icons": "^3.0.2",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
@@ -54,7 +54,8 @@
     "ember-stargate": "^0.4.3",
     "ember-style-modifier": "^0.8.0",
     "ember-truth-helpers": "^3.0.0",
-    "sass": "^1.58.3"
+    "sass": "^1.58.3",
+    "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",

package/addon/components/hds/form/toggle/base.js

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsFormToggleBaseComponent extends Component {
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-form-toggle'];
-
-    // add a class based on the @_wrapperClass argument
-    // we need to use this special argument to pass a class to the wrapping element, because the ...attributes is applied to the control
-    // notice: this will *not* be documented for public use
-    // the reason for this is that the spread (...) of attributes is applied to the <input> element, but the component has a wrapping container and we need to pass a class to it
-    if (this.args._wrapperClass) {
-      classes.push(this.args._wrapperClass);
-    }
-
-    return classes.join(' ');
-  }
-}