feat(FormGroup): add hasMargin, add story back in (#7936)

* feat(FormGroup): add hasMargin, add story back in

* docs(FormGroup): add mdx file, update snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tw15egan

packages/components/src/components/form/_form.scss

@@ -21,6 +21,10 @@
     margin-bottom: $carbon--spacing-07;
   }
 
+  .#{$prefix}--fieldset--no-margin {
+    margin-bottom: 0;
+  }
+
   .#{$prefix}--form-item {
     @include type-style('body-short-01');
 
@@ -170,6 +174,12 @@
   .#{$prefix}--form__helper-text--disabled {
     color: $disabled-02;
   }
+
+  // If a FormGroup is disabled, Form labels and helper text nested inside should also be disabled
+  fieldset[disabled] .#{$prefix}--label,
+  fieldset[disabled] .#{$prefix}--form__helper-text {
+    color: $disabled-02;
+  }
 }
 
 @include exports('form') {

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -2819,6 +2819,7 @@ Map {
   },
   "FormGroup" => Object {
     "defaultProps": Object {
+      "hasMargin": true,
       "invalid": false,
       "message": false,
       "messageText": "",
@@ -2830,6 +2831,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "hasMargin": Object {
+        "type": "bool",
+      },
       "invalid": Object {
         "type": "bool",
       },

packages/react/src/components/FormGroup/FormGroup-story.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { boolean, text } from '@storybook/addon-knobs';
+import FormGroup from './FormGroup';
+import TextInput from '../TextInput';
+import RadioButtonGroup from '../RadioButtonGroup';
+import RadioButton from '../RadioButton';
+import Button from '../Button';
+import mdx from './FormGroup.mdx';
+
+const props = () => ({
+  disabled: boolean('Disabled (disabled)', false),
+  legendText: text('Legend (legendText)', 'FormGroup Legend'),
+  hasMargin: boolean('Fieldset has bottom margin (hasMargin)', true),
+});
+
+export default {
+  title: 'Components/FormGroup',
+
+  parameters: {
+    component: FormGroup,
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const _Default = () => (
+  <FormGroup legendText="FormGroup Legend" style={{ maxWidth: '400px' }}>
+    <TextInput
+      id="one"
+      labelText="First Name"
+      style={{ marginBottom: '1rem' }}
+    />
+    <TextInput
+      id="two"
+      labelText="Last Name"
+      style={{ marginBottom: '1rem' }}
+    />
+
+    <RadioButtonGroup
+      legendText="Radio button heading"
+      name="radio-button-group"
+      defaultSelected="radio-1">
+      <RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
+      <RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
+      <RadioButton labelText="Option 3" value="radio-3" id="radio-3" />
+    </RadioButtonGroup>
+  </FormGroup>
+);
+
+_Default.story = {
+  name: 'Form Group',
+};
+
+export const Playground = () => (
+  <>
+    <FormGroup className="test" {...props()} style={{ maxWidth: '400px' }}>
+      <TextInput
+        id="one"
+        labelText="First Name"
+        style={{ marginBottom: '1rem' }}
+      />
+      <TextInput
+        id="two"
+        labelText="Last Name"
+        style={{ marginBottom: '1rem' }}
+      />
+
+      <RadioButtonGroup
+        legendText="Radio button heading"
+        name="radio-button-group"
+        defaultSelected="radio-1">
+        <RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
+        <RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
+        <RadioButton labelText="Option 3" value="radio-3" id="radio-3" />
+      </RadioButtonGroup>
+    </FormGroup>
+    <Button>Submit</Button>
+  </>
+);

packages/react/src/components/FormGroup/FormGroup.js

@@ -19,10 +19,13 @@ const FormGroup = ({
   className,
   message,
   messageText,
+  hasMargin,
   ...other
 }) => {
   const classNamesLegend = classnames(`${prefix}--label`, className);
-  const classNamesFieldset = classnames(`${prefix}--fieldset`, className);
+  const classNamesFieldset = classnames(`${prefix}--fieldset`, className, {
+    [`${prefix}--fieldset--no-margin`]: !hasMargin,
+  });
 
   return (
     <fieldset
@@ -49,6 +52,11 @@ FormGroup.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Specify whether or not the FormGroup should provide bottom margin
+   */
+  hasMargin: PropTypes.bool,
+
   /**
    * Specify whether the <FormGroup> is invalid
    */
@@ -74,6 +82,7 @@ FormGroup.defaultProps = {
   invalid: false,
   message: false,
   messageText: '',
+  hasMargin: true,
 };
 
 export default FormGroup;

packages/react/src/components/FormGroup/FormGroup.mdx

@@ -0,0 +1,35 @@
+import { Props, Story, Preview } from '@storybook/addon-docs/blocks';
+
+# FormGroup
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/FormGroup)
+ | 
+[Usage guidelines](https://www.carbondesignsystem.com/components/form/usage)
+[Accessibility](https://www.carbondesignsystem.com/components/form/accessibility)
+
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Overview
+
+<Preview>
+  <Story id="components-formgroup--default" />
+</Preview>
+
+## Component API
+
+<Props />
+
+## Feedback
+
+Help us improve this component by providing feedback through, asking questions
+on Slack, or updating this file on GitHub
+[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/FormGroup/FormGroup.mdx).