feat(Form): add inverted prop

docs/app/Examples/collections/Form/Variations/FormExampleInverted.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button, Form, Segment } from 'semantic-ui-react'
+
+
+const FormExampleInverted = () => (
+  <Segment inverted>
+    <Form inverted>
+      <Form.Group widths='equal'>
+        <Form.Input label='First name' placeholder='First name' />
+        <Form.Input label='Last name' placeholder='Last name' />
+      </Form.Group>
+      <Form.Checkbox label='I agree to the Terms and Conditions' />
+      <Button type='submit'>Submit</Button>
+    </Form>
+  </Segment>
+)
+export default FormExampleInverted

docs/app/Examples/collections/Form/Variations/index.js

@@ -6,9 +6,14 @@ const FormFormVariationsExamples = () => (
   <ExampleSection title='Form Variations'>
     <ComponentExample
       title='Size'
-      description='A form can vary in size'
+      description='A form can vary in size.'
       examplePath='collections/Form/Variations/FormExampleSize'
     />
+    <ComponentExample
+      title='Inverted'
+      description='A form on a dark background may have to invert its color scheme.'
+      examplePath='collections/Form/Variations/FormExampleInverted'
+    />
   </ExampleSection>
 )
 

src/collections/Form/Form.js

@@ -195,6 +195,9 @@ export default class Form extends Component {
     /** Automatically show any error Message children */
     error: PropTypes.bool,
 
+    /** A form can have its color inverted for contrast */
+    inverted: PropTypes.bool,
+
     /** Automatically show a loading indicator */
     loading: PropTypes.bool,
 
@@ -252,6 +255,7 @@ export default class Form extends Component {
       children,
       className,
       error,
+      inverted,
       loading,
       reply,
       size,
@@ -264,6 +268,7 @@ export default class Form extends Component {
       'ui',
       size,
       useKeyOnly(error, 'error'),
+      useKeyOnly(inverted, 'inverted'),
       useKeyOnly(loading, 'loading'),
       useKeyOnly(reply, 'reply'),
       useKeyOnly(success, 'success'),

src/collections/Form/index.d.ts

@@ -26,6 +26,9 @@ interface FormProps {
   /** Automatically show any error Message children */
   error?: boolean;
 
+  /** A form can have its color inverted for contrast */
+  inverted?: boolean;
+
   /** Automatically show a loading indicator */
   loading?: boolean;
 

test/specs/collections/Form/Form-test.js

@@ -32,8 +32,9 @@ describe('Form', () => {
   ])
   common.rendersChildren(Form)
 
-  common.propKeyOnlyToClassName(Form, 'loading')
   common.propKeyOnlyToClassName(Form, 'error')
+  common.propKeyOnlyToClassName(Form, 'inverted')
+  common.propKeyOnlyToClassName(Form, 'loading')
   common.propKeyOnlyToClassName(Form, 'reply')
   common.propKeyOnlyToClassName(Form, 'success')
   common.propKeyOnlyToClassName(Form, 'warning')