Skip to content

Commit ec4a7f7

Browse files
dchyundchyun
committed
Feat: Design alignments
1 parent 78f7378 commit ec4a7f7

File tree

7 files changed

+59
-66
lines changed

7 files changed

+59
-66
lines changed

‎packages/components/src/components/hds/filter-bar/filter-group.hbs‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,8 @@
33
SPDX-License-Identifier: MPL-2.0
44
}}
55
{{#let @tab as |Tab|}}
6-
<Tab>
6+
<Tab @numFilters={{this.numFilters}}>
77
{{@text}}
8-
{{#unless (eq this.numFilters 0)}}
9-
<Hds::BadgeCount
10-
@text={{this.numFilters}}
11-
@type="outlined"
12-
@size="small"
13-
class="hds-filter-bar__filters-dropdown__filter-group__filters-count"
14-
/>
15-
{{/unless}}
168
</Tab>
179
{{/let}}
1810
{{#let @panel as |Panel|}}

‎packages/components/src/components/hds/filter-bar/filters-dropdown.hbs‎

Lines changed: 14 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
>
1414
<D.ToggleButton
1515
@icon="filter"
16-
@text={{hds-t "hds.components.filter-bar.filters-dropdown.toggle-button" default="Add filter"}}
16+
@text={{hds-t "hds.components.filter-bar.filters-dropdown.toggle-button" default="Filters"}}
17+
@count={{this.numFilters}}
1718
@color="secondary"
1819
@size="small"
1920
/>
@@ -30,34 +31,20 @@
3031
</Hds::FilterBar::Tabs>
3132
</D.Generic>
3233
<D.Footer @hasDivider={{true}}>
33-
<Hds::Layout::Flex @direction="row" @justify="space-between" @align="center" as |LF|>
34-
<Hds::ButtonSet>
35-
{{#unless this.isLiveFilter}}
36-
<Hds::Button
37-
@text={{hds-t "hds.components.filter-bar.filters-dropdown.apply" default="Apply filters"}}
38-
@size="small"
39-
{{on "click" (fn this.onApply D.close)}}
40-
/>
41-
{{/unless}}
34+
<Hds::ButtonSet>
35+
{{#unless this.isLiveFilter}}
4236
<Hds::Button
43-
@text={{hds-t "hds.components.filter-bar.filters-dropdown.clear" default="Clear all filters"}}
44-
@color="secondary"
37+
@text={{hds-t "hds.components.filter-bar.filters-dropdown.apply" default="Apply filters"}}
4538
@size="small"
46-
{{on "click" (fn this.onClear D.close)}}
39+
{{on "click" (fn this.onApply D.close)}}
4740
/>
48-
</Hds::ButtonSet>
49-
<LF.Item>
50-
<Hds::Text::Body>{{hds-t
51-
"hds.components.filter-bar.filters-dropdown.selected-filters"
52-
default="Filters selected"
53-
}}:</Hds::Text::Body>
54-
<Hds::BadgeCount
55-
@text={{this.numFilters}}
56-
@type="outlined"
57-
@size="small"
58-
class="hds-filter-bar__filters-dropdown__filters-count"
59-
/>
60-
</LF.Item>
61-
</Hds::Layout::Flex>
41+
{{/unless}}
42+
<Hds::Button
43+
@text={{hds-t "hds.components.filter-bar.filters-dropdown.clear" default="Clear all filters"}}
44+
@color="secondary"
45+
@size="small"
46+
{{on "click" (fn this.onClear D.close)}}
47+
/>
48+
</Hds::ButtonSet>
6249
</D.Footer>
6350
</Hds::Dropdown>

‎packages/components/src/components/hds/filter-bar/index.hbs‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,18 @@
44
}}
55
<div class="hds-filter-bar" ...attributes>
66
<Hds::Layout::Flex @align="end" @gap="8" class="hds-filter-bar__actions">
7+
<Hds::Button
8+
@text={{if
9+
this._isExpanded
10+
(hds-t "hds.components.filter-bar.expand-collapse-button.collapse" default="Collapse filters")
11+
(hds-t "hds.components.filter-bar.expand-collapse-button.expand" default="Expand filters")
12+
}}
13+
@color="secondary"
14+
@size="small"
15+
@icon={{if this._isExpanded "unfold-close" "unfold-open"}}
16+
@isIconOnly={{true}}
17+
{{on "click" this.toggleExpand}}
18+
/>
719
{{yield
820
(hash
921
FiltersDropdown=(component
@@ -26,18 +38,6 @@
2638
<Hds::Layout::Flex @gap="8" @align="center" class="hds-filter-bar__actions__right">
2739
{{yield (hash ActionsGeneric=(component "hds/yield"))}}
2840
{{yield (hash ActionsDropdown=(component "hds/dropdown"))}}
29-
<Hds::Button
30-
@text={{if
31-
this._isExpanded
32-
(hds-t "hds.components.filter-bar.expand-collapse-button.collapse" default="Collapse filters")
33-
(hds-t "hds.components.filter-bar.expand-collapse-button.expand" default="Expand filters")
34-
}}
35-
@color="secondary"
36-
@size="small"
37-
@icon={{if this._isExpanded "unfold-close" "unfold-open"}}
38-
@isIconOnly={{true}}
39-
{{on "click" this.toggleExpand}}
40-
/>
4141
</Hds::Layout::Flex>
4242
</Hds::Layout::Flex>
4343
{{#if this._isExpanded}}

‎packages/components/src/components/hds/filter-bar/tabs/tab.hbs‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,13 @@
1717
{{on "keyup" this.onKeyUp}}
1818
{{this._setUpTab this.didInsertNode this.willDestroyNode}}
1919
>
20-
<Hds::Text::Body @size="200" @weight="medium">{{yield}}</Hds::Text::Body>
21-
<Hds::Icon @name="chevron-right" />
20+
<Hds::Text::Body @size="200" @weight="medium" class="hds-filter-bar__tabs__tab__text">{{yield}}</Hds::Text::Body>
21+
{{#if (gt @numFilters 0)}}
22+
<Hds::Text::Body @size="200" @color="primary">
23+
{{@numFilters}}
24+
</Hds::Text::Body>
25+
{{/if}}
26+
<Hds::Icon @name="chevron-right" @color="primary" />
2227
</button>
2328
</li>
2429
{{! template-lint-enable require-presentational-children }}

‎packages/components/src/components/hds/filter-bar/tabs/tab.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface HdsFilterBarTabsTabSignature {
1313
selectedTabIndex?: number;
1414
tabIds?: string[];
1515
panelIds?: string[];
16+
numFilters?: number;
1617
didInsertNode?: () => void;
1718
willDestroyNode?: (element: HTMLButtonElement) => void;
1819
onClick?: (event: MouseEvent, nodeIndex: number) => void;

‎packages/components/src/styles/components/filter-bar.scss‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
}
3535

3636
.hds-filter-bar__search {
37-
--token-form-control-padding: 4px;
37+
--token-form-control-padding: 3px;
3838
}
3939

4040
// FILTERS DROPDOWN
@@ -77,8 +77,7 @@
7777
overscroll-behavior: contain;
7878
}
7979

80-
.hds-filter-bar__filters-dropdown__filters-count,
81-
.hds-filter-bar__filters-dropdown__filter-group__filters-count {
80+
.hds-filter-bar__filters-dropdown__filters-count {
8281
margin-left: 8px;
8382
}
8483

@@ -104,6 +103,7 @@
104103
}
105104

106105
.hds-filter-bar__filters-dropdown__fields .hds-filter-bar__filters-dropdown__field,
106+
.hds-filter-bar__filters-dropdown__fields .hds-filter-bar__filters-dropdown__field[type="date"],
107107
.hds-filter-bar__filters-dropdown__fields .hds-filter-bar__filters-dropdown__field[type="time"] {
108108
width: 100%;
109109
}
@@ -144,7 +144,6 @@
144144
display: flex;
145145
gap: 16px;
146146
align-items: center;
147-
justify-content: space-between;
148147
width: 100%;
149148
padding: 8px 12px;
150149
color: var(--token-color-foreground-primary);
@@ -153,24 +152,33 @@
153152
border: none;
154153
border-radius: var(--token-border-radius-small);
155154

156-
.hds-icon {
157-
fill: var(--token-color-foreground-primary);
158-
}
159-
160155
&.mock-hover,
161-
&:hover,
162-
&.mock-focus,
163-
&:focus {
156+
&:hover {
164157
background-color: var(--token-color-surface-interactive-hover);
165158
cursor: pointer;
166159
}
160+
161+
&.mock-active,
162+
&:active {
163+
background-color: var(--token-color-surface-interactive-active);
164+
}
165+
}
166+
167+
.hds-filter-bar__tabs__tab__text {
168+
width: 100%;
167169
}
168170

169171
.hds-filter-bar__tabs__tab--is-selected .hds-filter-bar__tabs__tab__button {
170-
color: var(--token-color-foreground-strong);
171-
background-color: var(--token-color-surface-interactive-active);
172+
color: var(--token-color-foreground-action);
173+
background-color: var(--token-color-surface-strong);
174+
175+
&.mock-hover,
176+
&:hover {
177+
background-color: var(--token-color-palette-neutral-200);
178+
}
172179

173-
.hds-icon {
174-
fill: var(--token-color-foreground-strong);
180+
&.mock-active,
181+
&:active {
182+
background-color: var(--token-color-palette-neutral-300);
175183
}
176184
}

‎packages/components/translations/hds/components/filter-bar/filters-dropdown/en-us.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ expand-collapse-button:
44
expand: Expand filters
55
collapse: Collapse filters
66
selected-filters: Filters selected
7-
toggle-button: Add filter
7+
toggle-button: Filters

0 commit comments

Comments
 (0)