feat(Form): add unstackable prop (#1921)

docs/app/Examples/collections/Form/GroupVariations/FormExampleUnstackableGroup.js

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

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

@@ -14,6 +14,11 @@ const FormGroupVariationsExamples = () => (
       description='Multiple fields may be inline in a row.'
       examplePath='collections/Form/GroupVariations/FormExampleInlineGroupedFields'
     />
+    <ComponentExample
+      title='Unstackable'
+      description='A form group can prevent itself from stacking on mobile, too.'
+      examplePath='collections/Form/GroupVariations/FormExampleUnstackableGroup'
+    />
   </ExampleSection>
 )
 

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button, Form } from 'semantic-ui-react'
+
+const FormExampleUnstackable = () => (
+  <Form unstackable>
+    <Form.Group widths={2}>
+      <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>
+)
+export default FormExampleUnstackable

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

@@ -14,6 +14,10 @@ const FormFormVariationsExamples = () => (
       description='A form on a dark background may have to invert its color scheme.'
       examplePath='collections/Form/Variations/FormExampleInverted'
     />
+    <ComponentExample
+      description='A form can prevent itself from stacking on mobile.'
+      examplePath='collections/Form/Variations/FormExampleUnstackable'
+    />
   </ExampleSection>
 )
 

src/collections/Form/Form.d.ts

@@ -46,6 +46,9 @@ export interface FormProps {
   /** Automatically show any success Message children. */
   success?: boolean;
 
+  /** A form can prevent itself from stacking on mobile. */
+  unstackable?: boolean;
+
   /** Automatically show any warning Message children. */
   warning?: boolean;
 

src/collections/Form/Form.js

@@ -68,7 +68,10 @@ class Form extends Component {
     /** Automatically show any success Message children. */
     success: PropTypes.bool,
 
-    /** Automatically show any warning Message children . */
+    /** A form can prevent itself from stacking on mobile. */
+    unstackable: PropTypes.bool,
+
+    /** Automatically show any warning Message children. */
     warning: PropTypes.bool,
 
     /** Forms can automatically divide fields to be equal width. */
@@ -114,6 +117,7 @@ class Form extends Component {
       reply,
       size,
       success,
+      unstackable,
       warning,
       widths,
     } = this.props
@@ -126,6 +130,7 @@ class Form extends Component {
       useKeyOnly(loading, 'loading'),
       useKeyOnly(reply, 'reply'),
       useKeyOnly(success, 'success'),
+      useKeyOnly(unstackable, 'unstackable'),
       useKeyOnly(warning, 'warning'),
       useWidthProp(widths, null, true),
       'form',

src/collections/Form/FormGroup.d.ts

@@ -19,6 +19,9 @@ export interface FormGroupProps {
   /** Multiple fields may be inline in a row. */
   inline?: boolean;
 
+  /** A form group can prevent itself from stacking on mobile. */
+  unstackable?: boolean;
+
   /** Fields Groups can specify their width in grid columns or automatically divide fields to be equal width. */
   widths?: SemanticWIDTHS | 'equal';
 }

src/collections/Form/FormGroup.js

@@ -22,12 +22,14 @@ function FormGroup(props) {
     className,
     grouped,
     inline,
+    unstackable,
     widths,
   } = props
 
   const classes = cx(
     useKeyOnly(grouped, 'grouped'),
     useKeyOnly(inline, 'inline'),
+    useKeyOnly(unstackable, 'unstackable'),
     useWidthProp(widths, null, true),
     'fields',
     className,
@@ -66,6 +68,9 @@ FormGroup.propTypes = {
     PropTypes.bool,
   ]),
 
+  /** A form group can prevent itself from stacking on mobile. */
+  unstackable: PropTypes.bool,
+
   /** Fields Groups can specify their width in grid columns or automatically divide fields to be equal width. */
   widths: PropTypes.oneOf([...SUI.WIDTHS, 'equal']),
 }

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

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

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

@@ -13,4 +13,5 @@ describe('FormGroup', () => {
 
   common.propKeyOnlyToClassName(FormGroup, 'grouped')
   common.propKeyOnlyToClassName(FormGroup, 'inline')
+  common.propKeyOnlyToClassName(FormGroup, 'unstackable')
 })