@hashicorp/design-system-components 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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/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/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

@@ -31,63 +31,6 @@ $hds-table-cell-padding-tall: 20px 16px;
   .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 {
@@ -102,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
@@ -135,6 +135,19 @@ $hds-table-cell-padding-tall: 20px 16px;
   vertical-align: middle;
 }
 
+// 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__th-sort--text-center,
+.hds-table__th--text-center,
+.hds-table__td--text-center {
+  text-align: center;
+}
+
 
 .hds-table__tbody {
   .hds-table__tr {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -65,7 +65,7 @@
     "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",