diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-07-18 06:50:41 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-18 06:50:41 +0300 |
commit | 71cbb88f098f186518a20c22294a0cbda944ec6b (patch) | |
tree | 97fb2d09025a218881d6a38a7b7a000beb4a5cc8 | |
parent | 6d101b15a4af000b32be236063e9e5b58385d077 (diff) |
Support input groups in floating forms (#36759)
* Support input groups in floating forms
* Update bundlewatch
Co-authored-by: 719media <ben@719media.com>
-rw-r--r-- | .bundlewatch.config.json | 2 | ||||
-rw-r--r-- | scss/forms/_input-group.scss | 22 | ||||
-rw-r--r-- | site/content/docs/5.2/forms/floating-labels.md | 29 |
3 files changed, 45 insertions, 8 deletions
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 7b5017ac1c..c89a19e471 100644 --- 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 index 140052936c..83d52c51e0 100644 --- 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 index a19bbdbfe9..9ec4fcd2fa 100644 --- 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. |