AdvancedTable: use correct icons in th-button-expand (#2777)

Author: shleewhite

.changeset/rotten-suits-impress.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`AdvancedTable` - Updated the icons used in `th-button-expand` component to match designs.

packages/components/src/components/hds/advanced-table/th-button-expand.ts

@@ -37,13 +37,13 @@ export default class HdsAdvancedTableThButtonExpand extends Component<HdsAdvance
     if (this.isExpanded === true) {
       return this.args.isExpandAll
         ? HdsAdvancedTableThExpandIconValues.UnfoldClose
-        : HdsAdvancedTableThExpandIconValues.ChevronDown;
+        : HdsAdvancedTableThExpandIconValues.ChevronUp;
     } else if (this.isExpanded === 'mixed' && this.args.isExpandAll) {
       return HdsAdvancedTableThExpandIconValues.UnfoldOpen;
     } else {
       return this.args.isExpandAll
         ? HdsAdvancedTableThExpandIconValues.UnfoldOpen
-        : HdsAdvancedTableThExpandIconValues.ChevronRight;
+        : HdsAdvancedTableThExpandIconValues.ChevronDown;
     }
   }
 

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

@@ -28,7 +28,7 @@ export enum HdsAdvancedTableScopeValues {
 export type HdsAdvancedTableScope = `${HdsAdvancedTableScopeValues}`;
 
 export enum HdsAdvancedTableThExpandIconValues {
-  ChevronRight = 'chevron-right',
+  ChevronUp = 'chevron-up',
   ChevronDown = 'chevron-down',
   UnfoldOpen = 'unfold-open',
   UnfoldClose = 'unfold-close',

showcase/app/templates/components/advanced-table.hbs

@@ -1191,7 +1191,12 @@
         <div class="hds-advanced-table__thead">
           <div class="hds-advanced-table__tr">
             {{#each @model.STATES as |state|}}
-              <Hds::AdvancedTable::Th mock-state-value={{state}} mock-state-selector="button" @isExpandable={{true}}>
+              <Hds::AdvancedTable::Th
+                mock-state-value={{state}}
+                mock-state-selector="button"
+                @isExpandable={{true}}
+                @hasExpandAllButton={{true}}
+              >
                 {{capitalize state}}
               </Hds::AdvancedTable::Th>
             {{/each}}
@@ -1209,6 +1214,7 @@
                 mock-state-selector="button"
                 @isExpandable={{true}}
                 @isExpanded={{true}}
+                @hasExpandAllButton={{true}}
               >
                 {{capitalize state}}
               </Hds::AdvancedTable::Th>
@@ -1227,6 +1233,7 @@
                 mock-state-selector="button"
                 @isExpandable={{true}}
                 @isExpanded="mixed"
+                @hasExpandAllButton={{true}}
               >
                 {{capitalize state}}
               </Hds::AdvancedTable::Th>
@@ -1248,6 +1255,7 @@
                 mock-state-value={{state}}
                 mock-state-selector="button"
                 @isExpandable={{true}}
+                @hasExpandAllButton={{true}}
               >
                 {{capitalize state}}
               </Hds::AdvancedTable::Th>
@@ -1267,6 +1275,7 @@
                 mock-state-selector="button"
                 @isExpandable={{true}}
                 @isExpanded={{true}}
+                @hasExpandAllButton={{true}}
               >
                 {{capitalize state}}
               </Hds::AdvancedTable::Th>
@@ -1286,6 +1295,7 @@
                 mock-state-selector="button"
                 @isExpandable={{true}}
                 @isExpanded="mixed"
+                @hasExpandAllButton={{true}}
               >
                 {{capitalize state}}
               </Hds::AdvancedTable::Th>
@@ -1810,4 +1820,22 @@
     {{/each}}
   </Shw::Grid>
 
+  <Shw::Grid @label="Expand all interactive states + Expand state" @columns={{4}} as |SG|>
+    {{#each @model.STATES as |state|}}
+      <SG.Item @label={{capitalize state}}>
+        <Shw::Flex @direction="row" as |SF|>
+          <SF.Item>
+            <Hds::AdvancedTable::ThButtonExpand mock-state-value={{state}} @isExpandAll={{true}} />
+          </SF.Item>
+          <SF.Item>
+            <Hds::AdvancedTable::ThButtonExpand @isExpanded={{true}} mock-state-value={{state}} @isExpandAll={{true}} />
+          </SF.Item>
+          <SF.Item>
+            <Hds::AdvancedTable::ThButtonExpand @isExpanded="mixed" mock-state-value={{state}} @isExpandAll={{true}} />
+          </SF.Item>
+        </Shw::Flex>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
 </section>