-
Notifications
You must be signed in to change notification settings - Fork 2.4k
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
Remove checkbox and radio borders #9429
base: 5.0-dev
Are you sure you want to change the base?
Conversation
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-pypi-previews.s3.amazonaws.com/77f0a340839cd2541df381a5846e24db37eead49/gradio-4.44.0-py3-none-any.whl Install Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@77f0a340839cd2541df381a5846e24db37eead49#subdirectory=client/python" Install Gradio JS Client from this PR npm install https://gradio-npm-previews.s3.amazonaws.com/77f0a340839cd2541df381a5846e24db37eead49/gradio-client-1.6.0-beta.3.tgz Use Lite from this PR <script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/77f0a340839cd2541df381a5846e24db37eead49/dist/lite.js""></script> |
🦄 change detectedThis Pull Request includes changes to the following packages.
With the following changelog entry.
Maintainers or the PR author can modify the PR title to modify this entry.
|
Hmm I prefer the borders tbh, looks too bare without them. Perhaps a single border around all of the choices would look good? |
Can we also do this through theme variables rather than removing the variables entirely? So that some themes can preserve them and others can remove them. |
Adding this comment I made from slack. TLDR: I don't think the borders are the real problem, even ignoring this PR there are other issues with things looking too bare, mainly because if the removal of the separators with no other adjustments. Chatbot with radios blocks_essay demo Observations:
Possible solutions:
I think radios might need more padding between them too actually, just a touch. Yeah they do, there can't be the same space between the label text + the previous radio or the relationship isn't clear, checkboxes don't seem to have that issue hmmm, i know we removed the separator because it was noisy but i feel the labels + margins aren't pulling their weight in separating things out I think the label text needs to be more prominent and maybe we need more margin when stacking form elements like this. The ones with boxes look okay but slider etc look a bit lost + floaty I feel like the label should be more prominent than the actual value text for example, those are like mini headings and are the only thing that really dictate the hierarchy now. could also just be larger instead or darker, probably not both. or maybe bolder but may look bad in dark mode unless we drop the weight by 100 |
tbh I prefer the borders in all of three demos above |
Depends what they are there for, in a larger form i think they look really noisy. In small doses they look okay (but i don't think they look great). |
Description
Removes the checkbox and radio borders. Amends the new hover effect slightly to accommodate this.
🎯 PRs Should Target Issues
Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.
Not adhering to this guideline will result in the PR being closed.
Tests
PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests:
bash scripts/run_all_tests.sh
You may need to run the linters:
bash scripts/format_backend.sh
andbash scripts/format_frontend.sh