noMargin prop for FormGroup (#1261)

Author: jasonbasuil

scss/forms/form_group.scss

@@ -54,6 +54,10 @@
     }
   }
 
+  &--no-margin {
+    margin: 0;
+  }
+
   &__helper-text {
     @include synth-font-type-20;
     color: var(--ux-gray-900);

src/FormGroup/FormGroup.mdx

@@ -42,6 +42,12 @@ be beneficial to the user
 
 <Canvas of={ComponentStories.Required} />
 
+### No margin
+
+- Remove the default margin on the FormGroup.
+
+<Canvas of={ComponentStories.NoMargin} />
+
 ### With Label Tooltip
 
 - Information users will typically only reference once (and then it's learned) or here and there.

src/FormGroup/FormGroup.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { faSearch } from '@fortawesome/pro-solid-svg-icons';
 
+import { FlexContainer } from 'src/FlexContainer';
 import FormGroup from '.';
 import Input from '../Input';
 import FormControlLabel from '../FormControlLabel';
@@ -56,6 +57,27 @@ export const Required = () => (
   </FormGroup>
 );
 
+export const NoMargin = () => (
+  <FlexContainer flexDirection="column" gap={4}>
+    <FormGroup
+      label="Label"
+      labelHtmlFor="no-margin-1-input"
+      noMargin
+      required
+    >
+      <InputComponent id="no-margin-1-input" placeholder="This FormGroup has no default margin" />
+    </FormGroup>
+    <FormGroup
+      label="Label"
+      labelHtmlFor="no-margin-2-input"
+      noMargin
+      required
+    >
+      <InputComponent id="no-margin-2-input" placeholder="This FormGroup has no default margin" />
+    </FormGroup>
+  </FlexContainer>
+);
+
 export const WithLabelTooltip = () => (
   <FormGroup
     id="with-label"

src/FormGroup/FormGroup.tsx

@@ -57,6 +57,7 @@ export type FormGroupProps = {
   labelHelperText?: string;
   labelHtmlFor?: string;
   labelTooltip?: React.ReactNode;
+  noMargin?: boolean;
   required?: boolean;
 };
 
@@ -76,6 +77,7 @@ export default function FormGroup({
   labelHelperText,
   labelHtmlFor = '',
   labelTooltip,
+  noMargin,
   required,
 }: FormGroupProps) {
   const errorMessage = buildErrorMessage(errors[inputKey || ''], label);
@@ -137,6 +139,7 @@ export default function FormGroup({
            'FormGroup--is-invalid': hasErrors,
            'FormGroup--bordered': bordered,
            'FormGroup--inline': inline,
+           'FormGroup--no-margin': noMargin,
          },
        ),
        id,