diff --git a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap index fb6498868d3..45c265526c6 100644 --- a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap +++ b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap @@ -200,6 +200,8 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
+
+
Clear +
+
Restore +
+
Hide Filter Bar +
+
Filters (1337) +
+
@@ -884,6 +894,8 @@ Array [
+
+
Clear +
+
Restore +
+
Hide Filter Bar +
+
Filters (1337) +
+
@@ -1196,6 +1216,8 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
+
+
Clear +
+
Restore +
+
Hide Filter Bar +
+
Filters (1337) +
+
diff --git a/packages/main/src/components/FilterBar/demo.stories.tsx b/packages/main/src/components/FilterBar/demo.stories.tsx index f49b23f43ce..a4bc2e07e5c 100644 --- a/packages/main/src/components/FilterBar/demo.stories.tsx +++ b/packages/main/src/components/FilterBar/demo.stories.tsx @@ -44,60 +44,6 @@ export const renderDefaultStory = (props) => { onFiltersDialogSearch={props.onFiltersDialogSearch} onGo={props.onGo} onRestore={props.onRestore} - > - - - - - - - - - - - - - - - - ); -}; -renderDefaultStory.storyName = 'Default'; - -export const renderStoryWithFiltersDialog = (props) => { - return ( - } - variants={} - 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} > @@ -154,7 +100,7 @@ export const renderStoryWithFiltersDialog = (props) => { ); }; -renderStoryWithFiltersDialog.storyName = 'With Filters Dialog'; +renderDefaultStory.storyName = 'Default'; export default { title: 'Components / FilterBar', @@ -162,23 +108,27 @@ export default { 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 } }; diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx index 6c37d3b335d..c83cf84f971 100644 --- a/packages/main/src/components/FilterBar/index.tsx +++ b/packages/main/src/components/FilterBar/index.tsx @@ -340,45 +340,35 @@ const FilterBar: FC = forwardRef((props: FilterBarPropTypes, <> {variants} - {search && ( - <> - -
{renderSearchWithValue(search, searchValue)}
- - )} + {search && } + {search &&
{renderSearchWithValue(search, searchValue)}
} + {useToolbar && showClearOnFB && ( + + )} + {useToolbar && showRestoreOnFB && ( + + )} {useToolbar && ( - <> - {showClearOnFB && ( - - )} - {showRestoreOnFB && ( - - )} - { - - } - {showFilterConfiguration && ( - - )} - {showGoOnFB && ( - - )} - + + )} + {useToolbar && showFilterConfiguration && ( + + )} + {useToolbar && showGoOnFB && ( + )}
{mountFilters &&
{renderChildren()}
}