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()}
}