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 <[email protected]>
commercetools · Apr 16, 2024 · cd66594 · cd66594
1 parent 0bfbd9e
commit cd66594
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/.changeset/serious-grapes-listen.md 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
@@ -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(),