Remove checkbox/radio toggle from button plugin in favor of a CSS only solution

[MartijnCuppens]

Alternative solution for #28463. This PR also separates the checkboxes docs from the button groups and buttons.

• The Button plugin is removed in favor of a CSS only solution, a checkbox/radio with a .btn-toggle class. This solution works with as well normal as outlined buttons.
• The checkbox and radio toggles docs are moved to the form checks docs.
• An active state example for links is added to the button groups
• Some outline examples are added to the button groups.

This PR removes the button toggle functionality (toggling active classes to buttons). I think it's better to just rely on checkboxes to toggle states, since the the js solution introduces issues like #25122.

Note the increase of CSS file size will be negligible once we use custom properties for our button component.

• Toggle buttons removed from https://deploy-preview-30650--twbs-bootstrap.netlify.app/docs/4.3/components/buttons/, the .active documentation is kept.
• Active link & oulined example added to https://deploy-preview-30650--twbs-bootstrap.netlify.app/docs/4.3/components/button-group/
• Button toggles documentation added to https://deploy-preview-30650--twbs-bootstrap.netlify.app/docs/4.3/forms/checks/#toggle-buttons
• Migration docs added to https://deploy-preview-30650--twbs-bootstrap.netlify.app/docs/4.3/migration/#buttons

Checks:

• Check for .btn-group-toggle leftovers in docs.
• Check for data-toggle="button" leftovers in docs.

Closes #28463
Closes #30615
Closes #25122 since the button plugin is removed

[mdo]

I haven’t reviewed on my Mac, but on iOS the outline buttons at https://deploy-preview-30650--twbs-bootstrap.netlify.app/docs/4.3/forms/checks/#toggle-buttons don’t seem to work right. I can tap to check the first two, but unchecking seems busted. Could this be a stuck focus state that’s too similar to the active state?

[mdo]

Also love this PR in general!

[MartijnCuppens]

Could this be a stuck focus state that’s too similar to the active state?

The hover and focus state of outline buttons have a solid background, that's why there's no change. We could continue with #28999, which has alternative hover styles and would also fix this issue

[XhmikosR]

I'm not sure this should be in v5. It should probably be in a next release alpha.

Also, traditionally, we promote semantic HTML which is what a button is for?

Regardless, we shouldn't hurry with this change since it's quite a radical one IMHO.

[MartijnCuppens]

Also, traditionally, we promote semantic HTML which is what a button is for?

AFAICT, an element which indicates a boolean state should be a checkbox, not a button with an active class (vice versa for the radios).

we shouldn't hurry with this change since it's quite a radical one IMHO

#28463 was on the v5 board and @patrickhlauke bumped us a lot to continue with this. Imo we shouldn't re-postpone this once again.

[patrickhlauke]

not had a chance to fully review, but based on the conversation here:

• i'm keen to finally drop all the horrible js noodlings we do for faked checkboxes/radio buttons - it's the one aspect of bootstrap that has continued to cause problems (making it work with keyboard/mouse consistently). it's an arcane approach, and it's a problem that has been elegantly solved ages ago with stuff like wtfforms.com. i would be very annoyed if for v5 we still used the old hacky flaky JS-based method.
• there IS still a need for <button aria-pressed="...">. the semantics (from an assistive technology perspective) are different between a checkbox (checked/unchecked) and a button (pressed/not pressed). yes, if you squint, you can argue that a pressed/unpressed button is like a checked/unchecked checkbox, but the difference in how they're announced can be confusing. we can make the distinction in documentation (happy to write something up at some point), but i would not say we can just drop the aria-pressed part of the button plugin. i would NOT want to see this dropped in v5

[MartijnCuppens]

but the difference in how they're announced can be confusing

Ok, makes sense. I'll revert the change to the progress bar animation toggle button in our docs then.

i would not say we can just drop the aria-pressed part of the button plugin. i would NOT want to see this dropped in v5

So if I understand that correctly, what you want to keep is basically this: https://codepen.io/MartijnCuppens/pen/yLYbWwp

If so, I'm not sure what the purpose is of having such a small plugin is. Developers will still need to write their custom js to interact with these buttons in the end. We also have documented the need of the aria-pressed attribute here https://twbs-bootstrap.netlify.app/docs/4.3/components/buttons/#active-state?

@twbs/team, any strong opinions on this? Should we keep the keep the button plugin only to bind the active class toggle to the aria-pressed state?

[mdo]

With such a short snippet of JS and a single behavior required for JS, this makes me think we should have some place to callout common snippets for folks. We've had to do this for custom file input and custom form validation behavior. Could this be something we maintain in our docs as a separate page under say Helpers as docs/helpers/javascript?

[ffoodd]

@mdo I love the idea. However be conscious that we'll have tons of questions about those snippets: we'd need to add reference links for edge cases, I guess.

[XhmikosR]

IMHO that's a step backwards. We shouldn't ask people to add things manually, it's not user-friendly and most people want and value something that works out of the box.

[MartijnCuppens]

I was updating the docs with the snippet and I got to admit it looked pretty user-unfriendly. I'll just restore the button toggle and update the migration guide so that it's clear only the checkbox hacks were removed from the js plugin.

[MartijnCuppens]

Restored the button plugin (to toggle active classes) and clarified this PR title. Let the reviews rip!

[patrickhlauke]

Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

the idea that the plugin allows/does anything for groups of buttons should probably be removed. In my #28463 i neutered it to just say (https://deploy-preview-28463--twbs-bootstrap.netlify.app/docs/4.3/components/buttons/#button-plugin)

Button plugin
The button plugin allows you to create simple on/off toggle buttons.

I'd also be keen to see the button group examples expanded to show button groups with checkboxes/radio buttons https://deploy-preview-28463--twbs-bootstrap.netlify.app/docs/4.3/components/button-group/#checkbox-and-radio-button-groups and the added vertical variation example with radio buttons https://deploy-preview-28463--twbs-bootstrap.netlify.app/docs/4.3/components/button-group/#vertical-variation ... but I think disagreement on the best way forward on those is what stalled #28463 at the time

[patrickhlauke]

also, maybe not here, but have to say i still find the lack of clear differentiation (for buttons and button groups) between focus, active, focus+active very hard to visually keep apart

[mdo]

We call these toggle buttons here, but the language used on the radio/checkbox base classes has been .form-check. Maybe we keep the heading here as Toggle buttons, but swap the class for .btn-check? Caught myself getting confused too because of .dropdown-toggle being the class you interact wiht in dropdowns.

[MartijnCuppens]

Sorry for the delay here. Rebased the PR and tackled the feedback from @mdo and @patrickhlauke:

the idea that the plugin allows/does anything for groups of buttons should probably be removed

Changed that.

I'd also be keen to see the button group examples expanded to show button groups with checkboxes/radio buttons

Imo, this is not blocking issue for this PR, but definitely worth looking into later on.

also, maybe not here, but have to say i still find the lack of clear differentiation (for buttons and button groups) between focus, active, focus+active very hard to visually keep apart

See #28999.

Maybe we keep the heading here as Toggle buttons, but swap the class for .btn-check?

Yup, changed that.

[mdo]

Huge lift and update for v5, thank you @MartijnCuppens!