Table - Sort by selected

.changeset/large-spiders-protect.md

@@ -0,0 +1,15 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Hds::Table`
+- Added `@selectableColumnKey` argument which enables sorting by row selection state and specifies the corresponding selection state key.
+
+`Hds::Table::Tr`
+- Added `@selectableColumnKey` argument which enables sorting by row selection state and specifies the corresponding selection state key.
+- Added `@sortBySelectedOrder` argument which determines the state of the sort button in the selected item column.
+- Added `@onClickSortBySelected` argument which is the callback for the sort button in the selected item column.
+
+`Hds::Table::ThSelectable`
+- Added `@onClickSortBySelected` argument which is the callback for the sort button in the selected item column.
+- Added `@sortBySelectedOrder` argument which determines the state of the sort button in the selected item column.

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

@@ -14,6 +14,8 @@
  {{#if @columns}}
  <Hds::Table::Tr
  @selectionScope="col"
+ @onClickSortBySelected={{if @selectableColumnKey (fn this.setSortBy @selectableColumnKey)}}
+ @sortBySelectedOrder={{if (eq this.sortBy @selectableColumnKey) this.sortOrder}}
  @isSelectable={{@isSelectable}}
  @onSelectionChange={{this.onSelectionAllChange}}
  @didInsert={{this.didInsertSelectAllCheckbox}}
@@ -52,6 +54,8 @@
  didInsert=this.didInsertSelectAllCheckbox
  willDestroy=this.willDestroySelectAllCheckbox
  selectionAriaLabelSuffix="all rows"
+ onClickSortBySelected=(if @selectableColumnKey (fn this.setSortBy @selectableColumnKey))
+ sortBySelectedOrder=(if (eq this.sortBy @selectableColumnKey) this.sortOrder)
  )
  Th=(component "hds/table/th")
  ThSort=(component "hds/table/th-sort")

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

@@ -23,6 +23,7 @@ import type {
  HdsTableSortingFunction,
  HdsTableThSortOrder,
  HdsTableVerticalAlignment,
+ HdsTableModel,
 } from './types';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base';
 import type { HdsTableTdArgs } from './td.ts';
@@ -50,11 +51,12 @@ export interface HdsTableArgs {
  isFixedLayout?: boolean;
  isSelectable?: boolean;
  isStriped?: boolean;
- model: Array<Record<string, unknown>>;
+ model?: HdsTableModel;
  onSelectionChange?: (selection: HdsTableOnSelectionChangeArgs) => void;
  onSort?: (sortBy: string, sortOrder: HdsTableThSortOrder) => void;
  selectionAriaLabelSuffix?: string;
  sortBy?: string;
+ selectableColumnKey?: string;
  sortedMessageText?: string;
  sortOrder?: HdsTableThSortOrder;
  valign?: HdsTableVerticalAlignment;

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

@@ -27,21 +27,10 @@ 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
- */
+ // Generates a unique ID for the (hidden) "label prefix/suffix" <span> elements
  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 +42,14 @@ 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
- */
+ // 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 +60,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-button-tooltip.ts

@@ -16,11 +16,7 @@ export interface HdsTableThButtonTooltipArgs {
 }
 
 export default class HdsTableThButtonTooltip extends Component<HdsTableThButtonTooltipArgs> {
- /**
- * Generates a unique ID for the (hidden) "label prefix" <span> element
- *
- * @param prefixLabelId
- */
+ // Generates a unique ID for the (hidden) "label prefix" <span> element
  prefixLabelId = guidFor(this);
 
  get tooltip(): string {
@@ -31,11 +27,6 @@ export default class HdsTableThButtonTooltip extends Component<HdsTableThButtonT
  return this.args.tooltip;
  }
 
- /**
- * 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--tooltip'];
 

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

@@ -3,14 +3,29 @@
  SPDX-License-Identifier: MPL-2.0
 }}
 
-<Hds::Table::Th class="hds-table__th--is-selectable" @scope={{@selectionScope}} ...attributes>
- <Hds::Form::Checkbox::Base
- id={{this.checkboxId}}
- class="hds-table__checkbox"
- checked={{@isSelected}}
- aria-label={{this.ariaLabel}}
- {{did-insert this.didInsert}}
- {{will-destroy this.willDestroyNode}}
- {{on "change" this.onSelectionChange}}
- />
+<Hds::Table::Th
+ class="hds-table__th--is-selectable"
+ aria-sort={{if this.isSortable this.ariaSort}}
+ @scope={{@selectionScope}}
+ ...attributes
+>
+ <div class="hds-table__th-content">
+ <Hds::Form::Checkbox::Base
+ id={{this.checkboxId}}
+ class="hds-table__checkbox"
+ checked={{@isSelected}}
+ aria-label={{this.ariaLabel}}
+ {{did-insert this.didInsert}}
+ {{will-destroy this.willDestroyNode}}
+ {{on "change" this.onSelectionChange}}
+ />
+ {{#if this.isSortable}}
+ <span id={{this.labelId}} class="sr-only">selection state</span>
+ <Hds::Table::ThButtonSort
+ @sortOrder={{@sortBySelectedOrder}}
+ @onClick={{@onClickSortBySelected}}
+ @labelId={{this.labelId}}
+ />
+ {{/if}}
+ </div>
 </Hds::Table::Th>

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

@@ -7,8 +7,16 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
+import {
+ HdsTableThSortOrderValues,
+ HdsTableThSortOrderLabelValues,
+} from './types.ts';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base';
-import type { HdsTableScope } from './types';
+import type {
+ HdsTableScope,
+ HdsTableThSortOrder,
+ HdsTableThSortOrderLabels,
+} from './types';
 import type { HdsTableThArgs } from './th';
 
 export interface HdsTableThSelectableArgs {
@@ -18,13 +26,15 @@ export interface HdsTableThSelectableArgs {
  selectionKey?: string
  ) => void;
  isSelected?: boolean;
+ onClickSortBySelected?: () => void;
  onSelectionChange: (
  target: HdsFormCheckboxBaseSignature['Element'],
  selectionKey: string | undefined
  ) => void;
  selectionAriaLabelSuffix?: string;
  selectionKey?: string;
  selectionScope: HdsTableScope;
+ sortBySelectedOrder?: HdsTableThSortOrder;
  willDestroy: (selectionKey?: string) => void;
  };
  Element: HdsTableThArgs['Element'];
@@ -33,11 +43,14 @@ 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);
+ guid = guidFor(this);
+
+ checkboxId = `checkbox-${this.guid}`;
+ labelId = `label-${this.guid}`;
+
+ get isSortable(): boolean {
+ return this.args.onClickSortBySelected !== undefined;
+ }
 
  get ariaLabel(): string {
  const { selectionAriaLabelSuffix } = this.args;
@@ -49,6 +62,18 @@ export default class HdsTableThSelectable extends Component<HdsTableThSelectable
  }
  }
 
+ get ariaSort(): HdsTableThSortOrderLabels | undefined {
+ switch (this.args.sortBySelectedOrder) {
+ case HdsTableThSortOrderValues.Asc:
+ return HdsTableThSortOrderLabelValues.Asc;
+ case HdsTableThSortOrderValues.Desc:
+ return HdsTableThSortOrderLabelValues.Desc;
+ default:
+ // none is the default per the spec.
+ return HdsTableThSortOrderLabelValues.None;
+ }
+ }
+
  @action
  didInsert(checkbox: HdsFormCheckboxBaseSignature['Element']): void {
  const { didInsert } = this.args;

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

@@ -17,6 +17,7 @@ import type {
  HdsTableThSortOrder,
  HdsTableThSortOrderLabels,
 } from './types.ts';
+import type { HdsTableThButtonSortArgs } from './th-button-sort';
 
 export const ALIGNMENTS: string[] = Object.values(
  HdsTableHorizontalAlignmentValues
@@ -26,7 +27,7 @@ export const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;
 export interface HdsTableThSortArgs {
  Args: {
  align?: HdsTableHorizontalAlignment;
- onClickSort?: () => void;
+ onClickSort?: HdsTableThButtonSortArgs['Args']['onClick'];
  sortOrder?: HdsTableThSortOrder;
  tooltip?: string;
  width?: string;

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

@@ -10,8 +10,10 @@
  @selectionScope={{@selectionScope}}
  @selectionKey={{this.selectionKey}}
  @selectionAriaLabelSuffix={{@selectionAriaLabelSuffix}}
+ @sortBySelectedOrder={{@sortBySelectedOrder}}
  @didInsert={{@didInsert}}
  @willDestroy={{@willDestroy}}
+ @onClickSortBySelected={{@onClickSortBySelected}}
  @onSelectionChange={{@onSelectionChange}}
  />
  {{/if}}

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

@@ -6,16 +6,20 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { HdsTableScopeValues } from './types.ts';
-import type { HdsTableScope } from './types.ts';
+import type { HdsTableScope, HdsTableThSortOrder } from './types.ts';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base';
+import type { HdsTableArgs } from './index.ts';
+import type { HdsTableThSelectableArgs } from './th-selectable.ts';
 
 export interface BaseHdsTableTrArgs {
  Args: {
+ selectableColumnKey?: HdsTableArgs['Args']['selectableColumnKey'];
  isSelectable?: boolean;
  isSelected?: false;
  selectionAriaLabelSuffix?: string;
  selectionKey?: string;
  selectionScope: HdsTableScope;
+ sortBySelectedOrder?: HdsTableThSortOrder;
  didInsert: (
  checkbox: HdsFormCheckboxBaseSignature['Element'],
  selectionKey?: string
@@ -25,6 +29,7 @@ export interface BaseHdsTableTrArgs {
  selectionKey?: string
  ) => void;
  willDestroy: () => void;
+ onClickSortBySelected?: HdsTableThSelectableArgs['Args']['onClickSortBySelected'];
  };
  Blocks: {
  default: [];
@@ -43,13 +48,7 @@ export interface SelectableHdsTableTrArgs extends BaseHdsTableTrArgs {
 
 // Union type to combine both possible states
 export type HdsTableTrArgs = BaseHdsTableTrArgs | SelectableHdsTableTrArgs;
-
 export default class HdsTableTr extends Component<HdsTableTrArgs> {
- /**
- * @param selectionKey
- * @type {string}
- * @default undefined
- */
  get selectionKey(): string | undefined {
  if (this.args.isSelectable && this.args.selectionScope === 'row') {
  assert(

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

@@ -91,3 +91,5 @@ export interface HdsTableOnSelectionChangeArgs {
  isSelected?: boolean;
  }[];
 }
+
+export type HdsTableModel = Array<Record<string, unknown>>;