sorting works with minimized changeset

Author: zamoore

packages/components/src/components/hds/table/index.hbs

@@ -14,6 +14,7 @@
     {{#if @columns}}
       <Hds::Table::Tr
         @sortOrder={{if (eq this.sortBy @selectedItemKey) this.sortOrder}}
+        @onClickSort={{fn this.setSortBy @selectedItemKey}}
         @selectionScope="col"
         @isSelectable={{@isSelectable}}
         @onSelectionChange={{this.onSelectionAllChange}}
@@ -79,7 +80,6 @@
               "hds/table/tr"
               selectionScope="row"
               isSelectable=@isSelectable
-              onClickSort=(fn this.setSortBy @selectedItemKey)
               onSelectionChange=this.onSelectionRowChange
               didInsert=this.didInsertRowCheckbox
               willDestroy=this.willDestroyRowCheckbox

packages/components/src/components/hds/table/index.ts

@@ -43,6 +43,8 @@ export const DEFAULT_VALIGN = HdsTableVerticalAlignmentValues.Top;
 
 export interface HdsTableArgs {
   Args: {
+    selectedItemKey?: string;
+    // new above here
     align?: HdsTableHorizontalAlignment;
     caption?: string;
     columns?: HdsTableColumn[];
@@ -52,7 +54,6 @@ export interface HdsTableArgs {
     isSelectable?: boolean;
     isStriped?: boolean;
     model: HdsTableModel;
-    selectedItemKey?: string;
     onSelectionChange?: (selection: HdsTableOnSelectionChangeArgs) => void;
     onSort?: (sortBy: string, sortOrder: HdsTableThSortOrder) => void;
     selectionAriaLabelSuffix?: string;

packages/components/src/components/hds/table/th-button-sort.ts

@@ -27,21 +27,9 @@ export interface HdsTableThButtonSortArgs {
 const NOOP = () => {};
 
 export default class HdsTableThButtonSort extends Component<HdsTableThButtonSortArgs> {
-  /**
-   * Generates a unique ID for the (hidden) "label prefix/suffix" <span> elements
-   *
-   * @param prefixLabelId/suffixLabelId
-   */
   prefixLabelId = 'prefix-' + guidFor(this);
   suffixLabelId = 'suffix-' + guidFor(this);
 
-  /**
-   * @param icon
-   * @type {HdsTableThSortOrderIcons}
-   * @private
-   * @default swap-vertical
-   * @description Determines which icon to use based on the sort order defined
-   */
   get icon(): HdsTableThSortOrderIcons {
     switch (this.args.sortOrder) {
       case HdsTableThSortOrderValues.Asc:
@@ -53,22 +41,12 @@ export default class HdsTableThButtonSort extends Component<HdsTableThButtonSort
     }
   }
 
-  /**
-   * @param sortOrderLabel
-   * @default 'ascending'
-   * @description Determines the label (suffix) to use in the `aria-labelledby` attribute of the button, used to indicate what will happen if the user clicks on the button
-   */
   get sortOrderLabel(): HdsTableThSortOrderLabels {
     return this.args.sortOrder === HdsTableThSortOrderValues.Asc
       ? HdsTableThSortOrderLabelValues.Desc
       : HdsTableThSortOrderLabelValues.Asc;
   }
 
-  /**
-   * @param onClick
-   * @type {function}
-   * @default () => {}
-   */
   get onClick(): () => void {
     const { onClick } = this.args;
 
@@ -79,11 +57,6 @@ export default class HdsTableThButtonSort extends Component<HdsTableThButtonSort
     }
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames(): string {
     const classes = ['hds-table__th-button', 'hds-table__th-button--sort'];
 

packages/components/src/components/hds/table/th-selectable.ts

@@ -38,10 +38,6 @@ export interface HdsTableThSelectableArgs {
 export default class HdsTableThSelectable extends Component<HdsTableThSelectableArgs> {
   @tracked isSelected = this.args.isSelected;
 
-  /**
-   * Generate a unique ID for the Checkbox
-   * @return {string}
-   */
   checkboxId = 'checkbox-' + guidFor(this);
 
   get ariaLabel(): string {

packages/components/src/components/hds/table/tr.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<tr class="hds-table__tr" ...attributes>
+<tr class="hds-table__tr" {{did-insert this.didInsert}} ...attributes>
   {{#if @isSelectable}}
     <Hds::Table::ThSelectable
       @isHeaderRow={{this.isHeaderRow}}

showcase/app/templates/components/table.hbs

@@ -9,6 +9,34 @@
 
 <section data-test-percy>
 
+  <Shw::Text::H2>🎉 NEW! - Sort by Selected</Shw::Text::H2>
+
+  <Shw::Text::H4 @tag="h3">Internal Sorting</Shw::Text::H4>
+
+  <Hds::Table
+    @isSelectable={{true}}
+    @selectedItemKey="isSelected"
+    @onSelectionChange={{this.onSelectionChangeLogArguments}}
+    @model={{this.model.selectableData}}
+    @columns={{array
+      (hash key="lorem" label="Row #")
+      (hash key="ipsum" label="Ipsum")
+      (hash key="dolor" label="Dolor")
+    }}
+  >
+    <:body as |B|>
+      <B.Tr
+        @selectionKey={{B.data.id}}
+        @isSelected={{B.data.isSelected}}
+        @selectionAriaLabelSuffix="row #{{B.data.lorem}}"
+      >
+        <B.Td>{{B.data.lorem}}</B.Td>
+        <B.Td>{{B.data.ipsum}}</B.Td>
+        <B.Td>{{B.data.dolor}}</B.Td>
+      </B.Tr>
+    </:body>
+  </Hds::Table>
+
   <Shw::Text::H2>Data model</Shw::Text::H2>
 
   <Shw::Text::H4 @tag="h3">Table with model</Shw::Text::H4>