requiring widths for resize

Author: zamoore

packages/components/src/components/hds/advanced-table/models/column.ts

@@ -2,6 +2,7 @@ import { tracked } from '@glimmer/tracking';
 
 import type { HdsAdvancedTableColumn as HdsAdvancedTableColumnType } from '../types';
 import type { HdsAdvancedTableHorizontalAlignment } from '../types';
+import { assert } from '@ember/debug';
 
 function getNumericalWidth(width: string | undefined): number {
   if (width === undefined) {
@@ -13,11 +14,12 @@ function getNumericalWidth(width: string | undefined): number {
 }
 export default class HdsAdvancedTableColumn {
   @tracked label: string = '';
+  @tracked _isResizable: boolean = false;
+
   @tracked align?: HdsAdvancedTableHorizontalAlignment = 'left';
   @tracked key?: string = undefined;
   @tracked isExpandable?: boolean = false;
   @tracked isReorderable?: boolean = false;
-  @tracked isResizable?: boolean = false;
   @tracked isSortable?: boolean = false;
   @tracked isVisuallyHidden?: boolean = false;
   @tracked tooltip?: string = undefined;
@@ -27,6 +29,16 @@ export default class HdsAdvancedTableColumn {
 
   @tracked sortingFunction?: (a: unknown, b: unknown) => number = undefined;
 
+  get isResizable(): boolean | undefined {
+    if (!this._isResizable) {
+      return false;
+    }
+
+    assert('width must be set to use isResizable', this.width !== undefined);
+
+    return this._isResizable;
+  }
+
   get numericalWidth(): number {
     return getNumericalWidth(this.width);
   }
@@ -46,7 +58,7 @@ export default class HdsAdvancedTableColumn {
     this.label = args.label;
     this.align = args.align;
     this.key = args.key;
-    this.isResizable = args.isResizable;
+    this._isResizable = args.isResizable ?? false;
     this.isSortable = args.isSortable;
     this.isVisuallyHidden = args.isVisuallyHidden;
     this.tooltip = args.tooltip;

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

@@ -65,8 +65,12 @@
 
   {{#if this.isResizeSliderVisible}}
     <div class="hds-advanced-table__th-resize-slider">
-      {{@column.numericalWidth}}
+      <Hds::Form::Label @controlId="{{this._labelId}}-resize-slider">
+        {{@column.label}}
+        column width
+      </Hds::Form::Label>
       <Hds::Form::RangeSlider::Base
+        id="{{this._labelId}}-resize-slider"
         @min={{@column.numericalMinWidth}}
         @max={{@column.numericalMaxWidth}}
         @value={{@column.numericalWidth}}

packages/components/src/styles/components/form/range-slider.scss

@@ -1,6 +1,7 @@
 input[type="range"].hds-form-range-slider {
   width: 100%;
   height: 4px;
+  margin-top: 16px;
   border-radius: 2px;
   cursor: pointer;
   // stylelint-disable-next-line property-no-vendor-prefix

showcase/app/controllers/components/advanced-table.js

@@ -364,18 +364,21 @@ export default class ComponentsTableController extends Controller {
       key: 'artist',
       label: 'Artist',
       tooltip: 'More information.',
+      width: '200px',
       isResizable: true,
     },
     {
       key: 'album',
       label: 'Album',
       tooltip: 'More information.',
+      width: '300px',
       isResizable: true,
     },
     {
       key: 'year',
       label: 'Release Year',
       tooltip: 'More information.',
+      width: '200px',
       isResizable: true,
     },
     {