open-ui

open-ui copied to clipboard

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 https://github.com/whatwg/html/pull/9546.

Thanks for writing this up! I'd like to see more use cases and examples to justify the track, trackslide, and thumb elements. If it turns out that we can do everything we want without the need for those elements, then maybe it would be possible to build it on the newly proposed switch which extends the input element: https://github.com/whatwg/html/pull/9546 Otherwise, we would need to create a separate element.

I agree with mason that we can merge this now regardless

Thanks for writing this up! I'd like to see more use cases and examples to justify the track, trackslide, and thumb elements. If it turns out that we can do everything we want without the need for those elements, then maybe it would be possible to build it on the newly proposed switch which extends the input element: whatwg/html#9546 Otherwise, we would need to create a separate element.

I agree with mason that we can merge this now regardless

I updated the explainer with showcase videos from switches with content on both track and thumb. Also, I analyzed different Design Systems to find out how widespread slotted content is (analysis of slotted content on switches). These examples would totally be possible on an <input type="checkbox" switch />, using background images and content on pseudo elements.

But if you inspect for example the antd switch, they used <span> to declare track content. Not being able to slot content into track and thumb would at least be inconvenient and certainly not declarative. If you would like to get a little more creative with CSS controlled animation on slotted svgs (like Adam Argyle in https://web.dev/building-a-theme-switch-component/ - not a switch but this could be on the thumb), it gets really tricky with just background images.

@gfellerph after this week's call, there are just some issues that need to be opened and addition of usecases assuming you landed @scottaohara feedback. Please do the above but marking as approved to not slow down progress.

@gregwhitworth, @mfreed7, I marked this PR for ready for review (no longer a draft) with the updates in 5710d87. You already approved it, but I don't have write access on the repository. If you think this PR is ready now, please go ahead and merge it. I'll open issues for the questions and will continuously update the explainer.

Is this ready to land as an initial explainer and then add to it in follow ups?

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 https://github.com/openui/open-ui/issues/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 :)

Thanks for writing this up! I'd like to see more use cases and examples to justify the track, trackslide, and thumb elements. If it turns out that we can do everything we want without the need for those elements, then maybe it would be possible to build it on the newly proposed switch which extends the input element: whatwg/html#9546 Otherwise, we would need to create a separate element.

I agree with mason that we can merge this now regardless

@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).

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.

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.