Skip to content

Commit 2376ab0

Browse files
authored
AdvancedTable: use correct icons in th-button-expand (#2777)
1 parent ea73543 commit 2376ab0

File tree

4 files changed

+37
-4
lines changed

4 files changed

+37
-4
lines changed

.changeset/rotten-suits-impress.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hashicorp/design-system-components": patch
3+
---
4+
5+
`AdvancedTable` - Updated the icons used in `th-button-expand` component to match designs.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@ export default class HdsAdvancedTableThButtonExpand extends Component<HdsAdvance
3737
if (this.isExpanded === true) {
3838
return this.args.isExpandAll
3939
? HdsAdvancedTableThExpandIconValues.UnfoldClose
40-
: HdsAdvancedTableThExpandIconValues.ChevronDown;
40+
: HdsAdvancedTableThExpandIconValues.ChevronUp;
4141
} else if (this.isExpanded === 'mixed' && this.args.isExpandAll) {
4242
return HdsAdvancedTableThExpandIconValues.UnfoldOpen;
4343
} else {
4444
return this.args.isExpandAll
4545
? HdsAdvancedTableThExpandIconValues.UnfoldOpen
46-
: HdsAdvancedTableThExpandIconValues.ChevronRight;
46+
: HdsAdvancedTableThExpandIconValues.ChevronDown;
4747
}
4848
}
4949

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export enum HdsAdvancedTableScopeValues {
2828
export type HdsAdvancedTableScope = `${HdsAdvancedTableScopeValues}`;
2929

3030
export enum HdsAdvancedTableThExpandIconValues {
31-
ChevronRight = 'chevron-right',
31+
ChevronUp = 'chevron-up',
3232
ChevronDown = 'chevron-down',
3333
UnfoldOpen = 'unfold-open',
3434
UnfoldClose = 'unfold-close',

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1191,7 +1191,12 @@
11911191
<div class="hds-advanced-table__thead">
11921192
<div class="hds-advanced-table__tr">
11931193
{{#each @model.STATES as |state|}}
1194-
<Hds::AdvancedTable::Th mock-state-value={{state}} mock-state-selector="button" @isExpandable={{true}}>
1194+
<Hds::AdvancedTable::Th
1195+
mock-state-value={{state}}
1196+
mock-state-selector="button"
1197+
@isExpandable={{true}}
1198+
@hasExpandAllButton={{true}}
1199+
>
11951200
{{capitalize state}}
11961201
</Hds::AdvancedTable::Th>
11971202
{{/each}}
@@ -1209,6 +1214,7 @@
12091214
mock-state-selector="button"
12101215
@isExpandable={{true}}
12111216
@isExpanded={{true}}
1217+
@hasExpandAllButton={{true}}
12121218
>
12131219
{{capitalize state}}
12141220
</Hds::AdvancedTable::Th>
@@ -1227,6 +1233,7 @@
12271233
mock-state-selector="button"
12281234
@isExpandable={{true}}
12291235
@isExpanded="mixed"
1236+
@hasExpandAllButton={{true}}
12301237
>
12311238
{{capitalize state}}
12321239
</Hds::AdvancedTable::Th>
@@ -1248,6 +1255,7 @@
12481255
mock-state-value={{state}}
12491256
mock-state-selector="button"
12501257
@isExpandable={{true}}
1258+
@hasExpandAllButton={{true}}
12511259
>
12521260
{{capitalize state}}
12531261
</Hds::AdvancedTable::Th>
@@ -1267,6 +1275,7 @@
12671275
mock-state-selector="button"
12681276
@isExpandable={{true}}
12691277
@isExpanded={{true}}
1278+
@hasExpandAllButton={{true}}
12701279
>
12711280
{{capitalize state}}
12721281
</Hds::AdvancedTable::Th>
@@ -1286,6 +1295,7 @@
12861295
mock-state-selector="button"
12871296
@isExpandable={{true}}
12881297
@isExpanded="mixed"
1298+
@hasExpandAllButton={{true}}
12891299
>
12901300
{{capitalize state}}
12911301
</Hds::AdvancedTable::Th>
@@ -1810,4 +1820,22 @@
18101820
{{/each}}
18111821
</Shw::Grid>
18121822

1823+
<Shw::Grid @label="Expand all interactive states + Expand state" @columns={{4}} as |SG|>
1824+
{{#each @model.STATES as |state|}}
1825+
<SG.Item @label={{capitalize state}}>
1826+
<Shw::Flex @direction="row" as |SF|>
1827+
<SF.Item>
1828+
<Hds::AdvancedTable::ThButtonExpand mock-state-value={{state}} @isExpandAll={{true}} />
1829+
</SF.Item>
1830+
<SF.Item>
1831+
<Hds::AdvancedTable::ThButtonExpand @isExpanded={{true}} mock-state-value={{state}} @isExpandAll={{true}} />
1832+
</SF.Item>
1833+
<SF.Item>
1834+
<Hds::AdvancedTable::ThButtonExpand @isExpanded="mixed" mock-state-value={{state}} @isExpandAll={{true}} />
1835+
</SF.Item>
1836+
</Shw::Flex>
1837+
</SG.Item>
1838+
{{/each}}
1839+
</Shw::Grid>
1840+
18131841
</section>

0 commit comments

Comments
 (0)