Skip to content
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

Add custom svg option to checkbox component #2022

Closed
wants to merge 1 commit into from
Closed

Add custom svg option to checkbox component #2022

wants to merge 1 commit into from

Conversation

jayeclark
Copy link

Signed-off-by: Jay Clark [email protected]

Addresses #2013

There is currently no option to display a one-off custom checkbox or radio button. This PR adds that feature. This functionality creates a custom checkbox/radio button icon if alternate icons are passed to a Checkbox component, while preserving the default appearance for all other buttons. It is different from updating theme.forms, which allows users to change the overall default appearance of all checkboxes and radio buttons.

I'm keeping the PR in draft mode for the moment while I work on refactoring/investigating a possible alternate implementation. Once I've finished that, I'll add additional commits for the radio button.

@vercel
Copy link

vercel bot commented Nov 24, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/A6qcNzvntDdWyRKR5CtKF6zWHJC4
✅ Preview: https://theme-ui-git-fork-jayeclark-feat-custom-svg-for-4c3f5d-systemui.vercel.app

@MuhammadJamaluddin
Copy link

We also need a third additional state... indeterminate (especially for the checkbox)

@jayeclark
Copy link
Author

@MuhammadJamaluddin Could you explain a bit more? I don’t see anything in the existing component code about that state.

@MuhammadJamaluddin
Copy link

MuhammadJamaluddin commented Nov 25, 2021

Yeah, it's missing indeed, but it should have been added

Any checkbox could have 3 states (not just two)... see here for more details

image

@jayeclark
Copy link
Author

Huh, TIL. Let me work on adding that!

@lachlanjc
Copy link
Member

I know you’re still working on this & no rush—thank you for contributing! You’re welcome to break customizing the radio buttons off into a separate PR too, keeps each one easier to review/manage.

@jayeclark
Copy link
Author

Thanks, that’s a good idea.

I do have some more work done on this PR locally but I’ve been out of town & there’s no wifi at the cottage I’m staying at. Just wanted to leave a quick note that I haven’t forgotten about this one, but it may be a few more days before I can sync my updates. :)

@MuhammadJamaluddin
Copy link

MuhammadJamaluddin commented Dec 6, 2021

Alright, I had to already built a solution for me since I quickly needed this...

Here's a sandbox of the styles & logic I used... feel free to ask any questions.

@MuhammadJamaluddin
Copy link

The same styles & flow works perfectly as well with radio buttons (only difference is the input type & icons used)

@jayeclark
Copy link
Author

@MuhammadJamaluddin Sorry I couldn't solve this, closing my draft out. I'm not a graphic designer, and I just couldn't figure out how to create the indeterminate checkbox SVG.

@jayeclark jayeclark closed this Dec 6, 2021
@MuhammadJamaluddin
Copy link

No worries... I can open a PR with my solution

@lachlanjc @hasparus I could include the icons I have (unless we have an indeterminate icon that you would prefer)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants