feat: add clear button in services select (#158)

* feat: add clear button in services select * feat: update icon clear icon size
gravity-ui · Jan 19, 2024 · 4d78254 · 4d78254
1 parent 22baf47
commit 4d78254
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/src/components/FeedHeader/components/Controls/customRenders.tsx b/src/components/FeedHeader/components/Controls/customRenders.tsx
@@ -27,14 +27,15 @@ type RenderSwitcherType = ({
 export const renderSwitcher: RenderSwitcherType =
     ({initial, list, defaultLabel}) =>
     // eslint-disable-next-line react/display-name
-    ({onClick, ref, onKeyDown, open}) => (
+    ({onClick, ref, onKeyDown, open, renderClear}) => (
         <CustomSwitcher
             initial={initial}
             defaultLabel={defaultLabel}
             list={list}
             controlRef={ref}
             onClick={onClick}
             onKeyDown={onKeyDown}
+            renderClear={renderClear}
             open={open}
         />
     );

diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss
@@ -3,6 +3,8 @@
 
 $block: '.#{$namespace}feed-custom-switcher';
 
+$clearIconSize: 11px;
+
 #{$block} {
     $root: &;
 
@@ -33,6 +35,12 @@ $block: '.#{$namespace}feed-custom-switcher';
             //stylelint-disable-next-line declaration-no-important
             transform: translate3d(0, 4px, 0) !important;
         }
+
+        .g-select-clear {
+            width: $clearIconSize;
+            height: $clearIconSize;
+            margin-right: 9px;
+        }
     }
 
     &__custom-switcher:hover {
@@ -75,4 +83,9 @@ $block: '.#{$namespace}feed-custom-switcher';
         width: $indentXS;
         height: $indentXS;
     }
+
+    &__clear {
+        width: $clearIconSize;
+        height: $clearIconSize;
+    }
 }
diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx
@@ -3,6 +3,7 @@ import React, {LegacyRef, useMemo} from 'react';
 import {Icon, SelectProps} from '@gravity-ui/uikit';
 
 import {DropdownArrow} from '../../../../icons/DropdownArrow';
+import {Close} from '../../../../icons/Close';
 import {block} from '../../../../utils/cn';
 import {SelectItem} from '../Controls/Controls';
 
@@ -20,6 +21,7 @@ export type CustomSwitcherProps = {
 } & Omit<RenderControlParameters, 'ref'>;
 
 const ICON_SIZE = 12;
+const CLEAR_ICON_SIZE = 11;
 
 export const CustomSwitcher = ({
     initial,
@@ -29,6 +31,7 @@ export const CustomSwitcher = ({
     controlRef,
     onKeyDown,
     open,
+    renderClear,
 }: CustomSwitcherProps) => {
     const itemsNames = useMemo(() => {
         const items = list
@@ -50,6 +53,12 @@ export const CustomSwitcher = ({
             <div className={b('custom-switcher-element', {content: true})}>
                 {itemsNames?.join(', ')}
             </div>
+            {renderClear &&
+                renderClear({
+                    renderIcon: () => (
+                        <Icon data={Close} size={CLEAR_ICON_SIZE} className={b('clear')} />
+                    ),
+                })}
             {hasCounter && (
                 <div className={b('custom-switcher-element', {counter: true})}>
                     {itemsNames.length}