Created by: MartijnCuppens
_input-groups.scss
has become quite hard to maintain, mainly because of the nesting we have with .input-group-prepend
and .input-group-append
. It's actually pretty simple to remove this. This will also make our html look a lot simpler.
Before:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
After:
<div class="input-group mb-3">
<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>
Demo: https://deploy-preview-29885--twbs-bootstrap.netlify.com/docs/4.3/forms/input-group/
Also closes https://github.com/twbs/bootstrap/pull/30111, closes #30104 (closed) See https://codepen.io/MartijnCuppens/pen/mdyZBoR
For the dropdown buttons some things needed to be changed in order to make this work because the show
class was added to the (random) parent of the toggle button instead to the button itself. The way the dropdown menu is found is now changed.
While I was working on this, I discovered a bug which is explained in https://github.com/twbs/bootstrap/pull/30117. Please review this first because that PR also includes a test.
I've also added an additional example to test multiple dropdowns in a input group: https://deploy-preview-29885--twbs-bootstrap.netlify.com/docs/4.3/forms/input-group/#buttons-with-dropdowns
To Do:
-
Change the way the dropdown menu is detected -
Change the way active states are set to toggle buttons -
Adjust existing tests