diff --git a/docs/app/Examples/collections/Form/Variations/FormExampleInverted.js b/docs/app/Examples/collections/Form/Variations/FormExampleInverted.js new file mode 100644 index 0000000000..57970938ee --- /dev/null +++ b/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 = () => ( + +
+ + + + + + + +
+) +export default FormExampleInverted diff --git a/docs/app/Examples/collections/Form/Variations/index.js b/docs/app/Examples/collections/Form/Variations/index.js index 7f66999f86..d878a50352 100644 --- a/docs/app/Examples/collections/Form/Variations/index.js +++ b/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' /> + ) diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js index 0f70363189..db6534af4f 100644 --- a/src/collections/Form/Form.js +++ b/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'), diff --git a/test/specs/collections/Form/Form-test.js b/test/specs/collections/Form/Form-test.js index 0a68c3b2f9..dad4787b90 100644 --- a/test/specs/collections/Form/Form-test.js +++ b/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'))