Dense select wrappers apply dense styling to their child form elements

Author: jmuzina

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);

templates/docs/base/forms.md

@@ -189,6 +189,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
+
+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

@@ -18,6 +18,7 @@
 <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-validation-dense.html

@@ -29,19 +29,6 @@
       <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>
+    {% 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 %}