@hashicorp/design-system-components 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @hashicorp/design-system-components
 
+## 1.5.0
+
+### Minor Changes
+
+- [#827](https://github.com/hashicorp/design-system/pull/827) [`c775030b0`](https://github.com/hashicorp/design-system/commit/c775030b0337d630159ce3a108b61f336efca7bb) Thanks [@MelSumner](https://github.com/MelSumner)! - [PR 760](https://github.com/hashicorp/design-system/pull/760) Finalized Hds::Table component; resolved text alignment and column width invocation options. Added support for `th` elements with the scope of `row`.
+
+### Patch Changes
+
+- [#816](https://github.com/hashicorp/design-system/pull/816) [`325cdaa2a`](https://github.com/hashicorp/design-system/commit/325cdaa2aa3859058de9f79758e1f1d1c5e4246e) Thanks [@jorytindall](https://github.com/jorytindall)! - Updated the modal border radius based on revised design guidelines.
+
+## 1.4.1
+
+### Patch Changes
+
+- [#740](https://github.com/hashicorp/design-system/pull/740) [`cd1a09307`](https://github.com/hashicorp/design-system/commit/cd1a09307aef9617e7a31a5d9e722417f4c9045e) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `indeterminate` style to `Checkbox` component
+
+- Updated dependencies [[`92c83961f`](https://github.com/hashicorp/design-system/commit/92c83961f0e8b01e52e3c596c85871ec5cf8c94d)]:
+  - @hashicorp/design-system-tokens@1.3.0
+
 ## 1.4.0
 
 ### Minor Changes

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

@@ -8,26 +8,18 @@
     {{#if @columns}}
       <Hds::Table::Tr>
         {{#each @columns as |column|}}
-          {{#if @sortingKeys}}
-            {{#if (includes column.key @sortingKeys)}}
-              <Hds::Table::ThSort
-                @isSorted={{eq column.key this.sortBy}}
-                @sortOrder={{this.sortOrder}}
-                @onClick={{(fn this.setSortBy column.key)}}
-              >
-                {{column.label}}
-              </Hds::Table::ThSort>
-            {{else}}
-              <Hds::Table::Th>{{column.label}}</Hds::Table::Th>
-            {{/if}}
-          {{else}}
+          {{#if column.isSortable}}
             <Hds::Table::ThSort
               @isSorted={{eq column.key this.sortBy}}
               @sortOrder={{this.sortOrder}}
               @onClick={{(fn this.setSortBy column.key)}}
+              @align={{column.align}}
+              @width={{column.width}}
             >
               {{column.label}}
             </Hds::Table::ThSort>
+          {{else}}
+            <Hds::Table::Th @align={{column.align}} @width={{column.width}}>{{column.label}}</Hds::Table::Th>
           {{/if}}
         {{/each}}
       </Hds::Table::Tr>
@@ -41,14 +33,25 @@
   <tbody class="hds-table__tbody">
     {{#if @columns}}
       {{#each (sort-by this.getSortCriteria @model) as |data|}}
-        {{yield (hash Tr=(component "hds/table/tr") Td=(component "hds/table/td") data=data) to="body"}}
-      {{/each}}
-    {{else if @model}}
-      {{#each @model as |data|}}
-        {{yield (hash Tr=(component "hds/table/tr") Td=(component "hds/table/td") data=data) to="body"}}
+        {{yield
+          (hash
+            Tr=(component "hds/table/tr")
+            Th=(component "hds/table/th" scope="row")
+            Td=(component "hds/table/td" align=@align)
+            data=data
+          )
+          to="body"
+        }}
       {{/each}}
     {{else}}
-      {{yield (hash Tr=(component "hds/table/tr") Td=(component "hds/table/td")) to="body"}}
+      {{yield
+        (hash
+          Tr=(component "hds/table/tr")
+          Th=(component "hds/table/th" scope="row")
+          Td=(component "hds/table/td" align=@align)
+        )
+        to="body"
+      }}
     {{/if}}
   </tbody>
 </table>

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

@@ -5,7 +5,7 @@ import { assert } from '@ember/debug';
 
 const DENSITIES = ['short', 'medium', 'tall'];
 const DEFAULT_DENSITY = 'medium';
-const VALIGNMENTS = ['top', 'middle', 'bottom', 'baseline', 'sub', 'text-top'];
+const VALIGNMENTS = ['top', 'middle'];
 const DEFAULT_VALIGN = 'top';
 
 export default class HdsTableIndexComponent extends Component {
@@ -20,11 +20,21 @@ export default class HdsTableIndexComponent extends Component {
   /**
    * @param isStriped
    * @type {boolean}
-   * @default true
-   * @description Determines whether the table rows should have alternating background colors; defaults to true.
+   * @default false
+   * @description Determines whether the table rows should have alternating background colors; defaults to false.
    */
   get isStriped() {
-    return this.args.isStriped ?? true;
+    return this.args.isStriped ?? false;
+  }
+
+  /**
+   * @param isFixedLayout
+   * @type {boolean}
+   * @default false
+   * @description Determines whether the table-display should be set to fixed; meaning, the table columns are of equal width no matter the content; defaults to false.
+   */
+  get isFixedLayout() {
+    return this.args.isFixedLayout ?? false;
   }
 
   /**
@@ -50,7 +60,7 @@ export default class HdsTableIndexComponent extends Component {
    * @param valign
    * @type {string}
    * @default 'top'
-   * @description Determines the vertical alignment of the table cells; options are all of the values accepted by the CSS "vertical-align" property: "top", "middle", "bottom", "baseline", "sub", and "text-top". If no valign is defined, "top" is used.
+   * @description Determines the vertical alignment of the table cells; options are: "top", "middle". If no valign is defined, "top" is used.
    */
   get valign() {
     let { valign = DEFAULT_VALIGN } = this.args;
@@ -78,6 +88,11 @@ export default class HdsTableIndexComponent extends Component {
       classes.push('hds-table--striped');
     }
 
+    // add a class based on the @isFixedLayout argument
+    if (this.isFixedLayout) {
+      classes.push('hds-table--layout-fixed');
+    }
+
     // add a class based on the @density argument
     if (this.density) {
       classes.push(`hds-table--density-${this.density}`);

package/addon/components/hds/table/td.hbs

@@ -1,3 +1,3 @@
-<td class="hds-table__td hds-typography-body-200 hds-font-weight-regular" ...attributes>
+<td class={{this.classNames}} ...attributes>
   {{yield}}
 </td>

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

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+const ALIGNMENTS = ['left', 'center', 'right'];
+const DEFAULT_ALIGN = 'left';
+
+export default class HdsTableTdComponent extends Component {
+  /**
+   * @param align
+   * @type {string}
+   * @default left
+   * @description Determines the text alignment of the header or cell content. Options are: "left", "center", "right". If no align is defined, "left" is used.
+   */
+  get align() {
+    let { align = DEFAULT_ALIGN } = this.args;
+
+    assert(
+      `@align for "Hds::Table::Td" must be one of the following: ${ALIGNMENTS.join(
+        ', '
+      )}; received: ${align}`,
+      ALIGNMENTS.includes(align)
+    );
+    return align;
+  }
+
+  /**
+   * 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-table__td',
+      'hds-typography-body-200',
+      'hds-font-weight-regular',
+    ];
+
+    // add a class based on the @align argument
+    if (this.align) {
+      classes.push(`.hds-table__td--text-${this.align}`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/table/th-sort.hbs

@@ -1,4 +1,4 @@
-<th scope="col" class="hds-table__th-sort" aria-sort={{this.ariaSort}} ...attributes>
+<th class={{this.classNames}} aria-sort={{this.ariaSort}} {{style width=@width}} ...attributes scope="col">
   <button type="button" {{on "click" this.onClick}}>
     <div class="hds-table__th-sort--button-content">
       <span class="hds-typography-body-200 hds-font-weight-semibold">{{yield}}</span>

package/addon/components/hds/table/th-sort.js

@@ -1,6 +1,9 @@
 import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
 
 const NOOP = () => {};
+const ALIGNMENTS = ['left', 'center', 'right'];
+const DEFAULT_ALIGN = 'left';
 
 export default class HdsTableThSortComponent extends Component {
   /**
@@ -32,6 +35,24 @@ export default class HdsTableThSortComponent extends Component {
     }
   }
 
+  /**
+   * @param align
+   * @type {string}
+   * @default left
+   * @description Determines the text alignment of the header or cell content. Options are: "left", "center", "right". If no align is defined, "left" is used.
+   */
+  get align() {
+    let { align = DEFAULT_ALIGN } = this.args;
+
+    assert(
+      `@align for "Hds::Table" must be one of the following: ${ALIGNMENTS.join(
+        ', '
+      )}; received: ${align}`,
+      ALIGNMENTS.includes(align)
+    );
+    return align;
+  }
+
   /**
    * @param onClick
    * @type {function}
@@ -41,4 +62,20 @@ export default class HdsTableThSortComponent extends Component {
     let { onClick } = this.args;
     return onClick || NOOP;
   }
+
+  /**
+   * 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-table__th-sort'];
+
+    // add a class based on the @align argument
+    if (this.align) {
+      classes.push(`.hds-table__th-sort--text-${this.align}`);
+    }
+
+    return classes.join(' ');
+  }
 }

package/addon/components/hds/table/th.hbs

@@ -1,3 +1,3 @@
-<th class="hds-table__th hds-typography-body-200 hds-font-weight-semibold" ...attributes scope="col">
+<th class={{this.classNames}} {{style width=@width}} ...attributes scope={{(or @scope "col")}}>
   {{yield}}
 </th>

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

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+const ALIGNMENTS = ['left', 'center', 'right'];
+const DEFAULT_ALIGN = 'left';
+
+export default class HdsTableThComponent extends Component {
+  /**
+   * @param align
+   * @type {string}
+   * @default left
+   * @description Determines the text alignment of the header or cell content. Options are: "left", "center", "right". If no align is defined, "left" is used.
+   */
+  get align() {
+    let { align = DEFAULT_ALIGN } = this.args;
+
+    assert(
+      `@align for "Hds::Table::Th" must be one of the following: ${ALIGNMENTS.join(
+        ', '
+      )}; received: ${align}`,
+      ALIGNMENTS.includes(align)
+    );
+    return align;
+  }
+
+  /**
+   * 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-table__th',
+      'hds-typography-body-200',
+      'hds-font-weight-semibold',
+    ];
+
+    // add a class based on the @align argument
+    if (this.align) {
+      classes.push(`.hds-table__th--text-${this.align}`);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -22,7 +22,7 @@
 
   // base (default)
 
-  &:not(:checked) {
+  &:not(:checked, :indeterminate) {
     background-color: var(--token-form-control-base-surface-color-default);
     border-color: var(--token-form-control-base-border-color-default);
     box-shadow: var(--hds-elevation-inset-box-shadow);
@@ -34,16 +34,24 @@
     border-color: var(--token-form-control-checked-border-color-default);
   }
 
+  &:indeterminate {
+    background-color: var(--token-form-control-checked-surface-color-default);
+    background-image: var(--token-form-checkbox-background-image-data-url-indeterminate);
+    border-color: var(--token-form-control-checked-border-color-default);
+  }
+
   // hover
 
-  &:hover:not(:checked),
-  &.mock-hover:not(:checked) {
+  &:hover:not(:checked, :indeterminate),
+  &.mock-hover:not(:checked, :indeterminate) {
     background-color: var(--token-form-control-base-surface-color-hover);
     border-color: var(--token-form-control-base-border-color-hover);
   }
 
   &:hover:checked,
-  &.mock-hover:checked {
+  &.mock-hover:checked,
+  &:hover:indeterminate,
+  &.mock-hover:indeterminate {
     background-color: var(--token-form-control-checked-border-color-default);
     border-color: var(--token-form-control-checked-border-color-hover);
   }
@@ -58,7 +66,7 @@
 
   // DISABLED
 
-  &:disabled:not(:checked) {
+  &:disabled:not(:checked, :indeterminate) {
     background-color: var(--token-form-control-disabled-surface-color);
     border-color: var(--token-form-control-disabled-border-color);
     box-shadow: none;
@@ -72,4 +80,13 @@
     box-shadow: none;
     cursor: not-allowed;
   }
+
+  &:disabled:indeterminate {
+    background-color: var(--token-form-control-disabled-surface-color);
+    background-image: var(--token-form-checkbox-background-image-data-url-indeterminate-disabled);
+    background-repeat: no-repeat;
+    border-color: var(--token-form-control-disabled-border-color);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
 }

package/app/styles/components/modal.scss

@@ -8,7 +8,7 @@
   padding: 0;
   background: var(--token-color-surface-primary);
   border: none;
-  border-radius: 10px;
+  border-radius: 8px;
   box-shadow: var(--token-surface-overlay-box-shadow);
 
   &[open] {

package/app/styles/components/table.scss

@@ -16,74 +16,21 @@ $hds-table-cell-padding-tall: 20px 16px;
 
 .hds-table {
   width: 100%;
-  table-layout: fixed;
   border: $hds-table-border-width solid $hds-table-border-color;
   border-radius: $hds-table-border-radius;
   border-spacing: 0;
 }
 
+// TABLE DISPLAY
+.hds-table--layout-fixed {
+  table-layout: fixed;
+}
+
 // TABLE HEADER
 .hds-table__thead {
   .hds-table__tr {
     color: var(--token-color-foreground-strong);
     background-color: var(--token-color-surface-strong);
-
-    .hds-table__th,
-    .hds-table__th-sort {
-      height: $hds-table-header-height;
-      text-align: left;
-      border-top: none;
-      border-right: none;
-      border-bottom: $hds-table-border-width solid $hds-table-border-color;
-      border-left: none;
-    }
-
-    .hds-table__th {
-      padding: $hds-table-cell-padding-medium;
-    }
-
-    .hds-table__th-sort {
-      padding: 0;
-
-      button {
-        width: 100%;
-        height: 100%;
-        min-height: $hds-table-header-height;
-        margin: 0;
-        padding: $hds-table-cell-padding-medium;
-        text-align: inherit;
-        background-color: transparent;
-        border: 1px solid transparent;
-        border-radius: inherit;
-
-        .hds-table__th-sort--button-content {
-          display: flex; // we can't put flex on the button itself so we drop the content into its own container
-          align-items: center;
-
-          .flight-icon {
-            flex: none;
-            margin-left: 8px;
-            color: var(--token-color-foreground-action);
-          }
-        }
-
-        &:hover,
-        &.mock-hover {
-          color: var(--token-color-foreground-strong);
-          background-color: var(--token-color-palette-neutral-200);
-          cursor: pointer;
-        }
-
-        @include hds-focus-ring-with-pseudo-element($radius: inherit);
-
-        &:active,
-        &.mock-active {
-          color: var(--token-color-foreground-strong);
-          background-color: var(--token-color-palette-neutral-300);
-        }
-      }
-    }
-
     // BORDER RADIUS: TARGET FIRST AND LAST TH ELEMENTS IN THE ROW
     &:first-of-type {
       th:first-child {
@@ -98,6 +45,63 @@ $hds-table-cell-padding-tall: 20px 16px;
   }
 }
 
+.hds-table__th,
+.hds-table__th-sort {
+  height: $hds-table-header-height;
+  text-align: left;
+  border-top: none;
+  border-right: none;
+  border-bottom: $hds-table-border-width solid $hds-table-border-color;
+  border-left: none;
+}
+
+.hds-table__th {
+  padding: $hds-table-cell-padding-medium;
+}
+
+.hds-table__th-sort {
+  padding: 0;
+
+  button {
+    width: 100%;
+    height: 100%;
+    min-height: $hds-table-header-height;
+    margin: 0;
+    padding: $hds-table-cell-padding-medium;
+    text-align: inherit;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: inherit;
+
+    .hds-table__th-sort--button-content {
+      display: flex; // we can't put flex on the button itself so we drop the content into its own container
+      align-items: center;
+
+      .flight-icon {
+        flex: none;
+        margin-left: 8px;
+        color: var(--token-color-foreground-action);
+      }
+    }
+
+    &:hover,
+    &.mock-hover {
+      color: var(--token-color-foreground-strong);
+      background-color: var(--token-color-palette-neutral-200);
+      cursor: pointer;
+    }
+
+    @include hds-focus-ring-with-pseudo-element($radius: inherit);
+
+    &:active,
+    &.mock-active {
+      color: var(--token-color-foreground-strong);
+      background-color: var(--token-color-palette-neutral-300);
+    }
+  }
+}
+
+
 // TABLE BODY
 
 // TABLE STRIPING ROWS
@@ -131,21 +135,19 @@ $hds-table-cell-padding-tall: 20px 16px;
   vertical-align: middle;
 }
 
-.hds-table--valign-bottom .hds-table__tbody td {
-  vertical-align: bottom;
-}
-
-.hds-table--valign-baseline .hds-table__tbody td {
-  vertical-align: baseline;
+// TABLE CELL TEXT ALIGNMENT (LEFT IS DEFAULT)
+.hds-table__th-sort--text-right,
+.hds-table__th--text-right,
+.hds-table__td--text-right {
+  text-align: right;
 }
 
-.hds-table--valign-sub .hds-table__tbody td {
-  vertical-align: sub;
+.hds-table__th-sort--text-center,
+.hds-table__th--text-center,
+.hds-table__td--text-center {
+  text-align: center;
 }
 
-.hds-table--valign-text-top .hds-table__tbody td {
-  vertical-align: text-top;
-}
 
 .hds-table__tbody {
   .hds-table__tr {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -36,7 +36,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^1.2.0",
+    "@hashicorp/design-system-tokens": "^1.3.0",
     "@hashicorp/ember-flight-icons": "^3.0.2",
     "dialog-polyfill": "^0.5.6",
     "ember-auto-import": "^2.4.2",
@@ -58,14 +58,14 @@
     "@embroider/test-setup": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.13.0",
+    "@percy/cli": "^1.16.0",
     "@percy/ember": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-a11y-refocus": "^2.1.0",
     "ember-a11y-testing": "^5.0.0",
     "ember-cli": "~4.7.0",
-    "ember-cli-clipboard": "^0.16.0",
+    "ember-cli-clipboard": "^1.0.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-deprecation-workflow": "^2.1.0",
     "ember-cli-inject-live-reload": "^2.1.0",