feat(v5): Add FormControl color support (#5349)

react-bootstrap · Jul 31, 2020 · 5c5e7ec · 5c5e7ec
1 parent 5e96e51
commit 5c5e7ec
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 0 deletions.
diff --git a/src/FormControl.tsx b/src/FormControl.tsx
@@ -154,6 +154,7 @@ const FormControl: BsPrefixRefForwardingComponent<
           classes,
           isValid && `is-valid`,
           isInvalid && `is-invalid`,
+          type === 'color' && `${bsPrefix}-color`,
         )}
       />
     );

diff --git a/test/FormControlSpec.js b/test/FormControlSpec.js
@@ -23,6 +23,12 @@ describe('<FormControl>', () => {
     );
   });
 
+  it('should support type=color', () => {
+    mount(<FormControl type="color" />).assertSingle(
+      'input.form-control.form-control-color',
+    );
+  });
+
   it('should use controlId for id', () => {
     mount(
       <FormGroup controlId="foo">

diff --git a/tests/simple-types-test.tsx b/tests/simple-types-test.tsx
@@ -526,6 +526,7 @@ const MegaComponent = () => (
       />
 
       <Form.Switch label="Switch" disabled />
+      <Form.Control type="color" />
     </Form>
     <Image fluid rounded roundedCircle thumbnail bsPrefix="img" style={style} />
     <div>

diff --git a/www/src/examples/Form/ColorPicker.js b/www/src/examples/Form/ColorPicker.js
@@ -0,0 +1,9 @@
+<>
+  <Form.Label htmlFor="exampleColorInput">Color picker</Form.Label>
+  <Form.Control
+    type="color"
+    id="exampleColorInput"
+    value="#563d7c"
+    title="Choose your color"
+  />
+</>;
diff --git a/www/src/pages/components/forms.js b/www/src/pages/components/forms.js
@@ -8,6 +8,7 @@ import FormBasic from '../../examples/Form/Basic';
 import Check from '../../examples/Form/Check';
 import CheckApi from '../../examples/Form/CheckApi';
 import CheckInline from '../../examples/Form/CheckInline';
+import ColorPicker from '../../examples/Form/ColorPicker';
 import FormFile from '../../examples/Form/FormFile';
 import FormFileSizes from '../../examples/Form/FormFileSizes';
 import FormDisabled from '../../examples/Form/FormDisabled';
@@ -106,6 +107,10 @@ export default withLayout(function FormControlsSection({ data }) {
         default form field styling and preserve the correct margin and padding.
       </p>
       <ReactPlayground codeText={Plaintext} />
+      <LinkedHeading h="3" id="forms-color">
+        Color
+      </LinkedHeading>
+      <ReactPlayground codeText={ColorPicker} />
       <LinkedHeading h="2" id="forms-form-check">
         Checkboxes and Radios
       </LinkedHeading>

diff --git a/www/src/pages/migrating.mdx b/www/src/pages/migrating.mdx
@@ -53,6 +53,7 @@ Below is a _rough_ account of the breaking API changes as well as the minimal ch
 - removed `custom`.
 - removed `bsCustomPrefix`.
 - dropped support for `type` supporting the `range` value in favor of FormRange.
+- add color picker
 
 ### FormRow