From cd665940c7dbe2e99c4bd70a97fbad102a9dc8b3 Mon Sep 17 00:00:00 2001
From: Douglas Egiemeh <douglasegiemeh@gmail.com>
Date: Tue, 16 Apr 2024 14:16:24 +0200
Subject: [PATCH] Apply new tag styles in select inputs multivalue (#2780)

* feat(select input): apply new tag styles in select inputs multivalue

* feat(select input): include background color change for readonly

* feat(create select input): extract function for hover styles

* feat(create select input): extract function for multi styles

---------

Co-authored-by: Ddouglasz <douglas.egiemeh@gmail.com>
---
 .changeset/serious-grapes-listen.md           |  5 +++
 .../select-utils/src/create-select-styles.ts  | 37 ++++++++++++-------
 2 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/serious-grapes-listen.md

diff --git a/.changeset/serious-grapes-listen.md b/.changeset/serious-grapes-listen.md
new file mode 100644
index 0000000000..b07632ede1
--- /dev/null
+++ b/.changeset/serious-grapes-listen.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/select-utils': minor
+---
+
+Apply the new tag styles in the select input multi value tags
diff --git a/packages/components/inputs/select-utils/src/create-select-styles.ts b/packages/components/inputs/select-utils/src/create-select-styles.ts
index a847678a36..f6d7a6dce7 100644
--- a/packages/components/inputs/select-utils/src/create-select-styles.ts
+++ b/packages/components/inputs/select-utils/src/create-select-styles.ts
@@ -121,6 +121,12 @@ const getInputBackgroundColor = (props: TProps) => {
   return designTokens.backgroundColorForInput;
 };
 
+const getMultiValueBackgroundColor = (props: TProps) => {
+  if (props.isDisabled) return designTokens.backgroundColorForInputWhenDisabled;
+  if (props.isReadOnly) return designTokens.backgroundColorForInputWhenReadonly;
+  return designTokens.colorPrimary95;
+};
+
 const getInputBorderColor = (props: TProps, state: TState) => {
   if (props.appearance === 'quiet') {
     return designTokens.borderColorForInputAsQuiet;
@@ -162,6 +168,17 @@ const getHoverInputBorderColor = (props: TProps) => {
   return designTokens.borderColorForInputWhenHovered;
 };
 
+const getHoverInputBackgroundColor = (props: TProps) => {
+  if (!props.isDisabled && !props.isReadOnly) {
+    if (props.appearance === 'quiet') {
+      return designTokens.backgroundColorForInputAsQuietWhenHovered;
+    } else {
+      return designTokens.backgroundColorForInputWhenHovered;
+    }
+  }
+  return null;
+};
+
 const controlStyles = (props: TProps) => (base: TBase, state: TState) => {
   return {
     ...base,
@@ -208,16 +225,7 @@ const controlStyles = (props: TProps) => (base: TBase, state: TState) => {
 
     '&:hover': {
       borderColor: getHoverInputBorderColor(props),
-      backgroundColor: (() => {
-        if (!props.isDisabled && !props.isReadOnly) {
-          if (props.appearance === 'quiet') {
-            return designTokens.backgroundColorForInputAsQuietWhenHovered;
-          } else {
-            return designTokens.backgroundColorForInputWhenHovered;
-          }
-        }
-        return null;
-      })(),
+      backgroundColor: getHoverInputBackgroundColor(props),
     },
     pointerEvents: 'auto',
     color:
@@ -449,15 +457,16 @@ const menuPortalStyles = (props: TProps) => (base: TBase) => ({
   zIndex: props.menuPortalZIndex,
 });
 
-const multiValueStyles = () => (base: TBase) => {
+const multiValueStyles = (props: TProps) => (base: TBase) => {
   return {
     ...base,
     display: 'flex',
     alignItems: 'center',
     height: '32px',
-    backgroundColor: designTokens.colorNeutral95,
-    padding: '0',
+    backgroundColor: getMultiValueBackgroundColor(props),
+    padding: designTokens.spacing20,
     border: `1px solid ${designTokens.colorNeutral85}`,
+    borderRadius: designTokens.borderRadius20,
   };
 };
 
@@ -521,7 +530,7 @@ export default function createSelectStyles(props: TProps) {
     clearIndicator: clearIndicatorStyles(),
     menuList: menuListStyles(),
     menuPortal: menuPortalStyles(props),
-    multiValue: multiValueStyles(),
+    multiValue: multiValueStyles(props),
     multiValueLabel: multiValueLabelStyles(props),
     multiValueRemove: multiValueRemoveStyles(props),
     indicatorsContainer: indicatorsContainerStyles(),