-
Notifications
You must be signed in to change notification settings - Fork 841
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
More EuiFilePicker styles #2145
Conversation
I also see that @ryankeairns requested a button version of this thing, so maybe the prop isn't combined with |
I always like using a |
I'll update the prop name |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changes LGTM; pulled & tested locally
@snide This PR is ready for review. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This attacks the more immediate problem. I think it's OK to merge even if it's a bit sneaky.
* but `display: default` is not. This can be removed once | ||
* we support the new compressed styles and make this breaking change. | ||
*/ | ||
const calculatedDisplay = compressed ? 'default' : display; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can't think of a better way to handle this. It's all because this component is so different then what we do with the rest of the form inputs where it has an alternate view that sometimes takes compressed
.
Part of me wants it to be display: ['button', 'form']
and then compressed
and we drop the large format, but even that wouldn't match, cuz we use size
for the buttons.
I think it's the "large" part that feels the most wrong, since we normally would use that for size and would say l
instead. Maybe calling it bigTarget
or something?
You commented this well enough though, and even though it's a little magical, my guess is we're gonna wanna improve this component visually at some point in the future and we can worry about it then. 🛴
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah I didn't want to remove the compressed
boolean option because that would cause a breaking change. I struggled with the naming of large | default
as well but couldn't settle on one that felt appropriate for what it was doing which is basically just making it a larger size.
@snide Would you like me to display: ['bigTarget', 'smallTarget']
( and button
eventually)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No I'd rather you just merge it so that I forget that we're doing this. I think it's fine and is just some of my organization stuff is getting in the way.
I think we're gonna want to redo the visuals of this thing completely at some point, so I'm not worried about it. We can make it be more on pattern then.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can always make breaking change later too. This is just a quick shim for those extra states.
Though I’m not keen on that name
…so that it doesn't shift it's surrounding contents around
Clashed with any popovers and wasn’t necessary since dom order signifies this
… overrides clear button
Which ended up refactoring the SASS to have the normal style control as default with `—large` overrides.
5c5c3a6
to
05a206c
Compare
* Added `fullWidth` and `isInvalid` props to EuiFilePicker * Added a ‘large’ vs 'default' version * Setting the height statically so that it doesn't shift it's surrounding contents around * Remove z-indexes: Clashed with any popovers and wasn’t necessary since dom order signifies this * Added isLoading state (overrides clear button)
This adds some more versions of the file picker since there were a few missing.
1. Not
large
akadisplay='default'
Fixes #1484I'm not thrilled with this name, I just was having trouble finding the appropriate name. In actuality we should allow theUPDATEDcompressed
prop to accept a boolean or some string that means "normal". Suggestions welcome.The main reason I created this one is because I've seen consumers use the "compressed" version when they just wanted the normal height/style input. But this is technically wrong, so this is more appropriate.
Making sure the
:focus
/selected
states worksThis also fixed an issue where truncation wasn't working.
And with multiple files
2.
fullWidth
was missing3.
isInvalid
was missing4. Removed z-indexes
There was a clash if popovers were anywhere near:
Before
The z-indexes weren't really necessary anyway since the input is first in DOM order.
After
5.
isLoading
was missingFor the large form, I just used the animated progress indicator at the top, though I supposed we could also swap out the import icon for the loading spinner. But I do use the loading spinner for the smaller sizes. I also don't display the clear button when it's in a loading state. Simplifies the icons overload.
Height
One other big thing I changed was to set a static height on the tall version. I wasn't a fan that when selecting files it would increase in height, bumping the surrounding elements around.
Before
Since the line denoting the file name/number of files would only every be a single line, I decided to calculate the height at that moment and set it as the static height. Using flex box and column layout I'm able to keep the contents of the input vertically centered.
After
Checklist
[ ] This was checked for breaking changes and labeled appropriately[ ] Jest tests were updated or added to match the most common scenarios[ ] This was checked against keyboard-only and screenreader scenarios[ ] This required updates to Framer X components