fix(select-utils): fix disabled option appearance of select-inputs (#…

…2825) Co-authored-by: Carlos Cortizas <[email protected]>
commercetools · May 24, 2024 · 3036c24 · 3036c24
1 parent 95318cb
commit 3036c24
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/.changeset/swift-kings-watch.md b/.changeset/swift-kings-watch.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/select-utils': patch
+---
+
+fixes the appearance of disabled options (text-color & :active background) in select-inputs
diff --git a/packages/components/inputs/select-utils/src/create-select-styles.ts b/packages/components/inputs/select-utils/src/create-select-styles.ts
@@ -322,23 +322,20 @@ const optionStyles = (props: TProps) => (base: TBase, state: TState) => {
       : designTokens.fontSize30,
     cursor: state.isDisabled ? 'not-allowed' : 'pointer',
     color: (() => {
-      if (!state.isDisabled) return designTokens.fontColorForInput;
-      if (state.isSelected) return designTokens.fontColorForInput;
-      return base.color;
+      if (state.isDisabled) return designTokens.fontColorForInputWhenDisabled;
+      return designTokens.fontColorForInput;
     })(),
     backgroundColor: (() => {
       if (state.isSelected) return designTokens.colorPrimary95;
       if (state.isFocused)
         return designTokens.backgroundColorForInputWhenHovered;
       return base.backgroundColor;
     })(),
-
     '&:active': {
-      color: (() => {
-        if (!state.isDisabled) return designTokens.fontColorForInput;
-        return base.color;
+      backgroundColor: (() => {
+        if (state.isDisabled) return designTokens.colorTransparent;
+        return designTokens.colorPrimary95;
       })(),
-      backgroundColor: designTokens.colorPrimary95,
     },
   };
 };