More EuiFilePicker styles #2145

cchaos · 2019-07-19T23:42:12Z

This adds some more versions of the file picker since there were a few missing.

1. Not `large` aka `display='default'` Fixes #1484

I'm not thrilled with this name, I just was having trouble finding the appropriate name. In actuality we should allow the compressed prop to accept a boolean or some string that means "normal". Suggestions welcome. UPDATED

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 works

This also fixed an issue where truncation wasn't working.

And with multiple files

2. `fullWidth` was missing

3. `isInvalid` was missing

4. 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 missing

For 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 in mobile
This was checked in IE11
This was checked in dark mode
Any props added have proper autodocs
Documentation examples were added
A changelog entry exists and is marked appropriately
~~[ ] 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~~

cchaos · 2019-07-20T00:04:30Z

I also see that @ryankeairns requested a button version of this thing, so maybe the prop isn't combined with compressed but we add the display named prop with options like 'tall' | 'normal' and eventually 'button'?

snide · 2019-07-20T00:09:14Z

I always like using a display prop myself. Seems like it's becoming a normal pattern for us. Certainly like it more than the booleans.

cchaos · 2019-07-20T00:36:41Z

I'll update the prop name ~~next week~~ tonight. But this can still be reviewed for the other parts.

chandlerprall

Changes LGTM; pulled & tested locally

cchaos · 2019-07-23T02:04:00Z

@snide This PR is ready for review.

snide

This attacks the more immediate problem. I think it's OK to merge even if it's a bit sneaky.

snide · 2019-07-24T05:17:11Z

src/components/form/file_picker/file_picker.js

+           *      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;


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. 🛴

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)

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.

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.

* 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)

cchaos requested review from snide and chandlerprall July 20, 2019 00:03

chandlerprall approved these changes Jul 22, 2019

View reviewed changes

snide approved these changes Jul 24, 2019

View reviewed changes

cchaos added 9 commits July 24, 2019 14:22

Added fullWidth and isInvalid props to EuiFilePicker

42634f7

Added a ‘notTall’ version

8f24b54

Though I’m not keen on that name

Setting the height statically

2f60f8e

…so that it doesn't shift it's surrounding contents around

Fixed selector concetenation for font weight

90e3683

Remove z-indexes

67b7b94

Clashed with any popovers and wasn’t necessary since dom order signifies this

Fix FF by removing vertical padding

7a4e8b6

cl

93ef708

Added isLoading state

95df6ca

… overrides clear button

Changed tall to display with ‘large’ as default

05a206c

Which ended up refactoring the SASS to have the normal style control as default with `—large` overrides.

cchaos force-pushed the more-file-picker-styles branch from 5c5c3a6 to 05a206c Compare July 24, 2019 18:24

Merge branch 'master' into more-file-picker-styles

7e42fb2

cchaos merged commit 88106c0 into elastic:master Jul 24, 2019

cchaos deleted the more-file-picker-styles branch July 24, 2019 21:18

chandlerprall mentioned this pull request Jul 30, 2019

Upgraded EUI 13.0.0 -> 13.1.1 elastic/kibana#42298

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

More EuiFilePicker styles #2145

More EuiFilePicker styles #2145

cchaos commented Jul 19, 2019 •

edited

Loading

cchaos commented Jul 20, 2019

snide commented Jul 20, 2019

cchaos commented Jul 20, 2019 •

edited

Loading

chandlerprall left a comment

cchaos commented Jul 23, 2019

snide left a comment

snide Jul 24, 2019

cchaos Jul 24, 2019

snide Jul 24, 2019

cchaos Jul 24, 2019

More EuiFilePicker styles #2145

More EuiFilePicker styles #2145

Conversation

cchaos commented Jul 19, 2019 • edited Loading

1. Not large aka display='default' Fixes #1484

Making sure the :focus / selected states works

2. fullWidth was missing

3. isInvalid was missing

4. Removed z-indexes

5. isLoading was missing

Height

Checklist

cchaos commented Jul 20, 2019

snide commented Jul 20, 2019

cchaos commented Jul 20, 2019 • edited Loading

chandlerprall left a comment

Choose a reason for hiding this comment

cchaos commented Jul 23, 2019

snide left a comment

Choose a reason for hiding this comment

snide Jul 24, 2019

Choose a reason for hiding this comment

cchaos Jul 24, 2019

Choose a reason for hiding this comment

snide Jul 24, 2019

Choose a reason for hiding this comment

cchaos Jul 24, 2019

Choose a reason for hiding this comment

cchaos commented Jul 19, 2019 •

edited

Loading

1. Not `large` aka `display='default'` Fixes #1484

Making sure the `:focus` / `selected` states works

2. `fullWidth` was missing

3. `isInvalid` was missing

5. `isLoading` was missing

cchaos commented Jul 20, 2019 •

edited

Loading