@hashicorp/design-system-components 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @hashicorp/design-system-components
 
+## 2.10.0
+
+### Minor Changes
+
+- [#1535](https://github.com/hashicorp/design-system/pull/1535) [`2daa95479`](https://github.com/hashicorp/design-system/commit/2daa95479307fea0b94b2af413126d09525462c8) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add new `FileInput` component
+
+### Patch Changes
+
+- [#1570](https://github.com/hashicorp/design-system/pull/1570) [`7bf297996`](https://github.com/hashicorp/design-system/commit/7bf297996e06a15cb2506bfb23f43d71ecc9b492) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - Remove unnecessary export of `hds/copy/index.js`
+
+- [#1575](https://github.com/hashicorp/design-system/pull/1575) [`0362019ca`](https://github.com/hashicorp/design-system/commit/0362019ca043ef955364f18b23dbcd36f0bfb2bf) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::Tabs` - Fix missing tab indicator when used in Modal or Flyout
+
+- [#1567](https://github.com/hashicorp/design-system/pull/1567) [`384faeec2`](https://github.com/hashicorp/design-system/commit/384faeec244011f8090f3bcce0def89da1563164) Thanks [@MelSumner](https://github.com/MelSumner)! - Add support for container in Copy::Snippet and update API docs
+
+- [#1571](https://github.com/hashicorp/design-system/pull/1571) [`8ad8a5908`](https://github.com/hashicorp/design-system/commit/8ad8a59080d0c0c855f2f746f0a10ddf4440e461) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::Tabs` - Fix tabs and panels misbehaving on route change
+
+- [#1568](https://github.com/hashicorp/design-system/pull/1568) [`dbe2e437d`](https://github.com/hashicorp/design-system/commit/dbe2e437d7d465cda3b69c7a28b01cbfb2849b79) Thanks [@MelSumner](https://github.com/MelSumner)! - Update error icon for copy components
+
+- [#1555](https://github.com/hashicorp/design-system/pull/1555) [`90a615161`](https://github.com/hashicorp/design-system/commit/90a61516156ea58898febaa5bd66b31386256151) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::SegmentedGroup` - prevent `border-radius` from interfering with underlying elements
+
+- [#1565](https://github.com/hashicorp/design-system/pull/1565) [`60154db1a`](https://github.com/hashicorp/design-system/commit/60154db1a00f877b2c3bc4a9c4069556e8af809b) Thanks [@MelSumner](https://github.com/MelSumner)! - Resolved issue where ThSort was not supporting right-aligned text properly
+
+- Updated dependencies [[`8b8d6bcfa`](https://github.com/hashicorp/design-system/commit/8b8d6bcfa67efa5de1a2cc419167a962e747a8c9)]:
+  - @hashicorp/ember-flight-icons@3.1.0
+
 ## 2.9.0
 
 ### Minor Changes

package/addon/components/hds/copy/button/index.js

@@ -12,7 +12,7 @@ export const DEFAULT_SIZE = 'medium';
 export const SIZES = ['small', 'medium'];
 export const DEFAULT_ICON = 'clipboard-copy';
 export const SUCCESS_ICON = 'clipboard-checked';
-export const ERROR_ICON = 'clipboard';
+export const ERROR_ICON = 'clipboard-x';
 export const DEFAULT_STATUS = 'idle';
 
 export default class HdsCopyButtonComponent extends Component {

package/addon/components/hds/copy/snippet/index.hbs

@@ -5,7 +5,7 @@
 <button
   type="button"
   class={{this.classNames}}
-  {{clipboard text=@textToCopy onError=this.onError onSuccess=this.onSuccess}}
+  {{clipboard text=@textToCopy container=@container onError=this.onError onSuccess=this.onSuccess}}
   ...attributes
 >
   <span class="hds-copy-snippet__text hds-typography-code-100 {{if @isTruncated 'hds-copy-snippet__text--truncated'}}">

package/addon/components/hds/copy/snippet/index.js

@@ -12,7 +12,7 @@ export const DEFAULT_COLOR = 'primary';
 export const COLORS = ['primary', 'secondary'];
 export const DEFAULT_ICON = 'clipboard-copy';
 export const SUCCESS_ICON = 'clipboard-checked';
-export const ERROR_ICON = 'clipboard';
+export const ERROR_ICON = 'clipboard-x';
 export const DEFAULT_STATUS = 'idle';
 
 export default class HdsCopySnippetIndexComponent extends Component {

package/addon/components/hds/form/file-input/base.hbs

@@ -0,0 +1,6 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<input class="hds-form-file-input hds-typography-body-200" ...attributes type="file" />

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

@@ -0,0 +1,24 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Form::Field
+  @layout="vertical"
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  @isRequired={{@isRequired}}
+  @isOptional={{@isOptional}}
+  @id={{@id}}
+  as |F|
+>
+  {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
+  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    <Hds::Form::FileInput::Base
+      required={{@isRequired}}
+      ...attributes
+      id={{F.id}}
+      aria-describedby={{F.ariaDescribedBy}}
+    />
+  </F.Control>
+</Hds::Form::Field>

package/addon/components/hds/icon-tile/index.js

@@ -133,7 +133,6 @@ export default class HdsIconTileIndexComponent extends Component {
   get entity() {
     let entity;
 
-    // TODO: discuss if we want these kind of tests
     assert(
       `you can't pass both @logo and @icon properties to the "Hds::IconTile" component`,
       !(this.args.logo && this.args.icon)

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

@@ -11,6 +11,7 @@
           Tab=(component
             "hds/tabs/tab"
             didInsertNode=this.didInsertTab
+            willDestroyNode=this.willDestroyTab
             tabIds=this.tabIds
             panelIds=this.panelIds
             selectedTabIndex=this.selectedTabIndex
@@ -28,6 +29,7 @@
       Panel=(component
         "hds/tabs/panel"
         didInsertNode=this.didInsertPanel
+        willDestroyNode=this.willDestroyPanel
         tabIds=this.tabIds
         panelIds=this.panelIds
         selectedTabIndex=this.selectedTabIndex

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

@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
+import { schedule } from '@ember/runloop';
 
 export default class HdsTabsIndexComponent extends Component {
   @tracked tabNodes = [];
@@ -28,7 +29,10 @@ export default class HdsTabsIndexComponent extends Component {
       }
     });
     this.selectedTabIndex = initialTabIndex;
-    this.setTabIndicator(initialTabIndex);
+
+    schedule('afterRender', () => {
+      this.setTabIndicator(initialTabIndex);
+    });
 
     assert('Only one tab may use isSelected argument', selectedCount <= 1);
 
@@ -44,12 +48,24 @@ export default class HdsTabsIndexComponent extends Component {
     this.tabIds = [...this.tabIds, element.id];
   }
 
+  @action
+  willDestroyTab(element) {
+    this.tabNodes = this.tabNodes.filter((node) => node.id !== element.id);
+    this.tabIds = this.tabIds.filter((tabId) => tabId !== element.id);
+  }
+
   @action
   didInsertPanel(panelId, element) {
     this.panelNodes = [...this.panelNodes, element];
     this.panelIds = [...this.panelIds, panelId];
   }
 
+  @action
+  willDestroyPanel(element) {
+    this.panelNodes = this.panelNodes.filter((node) => node.id !== element.id);
+    this.panelIds = this.panelIds.filter((panelId) => panelId !== element.id);
+  }
+
   @action
   onClick(tabIndex, event) {
     this.selectedTabIndex = tabIndex;

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

@@ -10,6 +10,7 @@
   id={{this.panelId}}
   hidden={{not this.isSelected}}
   {{did-insert this.didInsertNode}}
+  {{will-destroy this.willDestroyNode}}
 >
   {{yield}}
 </section>

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

@@ -42,4 +42,13 @@ export default class HdsTabsIndexComponent extends Component {
       didInsertNode(this.elementId, ...arguments);
     }
   }
+
+  @action
+  willDestroyNode() {
+    let { willDestroyNode } = this.args;
+
+    if (typeof willDestroyNode === 'function') {
+      willDestroyNode(...arguments);
+    }
+  }
 }

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

@@ -13,6 +13,7 @@
     tabindex={{unless this.isSelected "-1"}}
     data-is-selected={{this.isInitialTab}}
     {{did-insert this.didInsertNode}}
+    {{will-destroy this.willDestroyNode}}
     {{on "click" this.onClick}}
     {{on "keyup" this.onKeyUp}}
   >

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

@@ -54,6 +54,15 @@ export default class HdsTabsIndexComponent extends Component {
     }
   }
 
+  @action
+  willDestroyNode() {
+    let { willDestroyNode } = this.args;
+
+    if (typeof willDestroyNode === 'function') {
+      willDestroyNode(...arguments);
+    }
+  }
+
   @action
   onClick() {
     let { onClick } = this.args;

package/app/components/hds/{copy/index.js → form/file-input/base.js}

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/copy/index';
+export { default } from '@hashicorp/design-system-components/components/hds/form/file-input/base';

package/app/components/hds/form/file-input/field.js

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

package/app/styles/components/form/file-input.scss

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// FORM > FILE-INPUT
+//
+
+@use "../../mixins/button" as *;
+
+.hds-form-file-input {
+  margin: -4px 0 -4px -4px; // offset shadow padding + default 1px spacing
+  padding: 3px 0 3px 3px; // add padding so button shadow is visible
+  color: var(--token-color-foreground-primary);
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
+// https://caniuse.com/?search=file-selector-button
+
+// Button
+.hds-form-file-input::file-selector-button {
+  min-height: 36px;
+  margin-right: 16px;
+  padding: 7px 16px 7px 37px; // padding in code altered to match Figma visual design
+  color: var(--token-color-foreground-primary);
+  font: inherit;
+  background-color: var(--token-color-surface-faint);
+  // upload icon
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%233b3d45'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 15px 50%;
+  background-size: var(--token-form-text-input-background-image-size);
+  border: $hds-button-border-width solid var(--token-color-border-strong);
+  border-radius: $hds-button-border-radius;
+  box-shadow: var(--token-elevation-low-box-shadow);
+  cursor: pointer;
+}
+
+// Button states
+.hds-form-file-input::file-selector-button:hover,
+.hds-form-file-input.mock-hover::file-selector-button {
+  color: var(--token-color-foreground-primary);
+  background-color: var(--token-color-surface-primary);
+  border-color: var(--token-color-border-strong);
+}
+
+.hds-form-file-input:focus-within::file-selector-button,
+.hds-form-file-input.mock-focus::file-selector-button {
+  color: var(--token-color-foreground-primary);
+  background-color: var(--token-color-surface-faint);
+  border-color: var(--token-color-focus-action-internal);
+  outline: 3px solid var(--token-color-focus-action-external);
+}
+
+// Fix issue with button focus style which was displaying after button was activated
+.hds-form-file-input:not(:focus, .mock-focus) {
+  &::file-selector-button {
+    border-color: var(--token-color-border-strong);
+    outline: 0;
+  }
+}
+
+.hds-form-file-input::file-selector-button:active,
+.hds-form-file-input.mock-active::file-selector-button {
+  color: var(--token-color-foreground-primary);
+  background-color: var(--token-color-surface-interactive-active);
+  border-color: var(--token-color-border-strong);
+  box-shadow: none;
+}
+
+.hds-form-file-input {
+  &:disabled,
+  &[disabled],
+  &.mock-disabled,
+  &:disabled:focus,
+  &[disabled]:focus,
+  &.mock-disabled:focus,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.mock-disabled:hover {
+    color: var(--token-color-foreground-disabled);
+
+    &::file-selector-button {
+      @include hds-button-state-disabled();
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%238c909c'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E");
+    }
+  }
+}

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

@@ -11,6 +11,7 @@
 @use "./helper-text";
 @use "./error";
 @use "./field";
+@use "./file-input";
 @use "./legend";
 @use "./group";
 @use "./indicator";

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

@@ -10,10 +10,10 @@
 .hds-segmented-group {
   display: inline-flex;
 
-  .hds-button,
-  .hds-dropdown,
-  .hds-form-select,
-  .hds-form-text-input {
+  > .hds-button,
+  > .hds-dropdown,
+  > .hds-form-select,
+  > .hds-form-text-input {
     &:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;

package/app/styles/components/table.scss

@@ -159,6 +159,10 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
   text-align: right;
 }
 
+.hds-table__th-sort--text-right .hds-table__th-sort--button-content {
+  justify-content: flex-end;
+}
+
 .hds-table__th-sort--text-center,
 .hds-table__th--text-center,
 .hds-table__td--text-center {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -42,7 +42,7 @@
     "@ember/render-modifiers": "^2.0.5",
     "@ember/test-waiters": "^3.0.2",
     "@hashicorp/design-system-tokens": "^1.7.0",
-    "@hashicorp/ember-flight-icons": "^3.0.9",
+    "@hashicorp/ember-flight-icons": "^3.1.0",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",