feat: update icon clear icon size

gravity-ui · Jan 19, 2024 · 66052f2 · 66052f2
1 parent f3a6ebc
commit 66052f2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
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: &;
 
@@ -35,9 +37,9 @@ $block: '.#{$namespace}feed-custom-switcher';
         }
 
         .g-select-clear {
-            width: $indentXXS;
-            height: $indentXXS;
-            margin-left: 7px;
+            width: $clearIconSize;
+            height: $clearIconSize;
+            margin-right: 9px;
         }
     }
 
@@ -83,7 +85,7 @@ $block: '.#{$namespace}feed-custom-switcher';
     }
 
     &__clear {
-        width: $indentXXS;
-        height: $indentXXS;
+        width: $clearIconSize;
+        height: $clearIconSize;
     }
 }
diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx
@@ -21,6 +21,7 @@ export type CustomSwitcherProps = {
 } & Omit<RenderControlParameters, 'ref'>;
 
 const ICON_SIZE = 12;
+const CLEAR_ICON_SIZE = 11;
 
 export const CustomSwitcher = ({
     initial,
@@ -52,15 +53,17 @@ 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}
                 </div>
             )}
-            {renderClear &&
-                renderClear({
-                    renderIcon: () => <Icon data={Close} size={ICON_SIZE} className={b('clear')} />,
-                })}
             <div className={b('custom-switcher-element', {arrow: true})}>
                 <Icon data={DropdownArrow} size={ICON_SIZE} className={b('switcher-arrow')} />
             </div>