Update inline forms (updated docs and new flexbox styles) (#21212)

* fix form-inline with flex enabled
* grunt
* fix alignment of labels
* shorter if syntax
* add new form example to docs for now
* update inline form docs usage guidelines
* responsive margins
* better margin utils
* fix sizing of .form-check
* flexbox alignment of .form-check
* no need to change direction
* support custom controls in inline form, for default and flex modes
* add example of custom select and checks to docs
* remove hidden and visible label variants since we cover that in the usage guidelines at the start and include hidden labels everywhere
* use property value instead of layout name
* apply to all labels
* add a visible label, space it out
* add id

1 files changed, 70 insertions, 11 deletions

diff --git a/scss/_forms.scss b/scss/_forms.scss
index be19a0795..08086c22c 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -306,14 +306,40 @@ select.form-control-lg {
 // default HTML form controls and our custom form controls (e.g., input groups).
 
 .form-inline {
+  @if $enable-flex {
+    display: flex;
+    flex-flow: row wrap;
+
+    // Because we use flex, the initial sizing of checkboxes is collapsed and
+    // doesn't occupy the full-width (which is what we want for xs grid tier),
+    // so we force that here.
+    .form-check {
+      width: 100%;
+    }
+  }
 
   // Kick in the inline
   @include media-breakpoint-up(sm) {
+    label {
+      @if $enable-flex {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      margin-bottom: 0;
+    }
+
     // Inline-block all the things for "inline"
     .form-group {
-      display: inline-block;
+      @if $enable-flex {
+        display: flex;
+        flex: 0 0 auto;
+        flex-flow: row wrap;
+      } @else {
+        display: inline-block;
+        vertical-align: middle;
+      }
       margin-bottom: 0;
-      vertical-align: middle;
     }
 
     // Allow folks to *not* use `.form-group`
@@ -329,20 +355,25 @@ select.form-control-lg {
     }
 
     .input-group {
-      display: inline-table;
       width: auto;
-      vertical-align: middle;
 
-      .input-group-addon,
-      .input-group-btn,
-      .form-control {
-        width: auto;
+      @if not $enable-flex {
+        display: inline-table;
+        vertical-align: middle;
+
+        .input-group-addon,
+        .input-group-btn,
+        .form-control {
+          width: auto;
+        }
       }
     }
 
     // Input groups need that 100% width though
     .input-group > .form-control {
-      width: 100%;
+      @if not $enable-flex {
+        width: 100%;
+      }
     }
 
     .form-control-label {
@@ -353,10 +384,17 @@ select.form-control-lg {
     // Remove default margin on radios/checkboxes that were used for stacking, and
     // then undo the floating of radios and checkboxes to match.
     .form-check {
-      display: inline-block;
+      @if $enable-flex {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      } @else {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      width: auto;
       margin-top: 0;
       margin-bottom: 0;
-      vertical-align: middle;
     }
     .form-check-label {
       padding-left: 0;
@@ -366,6 +404,27 @@ select.form-control-lg {
       margin-left: 0;
     }
 
+    // Custom form controls
+    .custom-control {
+      padding-left: 0;
+
+      @if $enable-flex {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      } @else {
+        vertical-align: middle;
+      }
+    }
+    .custom-control-indicator {
+      position: static;
+      display: inline-block;
+      @if $enable-flex {
+        margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate.
+      }
+      vertical-align: text-bottom;
+    }
+
     // Re-override the feedback icon.
     .has-feedback .form-control-feedback {
       top: 0;