feat(form): support removing top spacer form from labels

packages/react-core/src/components/Form/FormGroup.tsx

@@ -20,6 +20,8 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   validated?: 'success' | 'error' | 'default';
   /** Sets the FormGroup isInline. */
   isInline?: boolean;
+  /** Removes top spacer from label. */
+  hasNoPaddingTop?: boolean;
   /** Helper text after the field. It can be a simple text or an object. */
   helperText?: React.ReactNode;
   /** Helper text after the field when the field is invalid. It can be a simple text or an object. */
@@ -35,6 +37,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   isRequired = false,
   validated = 'default',
   isInline = false,
+  hasNoPaddingTop = false,
   helperText,
   helperTextInvalid,
   fieldId,
@@ -59,7 +62,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   return (
     <div {...props} className={css(styles.formGroup, isInline ? styles.modifiers.inline : className)}>
       {label && (
-        <label className={css(styles.formLabel)} htmlFor={fieldId}>
+        <label className={css(styles.formLabel, hasNoPaddingTop && styles.modifiers.noPaddingTop)} htmlFor={fieldId}>
           <span className={css(styles.formLabelText)}>{label}</span>
           {isRequired && (
             <span className={css(styles.formLabelRequired)} aria-hidden="true">

packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx

@@ -25,6 +25,15 @@ describe('FormGroup component', () => {
     expect(view).toMatchSnapshot();
   });
 
+  test('should render no padding-top form group variant', () => {
+    const view = mount(
+      <FormGroup hasNoPaddingTop label="label" fieldId="label-id" helperText="this is helper text">
+        <input id="label-id" />
+      </FormGroup>
+    );
+    expect(view.find('label').prop('className')).toMatch(/no-padding-top/)
+  });
+
   test('should render form group variant with required label', () => {
     const view = mount(
       <FormGroup label="label" isRequired fieldId="label-id">

packages/react-core/src/components/Form/examples/Form.md

@@ -353,3 +353,31 @@ class InvalidForm extends React.Component {
   }
 }
 ```
+
+```js title=Horizontal-no-padding-top
+import React from 'react';
+import {
+  Form,
+  FormGroup,
+  Checkbox,
+  Radio
+} from '@patternfly/react-core';
+
+class HorizontalForm extends React.Component {
+  render() {
+
+    return (
+      <Form isHorizontal>
+        <FormGroup
+          label="Label"
+          hasNoPaddingTop
+          fieldId="options"
+        >
+        <Checkbox label="option 1" id="option-1" />
+        <Checkbox label="option 2" id="option-2" />
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+```

packages/react-integration/cypress/integration/form.spec.ts

@@ -50,4 +50,8 @@ describe('Form Demo Test', () => {
       expect(textinput.attr('aria-invalid')).to.be.equal('false');
     });
   });
+
+  it('Verify form group label has no top spacer', () => {
+    cy.get('label[for="subscribe"]').should('have.class', 'pf-m-no-padding-top');
+  });
 });

packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx

@@ -4,6 +4,7 @@ import {
   FormGroup,
   FormProps,
   TextInput,
+  Checkbox,
   Select,
   SelectOption,
   SelectOptionObject,
@@ -142,6 +143,9 @@ export class FormDemo extends Component<FormProps, FormState> {
                   onChange={this.handleValidatedTextInputChange}
                 />
               </FormGroup>
+              <FormGroup hasNoPaddingTop id="formgroup-checkbox" label="Subscribe" fieldId="subscribe">
+                <Checkbox id="subscribe" label="Mailing list" />
+              </FormGroup>
             </Form>
           </div>
         </div>