[#20549] - [4.0] Implement Field group buttons as Custom Element
- Closed
- 9 Mar 2019
- Medium
- Build: 4.0-dev
- # 20549
- Diff
- dgrammatiko:fields/groupped-btns
- Pending continuous-integration/drone/pr this build is pending Details
User tests: Successful: Unsuccessful:
Pull Request for Issue # .
Summary of Changes
The radio field has few dedicated layouts/functionalities:
- native radios
- group buttons (ie bootstrap group buttons, used extremely in J3)
- switcher (the default on J4)
So this PR removes the code that used to be in the templates file template.js to control those fields (yeah very strange) and introduces a custom element joomla-field-group-buttons that provides the same functionality. Also since it's CE it works as is with the repeatable forms, no more custom events, etc
Testing Instructions
For testing purposes you can find couple switches in the admin->extensions->templates->autum tab advanced. You can play around, save etc. Everything should work fine
This code in the xml will be removed prior to (if ever) merging this PR
Actual result
Also plain html/js/css demo: https://codepen.io/dgrammatiko/pen/LmvaNa
Documentation Changes Required
Not really, we are still B/C. Only consideration here is for devs that using those form fields out of JForm. In such case they need to swap the div tag with the new joomla-field-group-button and also include the corresponding js for the custom element, similar to what is done in the layout of the field.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration Templates (admin) JavaScript Repository Layout Front End Templates (site) |
| Labels |
Added:
?
|
||
Now looking like this (inline with new design)...
@dgrammatiko can you resolve the conflicts please so this can be tested
| Category | Administration Templates (admin) JavaScript Repository Layout Front End Templates (site) | ⇒ | Administration Templates (admin) JavaScript Repository Layout |
Same problem as with the switcher. The label of the radio button is never announced to the screenreader
@brianteeman this is in essence an exact copy of the BS markup:
https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons
But if you have a solution here I'm happy to code that in
those examples work correctly with a screenreader
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2018-08-29 10:24:24 |
| Closed_By | ⇒ | dgrammatiko |
| Status | Closed | ⇒ | New |
| Closed_Date | 2018-08-29 10:24:24 | ⇒ | |
| Closed_By | dgrammatiko | ⇒ |
| Status | New | ⇒ | Pending |
The idea and the aim for J4 was to get all fields as custom elements as those are lazily loaded and could actually run ES20XX code, but it seems that this has changed lately. So let it be. Closing
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-03-09 21:02:48 |
| Closed_By | ⇒ | dgrammatiko |
@ciar4n can you tide up the css here?