Support input groups in floating forms (#36759)

* Support input groups in floating forms * Update bundlewatch Co-authored-by: 719media <ben@719media.com>
twbs · Jul 18, 2022 · 71cbb88 · 71cbb88
1 parent 6d101b1
commit 71cbb88
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "26.5 kB"
+      "maxSize": "26.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
@@ -10,7 +10,8 @@
   width: 100%;
 
   > .form-control,
-  > .form-select {
+  > .form-select,
+  > .form-floating {
     position: relative; // For focus state's z-index
     flex: 1 1 auto;
     width: 1%;
@@ -19,7 +20,8 @@
 
   // Bring the "active" form control to the top of surrounding elements
   > .form-control:focus,
-  > .form-select:focus {
+  > .form-select:focus,
+  > .form-floating:focus-within {
     z-index: 3;
   }
 
@@ -96,15 +98,19 @@
 // stylelint-disable-next-line no-duplicate-selectors
 .input-group {
   &:not(.has-validation) {
-    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
-    > .dropdown-toggle:nth-last-child(n + 3) {
+    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+    > .dropdown-toggle:nth-last-child(n + 3),
+    > .form-floating:not(:last-child) > .form-control,
+    > .form-floating:not(:last-child) > .form-select {
       @include border-end-radius(0);
     }
   }
 
   &.has-validation {
-    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
-    > .dropdown-toggle:nth-last-child(n + 4) {
+    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+    > .dropdown-toggle:nth-last-child(n + 4),
+    > .form-floating:nth-last-child(n + 3) > .form-control,
+    > .form-floating:nth-last-child(n + 3) > .form-select {
       @include border-end-radius(0);
     }
   }
@@ -114,7 +120,9 @@
     $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
   }
 
-  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+  > :not(:first-child):not(.dropdown-menu):not(.form-floating)#{$validation-messages},
+  > .form-floating:not(:first-child) > .form-control,
+  > .form-floating:not(:first-child) > .form-select {
     margin-left: -$input-border-width;
     @include border-start-radius(0);
   }

diff --git a/site/content/docs/5.2/forms/floating-labels.md b/site/content/docs/5.2/forms/floating-labels.md
@@ -90,6 +90,35 @@ Floating labels also support `.form-control-plaintext`, which can be helpful for
 </div>
 {{< /example >}}
 
+## Input groups
+
+Floating labels also support `.input-group`.
+
+{{< example >}}
+<div class="input-group mb-3">
+  <span class="input-group-text">@</span>
+  <div class="form-floating">
+    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
+    <label for="floatingInputGroup1">Username</label>
+  </div>
+</div>
+{{< /example >}}
+
+When using `.input-group` and `.form-floating` along with form validation, the `-feedback` should be placed outside of the `.form-floating`, but inside of the `.input-group`. This means that the feedback will need to be shown using javascript.
+
+{{< example >}}
+<div class="input-group has-validation">
+  <span class="input-group-text">@</span>
+  <div class="form-floating is-invalid">
+    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
+    <label for="floatingInputGroup2">Username</label>
+  </div>
+  <div class="invalid-feedback">
+    Please choose a username.
+  </div>
+</div>
+{{< /example >}}
+
 ## Layout
 
 When working with the Bootstrap grid system, be sure to place form elements within column classes.