[color-buttons] Replace radios for buttons in theme selector #250
Conversation
| attrs={'data-group': 'buttons'} | ||
| ) %} | ||
| {% for mode in ['light', 'dark', 'auto'] %} | ||
| {{ forms.radio( | ||
| label=mode, | ||
|
|
||
| <button {{ toggle.btn( | ||
| id=[mode, 'mode'] | join('-'), | ||
| group='ccs-modes', | ||
| attrs={'data-ccs-colors': true if (mode == 'auto') else mode}, | ||
| input_attrs={ | ||
| 'data-ccs-input': [mode, 'mode'] | join('-'), | ||
| 'checked': true if (mode == 'auto') else false | ||
| attrs={ | ||
| 'data-ccs-colors': true if (mode == 'auto') else mode, | ||
| 'data-ccs-input': id, | ||
| 'aria-pressed': true if (mode == 'auto') else false, | ||
| 'data-toggle-synced': 'true' if synced else 'false' | ||
| } | ||
| ) }} | ||
| > | ||
| {{ mode }} | ||
| </button> |
There was a problem hiding this comment.
@jgerigmeyer This doesn't really work and I'd love some help on getting this functional before I style it as the markup may change based on how far off I am on this :)
The goal was to replace the radio buttons with actual buttons (for reasons linked in the Trello card (https://lea.verou.me/2022/07/button-group/
https://tink.uk/perceived-affordances-and-the-functionality-mismatch/)
And then style them a bit differently.
I know I hijacked the toggle macro, but I am pretty sure we weren't using that (yet?) and I wanted a place to start.
There was a problem hiding this comment.
Rather than updating this in OddSite, I think we should first adjust CCS to allow using buttons instead of just radio inputs.
* main: (21 commits) Automated dependency upgrades Fix shadow-repo workflow concurrency Use more explicit filters for hasData/withData. review review Clarify the dates added to bird subtitles Add sketches to the intro for acrtive bird detail pages Different fix for jestjs/jest#13332 Use plain checkout action Consolidate shadow repo workflows update Bump actions/checkout from 2 to 3 Bump cpina/github-action-push-to-another-repository Bump peter-evans/create-or-update-comment from 1 to 2 Bump actions/setup-node from 2 to 3 adjust readme No need to build before test, but must re-install some deps (most are cached) upgrade yarn on netlify run checks on gh-actions instead of circleci Upgrade deps and add script to automate. ...
|
@stacyk assigning this old PR to you to determine if it's still relevant, and what the next steps are. |
|
@mirisuzanne I'm pretty sure this comment is still accurate. I don't know if this is a priority or not, but I think we'd need to make changes in Cascading Colors first. |
Description
Change Radio buttons to Buttons for color theme selection
Steps to test/reproduce
Toggle the buttons in the light/dark toggle
Show me
WIP