CB-1652 add cross button to search fields (#1803)

* CB-1652 add cross button to search fields

* СB-1652 PR fixes

* CB-1652 PR fixes

* CB-1652 add cross button to driver properties filter

* CB-1652 fix typo

---------

Co-authored-by: dariamarutkina <125263541+dariamarutkina@users.noreply.github.com>
Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>

webapp/packages/core-blocks/src/FormControls/Filter.tsx

@@ -46,6 +46,12 @@ const filterStyles = css`
       right: 4px;
       top: 4px;
     }
+    &[name='cross'] {
+      width: 16px;
+      height: 16px;
+      top: 8px;
+      right: 8px;
+    }
   }
 `;
 
@@ -163,7 +169,11 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
         onKeyDown={onKeyDown}
         {...use({ toggled, max })}
       />
-      <IconButton name="search" disabled={disabled} onClick={toggle} {...use({ toggled })} />
+      {String(value) ? (
+        <IconButton name="cross" disabled={disabled} onClick={() => filter('', name)} />
+      ) : (
+        <IconButton name="search" disabled={disabled} onClick={toggle} {...use({ toggled })} />
+      )}
     </filter-container>,
   );
 });

webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx

@@ -28,12 +28,12 @@ export const ItemListSearch: React.FC<IProps> = function ItemListSearch({ value,
   const [search, setSearch] = useState(value ?? '');
   const translate = useTranslate();
   const changeHandler = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
+    (changeValue: string) => {
       if (value === undefined) {
-        setSearch(event.target.value);
+        setSearch(changeValue);
       }
       if (onChange) {
-        onChange(event.target.value);
+        onChange(changeValue);
       }
     },
     [value, onChange],
@@ -52,7 +52,7 @@ export const ItemListSearch: React.FC<IProps> = function ItemListSearch({ value,
     }
   }, [value, onSearch]);
 
-  const ListSearchButton = IconButton;
+  const inputValue = value ?? search;
 
   return styled(useStyles(styles || []))(
     <list-search className={className}>
@@ -61,15 +61,19 @@ export const ItemListSearch: React.FC<IProps> = function ItemListSearch({ value,
           ref={inputRef}
           name="search"
           placeholder={translate(placeholder || 'ui_search')}
-          value={value ?? search}
+          value={inputValue}
           autoComplete="off"
           disabled={disabled}
-          onChange={changeHandler}
+          onChange={event => changeHandler(event.target.value)}
           {...use({ mod: 'surface' })}
         />
-        <search-button as="div" onClick={searchHandler}>
-          <ListSearchButton name="search" />
-        </search-button>
+        <action-button as="div">
+          {!onSearch && inputValue ? (
+            <IconButton name="cross" onClick={() => changeHandler('')} />
+          ) : (
+            <IconButton name="search" onClick={searchHandler} />
+          )}
+        </action-button>
       </input-box>
     </list-search>,
   );

webapp/packages/core-blocks/src/ItemList/styles.ts

@@ -50,7 +50,7 @@ export const ITEM_LIST_STYLES = css`
       padding: 4px 32px 4px 8px;
     }
 
-    & search-button {
+    & action-button {
       position: absolute;
       display: flex;
       align-items: center;
@@ -59,7 +59,7 @@ export const ITEM_LIST_STYLES = css`
       right: 4px;
       transform: translateY(-50%);
 
-      & ListSearchButton {
+      & IconButton {
         position: relative;
         box-sizing: border-box;
         overflow: hidden;
@@ -67,10 +67,14 @@ export const ITEM_LIST_STYLES = css`
         height: 24px;
         width: 24px;
         margin: 0;
+
+        &[name='cross'] {
+          padding: 4px;
+        }
       }
     }
   }
-  ListSearchButton {
+  IconButton {
     composes: theme-ripple theme-background-primary theme-text-on-primary from global;
   }
   list-item:not(:nth-last-child(2)) {

webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx

@@ -11,12 +11,12 @@ import { useCallback, useMemo, useState } from 'react';
 import styled from 'reshadow';
 
 import { Button } from '../Button';
-import { ShadowInput } from '../FormControls/ShadowInput';
+import { Filter } from '../FormControls/Filter';
 import { useTranslate } from '../localization/useTranslate';
 import { useObjectRef } from '../useObjectRef';
 import type { IProperty } from './IProperty';
 import { PropertyItem } from './PropertyItem';
-import { PROPERTIES_TABLE_ADD_STYLES, PROPERTIES_TABLE_STYLES } from './styles';
+import { PROPERTIES_FILTER_STYLES, PROPERTIES_TABLE_ADD_STYLES, PROPERTIES_TABLE_STYLES } from './styles';
 
 type PropertiesState = Record<string, string | null>;
 
@@ -121,7 +121,12 @@ export const PropertiesTable = observer<Props>(function PropertiesTable(props) {
         <properties-header-name>
           <div>{translate('core_block_properties_table_name')}</div>
           {props.filterable ? (
-            <ShadowInput value={filterValue} placeholder={translate('core_block_properties_table_filter_name')} onChange={setFilterValue} />
+            <Filter
+              value={filterValue}
+              placeholder={translate('core_block_properties_table_filter_name')}
+              style={PROPERTIES_FILTER_STYLES}
+              onFilter={setFilterValue}
+            />
           ) : null}
         </properties-header-name>
         <properties-header-value>{translate('core_block_properties_table_value')}</properties-header-value>

webapp/packages/core-blocks/src/PropertiesTable/styles.ts

@@ -57,14 +57,35 @@ export const PROPERTIES_TABLE_STYLES = css`
     height: 24px;
     pointer-events: none;
   }
+`;
 
-  ShadowInput {
+export const PROPERTIES_FILTER_STYLES = css`
+  input {
     composes: theme-background-surface from global;
     box-sizing: border-box;
     height: 24px;
     flex: 1;
     margin-left: 8px;
   }
+
+  IconButton {
+    right: 0px;
+    top: 0px;
+    width: 20px;
+    height: 20px;
+
+    &[|toggled] {
+      right: 0px;
+      top: 0px;
+    }
+
+    &[name='cross'] {
+      width: 14px;
+      height: 14px;
+      top: 5px;
+      right: 0;
+    }
+  }
 `;
 
 export const PROPERTIES_TABLE_ADD_STYLES = css`