Fix top margin of validation messages

scss/_patterns_form-help-text.scss

@@ -7,6 +7,10 @@
     color: $colors--theme--text-muted;
     margin-top: -$sp-unit;
 
+    .is-dense + & {
+      margin-top: 0;
+    }
+
     &.is-tick-element {
       margin-left: $sph--large + $form-tick-box-size;
     }

scss/_patterns_form-validation.scss

@@ -15,6 +15,10 @@
     @extend %small-text;
     @extend %vf-validation-wrapper;
 
+    .is-dense + & {
+      margin-top: 0;
+    }
+
     margin-top: -$sp-unit;
   }
 

templates/docs/examples/patterns/forms/combined.html

@@ -13,9 +13,11 @@
 <section>{% include 'docs/examples/patterns/forms/dense.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/fieldset-required.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/form-help-text.html' %}</section>
+<section>{% include 'docs/examples/patterns/forms/form-help-text-dense.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/form-inline.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/form-stacked.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/form-validation.html' %}</section>
+<section>{% include 'docs/examples/patterns/forms/form-validation-dense.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/forms-required.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/password-toggle.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/radio.html' %}</section>

templates/docs/examples/patterns/forms/form-help-text-dense.html

@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Help text / Dense{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+<form>
+  <label for="exampleTextInputHelp">Email address</label>
+  <input class="p-form-validation__input is-dense" type="email" id="exampleTextInputHelp" placeholder="[email protected]" name="exampleTextInputHelp" autocomplete="email" aria-describedby="exampleInputHelpMessage"/>
+  <p class="p-form-help-text" id="exampleInputHelpMessage">
+    A notification email will be sent to entered email address.
+  </p>
+</form>
+{% endblock %}

templates/docs/examples/patterns/forms/form-validation-dense.html

@@ -0,0 +1,47 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Validation / Dense{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+  <form>
+    <div class="p-form-validation is-error">
+      <label for="exampleTextInputError">Email address</label>
+      <input class="p-form-validation__input is-dense" type="email" id="exampleTextInputError"
+             placeholder="[email protected]" name="exampleTextInputError" autocomplete="email" aria-invalid="true"
+             aria-describedby="exampleInputErrorMessage"/>
+      <p class="p-form-validation__message" id="exampleInputErrorMessage">This field is required.</p>
+    </div>
+
+    <div class="p-form-validation is-caution">
+      <label for="exampleTextInputCaution">Mail configuration ID</label>
+      <input class="p-form-validation__input is-dense" type="text" id="exampleTextInputCaution" placeholder="14"
+             name="exampleTextInputCaution" autocomplete="on" aria-describedby="exampleInputCautionMessage"/>
+      <p class="p-form-validation__message" id="exampleInputCautionMessage">No validation is performed in preview
+        mode.</p>
+    </div>
+
+    <div class="p-form-validation is-success">
+      <label for="exampleTextInputSuccess">Card number</label>
+      <input class="p-form-validation__input is-dense" type="text" id="exampleTextInputSuccess"
+             placeholder="**** **** **** ****" name="exampleTextInputSuccess" autocomplete="off"
+             aria-describedby="exampleInputSuccessMessage"/>
+      <p class="p-form-validation__message" id="exampleInputSuccessMessage">Verified.</p>
+    </div>
+
+    <div class="p-form-validation is-error">
+      <label for="exampleSelectInputError">Ubuntu releases</label>
+      <div class="p-form-validation__select-wrapper is-dense">
+        <select class="p-form-validation__input is-dense" id="exampleSelectInputError" name="exampleSelectInputError"
+                aria-invalid="true" aria-describedby="exampleSelectErrorMessage">
+          <option value="">--Select an option--</option>
+          <option value="1">Cosmic Cuttlefish</option>
+          <option value="2">Bionic Beaver</option>
+          <option value="3">Xenial Xerus</option>
+        </select>
+      </div>
+      <p class="p-form-validation__message" id="exampleSelectErrorMessage">You need to select an OS to complete your
+        install.</p>
+    </div>
+  </form>
+{% endblock %}