Skip to content

Commit bdb6173

Browse files
Lukas742Lukas742
authored
feat(FilterBar): FilterBar without Toolbar spreads filters to available width (#1660)
1 parent b7b1098 commit bdb6173

7 files changed

Lines changed: 264 additions & 76 deletions

File tree

‎packages/main/src/components/FilterBar/FilterBar.jss.ts‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1+
import { isIE } from '@ui5/webcomponents-base/dist/Device';
12
import { ThemingParameters } from '@ui5/webcomponents-react-base/dist/ThemingParameters';
23

34
const styles = {
45
outerContainer: {
6+
background: ThemingParameters.sapObjectHeader_Background,
7+
'--_ui5_input_width': '100%'
8+
},
9+
outerContainerWithToolbar: {
510
paddingTop: '0.5rem',
611
paddingLeft: '2rem',
712
paddingRight: '2rem',
813
paddingBottom: '1px',
9-
background: ThemingParameters.sapObjectHeader_Background,
1014
boxShadow: ThemingParameters.sapContent_HeaderShadow
1115
},
12-
filterItemExpand: {
13-
'--_ui5_input_width': '100%'
14-
},
1516
filterBarHeader: {
1617
alignItems: 'center',
1718
display: 'flex',
@@ -23,37 +24,57 @@ const styles = {
2324
},
2425
filterArea: {
2526
display: 'flex',
27+
alignItems: 'center',
2628
flexWrap: 'wrap',
2729
paddingTop: '1rem',
28-
paddingBottom: '1rem',
30+
marginBottom: '1rem',
2931
background: ThemingParameters.sapObjectHeader_Background,
3032
transition: 'max-height 0.2s ease-out, opacity 0.2s ease-in'
3133
},
3234
filterAreaClosed: {
3335
maxHeight: '0',
3436
opacity: 0,
3537
padding: 0,
38+
margin: 0,
3639
overflowY: 'auto'
3740
},
3841
filterAreaOpen: {
39-
maxHeight: '500px',
40-
opacity: 1,
41-
overflowY: 'auto'
42-
},
43-
headerRowRight: {
44-
display: 'flex',
45-
justifyContent: 'flex-end',
46-
flexGrow: 1,
47-
'& ui5-button': {
48-
marginLeft: '0.5rem'
49-
}
42+
opacity: 1
5043
},
5144
showFiltersBtn: { minWidth: '108px' },
5245
loadingContainer: {
5346
marginBottom: '0.5rem',
5447
display: 'flex',
5548
width: '100%',
5649
justifyContent: 'center'
50+
},
51+
filterBarButtons: {
52+
display: 'flex',
53+
alignItems: 'center',
54+
position: 'absolute',
55+
right: 0,
56+
marginBottom: '1rem',
57+
'&:not(:first-child)': {
58+
marginLeft: '0.25rem'
59+
},
60+
'&:not(:last-child)': {
61+
marginRight: '0.25rem'
62+
}
63+
},
64+
spacer: {
65+
height: 0,
66+
marginTop: 0,
67+
flexGrow: 1,
68+
flexShrink: 0,
69+
maxWidth: isIE() ? '26.25rem' : 'calc(var(--_ui5wcr_filter_group_item_flex_basis) * 2)',
70+
flexBasis: isIE() ? '13.125rem' : 'calc(var(--_ui5wcr_filter_group_item_flex_basis))'
71+
},
72+
lastSpacer: {
73+
height: 'var(--_ui5_input_height)',
74+
flexGrow: 1,
75+
flexShrink: 0,
76+
maxWidth: isIE() ? '26.25rem' : 'calc(var(--_ui5wcr_filter_group_item_flex_basis) * 2)',
77+
flexBasis: isIE() ? '13.125rem' : 'calc(var(--_ui5wcr_filter_group_item_flex_basis))'
5778
}
5879
};
5980

‎packages/main/src/components/FilterBar/FilterBar.stories.mdx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@ import { MultiComboBoxItem } from '@ui5/webcomponents-react/dist/MultiComboBoxIt
77
import { Option } from '@ui5/webcomponents-react/dist/Option';
88
import { Select } from '@ui5/webcomponents-react/dist/Select';
99
import { Switch } from '@ui5/webcomponents-react/dist/Switch';
10-
import { DatePicker } from '@ui5/webcomponents-react/dist/DatePicker';
10+
import { DateRangePicker } from '@ui5/webcomponents-react/dist/DateRangePicker';
1111
import { VariantManagement } from '@ui5/webcomponents-react/dist/VariantManagement';
1212
import '@ui5/webcomponents-icons/dist/nav-back.js';
13-
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
1413
import { DocsHeader } from '@shared/stories/DocsHeader';
1514
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
1615

@@ -108,7 +107,7 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
108107
</MultiComboBox>
109108
</FilterGroupItem>
110109
<FilterGroupItem label="Date Picker" groupName="Group 2">
111-
<DatePicker />
110+
<DateRangePicker style={{ minWidth: 'auto' }} />
112111
</FilterGroupItem>
113112
</FilterBar>
114113
);

‎packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap‎

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
exports[`FilterBar Render without crashing - default props 1`] = `
44
<DocumentFragment>
55
<div
6-
class="FilterBar-outerContainer"
6+
class="FilterBar-outerContainer FilterBar-outerContainerWithToolbar"
7+
style="--_ui5wcr_filter_group_item_flex_basis: 13.125rem;"
78
>
89
<div
910
class="Toolbar-outerContainer Toolbar-clear FilterBar-filterBarHeader"
@@ -28,9 +29,13 @@ exports[`FilterBar Render without crashing - default props 1`] = `
2829
</div>
2930
<div
3031
class="FilterBar-filterArea FilterBar-filterAreaOpen"
32+
style="position: relative;"
3133
>
3234
<div
3335
class="FilterGroupItem-filterItem"
36+
data-in-fb="true"
37+
data-with-toolbar="true"
38+
style="margin-right: 1rem; width: 13.125rem;"
3439
>
3540
<div
3641
class="FilterGroupItem-innerFilterItemContainer"
@@ -82,7 +87,8 @@ exports[`FilterBar Render without crashing - default props 1`] = `
8287
exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
8388
<DocumentFragment>
8489
<div
85-
class="FilterBar-outerContainer FilterBar-filterItemExpand"
90+
class="FilterBar-outerContainer FilterBar-outerContainerWithToolbar"
91+
style="--_ui5wcr_filter_group_item_flex_basis: 12rem;"
8692
>
8793
<div
8894
class="Toolbar-outerContainer Toolbar-clear FilterBar-filterBarHeader"
@@ -174,10 +180,13 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
174180
</div>
175181
<div
176182
class="FilterBar-filterArea FilterBar-filterAreaOpen"
183+
style="position: relative;"
177184
>
178185
<div
179186
class="FilterGroupItem-filterItem"
180-
style="width: 12rem;"
187+
data-in-fb="true"
188+
data-with-toolbar="true"
189+
style="margin-right: 1rem; width: 12rem;"
181190
>
182191
<div
183192
class="FilterGroupItem-innerFilterItemContainer"
@@ -203,7 +212,9 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
203212
</div>
204213
<div
205214
class="FilterGroupItem-filterItem"
206-
style="width: 12rem;"
215+
data-in-fb="true"
216+
data-with-toolbar="true"
217+
style="margin-right: 1rem; width: 12rem;"
207218
>
208219
<div
209220
class="FilterGroupItem-innerFilterItemContainer"
@@ -226,7 +237,9 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
226237
</div>
227238
<div
228239
class="FilterGroupItem-filterItem"
229-
style="width: 12rem;"
240+
data-in-fb="true"
241+
data-with-toolbar="true"
242+
style="margin-right: 1rem; width: 12rem;"
230243
>
231244
<div
232245
class="FilterGroupItem-innerFilterItemContainer"
@@ -260,7 +273,9 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
260273
</div>
261274
<div
262275
class="FilterGroupItem-filterItem"
263-
style="width: 12rem;"
276+
data-in-fb="true"
277+
data-with-toolbar="true"
278+
style="margin-right: 1rem; width: 12rem;"
264279
>
265280
<div
266281
class="FilterGroupItem-innerFilterItemContainer"
@@ -306,7 +321,9 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
306321
</div>
307322
<div
308323
class="FilterGroupItem-filterItem"
309-
style="width: 12rem;"
324+
data-in-fb="true"
325+
data-with-toolbar="true"
326+
style="margin-right: 1rem; width: 12rem;"
310327
>
311328
<div
312329
class="FilterGroupItem-innerFilterItemContainer"
@@ -367,7 +384,9 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
367384
</div>
368385
<div
369386
class="FilterGroupItem-filterItem"
370-
style="width: 12rem;"
387+
data-in-fb="true"
388+
data-with-toolbar="true"
389+
style="margin-right: 1rem; width: 12rem;"
371390
>
372391
<div
373392
class="FilterGroupItem-innerFilterItemContainer"
@@ -410,7 +429,9 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
410429
</div>
411430
<div
412431
class="FilterGroupItem-filterItem"
413-
style="width: 12rem;"
432+
data-in-fb="true"
433+
data-with-toolbar="true"
434+
style="margin-right: 1rem; width: 12rem;"
414435
>
415436
<div
416437
class="FilterGroupItem-innerFilterItemContainer"
@@ -441,7 +462,8 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
441462
exports[`FilterBar Toggle FilterBar filters 1`] = `
442463
<DocumentFragment>
443464
<div
444-
class="FilterBar-outerContainer"
465+
class="FilterBar-outerContainer FilterBar-outerContainerWithToolbar"
466+
style="--_ui5wcr_filter_group_item_flex_basis: 13.125rem;"
445467
>
446468
<div
447469
class="Toolbar-outerContainer Toolbar-clear FilterBar-filterBarHeader"
@@ -466,9 +488,13 @@ exports[`FilterBar Toggle FilterBar filters 1`] = `
466488
</div>
467489
<div
468490
class="FilterBar-filterArea FilterBar-filterAreaClosed"
491+
style="position: relative;"
469492
>
470493
<div
471494
class="FilterGroupItem-filterItem"
495+
data-in-fb="true"
496+
data-with-toolbar="true"
497+
style="margin-right: 1rem; width: 13.125rem;"
472498
>
473499
<div
474500
class="FilterGroupItem-innerFilterItemContainer"
@@ -1544,13 +1570,18 @@ exports[`FilterBar useToolbar 1`] = `
15441570
<DocumentFragment>
15451571
<div
15461572
class="FilterBar-outerContainer"
1573+
style="--_ui5wcr_filter_group_item_flex_basis: 13.125rem;"
15471574
>
15481575
<div
15491576
class="FilterBar-filterArea FilterBar-filterAreaOpen"
1577+
style="position: relative;"
15501578
>
15511579
<div
15521580
class="FilterGroupItem-filterItem"
1581+
data-in-fb="true"
15531582
data-testid="filter-item"
1583+
data-with-toolbar="false"
1584+
style="margin-right: 1rem; width: 13.125rem;"
15541585
>
15551586
<div
15561587
class="FilterGroupItem-innerFilterItemContainer"
@@ -1595,15 +1626,20 @@ exports[`FilterBar useToolbar 1`] = `
15951626
</div>
15961627
</div>
15971628
<div
1598-
class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentEnd FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap"
1599-
style="flex-grow: 1;"
1629+
class="FilterBar-lastSpacer"
1630+
style="width: 120px; min-width: 120px; margin-right: 1rem;"
16001631
>
1601-
<ui5-button
1602-
design="Emphasized"
1603-
ui5-button=""
1632+
<div
1633+
class="FilterBar-filterBarButtons"
1634+
style="margin-right: 1rem; right: 0px;"
16041635
>
1605-
Go
1606-
</ui5-button>
1636+
<ui5-button
1637+
design="Emphasized"
1638+
ui5-button=""
1639+
>
1640+
Go
1641+
</ui5-button>
1642+
</div>
16071643
</div>
16081644
</div>
16091645
</div>

0 commit comments

Comments
 (0)