From 3036c248670819c081479ebeec1922614c5500db Mon Sep 17 00:00:00 2001 From: Michael Salzmann Date: Fri, 24 May 2024 08:36:20 +0200 Subject: [PATCH] fix(select-utils): fix disabled option appearance of select-inputs (#2825) Co-authored-by: Carlos Cortizas <97907068+CarlosCortizasCT@users.noreply.github.com> --- .changeset/swift-kings-watch.md | 5 +++++ .../inputs/select-utils/src/create-select-styles.ts | 13 +++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) create mode 100644 .changeset/swift-kings-watch.md diff --git a/.changeset/swift-kings-watch.md b/.changeset/swift-kings-watch.md new file mode 100644 index 0000000000..128a15727c --- /dev/null +++ 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 index 6ec967f6f1..11bc776091 100644 --- a/packages/components/inputs/select-utils/src/create-select-styles.ts +++ b/packages/components/inputs/select-utils/src/create-select-styles.ts @@ -322,9 +322,8 @@ 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; @@ -332,13 +331,11 @@ const optionStyles = (props: TProps) => (base: TBase, state: TState) => { 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, }, }; };