fix(form): add variation to form label for no padding top (#2200)

patternfly · Sep 5, 2019 · dacd01d · dacd01d
1 parent b6fe4e7
commit dacd01d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/src/patternfly/components/Form/docs/code.md b/src/patternfly/components/Form/docs/code.md
@@ -28,4 +28,5 @@
 | `.pf-m-inactive` | `.pf-c-form__helper-text`| Modifies display of helper text to none. |
 | `.pf-m-border` | `.pf-c-form__section` | Modifies form element border-bottom. |
 | `.pf-m-disabled` | `.pf-c-form__label` | Modifies form label to show disabled state. |
+| `.pf-m-no-padding-top` | `.pf-c-form__label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
 | `.pf-m-inline` | `.pf-c-form__group` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
diff --git a/src/patternfly/components/Form/examples/form-horizontal-align-labels-example.hbs b/src/patternfly/components/Form/examples/form-horizontal-align-labels-example.hbs
@@ -1,4 +1,4 @@
-{{#> form form--modifier="pf-m-horizontal" form--id="horizontal-align-labels"}}
+{{#> form form--modifier="pf-m-horizontal" form--id="horizontal-align-labels-1"}}
   {{#> form-group}}
     {{#> form-label form-label--attribute=(concat 'for="' form--id '-horizontal-form-name"') required="true"}}
       Name
@@ -9,3 +9,37 @@
     {{/horizontal-form-group}}
   {{/form-group}}
 {{/form}}
+
+<br>
+
+{{#> form form--modifier="pf-m-horizontal" form--id="horizontal-align-labels-2"}}
+  {{#> form-group}}
+    {{#> form-label form-label--attribute=(concat 'for="' form--id '-horizontal-form-name"')}}
+      Information
+    {{/form-label}}
+    {{#> horizontal-form-group}}
+      {{#> form-control controlType="textarea" form-control--attribute=(concat 'type="text" id="' form--id '-horizontal-form-name-2" name="' form--id '-horizontal-form-name-2" aria-label="textarea example"')}}
+      {{/form-control}}
+    {{/horizontal-form-group}}
+  {{/form-group}}
+{{/form}}
+
+<br>
+
+{{#> form form--modifier="pf-m-horizontal" form--id="horizontal-align-labels-top"}}
+  {{#> form-group}}
+    {{#> form-label form-label--modifier="pf-m-no-padding-top" form-label--attribute=(concat 'for="' form--id '-horizontal-form-name"')}}
+      Label (no top padding)
+    {{/form-label}}
+    {{#> horizontal-form-group}}
+    {{#> check}}
+      {{#> check-input check-input--attribute='type="checkbox" id="alt-form-checkbox1" name="alt-form-checkbox1"'}}{{/check-input}}
+      {{#> check-label check-label--attribute='for="alt-form-checkbox1"'}}Option 1{{/check-label}}
+    {{/check}}
+      {{#> check}}
+        {{#> check-input check-input--attribute='type="checkbox" id="alt-form-checkbox2" name="alt-form-checkbox2"'}}{{/check-input}}
+        {{#> check-label check-label--attribute='for="alt-form-checkbox2"'}}Option 2{{/check-label}}
+      {{/check}}
+    {{/horizontal-form-group}}
+  {{/form-group}}
+{{/form}}
diff --git a/src/patternfly/components/Form/form.scss b/src/patternfly/components/Form/form.scss
@@ -69,10 +69,16 @@
         grid-template-columns: var(--pf-c-form--m-horizontal--md__group--GridTemplateColumns);
       }
 
+      /* stylelint-disable */
       .pf-c-form__group .pf-c-form__label {
         padding-top: var(--pf-c-form__label--PaddingTop);
         padding-bottom: 0;
+
+        &.pf-m-no-padding-top {
+          --pf-c-form__label--PaddingTop: 0;
+        }
       }
+      /* stylelint-enable */
 
       .pf-c-form-control,
       .pf-c-form__horizontal-group,
@@ -144,7 +150,6 @@
 .pf-c-form__label-required {
   margin-left: var(--pf-c-form__label-required--MarginLeft);
   font-size: var(--pf-c-form__label-required--FontSize);
-  line-height: 0;
   color: var(--pf-c-form__label-required--Color);
 }