Merge pull request #2446 from WTTJ/fix-select-icons-color

Fix: use proper colors when the select is disabled
WTTJ · May 20, 2024 · 1337810 · 1337810
2 parents da83126 + a7fda46
commit 1337810
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/packages/Select/src/index.tsx b/packages/Select/src/index.tsx
@@ -14,7 +14,6 @@ import {
   DefaultFieldStylesProps,
   FIELD_ICON_SIZE,
 } from '@welcome-ui/utils'
-import { IconWrapper } from '@welcome-ui/field'
 
 import {
   getInputValue,
@@ -303,7 +302,7 @@ export const Select = forwardRef<'input', SelectProps>(
                 onClick: () => setIsOpen(!isOpen),
               })}
             >
-              <DownIcon color="dark-900" size="sm" />
+              <DownIcon size="sm" />
             </S.DropDownIndicator>
           )
 
@@ -339,17 +338,17 @@ export const Select = forwardRef<'input', SelectProps>(
           const iconSize = FIELD_ICON_SIZE[size]
 
           return (
-            <S.Wrapper {...rootProps}>
+            <S.Wrapper {...rootProps} disabled={disabled}>
               <S.InputWrapper>
                 {isSearchable ? (
                   <S.Input as="input" type="text" {...inputProps} />
                 ) : (
                   <S.Input {...inputProps}>{inputContent}</S.Input>
                 )}
                 {icon && (
-                  <IconWrapper iconPlacement="left" size={iconSize}>
+                  <S.IconWrapper iconPlacement="left" size={iconSize}>
                     {React.cloneElement(icon, { ...icon.props, size: iconSize })}
-                  </IconWrapper>
+                  </S.IconWrapper>
                 )}
                 <S.Indicators size={size}>
                   {isShowDeleteIcon && DeleteIcon}

diff --git a/packages/Select/src/styles.ts b/packages/Select/src/styles.ts
@@ -9,13 +9,21 @@ import {
   overflowEllipsis,
   Size,
 } from '@welcome-ui/utils'
+import { IconWrapper as WUIIconWrapper } from '@welcome-ui/field'
 
 import { SelectOptions } from './index'
 
-export const Wrapper = styled('div').withConfig({ shouldForwardProp })`
-  position: relative;
-  ${system}
-`
+export const Wrapper = styled('div').withConfig({ shouldForwardProp })<{ disabled: boolean }>(
+  ({ disabled }) => css`
+    position: relative;
+    ${system}
+    ${IconWrapper} {
+      color: ${disabled ? th('defaultFields.select.disabled.color') : 'initial'};
+    }
+  `
+)
+
+export const IconWrapper = styled(WUIIconWrapper)``
 
 export const InputWrapper = styled.div`
   position: relative;
@@ -63,7 +71,7 @@ export const Input = styled('div').withConfig({ shouldForwardProp })<{
         left: 0;
         ${overflowEllipsis};
         padding: inherit;
-        opacity: 0.5;
+        ${th('defaultFields.placeholder')}
       }
       &::before {
         height: auto;
@@ -147,6 +155,10 @@ export const DropDownIndicator = styled.button.withConfig({ shouldForwardProp })
     &:not(:last-child) {
       width: auto;
     }
+
+    &:disabled {
+      color: ${th('defaultFields.select.disabled.color')};
+    }
   `
 )