fix: fix the color contrast of form controls in disabled state (#3809)

* fix: fix the color contrast of form controls in disabled state

* test: updated tests

* test: updated tests

docs/pages/components/form/fragments/status.md

@@ -20,7 +20,8 @@ import {
   MultiCascader,
   Rate,
   Uploader,
-  Panel
+  Panel,
+  Toggle
 } from 'rsuite';
 
 import { mockTreeData } from './mock';
@@ -46,7 +47,8 @@ const defaultFormValue = {
   inputPicker: '',
   cascader: '',
   multiCascader: [],
-  rate: 0
+  rate: 0,
+  enable: false
 };
 
 const initFormValue = {
@@ -183,6 +185,16 @@ const App = () => {
           <Form.ControlLabel>Uploader:</Form.ControlLabel>
           <Form.Control name="uploader" accepter={Uploader} action="#" />
         </Form.Group>
+
+        <Form.Group controlId="toggle">
+          <Form.ControlLabel>Toggle:</Form.ControlLabel>
+          <Form.Control
+            name="enable"
+            accepter={Toggle}
+            unCheckedChildren="Disabled"
+            checkedChildren="Enabled"
+          />
+        </Form.Group>
       </Form>
     </Panel>
   );

src/AutoComplete/test/AutoCompleteStylesSpec.tsx

@@ -1,55 +1,40 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import AutoComplete from '../index';
-import { getStyle, toRGB, inChrome } from '@test/utils';
-
+import { toRGB, inChrome } from '@test/utils';
 import '../styles/index.less';
-import { PickerHandle } from '../../internals/Picker';
 
 describe('AutoComplete styles', () => {
-  it('Input should render the correct styles', () => {
-    const instanceRef = React.createRef<PickerHandle>();
-    render(<AutoComplete ref={instanceRef} data={[]} />);
-    const dom = ((instanceRef.current as PickerHandle).root as HTMLElement).querySelector(
-      'input'
-    ) as HTMLInputElement;
-    assert.equal(getStyle(dom, 'backgroundColor'), toRGB('#fff'), 'AutoComplete background-color');
-    // @description Can't get border-radius value in other browser except chrome
-    inChrome &&
-      assert.equal(getStyle(dom, 'border'), `1px solid ${toRGB('#e5e5ea')}`, 'AutoComplete border');
-    assert.equal(getStyle(dom, 'color'), toRGB('#575757'), 'AutoComplete font-color');
-    inChrome && assert.equal(getStyle(dom, 'borderRadius'), '6px', 'AutoComplete border-radius');
+  it('Should render the correct styles', () => {
+    render(<AutoComplete data={[]} />);
+
+    expect(screen.getByRole('combobox')).to.have.style('background-color', toRGB('#fff'));
+    expect(screen.getByRole('combobox')).to.have.style('color', toRGB('#575757'));
+    expect(screen.getByRole('combobox')).to.have.style('border', `1px solid ${toRGB('#e5e5ea')}`);
+    expect(screen.getByRole('combobox')).to.have.style('border-radius', '6px');
   });
 
-  it('Should the correct styles when set `open` and `defaultValue`', () => {
-    const instanceRef = React.createRef<PickerHandle>();
-    render(<AutoComplete ref={instanceRef} data={['a', 'b', 'ab']} open defaultValue="a" />);
-    const dom = ((instanceRef.current as PickerHandle).root as HTMLElement).querySelector(
-      'input'
-    ) as HTMLInputElement;
-    const unFocusItemDom = document.querySelector(
-      '.rs-auto-complete-item:not(.rs-auto-complete-item-focus)'
-    ) as HTMLElement;
-
-    assert.equal(getStyle(dom, 'color'), toRGB('#575757'), 'AutoComplete  focus item font-color');
-    assert.equal(
-      getStyle(unFocusItemDom, 'backgroundColor'),
-      toRGB('#0000'),
-      'AutoComplete unFocus item background-color'
-    );
+  it('Should render the correct styles when set `open`', () => {
+    render(<AutoComplete data={['a', 'b', 'ab']} open defaultValue="a" />);
+
+    const options = screen.getAllByRole('option');
+
+    // Focused option
+    const focusedBgColor = inChrome
+      ? 'color(srgb 0.8 0.913725 1 / 0.5)'
+      : 'rgba(204, 233, 255, 0.5)';
+    expect(options[0].firstChild).to.have.style('color', toRGB('#1675e0'));
+    expect(options[0].firstChild).to.have.style('background-color', focusedBgColor);
+
+    // Unfocused option
+    expect(options[1].firstChild).to.have.style('color', toRGB('#575757'));
+    expect(options[1].firstChild).to.have.style('background-color', toRGB('#0000'));
   });
 
-  it('Disabled should render the correct styles', () => {
-    const instanceRef = React.createRef<PickerHandle>();
-    render(<AutoComplete ref={instanceRef} data={[]} disabled />);
-    const dom = ((instanceRef.current as PickerHandle).root as HTMLElement).querySelector(
-      'input'
-    ) as HTMLInputElement;
-    assert.equal(
-      getStyle(dom, 'backgroundColor'),
-      toRGB('#f7f7fa'),
-      'Disabled autoComplete background-color'
-    );
-    assert.equal(getStyle(dom, 'color'), toRGB('#c5c6c7'), 'Disabled autoComplete color');
+  it('Should render the correct styles when set `disabled`', () => {
+    render(<AutoComplete data={[]} disabled />);
+
+    expect(screen.getByRole('combobox')).to.have.style('background-color', toRGB('#f7f7fa'));
+    expect(screen.getByRole('combobox')).to.have.style('color', toRGB('#8e8e93'));
   });
 });

src/Button/styles/mixin.less

@@ -21,7 +21,7 @@
     @rules();
 
     .high-contrast-mode({
-      opacity: 0.5;
+      border-color: var(--rs-btn-default-disabled-boreder-color);
     });
   }
 }

src/Checkbox/styles/index.less

@@ -144,11 +144,7 @@
 
     .rs-checkbox-disabled.rs-checkbox-checked &,
     .rs-checkbox-disabled.rs-checkbox-indeterminate & {
-      opacity: 0.3;
-
-      .high-contrast-mode({
-        opacity: 0.5;
-      });
+      opacity: 0.5;
     }
   }
 }

src/DatePicker/DatePicker.tsx

@@ -658,6 +658,7 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
               {...getRestProps(rest, usedClassNamePropKeys)}
               inside
               size={size}
+              disabled={disabled}
               onClick={handleClick}
             >
               <PickerLabel className={prefix`label`} id={`${id}-label`}>

src/DateRangePicker/DateRangePicker.tsx

@@ -987,6 +987,7 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
               ...calendarOnlyProps
             ])}
             inside
+            disabled={disabled}
             size={size}
           >
             <PickerLabel className={prefix`label`} id={`${id}-label`}>

src/InputGroup/styles/index.less

@@ -191,7 +191,7 @@
   }
 }
 
