fix(FilterBar): update search position to latest design specs (#5059)

Author: Lukas742

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

@@ -12,8 +12,6 @@ const variants = (
   </VariantManagement>
 );
 
-const search = <Input placeholder={'Search'} />;
-
 describe('FilterBar.cy.tsx', () => {
   it('Toggle FilterBar filters', () => {
     const toggle = cy.spy().as('toggleSpy');
@@ -249,7 +247,7 @@ describe('FilterBar.cy.tsx', () => {
 
   it('toolbar', () => {
     cy.mount(
-      <FilterBar search={search} header={variants} hideToolbar={false} showGoOnFB>
+      <FilterBar header={variants} hideToolbar={false} showGoOnFB>
         <FilterGroupItem label="Classification" key="classification" data-testid="SELECT">
           <Select>
             <Option>Option 1</Option>
@@ -265,12 +263,11 @@ describe('FilterBar.cy.tsx', () => {
     cy.findByText('Filters');
     cy.findByText('Adapt Filters').should('not.exist');
     cy.findByText('Hide Filter Bar');
-    cy.findByPlaceholderText('Search');
     cy.findByTestId('variantManagement');
     cy.findByTestId('SELECT');
 
     cy.mount(
-      <FilterBar search={search} header={variants} hideToolbar={true} showGoOnFB>
+      <FilterBar header={variants} hideToolbar={true} showGoOnFB>
         <FilterGroupItem label="Classification" key="classification" data-testid="SELECT">
           <Select>
             <Option>Option 1</Option>
@@ -449,6 +446,26 @@ describe('FilterBar.cy.tsx', () => {
     cy.get('[show-colon="true"]').should('have.length', 2);
   });
 
+  it('FB search field', () => {
+    cy.mount(
+      <FilterBar search={<Input />}>
+        <FilterGroupItem>
+          <Input />
+        </FilterGroupItem>
+        <FilterGroupItem label="Input">
+          <Input placeholder="Placeholder" />
+        </FilterGroupItem>
+      </FilterBar>
+    );
+    cy.get('[ui5-input]').each(($el, index) => {
+      if (index === 0) {
+        cy.wrap($el).should('be.visible').and('have.attr', 'data-component-name', 'FilterBarSearch');
+      } else {
+        cy.wrap($el).should('be.visible').and('not.have.attr', 'data-component-name', 'FilterBarSearch');
+      }
+    });
+  });
+
   mountWithCustomTagName(FilterBar);
 
   cypressPassThroughTestsFactory(FilterBar);

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

@@ -33,7 +33,7 @@ const meta = {
   title: 'Layouts & Floorplans / FilterBar',
   component: FilterBar,
   args: {
-    search: <Input placeholder={'Search'} />,
+    search: <Input />,
     header: <Title>Test</Title>,
     filterContainerWidth: '13.125rem'
   },
@@ -132,12 +132,18 @@ export const Default: Story = {
 };
 
 export const WithLogic: Story = {
-  render: () => {
+  render: (args) => {
     const [age, setAge] = useState(37);
     const [countries, setCountries] = useState<Record<string, boolean>>({});
     const [currency, setCurrency] = useState('USD');
     const [date, setDate] = useState('');
     const [dateRange, setDateRange] = useState('');
+    const [search, setSearch] = useState('');
+
+    const handleSearch = (e) => {
+      setSearch(e.target.value);
+    };
+
     const handleAgeChange = (e) => {
       setAge(e.target.value);
     };
@@ -163,7 +169,7 @@ export const WithLogic: Story = {
     };
     return (
       <>
-        <FilterBar>
+        <FilterBar {...args} search={<Input onInput={handleSearch} />}>
           <FilterGroupItem label="Age" active={!!age} required>
             <StepInput value={age} onChange={handleAgeChange} required />
           </FilterGroupItem>
@@ -205,6 +211,10 @@ export const WithLogic: Story = {
           </FilterGroupItem>
         </FilterBar>
         <FlexBox direction={FlexBoxDirection.Column}>
+          <FlexBox>
+            <Label showColon>Search</Label>
+            <Text>{search}</Text>
+          </FlexBox>
           <FlexBox>
             <Label showColon>Age</Label>
             <Text>{age}</Text>

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

@@ -1,5 +1,6 @@
 'use client';
 
+import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
 import { debounce, Device, enrichEventWithDetails, useI18nBundle } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
@@ -13,6 +14,7 @@ import {
   GO,
   HIDE_FILTER_BAR,
   RESTORE,
+  SEARCH,
   SHOW_FILTER_BAR
 } from '../../i18n/i18n-defaults.js';
 import type { CommonProps, Ui5CustomEvent } from '../../interfaces/index.js';
@@ -23,10 +25,10 @@ import type {
   TableDomRef,
   TableRowDomRef
 } from '../../webComponents/index.js';
-import { Button } from '../../webComponents/index.js';
+import { Button, Icon } from '../../webComponents/index.js';
+import { FilterGroupItem } from '../FilterGroupItem/index.js';
 import type { FilterGroupItemPropTypes } from '../FilterGroupItem/index.js';
 import { Toolbar } from '../Toolbar/index.js';
-import { ToolbarSeparator } from '../ToolbarSeparator/index.js';
 import { ToolbarSpacer } from '../ToolbarSpacer/index.js';
 import styles from './FilterBar.jss.js';
 import { FilterDialog } from './FilterDialog.js';
@@ -43,15 +45,18 @@ export interface FilterBarPropTypes extends CommonProps {
    */
   children: ReactNode | ReactNode[];
   /**
-   * Defines the search field next to the header of the `FilterBar`.
+   * Defines the search field rendered as first filter item.
    *
-   * __Note:__ If `hideToolbar` is `true` this prop has no effect.
+   * __Note:__ Per default `placeholder`, `icon`, `noTypeahead` and `showClearIcon` are applied to the search input.
+   *
+   * __Note:__ The field is only available in the FilterBar not inside the filter configuration dialog.
    */
   search?: ReactElement<InputPropTypes>;
   /**
    * Specifies header text or variant management that is shown in the toolbar on the first position
    *
    * __Note:__ Although this prop accepts all HTML Elements, it is strongly recommended that you only use `VariantManagement`, `Text` or `Title` in order to preserve the intended design.
+   *
    * __Note:__ If `hideToolbar` is `true` this prop has no effect.
    */
   header?: ReactNode;
@@ -272,6 +277,7 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
   const showFilterBarText = i18nBundle.getText(SHOW_FILTER_BAR);
   const hideFilterBarText = i18nBundle.getText(HIDE_FILTER_BAR);
   const goText = i18nBundle.getText(GO);
+  const searchText = i18nBundle.getText(SEARCH);
   const filtersText = !hideToolbar ? i18nBundle.getText(FILTERS) : i18nBundle.getText(ADAPT_FILTERS);
 
   // dialog
@@ -649,14 +655,24 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
         {!hideToolbar && (
           <Toolbar className={classes.filterBarHeader} toolbarStyle={ToolbarStyle.Clear}>
             {header}
-            {header && search && <ToolbarSeparator />}
-            {search && !isPhone && <div ref={searchRef}>{renderSearchWithValue(search, searchValue)}</div>}
             {hasButtons && <ToolbarSpacer />}
             {ToolbarButtons}
           </Toolbar>
         )}
         {mountFilters && (
           <div className={filterAreaClasses} style={{ position: 'relative' }} ref={filterAreaRef}>
+            {search && (
+              <FilterGroupItem data-in-fb visibleInFilterBar data-with-toolbar={!hideToolbar}>
+                <div ref={searchRef}>
+                  {renderSearchWithValue(search, searchValue, {
+                    placeholder: searchText,
+                    icon: <Icon name={searchIcon} />,
+                    noTypeahead: true,
+                    showClearIcon: true
+                  })}
+                </div>
+              </FilterGroupItem>
+            )}
             {calculatedChildren}
             {hideToolbar && (
               <>

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

@@ -39,10 +39,12 @@ export const filterValue = (ref, child) => {
   return filterItemProps;
 };
 
-export const renderSearchWithValue = (renderSearchElement, searchValue) => {
+export const renderSearchWithValue = (renderSearchElement, searchValue, defaultProps = {}) => {
+  const props = { ...defaultProps, ...renderSearchElement?.props };
   return cloneElement(renderSearchElement, {
-    value: searchValue ?? renderSearchElement?.props?.value,
-    'data-component-name': 'FilterBarSearch'
+    ...props,
+    'data-component-name': 'FilterBarSearch',
+    value: searchValue ?? renderSearchElement?.props?.value
   });
 };