fix(FilterBar): show FilterBar buttons if hideToolbar is active (#6464)

Fixes #6461

Author: Lukas742

packages/main/src/components/FilterBar/FilterBar.cy.tsx

@@ -358,12 +358,12 @@ describe('FilterBar.cy.tsx', () => {
       </FilterBar>
     );
 
-    cy.get('[text="Go"]');
-    cy.get('[text="Filters"]');
-    cy.get('[text="Adapt Filters"]').should('not.exist');
-    cy.get('[text="Hide Filter Bar"]');
-    cy.findByTestId('variantManagement');
-    cy.findByTestId('SELECT');
+    cy.findToolbarButtonByText('Go').should('be.visible');
+    cy.findToolbarButtonByText('Filters').should('be.visible');
+    cy.findToolbarButtonByText('Adapt Filters').should('not.exist');
+    cy.findToolbarButtonByText('Hide Filter Bar').should('be.visible');
+    cy.findByTestId('variantManagement').should('be.visible');
+    cy.findByTestId('SELECT').should('be.visible');
 
     cy.mount(
       <FilterBar header={variants} hideToolbar={true} showGoOnFB>
@@ -378,13 +378,18 @@ describe('FilterBar.cy.tsx', () => {
       </FilterBar>
     );
 
-    cy.get('[text="Go"]');
-    cy.get('[text="Filters"]').should('not.exist');
-    cy.get('[text="Adapt Filters"]');
-    cy.get('[text="Hide Filter Bar"]').should('not.exist');
+    cy.findByText('Go').should('be.visible');
+    cy.findByText('Filters').should('not.exist');
+    cy.findByText('Adapt Filters').should('be.visible');
+    cy.findByText('Hide Filter Bar').should('not.exist');
     cy.findByPlaceholderText('Search').should('not.exist');
     cy.findByTestId('variantManagement').should('not.exist');
-    cy.findByTestId('SELECT');
+    cy.findByTestId('SELECT').should('be.visible');
+
+    cy.findToolbarButtonByText('Go').should('not.exist');
+    cy.findToolbarButtonByText('Filters"]').should('not.exist');
+    cy.findToolbarButtonByText('Adapt Filters"]').should('not.exist');
+    cy.findToolbarButtonByText('Hide Filter Bar"]').should('not.exist');
   });
 
   it('addCustomCSS', () => {

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

@@ -19,8 +19,8 @@ import {
   SEARCH,
   SHOW_FILTER_BAR
 } from '../../i18n/i18n-defaults.js';
-import type { DialogDomRef, ToolbarButtonDomRef } from '../../webComponents/index.js';
-import { Icon, Toolbar, ToolbarButton } from '../../webComponents/index.js';
+import type { ButtonDomRef, DialogDomRef, ToolbarButtonDomRef } from '../../webComponents/index.js';
+import { Button, Icon, Toolbar, ToolbarButton } from '../../webComponents/index.js';
 import { FilterGroupItem } from '../FilterGroupItem/index.js';
 import type { FilterGroupItemInternalProps } from '../FilterGroupItem/types.js';
 import { FlexBox } from '../FlexBox/index.js';
@@ -99,7 +99,7 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
   const dialogRef = useRef<DialogDomRef>(null);
   const filterBarButtonsRef = useRef(null);
   const filterAreaRef = useRef<HTMLDivElement>(null);
-  const filterBtnRef = useRef<ToolbarButtonDomRef>(null);
+  const filterBtnRef = useRef<ToolbarButtonDomRef | ButtonDomRef>(null);
 
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   const uniqueId = useId();
@@ -217,9 +217,21 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
 
   const cssClasses = clsx(classNames.outerContainer, className, !hideToolbar && classNames.outerContainerWithToolbar);
 
-  const ToolbarButtons = (
+  const FBButtonComponent = hideToolbar ? Button : ToolbarButton;
+  const filtersButtonText = `${filtersText}${
+    activeFiltersCount && parseInt(activeFiltersCount as string, 10) ? ` (${activeFiltersCount})` : ''
+  }`;
+  const FBButtons = (
     <>
-      {showGoOnFB && <ToolbarButton text={goText} onClick={handleGoOnFb} design={ButtonDesign.Emphasized} />}
+      {showGoOnFB && (
+        <FBButtonComponent
+          text={hideToolbar ? undefined : goText}
+          onClick={handleGoOnFb}
+          design={ButtonDesign.Emphasized}
+        >
+          {hideToolbar ? goText : undefined}
+        </FBButtonComponent>
+      )}
       {!hideToggleFiltersButton && !hideToolbar && !isPhone && (
         <ToolbarButton
           text={showFilters ? hideFilterBarText : showFilterBarText}
@@ -229,20 +241,35 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
           aria-live="polite"
         />
       )}
-      {showClearOnFB && <ToolbarButton text={clearText} onClick={handleClear} design={ButtonDesign.Transparent} />}
+      {showClearOnFB && (
+        <FBButtonComponent
+          text={hideToolbar ? undefined : clearText}
+          onClick={handleClear}
+          design={ButtonDesign.Transparent}
+        >
+          {hideToolbar ? clearText : undefined}
+        </FBButtonComponent>
+      )}
       {showRestoreOnFB && (
-        <ToolbarButton text={restoreText} onClick={handleFBRestore} design={ButtonDesign.Transparent} />
+        <FBButtonComponent
+          text={hideToolbar ? undefined : restoreText}
+          onClick={handleFBRestore}
+          design={ButtonDesign.Transparent}
+        >
+          {hideToolbar ? restoreText : undefined}
+        </FBButtonComponent>
       )}
       {!hideFilterConfiguration && (
-        <ToolbarButton
-          text={`${filtersText}${
-            activeFiltersCount && parseInt(activeFiltersCount as string, 10) > 0 ? ` (${activeFiltersCount})` : ''
-          }`}
+        <FBButtonComponent
+          text={hideToolbar ? undefined : filtersButtonText}
           onClick={handleDialogOpen}
           aria-haspopup="dialog"
           design={ButtonDesign.Transparent}
+          //@ts-expect-error: both types are allowed here
           ref={filterBtnRef}
-        />
+        >
+          {hideToolbar ? filtersButtonText : undefined}
+        </FBButtonComponent>
       )}
     </>
   );
@@ -338,7 +365,7 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
           <FlexBox className={classNames.toolbar} alignItems={FlexBoxAlignItems.Center}>
             {header}
             <Toolbar className={classNames.wcToolbar} design={ToolbarDesign.Transparent}>
-              {ToolbarButtons}
+              {FBButtons}
             </Toolbar>
           </FlexBox>
         )}
@@ -373,7 +400,7 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
                 className={classNames.lastSpacer}
               >
                 <div className={classNames.filterBarButtons} ref={filterBarButtonsRef}>
-                  {ToolbarButtons}
+                  {FBButtons}
                 </div>
               </div>
             </>