From 8a0caf26fa21c67396a8f433a6e2b8cc5f68c6ac Mon Sep 17 00:00:00 2001
From: "Harbarth, Lukas" <lukas.harbarth@sap.com>
Date: Wed, 15 Jul 2020 12:06:54 +0200
Subject: [PATCH 1/2] fix(FilterBar): replace fragments inside of toolbar,
 update story

---
 .../__snapshots__/FilterBar.test.tsx.snap     | 30 ++++++++
 .../src/components/FilterBar/demo.stories.tsx | 76 +++----------------
 .../main/src/components/FilterBar/index.tsx   | 64 +++++++---------
 3 files changed, 68 insertions(+), 102 deletions(-)

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`] = `
         <div
           class="ToolbarSeparator-separator-0"
         />
+      </div>
+      <div>
         <div>
           <ui5-input
             placeholder="Search"
@@ -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"
         >
@@ -884,6 +894,8 @@ Array [
           <div
             class="ToolbarSeparator-separator-0"
           />
+        </div>
+        <div>
           <div>
             <ui5-input
               placeholder="Search"
@@ -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"
           >
@@ -1196,6 +1216,8 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
         <div
           class="ToolbarSeparator-separator-0"
         />
+      </div>
+      <div>
         <div>
           <ui5-input
             placeholder="Search"
@@ -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"
         >
diff --git a/packages/main/src/components/FilterBar/demo.stories.tsx b/packages/main/src/components/FilterBar/demo.stories.tsx
index f49b23f43ce..a112f20fcbb 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}
-    >
-      <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" />
@@ -154,7 +100,7 @@ export const renderStoryWithFiltersDialog = (props) => {
     </FilterBar>
   );
 };
-renderStoryWithFiltersDialog.storyName = 'With Filters Dialog';
+renderDefaultStory.storyName = 'Default';
 
 export default {
   title: 'Components / FilterBar',
@@ -165,20 +111,20 @@ export default {
   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<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>}

From a2d1cd56e38ce1cd78be03f5810e83ae6b692d8c Mon Sep 17 00:00:00 2001
From: Marcus Notheis <marcus.notheis@sap.com>
Date: Wed, 15 Jul 2020 14:37:49 +0200
Subject: [PATCH 2/2] Update demo.stories.tsx

---
 packages/main/src/components/FilterBar/demo.stories.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/main/src/components/FilterBar/demo.stories.tsx b/packages/main/src/components/FilterBar/demo.stories.tsx
index a112f20fcbb..a4bc2e07e5c 100644
--- a/packages/main/src/components/FilterBar/demo.stories.tsx
+++ b/packages/main/src/components/FilterBar/demo.stories.tsx
@@ -108,6 +108,10 @@ export default {
   parameters: {
     subcomponents: { FilterGroupItem }
   },
+  argTypes: {
+    search: { type: null },
+    variants: { type: null }
+  },
   args: {
     useToolbar: true,
     filterBarExpanded: true,