From 32f98c77fd7bb2c89b17e4c9b7dcbd7964b0c364 Mon Sep 17 00:00:00 2001
From: Aaron Beirlaen <aaron.beirlaen@gmail.com>
Date: Thu, 11 May 2023 09:19:00 +0200
Subject: [PATCH 1/3] remove `getClearIndicatorStyles`

---
 src/components/select/Select.tsx | 17 +----------------
 src/components/select/theme.css  | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index a5418884d..ebdf48599 100644
--- a/src/components/select/Select.tsx
+++ b/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,
diff --git a/src/components/select/theme.css b/src/components/select/theme.css
index acf1ca363..b1429230b 100644
--- a/src/components/select/theme.css
+++ b/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;
 }

From b90f4ca6b1cffaf3ad5e4754235bdc0fe9e71a9b Mon Sep 17 00:00:00 2001
From: Aaron Beirlaen <aaron.beirlaen@gmail.com>
Date: Thu, 11 May 2023 09:29:33 +0200
Subject: [PATCH 2/3] update snapshot

---
 .../select/__tests__/__snapshots__/Select.spec.tsx.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap b/src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap
index ab5cc0191..b78dc2e08 100644
--- a/src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap
+++ b/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

From e174ee813983fb8340dc5f11f9c1f6455fd0c4ab Mon Sep 17 00:00:00 2001
From: Aaron Beirlaen <aaron.beirlaen@gmail.com>
Date: Thu, 11 May 2023 09:36:44 +0200
Subject: [PATCH 3/3] bump version and update changelog

---
 CHANGELOG.md | 18 ++++++++++++++----
 package.json |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1940f456..57606ba89 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package.json b/package.json
index 5c5968368..8914ef87c 100644
--- a/package.json
+++ b/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"