Fix disabled checkbox color in Select

Author: forestream

packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap

@@ -63,7 +63,7 @@ exports[`Input > should pass className prop to error message component 1`] = `
   >
     <input
       aria-label="input"
-      class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 "
+      class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1 padding-left-0-12px--1 padding-right-0-36px--1 "
       value=""
     />
     <span

packages/components/src/components/Input/__tests__/index.browser.test.tsx

@@ -72,7 +72,7 @@ describe('Input', () => {
   })
 
   it('should be able to render with error message', () => {
-    const { container } = render(<Input errorMessage="Error message" />)
+    const { container } = render(<Input error errorMessage="Error message" />)
     expect(
       container.querySelector('[aria-label="error-message"]'),
     ).toBeInTheDocument()
@@ -110,6 +110,7 @@ describe('Input', () => {
         classNames={{
           errorMessage: 'error-message',
         }}
+        error
         errorMessage="Error message"
       />,
     )

packages/components/src/components/Select/IconCheck.tsx

@@ -3,7 +3,6 @@ import { ComponentProps } from 'react'
 export function IconCheck({ ...props }: ComponentProps<'svg'>) {
   return (
     <svg
-      color="white"
       fill="none"
       height="10"
       viewBox="0 0 12 10"

packages/components/src/components/Select/Select.stories.tsx

@@ -49,7 +49,7 @@ function DefaultComponent(
   props: Omit<ComponentProps<typeof Select>, 'children'>,
 ) {
   return (
-    <Select {...props} onValueChange={() => {}}>
+    <Select {...props} defaultValue={['Option 1']} onValueChange={() => {}}>
       <SelectTrigger>Select</SelectTrigger>
       <SelectContainer>
         <SelectOption disabled value="Option 1">

packages/components/src/components/Select/__tests__/index.browser.test.tsx

@@ -260,6 +260,25 @@ describe('Select', () => {
     })
   })
 
+  it('should have disabled check color when type is checkbox and the option is disabled', () => {
+    const { container } = render(
+      <Select defaultValue={['Option 1']} type="checkbox">
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer>
+          <SelectOption disabled value="Option 1">
+            Option 1
+          </SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option1 = container.querySelector('[data-value="Option 1"]')
+    expect(option1?.querySelector('svg')).toHaveClass(
+      'color-0-var(--inputDisabledText,light-dark(#E5E5E5,#373737))--255',
+    )
+  })
+
   it('should show confirm button when type is checkbox and showConfirmButton is true', () => {
     const { container } = render(
       <Select type="checkbox">

packages/components/src/components/Select/index.tsx

@@ -50,6 +50,8 @@ interface SelectProps extends ComponentProps<'div'> {
     primary?: string
     border?: string
     inputBackground?: string
+    inputDisabledBackground?: string
+    inputDisabledText?: string
     base10?: string
     title?: string
     selectDisabled?: string
@@ -134,6 +136,8 @@ export function Select({
           title: colors?.title,
           selectDisabled: colors?.selectDisabled,
           primaryBg: colors?.primaryBg,
+          inputDisabledBackground: colors?.inputDisabledBackground,
+          inputDisabledText: colors?.inputDisabledText,
         }}
         typography={typography}
         {...props}
@@ -302,7 +306,7 @@ export function SelectOption({
         }
       }
       alignItems="center"
-      borderRadius="8px"
+      borderRadius="6px"
       color={
         disabled
           ? 'var(--selectDisabled, light-dark(#C4C5D1, #45464D))'
@@ -332,9 +336,11 @@ export function SelectOption({
           checkbox: (
             <Box
               bg={
-                isSelected
-                  ? 'var(--primary, light-dark(#674DC7, #8163E1)'
-                  : 'var(--border, light-dark(#E4E4E4, #434343))'
+                disabled
+                  ? 'var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))'
+                  : isSelected
+                    ? 'var(--primary, light-dark(#674DC7, #8163E1)'
+                    : 'var(--border, light-dark(#E4E4E4, #434343))'
               }
               borderRadius="4px"
               boxSize="18px"
@@ -344,6 +350,9 @@ export function SelectOption({
               {isSelected && (
                 <IconCheck
                   className={css({
+                    color: disabled
+                      ? 'var(--inputDisabledText, light-dark(#E5E5E5, #373737))'
+                      : '#FFF',
                     position: 'absolute',
                     top: '55%',
                     left: '50%',