Updates form controls to use the Amsterdam border radius. #3741
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3741/ |
We need to strive to not duplicate mixins that don't actually change any of the internals. This just causes more trouble to maintain all 4 themes. Can you reduce the overriding mixins to just the ones that change for Amsterdam? By simply importing the Amsterdam version of the Prepend/AppendThese still need more attention because of the rounded corners. They look fine until you make them disabled, invalid, or on focus.
Checkbox/RadioFor checkboxes, do we like the increased rounded corners on them or do they start looking too much like radios? Also, should we get rid of the shadows on these as well?
File pickerThe border radius has not been updated for this one.
Filter buttonsWe don't need to tackle this one in this PR, but we should definitely do a quick follow up so we don't have mis-matching styles with the search bar.
|
daveyholler
force-pushed
the
am/updating-form-controls
branch
from
9dcb6d1
to
2d5ba08
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3741/ |
|
It looks like we still have a slight issue with the prepend/appends that I can jump in and fix.
@daveyholler Would you like me to finish up tackling the other items I mentioned as well like the file picker and checkboxes? |
|
@cchaos AHHHH. I had a feeling I missed something. If you want to take over, I won't complain, but I'm also happy to tackle it tomorrow. |
|
Go for it! My suggestion was just in case you don't have time.
|
daveyholler
force-pushed
the
am/updating-form-controls
branch
from
2d5ba08
to
b0a9b15
Compare
|
@cchaos I believe everything outside of the filter buttons has been addressed now. 🤞 |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3741/ |
daveyholler
force-pushed
the
am/updating-form-controls
branch
from
60124d3
to
417b03c
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3741/ |
1 similar comment
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3741/ |
There was a problem hiding this comment.
Are we keeping the drop shadow on focus?
One other part that may still need to be addressed is the loading state of the large file picker. It puts an absolute positioned loader bar at the top of the input, but it's not contained within the border-radius.
As a note, and assuming we're trying to get rid of all the shadows/unnecessary borders to all inputs, there will need to be a follow up PR with updates to:
daveyholler
force-pushed
the
am/updating-form-controls
branch
from
2374150
to
d9a2483
Compare
|
Jenkins test this |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3741/ |
There was a problem hiding this comment.
I pushed a commit that fixes the loading bar of the file picker, removes the dropshadows from checkbox, radios and switches, and moves some border-radius declarations to the mixins.
I tried looking into how to deal with append/prepend stuff better, but went down a bad rabbit hole so I think we can stick with the overrides for now until/if we refactor that bit in JS.
We'll continue to do some follow up styles for other components, but I think this PR is GTG. 👍 🎉
daveyholler
force-pushed
the
am/updating-form-controls
branch
from
3357e09
to
8d9cf59
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3741/ |
Summary
This PR updates form controls to use the Amsterdam border radius.
Checklist
- [ ] Props have proper autodocs- [ ] Added documentation- [ ] Checked Code Sandbox works for the any docs examples- [ ] Added or updated jest tests- [ ] Checked for accessibility including keyboard-only and screenreader modes