Switch proposal #785
Switch proposal #785
Conversation
Improves the rendering of questions in editors drafts. A little more padding, no break between question and number, mobile styling, margin between elements.
|
|
||
| Limitations: | ||
|
|
||
| - The content on both sides cannot be wider than the tumb. Otherwise, the thumb is no longer capable of hiding the content of the inactive track content. |
There was a problem hiding this comment.
i'd suggest the "on" and "off" text might be better to either not include with this control - or rethink where this text actually belongs if rendered by the browser. Otherwise, having a requirement such as this will make localized strings difficult to handle - along with making it unlikely to be able to support WCAG's text spacing rule
There was a problem hiding this comment.
Thank you very much for your inputs! This is intended to be an author defined text, either through a slot or other means. I'll clarify that.
There was a problem hiding this comment.
@scottaohara IMO, this would go like so:
<switch>On</switch>
That said @gfellerph this highlights that you may actually want two parts for on/off. The browser will then handle styling when they are toggled. So something like this:
<switch>
# --- UA Shadow <label>
<toggled>On</toggledlabe>
<untoggled>Off</untoggled>
</label>
</switch>
I hit this same issue when sketching out <checkbox> as you want not only localization but also people will want to put SVGs and other content within the different states declaratively.
There was a problem hiding this comment.
Added this to the anatomy section, thanks for the input.
Remove sentence about AT exposure on @scottaohara's recommendation.
Namings need to be discussed.
There was a problem hiding this comment.
Nice explainer! I think this LGTM to land now, and we can iterate on the concepts and discuss them in issues. @scottaohara's comments are good, so it'd be good to incorporate answers/updates for those.
|
Thanks for writing this up! I agree with mason that we can merge this now regardless |
There was a problem hiding this comment.
The image for the design is not rendering in the deployment, unsure what the issue is.
| Limitations: | ||
|
|
||
| - The thumb needs to be at least the height of the track in order to hide the boundary between active and inactive track side underneath. | ||
| - It's unclear how to style the track and slider if the track content can be of arbitrary length. |
There was a problem hiding this comment.
Open an issue for the default user-agent styles of the form control as a quick idea to a solution of this would be a minmax(min-content, <whatever the user-agent defines>) for example.
There was a problem hiding this comment.
This highlights the issue a bit better. In order for the animation to work, the track sides need to have the same width. One side is dependent on the others width and I was not sure how this would work.
But probably it is already too detailed for this stage, therefore I think I'm going to remove the passage.
A similar issue appears with the other type of animation, where the thumb is supposed to hide inactive track content underneath.
|
|
||
| Limitations: | ||
|
|
||
| - The content on both sides cannot be wider than the tumb. Otherwise, the thumb is no longer capable of hiding the content of the inactive track content. |
There was a problem hiding this comment.
@scottaohara IMO, this would go like so:
<switch>On</switch>
That said @gfellerph this highlights that you may actually want two parts for on/off. The browser will then handle styling when they are toggled. So something like this:
<switch>
# --- UA Shadow <label>
<toggled>On</toggledlabe>
<untoggled>Off</untoggled>
</label>
</switch>
I hit this same issue when sketching out <checkbox> as you want not only localization but also people will want to put SVGs and other content within the different states declaratively.
Co-authored-by: Scott O'Hara <scottaohara@users.noreply.github.com>
Co-authored-by: Scott O'Hara <scottaohara@users.noreply.github.com>
Co-authored-by: Keith Cirkel <keithamus@users.noreply.github.com>
As discussed on the initial pull request (openui#785 (comment)), treating the switch as a button with submission capabilities has potential accessibility issues as mentioned by @scottaohara.
|
Is this ready to land as an initial explainer and then add to it in follow ups? |
I'd like to implement or resolve the open comments from @scottaohara and @keithamus first (thank you for taking the time to have a look at this). Also, the resolution of #959 will have influence on some sections. And I'm not allowed to merge PRs here ^^ |
|
That makes sense. I'm able to merge so once you're happy with it give me a ping and I can get it landed :) |
@josepharhar I added a section that compares the two proposals (https://deploy-preview-785--open-ui.netlify.app/components/switch.explainer/#comparison-switch-attribute-vs-switch-element). |
gfellerph
requested review from
keithamus,
scottaohara,
gregwhitworth and
mfreed7
|
Seems like this proposal should get landed. Nothing stops further iteration on the explainer, but with it here in PR form, nobody can see it. |
@gfellerph I'm happy to click the button to do that - just give me the go-ahead. |
This is a first draft for a proposal for standardising the
<switch>component, submitted by recommendation of @gregwhitworth.There is a parallel effort on standardising the switch component at whatwg/html#9546.