Skip to content
GitLab

Simplify input groups by dropping `.input-group-prepend` and `.input-group-append`

Merged Administrator requested to merge master-mc-drop-input-group-prepend-appends into master

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