feat(Form): add prop for inverted classname

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={true}>
+    <Form inverted={true}>
+      <Form.Group widths='equal'>
+        <Form.Field label='First name' control='input' placeholder='First name' />
+        <Form.Field label='Last name' control='input' 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

@@ -9,6 +9,11 @@ const FormFormVariationsExamples = () => (
       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

@@ -215,6 +215,9 @@ export default class Form extends Component {
     /** A form can vary in size */
     size: PropTypes.oneOf(_meta.props.size),
 
+    /** A form can have its color inverted for contrast */
+    inverted: PropTypes.bool,
+
     /** Automatically show any success Message children */
     success: PropTypes.bool,
 
@@ -258,11 +261,13 @@ export default class Form extends Component {
       success,
       warning,
       widths,
+      inverted,
     } = this.props
 
     const classes = cx(
       'ui',
       size,
+      useKeyOnly(inverted, 'inverted'),
       useKeyOnly(error, 'error'),
       useKeyOnly(loading, 'loading'),
       useKeyOnly(reply, 'reply'),

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

@@ -37,6 +37,7 @@ describe('Form', () => {
   common.propKeyOnlyToClassName(Form, 'reply')
   common.propKeyOnlyToClassName(Form, 'success')
   common.propKeyOnlyToClassName(Form, 'warning')
+  common.propKeyOnlyToClassName(Form, 'inverted')
 
   common.propValueOnlyToClassName(Form, 'size', _.without(SUI.SIZES, 'medium'))