-.rs-input-group-disabled {
+.rs-input-group.rs-input-group-disabled {
   background-color: var(--rs-input-disabled-bg);
   color: var(--rs-text-disabled);
   cursor: not-allowed;

src/Nav/test/NavItemStylesSpec.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Nav from '../index';
 import { toRGB, getDefaultPalette } from '@test/utils';
-
 import '../styles/index.less';
 
 const { H700 } = getDefaultPalette();
@@ -40,7 +39,7 @@ describe('NavItem styles', () => {
 
     const navItemDisabled = screen.getByText('Disabled nav item');
 
-    expect(navItemDisabled).to.have.style('color', toRGB('#c5c6c7'));
+    expect(navItemDisabled).to.have.style('color', toRGB('#8e8e93'));
     expect(navItemDisabled).to.have.style('cursor', 'not-allowed');
   });
 });

src/Radio/styles/index.less

@@ -105,11 +105,7 @@
     }
 
     .rs-radio.rs-radio-disabled.rs-radio-checked & {
-      opacity: 0.3;
-
-      .high-contrast-mode({
-        opacity: 0.5;
-      });
+      opacity: 0.5;
     }
   }
 

src/Rate/styles/index.less

@@ -89,7 +89,7 @@
   }
 
   &-disabled {
-    opacity: 0.3;
+    opacity: 0.5;
     outline: none;
   }