Fix top margin of validation messages in dense form elements

releases.yml

@@ -8,6 +8,10 @@
       url: /docs/patterns/grid-legacy
       status: Deprecated
       notes: We've deprecated the legacy grid component. Use the new <a href="/docs/patterns/grid">grid component</a> instead.
+    - component: Form / Dense / Validation, help text
+      url: /docs/base/forms#dense-form-elements
+      status: Updated
+      notes: We've added support for <code>.is-dense</code> to form validation messages and help text.
 - version: 4.17.0
   features:
     - component: Tiered list

scss/_base_forms.scss

@@ -62,7 +62,8 @@
       color: $colors--theme--text-muted;
     }
 
-    &.is-dense {
+    &.is-dense,
+    .p-form-validation__select-wrapper.is-dense & {
       margin: 0 0 $spv-nudge-compensation 0;
       padding-bottom: calc($spv-nudge - $spv--x-small - $input-border-thickness);
       padding-top: calc($spv-nudge - $spv--x-small - $input-border-thickness);

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/base/forms.md

@@ -177,6 +177,14 @@ Supplementary help text can be provided for the form fields by adding an element
 View example of a form fields with help text
 </a></div>
 
+### Dense help text {{ status('updated') }}
+
+To use help text with a [dense input element](#dense-form-elements), add `.is-dense` to the `.p-form-validation__input` element.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-help-text-dense" class="js-example">
+View example of a form fields with dense help text
+</a></div>
+
 ## Validation
 
 To use form validation feedback - which includes feedback messages, icons and border colours - wrap individual input elements in a `p-form-validation` and additionally apply the `.is-error`, `.is-caution` or `.is-success` to the wrapper as appropriate.
@@ -189,6 +197,14 @@ Descriptive text relating to the element's validation status should use the clas
 View example of form validation patterns
 </a></div>
 
+### Dense form validation select wrapper {{ status('updated') }}
+
+To create a [dense input](#dense-form-elements) inside a `p-form-validation__select-wrapper`, add the `.is-dense` class to the select wrapper, not the input.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-validation-select-wrapper-dense" class="js-example">
+View example of form validation patterns
+</a></div>
+
 ## Required
 
 Apply the class `.is-required` to mandatory input fields. You should also add a legend to the form to be explicit about the meaning of the asterisk.

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

@@ -13,9 +13,12 @@
 <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/form-validation-select-wrapper-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,34 @@
+{% 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>
+
+    {% include "docs/examples/patterns/forms/form-validation-select-wrapper-dense.html" %}
+  </form>
+{% endblock %}

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

@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Validation / Dense select wrapper{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+  <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" 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>
+{% endblock %}