Compressed Fixes Round 1 #2338
Compressed Fixes Round 1 #2338
Conversation
| export default () => { | ||
| const [isCompressed, setCompressed] = useState(false); | ||
| const [isDisabled, setDisabled] = useState(false); | ||
| const [isReadOnly, setReadOnly] = useState(false); |
There was a problem hiding this comment.
Hooks like whaaat!?! 😜
|
@ryankeairns I'm not super stoked and the look of these prepend/appends especially in disabled and readOnly states. Would you mind taking a look and let me know if you have any ideas? |
|
@cchaos Working through some options, but not finding much... Aesthetically, I like having no background color and adding a border/divider. That said, I wonder if this results in the actual inputs being less clear or is the bold text + divider on the labels enough to visually separate things?
I like the disabled state, as-is, having all backgrounds be gray... which feels like the corollary to the all white suggestion in my previous comment:
For the readonly, I wonder if we can make it not change in height... could a border be added that matches that light background color? |
|
@ryankeairns Thanks for jamming on that! I agree after seeing your screenshots that I think the background color is necessary to separate the textual prepends from the input itself... unfortunately. I will look into adding a slight border to read only states. That might help a lot. I think just getting your read on the current visuals was what I needed. Like a 👍 or 👎 . So I'm glad you're good with them. |
|
re:Suggest @cchaos This fixes the |
Removing this line should fix it https://github.com/elastic/eui/blob/master/src/components/suggest/_suggest_input.scss#L11 I'm guessing we no longer need it. |
|
Thanks for the reminder to look at EuiSuggest (and I'll do a search for any other prepend/appends). That probably will fix the spacing, but I"m guessing you don't want the darkened background either. I'll take a look. |
… the type of content .. mainly for including popovers or tooltips # Conflicts: # src/components/form/_variables.scss
cchaos
force-pushed
the
compressed-fixes-1
branch
from
530ffda
to
2285cca
Compare
|
@andreadelrio Pushed the fix for the status appends which mainly meant removing the padding and margins. @snide I also added the |
|
@ryankeairns I also updated the readOnly state to include a border. I think this helps a ton to make the pre/appends not look so awkward. |
|
@snide Since you're taking a code day, can you review this one so we can continue the Kibana side? |
Fixing some initial issues found while updating Kibana
Added TS defs where missing
There were some
compressedprops missing from the TS def files of some controls.Added a doc section for
appendandprepend... and fixed up some styling especially if consumer was passing a popover or tooltip. These types of elements didn't get proper styling because the className wasn't being passed down to the right element it would have needed to be pass as the
anchorClassName. The docs section is pretty robust showing lots of different types of elements being passed in.Checklist
[ ] Props have proper autodocs[ ] Added or updated jest tests[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes