Select - Fix clear indicator styles

CHANGELOG.md

@@ -2,12 +2,8 @@
 
 ### Added
 
-- `IconMenu`: Added a `title` prop and pass it to the IconButton ([@driesd](https://https://github.com/driesd) in [#2648](https://github.com/teamleadercrm/ui/pull/2648))
-
 ### Changed
 
-- `IconMenu`: Spread all other props instead of only spreading the box props ([@driesd](https://https://github.com/driesd) in [#2648](https://github.com/teamleadercrm/ui/pull/2648))
-
 ### Deprecated
 
 ### Removed
@@ -16,6 +12,20 @@
 
 ### Dependency updates
 
+## [21.2.0] - 2023-05-11
+
+### Added
+
+- `IconMenu`: Added a `title` prop and pass it to the IconButton ([@driesd](https://https://github.com/driesd) in [#2648](https://github.com/teamleadercrm/ui/pull/2648))
+
+### Changed
+
+- `IconMenu`: Spread all other props instead of only spreading the box props ([@driesd](https://https://github.com/driesd) in [#2648](https://github.com/teamleadercrm/ui/pull/2648))
+
+### Fixed
+
+- `Select`: Fixed clear indicator styles ([@BeirlaenAaron](https://https://github.com/BeirlaenAaron) in [#2649](https://github.com/teamleadercrm/ui/pull/2649))
+
 ## [21.1.0] - 2023-05-08
 
 ### Changed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "21.1.0",
+  "version": "21.2.0",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/select/Select.tsx

@@ -114,6 +114,7 @@ const ClearIndicator = <Option extends OptionType, IsMulti extends boolean>(
       color={inverse ? 'teal' : 'neutral'}
       display="flex"
       tint={inverse ? 'lightest' : 'darkest'}
+      className={cx(theme['clear-indicator'], { [theme['clear-indicator--inverse']]: inverse })}
     >
       <IconCloseBadgedSmallFilled />
     </Icon>
@@ -160,21 +161,6 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     };
   }, []);
 
-  const getClearIndicatorStyles = (base: CSSObjectWithLabel) => {
-    return {
-      ...base,
-      color: inverse ? COLOR.TEAL.LIGHTEST : COLOR.TEAL.DARK,
-      '&:hover': {
-        color: inverse ? COLOR.NEUTRAL.LIGHTEST : COLOR.TEAL.DARKEST,
-      },
-      cursor: 'pointer',
-      svg: {
-        height: '14px',
-        width: '14px',
-      },
-    };
-  };
-
   const getControlStyles = (base: CSSObjectWithLabel, { isDisabled, isFocused }: ControlProps<Option>) => {
     const commonStyles: CSSObjectWithLabel = {
       ...base,
@@ -457,7 +443,6 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
   };
 
   const getStyles = (): StylesConfig<Option> => ({
-    clearIndicator: getClearIndicatorStyles,
     control: getControlStyles,
     group: getGroupStyles,
     groupHeading: getGroupHeadingStyles,

src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap

@@ -225,7 +225,7 @@ exports[`Component - Select renders a clear button when a value is provided 1`]
         >
           <span
             aria-hidden="true"
-            class="box align-items-center display-flex neutral darkest"
+            class="box align-items-center display-flex neutral darkest clear-indicator"
             data-teamleader-ui="icon"
           >
             <svg

src/components/select/theme.css

@@ -9,6 +9,20 @@
   width: 30px;
 }
 
+.clear-indicator {
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-teal-darkest);
+  }
+
+  &--inverse {
+    &:hover {
+      color: var(--color-neutral-lightest);
+    }
+  }
+}
+
 .is-large .dropdown-indicator {
   width: 36px;
 }