feat(table): add inderminate state & updated selected prop (#372)

* feat(table): added indeterminate support for multiselect table * docs(table): added allSelected and allIndeterminate controls to storybook * docs(table): updated control name * fix(table): deprecated allSelected and introduces selected and indeterminate props * docs(table): updated stoory to use correct prop names
scania-digital-design-system · Oct 24, 2023 · bb75264 · bb75264
1 parent 5ca8038
commit bb75264
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/packages/core/src/components/table/table-component-multiselect.stories.tsx b/packages/core/src/components/table/table-component-multiselect.stories.tsx
@@ -38,6 +38,20 @@ export default {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
+    allSelected: {
+      name: 'All selected',
+      description: `Controls the checked state of the "all-selected"-checkbox.`,
+      control: {
+        type: 'boolean',
+      },
+    },
+    allIndeterminate: {
+      name: 'All indeterminate',
+      description: `Controls the indeterminate state of the "all-selected"-checkbox.`,
+      control: {
+        type: 'boolean',
+      },
+    },
     compactDesign: {
       name: 'Compact design',
       description: 'Enables compact design of the Table, rows with less height.',
@@ -116,6 +130,8 @@ export default {
   },
   args: {
     modeVariant: 'Inherit from parent',
+    allSelected: false,
+    allIndeterminate: false,
     compactDesign: false,
     responsiveDesign: false,
     verticalDivider: false,
@@ -129,6 +145,8 @@ export default {
 
 const MultiselectTemplate = ({
   modeVariant,
+  allSelected,
+  allIndeterminate,
   compactDesign,
   responsiveDesign,
   verticalDivider,
@@ -150,7 +168,9 @@ const MultiselectTemplate = ({
           modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''
         }
     >
-          <tds-table-header>
+          <tds-table-header ${allSelected ? 'selected' : ''} ${
+    allIndeterminate ? 'indeterminate' : ''
+  }>
               <tds-header-cell cell-key='truck' cell-value='Truck type' ${
                 column1Width ? `custom-width="${column1Width}"` : ''
               }></tds-header-cell>

diff --git a/packages/core/src/components/table/table-header/readme.md b/packages/core/src/components/table/table-header/readme.md
@@ -7,9 +7,11 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                                                                     | Type      | Default |
-| ------------- | -------------- | ------------------------------------------------------------------------------- | --------- | ------- |
-| `allSelected` | `all-selected` | Prop for controling the checked/unchecked state of the "all selected"-checkbox. | `boolean` | `false` |
+| Property        | Attribute       | Description                                                                                  | Type      | Default     |
+| --------------- | --------------- | -------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `allSelected`   | `all-selected`  | <span style="color:red">**[DEPRECATED]**</span> Deprecated, use selected instead..<br/><br/> | `boolean` | `false`     |
+| `indeterminate` | `indeterminate` | Prop for controling the indeterminate state of the "All selected"-checkbox.                  | `boolean` | `false`     |
+| `selected`      | `selected`      | Prop for controling the checked/unchecked state of the "All selected"-checkbox.              | `boolean` | `undefined` |
 
 
 ## Events

diff --git a/packages/core/src/components/table/table-header/table-header.tsx b/packages/core/src/components/table/table-header/table-header.tsx
@@ -28,9 +28,15 @@ const relevantTableProps: InternalTdsTablePropChange['changed'] = [
   shadow: true,
 })
 export class TdsTableHeaderRow {
-  /** Prop for controling the checked/unchecked state of the "all selected"-checkbox. */
+  /** @deprecated Deprecated, use selected instead.. */
   @Prop({ reflect: true, mutable: true }) allSelected: boolean = false;
 
+  /** Prop for controling the checked/unchecked state of the "All selected"-checkbox. */
+  @Prop({ reflect: true, mutable: true }) selected: boolean;
+
+  /** Prop for controling the indeterminate state of the "All selected"-checkbox. */
+  @Prop() indeterminate: boolean = false;
+
   @State() multiselect: boolean = false;
 
   @State() expandableRows: boolean = false;
@@ -146,7 +152,8 @@ export class TdsTableHeaderRow {
             <th class="tds-table__header-cell tds-table__header-cell--checkbox">
               <div class="tds-form-label tds-form-label--table">
                 <tds-checkbox
-                  checked={this.allSelected}
+                  checked={this.allSelected || this.selected}
+                  indeterminate={this.indeterminate}
                   onTdsChange={(event) => this.handleCheckboxChange(event)}
                 ></tds-checkbox>
               </div>