-
-
Notifications
You must be signed in to change notification settings - Fork 78.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove checkbox/radio toggle from button plugin in favor of a CSS only solution #30650
Conversation
064ed54
to
5cef1ff
Compare
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? |
Also love this PR in general! |
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 |
I'm not sure this should be in v5. It should probably be in a next Also, traditionally, we promote semantic HTML which is what a Regardless, we shouldn't hurry with this change since it's quite a radical one IMHO. |
AFAICT, an element which indicates a boolean state should be a checkbox, not a button with an active class (vice versa for the radios).
#28463 was on the |
not had a chance to fully review, but based on the conversation here:
|
Ok, makes sense. I'll revert the change to the progress bar animation toggle button in our docs then.
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 @twbs/team, any strong opinions on this? Should we keep the keep the button plugin only to bind the |
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 |
@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. |
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. |
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. |
430f365
to
916317b
Compare
Restored the button plugin (to toggle active classes) and clarified this PR title. Let the reviews rip! |
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)
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 |
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 |
@@ -209,3 +209,54 @@ Omit the wrapping `.form-check` for checkboxes and radios that have no label tex | |||
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="..."> | |||
</div> | |||
{{< /example >}} | |||
|
|||
## Toggle buttons |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
916317b
to
586d1e6
Compare
Sorry for the delay here. Rebased the PR and tackled the feedback from @mdo and @patrickhlauke:
Changed that.
Imo, this is not blocking issue for this PR, but definitely worth looking into later on.
See #28999.
Yup, changed that. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Huge lift and update for v5, thank you @MartijnCuppens!
Bootstrap 5 dropped the support for data-bs-toggle="buttons". See: twbs/bootstrap#30650 The replacement is to use the class "btn-check" in combination with the state of input fields. This has been done in the Localization module. Some other occurrences didn't rely on the bootstrap js and it was enough to simply remove the data attribute. Also remove a forgotten console.log debug. Resolves: #95048 Releases: master Change-Id: Icd31e7cc0cb9eb1581a7bcfe1448ed7dad24a935 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/70832 Tested-by: Oliver Bartsch <[email protected]> Tested-by: core-ci <[email protected]> Tested-by: Benni Mack <[email protected]> Reviewed-by: Oliver Bartsch <[email protected]> Reviewed-by: Benni Mack <[email protected]>
Bootstrap 5 dropped the support for data-bs-toggle="buttons". See: twbs/bootstrap#30650 The replacement is to use the class "btn-check" in combination with the state of input fields. This has been done in the Localization module. Some other occurrences didn't rely on the bootstrap js and it was enough to simply remove the data attribute. Also remove a forgotten console.log debug. Resolves: #95048 Releases: master Change-Id: Icd31e7cc0cb9eb1581a7bcfe1448ed7dad24a935 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/70832 Tested-by: Oliver Bartsch <[email protected]> Tested-by: core-ci <[email protected]> Tested-by: Benni Mack <[email protected]> Reviewed-by: Oliver Bartsch <[email protected]> Reviewed-by: Benni Mack <[email protected]>
Bootstrap 5 dropped the support for data-bs-toggle="buttons". See: twbs/bootstrap#30650 The replacement is to use the class "btn-check" in combination with the state of input fields. This has been done in the Localization module. Some other occurrences didn't rely on the bootstrap js and it was enough to simply remove the data attribute. Also remove a forgotten console.log debug. Resolves: #95048 Releases: master Change-Id: Icd31e7cc0cb9eb1581a7bcfe1448ed7dad24a935 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/70832 Tested-by: Oliver Bartsch <[email protected]> Tested-by: core-ci <[email protected]> Tested-by: Benni Mack <[email protected]> Reviewed-by: Oliver Bartsch <[email protected]> Reviewed-by: Benni Mack <[email protected]>
Alternative solution for #28463. This PR also separates the checkboxes docs from the button groups and buttons.
.btn-toggle
class. This solution works with as well normal as outlined buttons.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.
.active
documentation is kept.Checks:
.btn-group-toggle
leftovers in docs.data-toggle="button"
leftovers in docs.Closes #28463
Closes #30615
Closes #25122 since the button plugin is removed