Skip to content

fix(FilterBar): replace fragments inside of toolbar, update story #599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 15, 2020
Merged

fix(FilterBar): replace fragments inside of toolbar, update story #599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a0caf2
fix(FilterBar): replace fragments inside of toolbar, update story
Lukas742 Jul 15, 2020
fe9117c
Merge branch 'master' into fix/filter-bar-toolbar
MarcusNotheis Jul 15, 2020
a2d1cd5
Update demo.stories.tsx
MarcusNotheis Jul 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,8 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
<div
class="ToolbarSeparator-separator-0"
/>
</div>
<div>
<div>
<ui5-input
placeholder="Search"
Expand All @@ -219,22 +221,30 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
>
Clear
</ui5-button>
</div>
<div>
<ui5-button
design="Transparent"
>
Restore
</ui5-button>
</div>
<div>
<ui5-button
class="FilterBar-showFiltersBtn-0"
design="Transparent"
>
Hide Filter Bar
</ui5-button>
</div>
<div>
<ui5-button
design="Default"
>
Filters (1337)
</ui5-button>
</div>
<div>
<ui5-button
design="Emphasized"
>
Expand Down Expand Up @@ -884,6 +894,8 @@ Array [
<div
class="ToolbarSeparator-separator-0"
/>
</div>
<div>
<div>
<ui5-input
placeholder="Search"
Expand All @@ -903,22 +915,30 @@ Array [
>
Clear
</ui5-button>
</div>
<div>
<ui5-button
design="Transparent"
>
Restore
</ui5-button>
</div>
<div>
<ui5-button
class="FilterBar-showFiltersBtn-0"
design="Transparent"
>
Hide Filter Bar
</ui5-button>
</div>
<div>
<ui5-button
design="Default"
>
Filters (1337)
</ui5-button>
</div>
<div>
<ui5-button
design="Emphasized"
>
Expand Down Expand Up @@ -1196,6 +1216,8 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
<div
class="ToolbarSeparator-separator-0"
/>
</div>
<div>
<div>
<ui5-input
placeholder="Search"
Expand All @@ -1215,22 +1237,30 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
>
Clear
</ui5-button>
</div>
<div>
<ui5-button
design="Transparent"
>
Restore
</ui5-button>
</div>
<div>
<ui5-button
class="FilterBar-showFiltersBtn-0"
design="Transparent"
>
Hide Filter Bar
</ui5-button>
</div>
<div>
<ui5-button
design="Default"
>
Filters (1337)
</ui5-button>
</div>
<div>
<ui5-button
design="Emphasized"
>
Expand Down
80 changes: 15 additions & 65 deletions packages/main/src/components/FilterBar/demo.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,60 +44,6 @@ export const renderDefaultStory = (props) => {
onFiltersDialogSearch={props.onFiltersDialogSearch}
onGo={props.onGo}
onRestore={props.onRestore}
>
<FilterGroupItem label="Classification" key="classification" loading={props.loading}>
<Select>
<Option>Option 1</Option>
<Option selected>Option 2</Option>
<Option>Option 3</Option>
<Option>Option 4</Option>
</Select>
</FilterGroupItem>
<FilterGroupItem key={'filter2'} label={'Custom Filter 1'} loading={props.loading}>
<Switch />
</FilterGroupItem>
<FilterGroupItem label="Multi" key="Multi" loading={props.loading}>
<MultiComboBox>
<MultiComboBoxItem text="MultiComboBoxItem 1" />
<MultiComboBoxItem selected text="MultiComboBoxItem 2" />
<MultiComboBoxItem text="MultiComboBoxItem 3" />
<MultiComboBoxItem selected text="MultiComboBoxItem 4" />
</MultiComboBox>
</FilterGroupItem>
</FilterBar>
);
};
renderDefaultStory.storyName = 'Default';

export const renderStoryWithFiltersDialog = (props) => {
return (
<FilterBar
search={<Input placeholder={'Search'} />}
variants={<VariantManagement selectedKey="2" variantItems={variantItems} />}
useToolbar={props.useToolbar}
filterBarExpanded={props.filterBarExpanded}
loading={props.loading}
considerGroupName={props.considerGroupName}
filterContainerWidth={props.filterContainerWidth}
activeFiltersCount={props.activeFiltersCount}
showClearOnFB={props.showClearOnFB}
showRestoreOnFB={props.showRestoreOnFB}
showGo={props.showGo}
showGoOnFB={props.showGoOnFB}
showFilterConfiguration={props.showFilterConfiguration}
showSearchOnFiltersDialog={props.showSearchOnFiltersDialog}
showClearButton={props.showClearButton}
showRestoreButton={props.showRestoreButton}
onToggleFilters={props.onToggleFilters}
onFiltersDialogOpen={props.onFiltersDialogOpen}
onFiltersDialogClose={props.onFiltersDialogClose}
onFiltersDialogSave={props.onFiltersDialogSave}
onFiltersDialogClear={props.onFiltersDialogClear}
onClear={props.onClear}
onFiltersDialogSelectionChange={props.onFiltersDialogSelectionChange}
onFiltersDialogSearch={props.onFiltersDialogSearch}
onGo={props.onGo}
onRestore={props.onRestore}
>
<FilterGroupItem label="Input" loading={props.loading} visibleInFilterBar={props.visibleInFilterBar}>
<Input placeholder="Placeholder" />
Expand Down Expand Up @@ -154,31 +100,35 @@ export const renderStoryWithFiltersDialog = (props) => {
</FilterBar>
);
};
renderStoryWithFiltersDialog.storyName = 'With Filters Dialog';
renderDefaultStory.storyName = 'Default';

export default {
title: 'Components / FilterBar',
component: FilterBar,
parameters: {
subcomponents: { FilterGroupItem }
},
argTypes: {
search: { type: null },
variants: { type: null }
},
args: {
useToolbar: true,
filterBarExpanded: true,
considerGroupName: true,
considerGroupName: false,
filterContainerWidth: '13rem',
activeFiltersCount: 0,
showClearOnFB: true,
showRestoreOnFB: true,
showGo: true,
showGoOnFB: true,
showFilterConfiguration: true,
showSearchOnFiltersDialog: true,
showClearButton: true,
showRestoreButton: true,
showClearOnFB: false,
showRestoreOnFB: false,
showGo: false,
showGoOnFB: false,
showFilterConfiguration: false,
showSearchOnFiltersDialog: false,
showClearButton: false,
showRestoreButton: false,
visibleInFilterBar: true,
groupName: 'Custom Group',
visible: true,
required: true
required: false
}
};
64 changes: 27 additions & 37 deletions packages/main/src/components/FilterBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,45 +340,35 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
<>
<Toolbar className={classes.filterBarHeader} toolbarStyle={ToolbarStyle.Clear}>
{variants}
{search && (
<>
<ToolbarSeparator />
<div ref={searchRef}>{renderSearchWithValue(search, searchValue)}</div>
</>
)}
{search && <ToolbarSeparator />}
{search && <div ref={searchRef}>{renderSearchWithValue(search, searchValue)}</div>}
<ToolbarSpacer />
{useToolbar && showClearOnFB && (
<Button onClick={onClear} design={ButtonDesign.Transparent}>
{clearText}
</Button>
)}
{useToolbar && showRestoreOnFB && (
<Button onClick={handleFBRestore} design={ButtonDesign.Transparent}>
{restoreText}
</Button>
)}
{useToolbar && (
<>
{showClearOnFB && (
<Button onClick={onClear} design={ButtonDesign.Transparent}>
{clearText}
</Button>
)}
{showRestoreOnFB && (
<Button onClick={handleFBRestore} design={ButtonDesign.Transparent}>
{restoreText}
</Button>
)}
{
<Button onClick={handleToggle} design={ButtonDesign.Transparent} className={classes.showFiltersBtn}>
{showFilters ? hideFilterBarText : showFilterBarText}
</Button>
}
{showFilterConfiguration && (
<Button onClick={handleDialogOpen}>
{`${filtersText}${
activeFiltersCount && parseInt(activeFiltersCount as string) > 0
? ` (${activeFiltersCount})`
: ''
}`}
</Button>
)}
{showGoOnFB && (
<Button onClick={onGo} design={ButtonDesign.Emphasized}>
{goText}
</Button>
)}
</>
<Button onClick={handleToggle} design={ButtonDesign.Transparent} className={classes.showFiltersBtn}>
{showFilters ? hideFilterBarText : showFilterBarText}
</Button>
)}
{useToolbar && showFilterConfiguration && (
<Button onClick={handleDialogOpen}>
{`${filtersText}${
activeFiltersCount && parseInt(activeFiltersCount as string) > 0 ? ` (${activeFiltersCount})` : ''
}`}
</Button>
)}
{useToolbar && showGoOnFB && (
<Button onClick={onGo} design={ButtonDesign.Emphasized}>
{goText}
</Button>
)}
</Toolbar>
{mountFilters && <div className={filterAreaClasses.valueOf()}>{renderChildren()}</div>}
Expand Down