diff options
| -rw-r--r-- | scss/forms/_input-group.scss | 97 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/button-group.md | 8 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/navbar.md | 4 | ||||
| -rw-r--r-- | site/content/docs/4.3/examples/checkout/index.html | 10 | ||||
| -rw-r--r-- | site/content/docs/4.3/forms/input-group.md | 222 | ||||
| -rw-r--r-- | site/content/docs/4.3/forms/layout.md | 12 | ||||
| -rw-r--r-- | site/content/docs/4.3/forms/validation.md | 16 | ||||
| -rw-r--r-- | site/content/docs/4.3/migration.md | 1 |
8 files changed, 129 insertions, 241 deletions
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index f729d0bd2..878cb83d6 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -1,5 +1,3 @@ -// stylelint-disable selector-no-qualifying-type - // // Base styles // @@ -18,13 +16,6 @@ flex: 1 1 auto; width: 1%; min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size - margin-bottom: 0; - - + .form-control, - + .form-select, - + .form-file { - margin-left: -$input-border-width; - } } // Bring the "active" form control to the top of surrounding elements @@ -35,37 +26,19 @@ } // Bring the custom file input above the label - > .form-file .form-file-input:focus { - z-index: 4; - } - - > .form-control, - > .form-select { - &:not(:last-child) { @include border-right-radius(0); } - &:not(:first-child) { @include border-left-radius(0); } - } - - // Custom file inputs have more complex markup, thus requiring different - // border-radius overrides. > .form-file { - display: flex; - align-items: center; - - &:not(:last-child) .form-file-label { @include border-right-radius(0); } - &:not(:first-child) .form-file-label { @include border-left-radius(0); } - } -} - + > .form-file-input:focus { + z-index: 4; + } -// Prepend and append -// -// While it requires one extra layer of HTML for each, dedicated prepend and -// append elements allow us to 1) be less clever, 2) simplify our selectors, and -// 3) support HTML5 form validation. + &:not(:last-child) > .form-file-label { + @include border-right-radius(0); + } -.input-group-prepend, -.input-group-append { - display: flex; + &:not(:first-child) > .form-file-label { + @include border-left-radius(0); + } + } // Ensure buttons are always above inputs for more visually pleasing borders. // This isn't needed for `.input-group-text` since it shares the same border-color @@ -78,18 +51,8 @@ z-index: 3; } } - - .btn + .btn, - .btn + .input-group-text, - .input-group-text + .input-group-text, - .input-group-text + .btn { - margin-left: -$input-border-width; - } } -.input-group-prepend { margin-right: -$input-border-width; } -.input-group-append { margin-left: -$input-border-width; } - // Textual addons // @@ -128,10 +91,8 @@ .input-group-lg > .form-control, .input-group-lg > .form-select, -.input-group-lg > .input-group-prepend > .input-group-text, -.input-group-lg > .input-group-append > .input-group-text, -.input-group-lg > .input-group-prepend > .btn, -.input-group-lg > .input-group-append > .btn { +.input-group-lg > .input-group-text, +.input-group-lg > .btn { padding: $input-padding-y-lg $input-padding-x-lg; @include font-size($input-font-size-lg); @include border-radius($input-border-radius-lg); @@ -147,10 +108,8 @@ .input-group-sm > .form-control, .input-group-sm > .form-select, -.input-group-sm > .input-group-prepend > .input-group-text, -.input-group-sm > .input-group-append > .input-group-text, -.input-group-sm > .input-group-prepend > .btn, -.input-group-sm > .input-group-append > .btn { +.input-group-sm > .input-group-text, +.input-group-sm > .btn { padding: $input-padding-y-sm $input-padding-x-sm; @include font-size($input-font-size-sm); @include border-radius($input-border-radius-sm); @@ -162,27 +121,21 @@ } -// Prepend and append rounded corners +// Rounded corners // // These rulesets must come after the sizing ones to properly override sm and lg // border-radius values when extending. They're more specific than we'd like // with the `.input-group >` part, but without it, we cannot override the sizing. +// stylelint-disable-next-line no-duplicate-selectors +.input-group { + > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), + > .dropdown-toggle:nth-last-child(n + 3) { + @include border-right-radius(0); + } -.input-group > .input-group-prepend > .btn, -.input-group > .input-group-prepend > .input-group-text, -.input-group > .input-group-append:not(:last-child) > .btn, -.input-group > .input-group-append:not(:last-child) > .input-group-text, -.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { - @include border-right-radius(0); -} - -.input-group > .input-group-append > .btn, -.input-group > .input-group-append > .input-group-text, -.input-group > .input-group-prepend:not(:first-child) > .btn, -.input-group > .input-group-prepend:not(:first-child) > .input-group-text, -.input-group > .input-group-prepend:first-child > .btn:not(:first-child), -.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { - @include border-left-radius(0); + > :not(:first-child):not(.dropdown-menu) { + margin-left: -$input-border-width; + @include border-left-radius(0); + } } diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md index b4c8543fc..3ec0db240 100644 --- a/site/content/docs/4.3/components/button-group.md +++ b/site/content/docs/4.3/components/button-group.md @@ -60,9 +60,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th <button type="button" class="btn btn-secondary">4</button> </div> <div class="input-group"> - <div class="input-group-prepend"> - <div class="input-group-text" id="btnGroupAddon">@</div> - </div> + <div class="input-group-text" id="btnGroupAddon">@</div> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"> </div> </div> @@ -75,9 +73,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th <button type="button" class="btn btn-secondary">4</button> </div> <div class="input-group"> - <div class="input-group-prepend"> - <div class="input-group-text" id="btnGroupAddon2">@</div> - </div> + <div class="input-group-text" id="btnGroupAddon2">@</div> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2"> </div> </div> diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md index bc3c606d7..4ae3dddc4 100644 --- a/site/content/docs/4.3/components/navbar.md +++ b/site/content/docs/4.3/components/navbar.md @@ -249,9 +249,7 @@ Input groups work, too. If your navbar is an entire form, or mostly form, you ca <nav class="navbar navbar-light bg-light"> <form class="container-fluid"> <div class="input-group"> - <div class="input-group-prepend"> - <span class="input-group-text" id="basic-addon1">@</span> - </div> + <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> </form> diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html index bf65f9fbd..94f89db72 100644 --- a/site/content/docs/4.3/examples/checkout/index.html +++ b/site/content/docs/4.3/examples/checkout/index.html @@ -59,9 +59,7 @@ body_class: "bg-light" <form class="card p-2"> <div class="input-group"> <input type="text" class="form-control" placeholder="Promo code"> - <div class="input-group-append"> - <button type="submit" class="btn btn-secondary">Redeem</button> - </div> + <button type="submit" class="btn btn-secondary">Redeem</button> </div> </form> </div> @@ -88,11 +86,9 @@ body_class: "bg-light" <div class="col-12"> <label for="username">Username</label> <div class="input-group"> - <div class="input-group-prepend"> - <span class="input-group-text">@</span> - </div> + <span class="input-group-text">@</span> <input type="text" class="form-control" id="username" placeholder="Username" required> - <div class="invalid-feedback w-100"> + <div class="invalid-feedback"> Your username is required. </div> </div> diff --git a/site/content/docs/4.3/forms/input-group.md b/site/content/docs/4.3/forms/input-group.md index 2faa6721e..4fde2cf78 100644 --- a/site/content/docs/4.3/forms/input-group.md +++ b/site/content/docs/4.3/forms/input-group.md @@ -12,41 +12,29 @@ Place one add-on or button on either side of an input. You may also place one on {{< example >}} <div class="input-group mb-3"> - <div class="input-group-prepend"> - <span class="input-group-text" id="basic-addon1">@</span> - </div> + <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> - <div class="input-group-append"> - <span class="input-group-text" id="basic-addon2">@example.com</span> - </div> + <span class="input-group-text" id="basic-addon2">@example.com</span> </div> <label for="basic-url">Your vanity URL</label> <div class="input-group mb-3"> - <div class="input-group-prepend"> - <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> - </div> + <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div> <div class="input-group mb-3"> - <div class="input-group-prepend"> - <span class="input-group-text">$</span> - </div> + <span class="input-group-text">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> - <div class="input-group-append"> - <span class="input-group-text">.00</span> - </div> + <span class="input-group-text">.00</span> </div> <div class="input-group"> - <div class="input-group-prepend"> - <span class="input-group-text">With textarea</span> - </div> + <span class="input-group-text">With textarea</span> <textarea class="form-control" aria-label="With textarea"></textarea> </div> {{< /example >}} @@ -57,9 +45,7 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo {{< example >}} <div class="input-group flex-nowrap"> - <div class="input-group-prepend"> - <span class="input-group-text" id="addon-wrapping">@</span> - </div> + <span class="input-group-text" id="addon-wrapping">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping"> </div> {{< /example >}} @@ -72,23 +58,17 @@ Add the relative form sizing classes to the `.input-group` itself and contents w {{< example >}} <div class="input-group input-group-sm mb-3"> - <div class="input-group-prepend"> - <span class="input-group-text" id="inputGroup-sizing-sm">Small</span> - </div> + <span class="input-group-text" id="inputGroup-sizing-sm">Small</span> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"> </div> <div class="input-group mb-3"> - <div class="input-group-prepend"> - <span class="input-group-text" id="inputGroup-sizing-default">Default</span> - </div> + <span class="input-group-text" id="inputGroup-sizing-default">Default</span> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"> </div> <div class="input-group input-group-lg"> - <div class="input-group-prepend"> - <span class="input-group-text" id="inputGroup-sizing-lg">Large</span> - </div> + <span class="input-group-text" id="inputGroup-sizing-lg">Large</span> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"> </div> {{< /example >}} @@ -99,19 +79,15 @@ Place any checkbox or radio option within an input group's addon instead of text {{< example >}} <div class="input-group mb-3"> - <div class="input-group-prepend"> - <div class="input-group-text"> - <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input"> - </div> + <div class="input-group-text"> + <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input"> </div> <input type="text" class="form-control" aria-label="Text input with checkbox"> </div> <div class="input-group"> - <div class="input-group-prepend"> - <div class="input-group-text"> - <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input"> - </div> + <div class="input-group-text"> + <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input"> </div> <input type="text" class="form-control" aria-label="Text input with radio button"> </div> @@ -123,9 +99,7 @@ While multiple `<input>`s are supported visually, validation styles are only ava {{< example >}} <div class="input-group"> - <div class="input-group-prepend"> - <span class="input-group-text">First and last name</span> - </div> + <span class="input-group-text">First and last name</span> <input type="text" aria-label="First name" class="form-control"> <input type="text" aria-label="Last name" class="form-control"> </div> @@ -137,19 +111,15 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}} <div class="input-group mb-3"> - <div class="input-group-prepend"> - <span class="input-group-text">$</span> - <span class="input-group-text">0.00</span> - </div> + <span class="input-group-text">$</span> + <span class="input-group-text">0.00</span> <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)"> - <div class="input-group-append"> - <span class="input-group-text">$</span> - <span class="input-group-text">0.00</span> - </div> + <span class="input-group-text">$</span> + <span class="input-group-text">0.00</span> </div> {{< /example >}} @@ -157,33 +127,25 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}} <div class="input-group mb-3"> - <div class="input-group-prepend"> - <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button> - </div> + <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button> <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"> - <div class="input-group-append"> - <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button> - </div> + <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button> </div> <div class="input-group mb-3"> - <div class="input-group-prepend" id="button-addon3"> - <button class="btn btn-outline-secondary" type="button">Button</button> - <button class="btn btn-outline-secondary" type="button">Button</button> - </div> - <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3"> + <button class="btn btn-outline-secondary" type="button">Button</button> + <button class="btn btn-outline-secondary" type="button">Button</button> + <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons"> </div> <div class="input-group"> - <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4"> - <div class="input-group-append" id="button-addon4"> - <button class="btn btn-outline-secondary" type="button">Button</button> - <button class="btn btn-outline-secondary" type="button">Button</button> - </div> + <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons"> + <button class="btn btn-outline-secondary" type="button">Button</button> + <button class="btn btn-outline-secondary" type="button">Button</button> </div> {{< /example >}} @@ -191,30 +153,46 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}} <div class="input-group mb-3"> - <div class="input-group-prepend"> - <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <div class="dropdown-menu"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + <div role="separator" class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> -<div class="input-group"> +<div class="input-group mb-3"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> - <div class="input-group-append"> - <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <div class="dropdown-menu dropdown-menu-right"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + <div role="separator" class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> + </div> +</div> + +<div class="input-group"> + <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <div class="dropdown-menu"> + <a class="dropdown-item" href="#">Action before</a> + <a class="dropdown-item" href="#">Another action before</a> + <a class="dropdown-item" href="#">Something else here</a> + <div role="separator" class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> + </div> + <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons"> + <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <div class="dropdown-menu dropdown-menu-right"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + <div role="separator" class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> </div> </div> {{< /example >}} @@ -223,36 +201,32 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}} <div class="input-group mb-3"> - <div class="input-group-prepend"> - <button type="button" class="btn btn-outline-secondary">Action</button> - <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <button type="button" class="btn btn-outline-secondary">Action</button> + <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <span class="sr-only">Toggle Dropdown</span> + </button> + <div class="dropdown-menu"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + <div role="separator" class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> </div> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> - <div class="input-group-append"> - <button type="button" class="btn btn-outline-secondary">Action</button> - <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <button type="button" class="btn btn-outline-secondary">Action</button> + <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <span class="sr-only">Toggle Dropdown</span> + </button> + <div class="dropdown-menu dropdown-menu-right"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + <div role="separator" class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> </div> </div> {{< /example >}} @@ -265,9 +239,7 @@ Input groups include support for custom selects and custom file inputs. Browser {{< example >}} <div class="input-group mb-3"> - <div class="input-group-prepend"> - <label class="input-group-text" for="inputGroupSelect01">Options</label> - </div> + <label class="input-group-text" for="inputGroupSelect01">Options</label> <select class="form-select" id="inputGroupSelect01"> <option selected>Choose...</option> <option value="1">One</option> @@ -283,15 +255,11 @@ Input groups include support for custom selects and custom file inputs. Browser <option value="2">Two</option> <option value="3">Three</option> </select> - <div class="input-group-append"> - <label class="input-group-text" for="inputGroupSelect02">Options</label> - </div> + <label class="input-group-text" for="inputGroupSelect02">Options</label> </div> <div class="input-group mb-3"> - <div class="input-group-prepend"> - <button class="btn btn-outline-secondary" type="button">Button</button> - </div> + <button class="btn btn-outline-secondary" type="button">Button</button> <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon"> <option selected>Choose...</option> <option value="1">One</option> @@ -307,9 +275,7 @@ Input groups include support for custom selects and custom file inputs. Browser <option value="2">Two</option> <option value="3">Three</option> </select> - <div class="input-group-append"> - <button class="btn btn-outline-secondary" type="button">Button</button> - </div> + <button class="btn btn-outline-secondary" type="button">Button</button> </div> {{< /example >}} @@ -317,9 +283,7 @@ Input groups include support for custom selects and custom file inputs. Browser {{< example >}} <div class="input-group mb-3"> - <div class="input-group-prepend"> - <span class="input-group-text" id="inputGroupFileAddon01">Upload</span> - </div> + <span class="input-group-text" id="inputGroupFileAddon01">Upload</span> <div class="form-file"> <input type="file" class="form-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01"> <label class="form-file-label" for="inputGroupFile01"> @@ -337,15 +301,11 @@ Input groups include support for custom selects and custom file inputs. Browser <span class="form-file-button">Browse</span> </label> </div> - <div class="input-group-append"> - <span class="input-group-text" id="inputGroupFileAddon02">Upload</span> - </div> + <span class="input-group-text" id="inputGroupFileAddon02">Upload</span> </div> <div class="input-group mb-3"> - <div class="input-group-prepend"> - <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button> - </div> + <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button> <div class="form-file"> <input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03"> <label class="form-file-label" for="inputGroupFile03"> @@ -363,9 +323,7 @@ Input groups include support for custom selects and custom file inputs. Browser <span class="form-file-button">Browse</span> </label> </div> - <div class="input-group-append"> - <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button> - </div> + <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button> </div> {{< /example >}} diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md index b580be6d3..e9586c654 100644 --- a/site/content/docs/4.3/forms/layout.md +++ b/site/content/docs/4.3/forms/layout.md @@ -232,9 +232,7 @@ The example below uses a flexbox utility to vertically center the contents and c <div class="col-auto"> <label class="sr-only" for="autoSizingInputGroup">Username</label> <div class="input-group"> - <div class="input-group-prepend"> - <div class="input-group-text">@</div> - </div> + <div class="input-group-text">@</div> <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username"> </div> </div> @@ -272,9 +270,7 @@ You can then remix that once again with size-specific column classes. <div class="col-sm-3"> <label class="sr-only" for="specificSizeInputGroupUsername">Username</label> <div class="input-group"> - <div class="input-group-prepend"> - <div class="input-group-text">@</div> - </div> + <div class="input-group-text">@</div> <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username"> </div> </div> @@ -317,9 +313,7 @@ Be sure to always include a `<label>` with each form control, even if you need t <div class="col-12"> <label class="sr-only" for="inlineFormInputGroupUsername">Username</label> <div class="input-group"> - <div class="input-group-prepend"> - <div class="input-group-text">@</div> - </div> + <div class="input-group-text">@</div> <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> </div> </div> diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md index d7b5d29f8..c8d10745a 100644 --- a/site/content/docs/4.3/forms/validation.md +++ b/site/content/docs/4.3/forms/validation.md @@ -50,9 +50,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun <div class="col-md-4"> <label for="validationCustomUsername">Username</label> <div class="input-group"> - <div class="input-group-prepend"> - <span class="input-group-text" id="inputGroupPrepend">@</span> - </div> + <span class="input-group-text" id="inputGroupPrepend">@</span> <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required> <div class="invalid-feedback"> Please choose a username. @@ -142,9 +140,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t <div class="col-md-4"> <label for="validationDefaultUsername">Username</label> <div class="input-group"> - <div class="input-group-prepend"> - <span class="input-group-text" id="inputGroupPrepend2">@</span> - </div> + <span class="input-group-text" id="inputGroupPrepend2">@</span> <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> </div> </div> @@ -200,9 +196,7 @@ We recommend using client-side validation, but in case you require server-side v <div class="col-md-4"> <label for="validationServerUsername">Username</label> <div class="input-group"> - <div class="input-group-prepend"> - <span class="input-group-text" id="inputGroupPrepend3">@</span> - </div> + <span class="input-group-text" id="inputGroupPrepend3">@</span> <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required> <div class="invalid-feedback"> Please choose a username. @@ -329,9 +323,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas <div class="col-md-4 position-relative"> <label for="validationTooltipUsername">Username</label> <div class="input-group"> - <div class="input-group-prepend"> - <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span> - </div> + <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span> <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required> <div class="invalid-tooltip"> Please choose a unique and valid username. diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 7c0541c00..be953eca3 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -99,6 +99,7 @@ Changes to Reboot, typography, tables, and more. - Dropped `.form-inline` for the more flexible grid. - Dropped support for `.form-control-plaintext` inside `.input-group`s. - Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`). +- Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. ## Components |