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

[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 #30111, closes #30104
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 #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

[alecpl]

Very nice. Thank you.

[XhmikosR]

Definitely like this, reduces the final CSS size too 🎉

[ysds]

Some use cases are no longer supported, are they intentional?

v4 supported use cases: #25352

[MartijnCuppens]

@ysds, what use cases exactly?

(I know the input group ↔️ validation message thing is still an issue, but this is not something new?)

[MartijnCuppens]

Ping @ysds

[XhmikosR]

Just so we are safe, did you check the examples too @MartijnCuppens?

[MartijnCuppens]

@XhmikosR, no appearances of input-group-prepend or input-group-append left. Only the btn-groups are used in the examples.

[ysds]

@MartijnCuppens Please see dropdown menu's corner in this netlify:

That should be rounded.

And cases that have multiple dropdown menus:

• v4: https://codepen.io/fellows3/pen/oNgroro
• This PR: https://codepen.io/fellows3/pen/OJPeOer

[MartijnCuppens]

Just fixed that.

[ysds]

The 2nd issue (multiple active states with multiple dropdowns) still seems to occur.

[ysds]

The CSS side LGTM. @XhmikosR Could you see the JS side?

[MartijnCuppens]

Please review https://github.com/twbs/bootstrap/pull/30117/files first, it includes a fix and test for the prev() function.

[mdo]

Punted to Alpha 2 for now, but would happily see it back to first alpha if the JS errors get fixed.

[MartijnCuppens]

This fails in IE because of the matches polyfill:

IE 11.0.0 (Windows 10.0.0) Dropdown data-api should fire hide and hidden event without a clickEvent if event type is not click FAILED
	Object doesn't support property or method 'matches' thrown
IE 11.0.0 (Windows 10.0.0) Dropdown data-api should fire hide and hidden event without a clickEvent if event type is not click FAILED
	Object doesn't support property or method 'matches' thrown
................................................
IE 11.0.0 (Windows 10.0.0) Dropdown data-api should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key FAILED
	Object doesn't support property or method 'matches' thrown
	Error: Expected true to equal false.
	    at <Jasmine>
	   at Anonymous function (js/tests/unit/js/tests/unit/dropdown.spec.js:1495:9 <- js/tests/unit/dropdown.spec.js:15745:11)
IE 11.0.0 (Windows 10.0.0) Dropdown data-api should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key FAILED
	Object doesn't support property or method 'matches' thrown
	Error: Expected true to equal false.
	    at <Jasmine>
	   at Anonymous function (js/tests/unit/js/tests/unit/dropdown.spec.js:1495:9 <- js/tests/unit/dropdown.spec.js:15745:11)

[XhmikosR]

@MartijnCuppens you can use our helper, or wait until #30377 lands :)

[MartijnCuppens]

The helper is used I guess. I don't really understand the reason why next() is failing and prev() is not

[Johann-S]

the JS looks good to me, nice work @MartijnCuppens 👍