Skip to content

Commit ab0760f

Browse files
Lukas742Lukas742
authored
fix(FilterBar): replace fragments inside of toolbar and update story (#599)
1 parent e4a8e95 commit ab0760f

File tree

3 files changed

+72
-102
lines changed

3 files changed

+72
-102
lines changed

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,8 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
200200
<div
201201
class="ToolbarSeparator-separator-0"
202202
/>
203+
</div>
204+
<div>
203205
<div>
204206
<ui5-input
205207
placeholder="Search"
@@ -219,22 +221,30 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
219221
>
220222
Clear
221223
</ui5-button>
224+
</div>
225+
<div>
222226
<ui5-button
223227
design="Transparent"
224228
>
225229
Restore
226230
</ui5-button>
231+
</div>
232+
<div>
227233
<ui5-button
228234
class="FilterBar-showFiltersBtn-0"
229235
design="Transparent"
230236
>
231237
Hide Filter Bar
232238
</ui5-button>
239+
</div>
240+
<div>
233241
<ui5-button
234242
design="Default"
235243
>
236244
Filters (1337)
237245
</ui5-button>
246+
</div>
247+
<div>
238248
<ui5-button
239249
design="Emphasized"
240250
>
@@ -884,6 +894,8 @@ Array [
884894
<div
885895
class="ToolbarSeparator-separator-0"
886896
/>
897+
</div>
898+
<div>
887899
<div>
888900
<ui5-input
889901
placeholder="Search"
@@ -903,22 +915,30 @@ Array [
903915
>
904916
Clear
905917
</ui5-button>
918+
</div>
919+
<div>
906920
<ui5-button
907921
design="Transparent"
908922
>
909923
Restore
910924
</ui5-button>
925+
</div>
926+
<div>
911927
<ui5-button
912928
class="FilterBar-showFiltersBtn-0"
913929
design="Transparent"
914930
>
915931
Hide Filter Bar
916932
</ui5-button>
933+
</div>
934+
<div>
917935
<ui5-button
918936
design="Default"
919937
>
920938
Filters (1337)
921939
</ui5-button>
940+
</div>
941+
<div>
922942
<ui5-button
923943
design="Emphasized"
924944
>
@@ -1196,6 +1216,8 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
11961216
<div
11971217
class="ToolbarSeparator-separator-0"
11981218
/>
1219+
</div>
1220+
<div>
11991221
<div>
12001222
<ui5-input
12011223
placeholder="Search"
@@ -1215,22 +1237,30 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
12151237
>
12161238
Clear
12171239
</ui5-button>
1240+
</div>
1241+
<div>
12181242
<ui5-button
12191243
design="Transparent"
12201244
>
12211245
Restore
12221246
</ui5-button>
1247+
</div>
1248+
<div>
12231249
<ui5-button
12241250
class="FilterBar-showFiltersBtn-0"
12251251
design="Transparent"
12261252
>
12271253
Hide Filter Bar
12281254
</ui5-button>
1255+
</div>
1256+
<div>
12291257
<ui5-button
12301258
design="Default"
12311259
>
12321260
Filters (1337)
12331261
</ui5-button>
1262+
</div>
1263+
<div>
12341264
<ui5-button
12351265
design="Emphasized"
12361266
>

‎packages/main/src/components/FilterBar/demo.stories.tsx

Lines changed: 15 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -44,60 +44,6 @@ export const renderDefaultStory = (props) => {
4444
onFiltersDialogSearch={props.onFiltersDialogSearch}
4545
onGo={props.onGo}
4646
onRestore={props.onRestore}
47-
>
48-
<FilterGroupItem label="Classification" key="classification" loading={props.loading}>
49-
<Select>
50-
<Option>Option 1</Option>
51-
<Option selected>Option 2</Option>
52-
<Option>Option 3</Option>
53-
<Option>Option 4</Option>
54-
</Select>
55-
</FilterGroupItem>
56-
<FilterGroupItem key={'filter2'} label={'Custom Filter 1'} loading={props.loading}>
57-
<Switch />
58-
</FilterGroupItem>
59-
<FilterGroupItem label="Multi" key="Multi" loading={props.loading}>
60-
<MultiComboBox>
61-
<MultiComboBoxItem text="MultiComboBoxItem 1" />
62-
<MultiComboBoxItem selected text="MultiComboBoxItem 2" />
63-
<MultiComboBoxItem text="MultiComboBoxItem 3" />
64-
<MultiComboBoxItem selected text="MultiComboBoxItem 4" />
65-
</MultiComboBox>
66-
</FilterGroupItem>
67-
</FilterBar>
68-
);
69-
};
70-
renderDefaultStory.storyName = 'Default';
71-
72-
export const renderStoryWithFiltersDialog = (props) => {
73-
return (
74-
<FilterBar
75-
search={<Input placeholder={'Search'} />}
76-
variants={<VariantManagement selectedKey="2" variantItems={variantItems} />}
77-
useToolbar={props.useToolbar}
78-
filterBarExpanded={props.filterBarExpanded}
79-
loading={props.loading}
80-
considerGroupName={props.considerGroupName}
81-
filterContainerWidth={props.filterContainerWidth}
82-
activeFiltersCount={props.activeFiltersCount}
83-
showClearOnFB={props.showClearOnFB}
84-
showRestoreOnFB={props.showRestoreOnFB}
85-
showGo={props.showGo}
86-
showGoOnFB={props.showGoOnFB}
87-
showFilterConfiguration={props.showFilterConfiguration}
88-
showSearchOnFiltersDialog={props.showSearchOnFiltersDialog}
89-
showClearButton={props.showClearButton}
90-
showRestoreButton={props.showRestoreButton}
91-
onToggleFilters={props.onToggleFilters}
92-
onFiltersDialogOpen={props.onFiltersDialogOpen}
93-
onFiltersDialogClose={props.onFiltersDialogClose}
94-
onFiltersDialogSave={props.onFiltersDialogSave}
95-
onFiltersDialogClear={props.onFiltersDialogClear}
96-
onClear={props.onClear}
97-
onFiltersDialogSelectionChange={props.onFiltersDialogSelectionChange}
98-
onFiltersDialogSearch={props.onFiltersDialogSearch}
99-
onGo={props.onGo}
100-
onRestore={props.onRestore}
10147
>
10248
<FilterGroupItem label="Input" loading={props.loading} visibleInFilterBar={props.visibleInFilterBar}>
10349
<Input placeholder="Placeholder" />
@@ -154,31 +100,35 @@ export const renderStoryWithFiltersDialog = (props) => {
154100
</FilterBar>
155101
);
156102
};
157-
renderStoryWithFiltersDialog.storyName = 'With Filters Dialog';
103+
renderDefaultStory.storyName = 'Default';
158104

159105
export default {
160106
title: 'Components / FilterBar',
161107
component: FilterBar,
162108
parameters: {
163109
subcomponents: { FilterGroupItem }
164110
},
111+
argTypes: {
112+
search: { type: null },
113+
variants: { type: null }
114+
},
165115
args: {
166116
useToolbar: true,
167117
filterBarExpanded: true,
168-
considerGroupName: true,
118+
considerGroupName: false,
169119
filterContainerWidth: '13rem',
170120
activeFiltersCount: 0,
171-
showClearOnFB: true,
172-
showRestoreOnFB: true,
173-
showGo: true,
174-
showGoOnFB: true,
175-
showFilterConfiguration: true,
176-
showSearchOnFiltersDialog: true,
177-
showClearButton: true,
178-
showRestoreButton: true,
121+
showClearOnFB: false,
122+
showRestoreOnFB: false,
123+
showGo: false,
124+
showGoOnFB: false,
125+
showFilterConfiguration: false,
126+
showSearchOnFiltersDialog: false,
127+
showClearButton: false,
128+
showRestoreButton: false,
179129
visibleInFilterBar: true,
180130
groupName: 'Custom Group',
181131
visible: true,
182-
required: true
132+
required: false
183133
}
184134
};

‎packages/main/src/components/FilterBar/index.tsx

Lines changed: 27 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -340,45 +340,35 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
340340
<>
341341
<Toolbar className={classes.filterBarHeader} toolbarStyle={ToolbarStyle.Clear}>
342342
{variants}
343-
{search && (
344-
<>
345-
<ToolbarSeparator />
346-
<div ref={searchRef}>{renderSearchWithValue(search, searchValue)}</div>
347-
</>
348-
)}
343+
{search && <ToolbarSeparator />}
344+
{search && <div ref={searchRef}>{renderSearchWithValue(search, searchValue)}</div>}
349345
<ToolbarSpacer />
346+
{useToolbar && showClearOnFB && (
347+
<Button onClick={onClear} design={ButtonDesign.Transparent}>
348+
{clearText}
349+
</Button>
350+
)}
351+
{useToolbar && showRestoreOnFB && (
352+
<Button onClick={handleFBRestore} design={ButtonDesign.Transparent}>
353+
{restoreText}
354+
</Button>
355+
)}
350356
{useToolbar && (
351-
<>
352-
{showClearOnFB && (
353-
<Button onClick={onClear} design={ButtonDesign.Transparent}>
354-
{clearText}
355-
</Button>
356-
)}
357-
{showRestoreOnFB && (
358-
<Button onClick={handleFBRestore} design={ButtonDesign.Transparent}>
359-
{restoreText}
360-
</Button>
361-
)}
362-
{
363-
<Button onClick={handleToggle} design={ButtonDesign.Transparent} className={classes.showFiltersBtn}>
364-
{showFilters ? hideFilterBarText : showFilterBarText}
365-
</Button>
366-
}
367-
{showFilterConfiguration && (
368-
<Button onClick={handleDialogOpen}>
369-
{`${filtersText}${
370-
activeFiltersCount && parseInt(activeFiltersCount as string) > 0
371-
? ` (${activeFiltersCount})`
372-
: ''
373-
}`}
374-
</Button>
375-
)}
376-
{showGoOnFB && (
377-
<Button onClick={onGo} design={ButtonDesign.Emphasized}>
378-
{goText}
379-
</Button>
380-
)}
381-
</>
357+
<Button onClick={handleToggle} design={ButtonDesign.Transparent} className={classes.showFiltersBtn}>
358+
{showFilters ? hideFilterBarText : showFilterBarText}
359+
</Button>
360+
)}
361+
{useToolbar && showFilterConfiguration && (
362+
<Button onClick={handleDialogOpen}>
363+
{`${filtersText}${
364+
activeFiltersCount && parseInt(activeFiltersCount as string) > 0 ? ` (${activeFiltersCount})` : ''
365+
}`}
366+
</Button>
367+
)}
368+
{useToolbar && showGoOnFB && (
369+
<Button onClick={onGo} design={ButtonDesign.Emphasized}>
370+
{goText}
371+
</Button>
382372
)}
383373
</Toolbar>
384374
{mountFilters && <div className={filterAreaClasses.valueOf()}>{renderChildren()}</div>}

0 commit comments

Comments
 (0)