Deprecate .btn-group-toggle class for simpler selectors

[hafezd]

Single toggle button used to work with checkbox/radio buttons on 4.0.0-beta.2 like this:

<div data-toggle="buttons">
  <label class="btn btn-outline-primary">
    <input type="checkbox" autocomplete="off"> I don't know
  </label>
</div>

Output:

But it doesn't work anymore on 4.0.0-beta.3:

I searched your change log and found #23728 but It doesn't make sense to add btn-group-toggle to a single toggle button to make this work.

[mdo]

Yeah, we have to improve the naming there, but we were working with what we had in our betas. For now, use the class. Our motivation for the change was separating style from behavior. In the future, we won't need this separation because we'll rewrite the component to use sibling selectors and leverage all the browser behaviors we have from inputs.

[hafezd]

@mdo the current selector for hiding checkbox/radio button in a toggle button is like this:

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

Why not just:

label.btn input[type="radio"],
label.btn input[type="checkbox"] {
    ...
}

Hide checkbox if it was in a button, it works for both single and group toggle buttons:

<label class="btn btn-outline-primary">
    <input type="checkbox" autocomplete="off"> I don't know
</label>

[mdo]

Hmm, something like that could be doable. We try to avoid qualified selectors like that, but I'm wondering if we just always do that for inputs in buttons. Semantically there's no value to putting inputs in <a> or <button> elements, so could work without label in front.

[mdo]

Punting the changes here to #25185, which I hope to include in v5 alongside dropping of the existing component.