EuiFilePicker dropzone style updates

[daveyholler]

Summary

This PR updates EuiFilePicker dropzone styles to look more like an interactive element. Text contrast is boosted in the compact variant of the component and it no longer looks like a disabled button or inactive input.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately

[cee-chen]

Two notes separate from the code changes:

Updated the Figma library counterpart

1. Do you have access to Figma Davey? Can you update the designs there?

and

2. Do you mind updating the PR title to something a bit more descriptive, as that's what GitHub uses for the commit message when it gets squash merged? Something like [EuiFilePicker] Update styles would be fine

[daveyholler]

@constancecchen - Title updated (I'm trying to do too many things at once)... And yes, I'll be updating Figma.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6479/

[cee-chen]

Sorry, only just opened this up to QA - it looks like both the disabled and compressed styling has a box-shadow "border" that needs to be removed:

Invalid also looks very off, for lack of better word:

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6479/

[daveyholler]

@constancecchen compressed, invalid, and disabled styles updated.

[daveyholler]

The invalid styles kinda bug me, but they match our patterns elsewhere 🤷🏼‍♂️

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6479/

[cee-chen]

🙈 I was doing one final QA pass on FF/Edge/Safari and noticed that the focus state in FF+Chrome also needs updating:

You can repro by clicking the filepicker and canceling out of the dialog

[daveyholler]

@constancecchen so I addressed the focus state in Chrome and Firefox, but focus doesn't appear to render at all in Safari. However, that's also the case in the production site. Are we cool with that?

... I'm becoming painfully aware of how out of touch I am with CSS right now.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6479/

[cee-chen]

Safari does not show focus state on click on prod either, so you're fine. It does properly show focus state on keyboard tab, and I did check and that's displaying correctly - you should be all good.

[cee-chen]

eui/src/components/form/file_picker/_file_picker.scss

Lines 80 to 84 in 41ec84f

	transition:
	box-shadow $euiAnimSpeedFast ease-in,
	background-color $euiAnimSpeedFast ease-in,
	background-image $euiAnimSpeedFast ease-in,
	background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 3 */

This transition CSS is no longer applicable since we're setting border color instead of box-shadow. I strongly recommend changing line 81 to border-color $euiAnimSpeedFast ease-in, instead - it makes the transition from invalid to valid and disabled/non-disabled slightly smoother.

EDIT: I would remove the background-image and background-size transitions as well as the the below comment:

eui/src/components/form/file_picker/_file_picker.scss

Line 67 in 41ec84f

* 3. Delay focus gradient or else it will only partially transition while file chooser opens

AFAICT there's no background gradient on focus, this must be referring to some old styles that no longer exists - we should just remove the comment entirely.

So TL;DR of changes I'm asking for (plus removing line 67):

  transition:
    box-shadow $euiAnimSpeedFast ease-in,
    background-color $euiAnimSpeedFast ease-in;

[cee-chen]

Changes look good! Will wait for staging to deploy in 30 mins or so and do another quick cross-browser QA pass, and (fingers crossed) if nothing comes up, I think this PR is good to go!

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6479/

[cee-chen]

As a heads up, I did find one extremely minor bug that transitions don't work on compressed styling, because of the below CSS property:

However, this is coming from our form mixins which is coming in from our compressed mixin:

eui/src/global_styling/mixins/_form.scss

Lines 165 to 168 in 0d31625

	@supports (-moz-appearance: none) {
	// List *must* be in the same order as the above.
	transition-property: box-shadow, background-image, background-size;
	}

So I don't think this is worth solving in this PR - we should address form mixin shenanigans generally in our Emotion conversion instead.

[cee-chen]

🎉 Thanks for your patience - I love the new look. Let's ship it!