EuiFilePicker dropzone style updates by daveyholler · Pull Request #6479 · elastic/eui

daveyholler · 2022-12-13T18:21:02Z

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

src/components/form/file_picker/_file_picker.scss

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

upcoming_changelogs/6479.md

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

cee-chen · 2022-12-13T18:28:55Z

Two notes separate from the code changes:

Updated the Figma library counterpart

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

and

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 · 2022-12-13T18:31:50Z

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

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

…zone

src/components/form/file_picker/_file_picker.scss

kibanamachine · 2022-12-13T19:01:46Z

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

cee-chen · 2022-12-13T19:29:33Z

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 · 2022-12-13T19:44:22Z

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

daveyholler · 2022-12-13T20:45:32Z

@constancecchen compressed, invalid, and disabled styles updated.

daveyholler · 2022-12-13T20:48:12Z

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

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

kibanamachine · 2022-12-13T23:19:35Z

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

cee-chen · 2022-12-13T23:24:03Z

🙈 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

…zone

daveyholler · 2022-12-14T00:36:28Z

@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 · 2022-12-14T00:57:51Z

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

cee-chen · 2022-12-14T16:45:49Z

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.

src/components/form/file_picker/_file_picker.scss

cee-chen · 2022-12-14T17:04:36Z

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;

src/components/form/file_picker/_file_picker.scss

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

cee-chen · 2022-12-14T17:40:50Z

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 · 2022-12-14T18:00:31Z

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

cee-chen · 2022-12-14T18:34:33Z

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!

## Summary `eui@71.0.0` ⏩ `eui@72.0.0` --- ## [`72.0.0`](https://github.com/elastic/eui/tree/v72.0.0) - Added the `customQuickSelectRender` render prop to `EuiSuperDatePicker`, which allows customizing the Quick Select popover ([#6382](elastic/eui#6382)) - `EuiFilePicker` styles have been updated to look more like an interactive element. ([#6479](elastic/eui#6479)) - Added a third argument to `EuiSelectable`'s `onChange` callback. The single `option` object that triggered the `onChange` event is now also passed to consumers with its most recent `checked` state ([#6487](elastic/eui#6487)) **Bug fixes** - `EuiTabs` now passes `size` and `expand` to all children using a React context provider. ([#6478](elastic/eui#6478)) - Fixed security warnings caused by `trim@0.0.1` sub-dependency ([#6482](elastic/eui#6482)) **Breaking changes** - Removed `size` and `expand` props from `EuiTab` ([#6478](elastic/eui#6478)) ## [`71.1.0`](https://github.com/elastic/eui/tree/v71.1.0) **Deprecations** - Renamed `EuiPageSideBarProps` to `EuiPageSideBarProps_Deprecated`, to reduce usage/confusion with `EuiPageSidebar` ([#6468](elastic/eui#6468)) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

daveyholler added 3 commits December 12, 2022 14:13

WIP dropzone styles

42ab204

WIP dropzone styles

a4e1cc1

Variable for border width

b9a69dd

daveyholler requested a review from cee-chen December 13, 2022 18:21

Changelog entry.

ea072f6

cee-chen reviewed Dec 13, 2022

View reviewed changes

src/components/form/file_picker/_file_picker.scss Outdated Show resolved Hide resolved

cee-chen reviewed Dec 13, 2022

View reviewed changes

src/components/form/file_picker/_file_picker.scss Outdated Show resolved Hide resolved

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

19e4eab

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

cee-chen reviewed Dec 13, 2022

View reviewed changes

upcoming_changelogs/6479.md Outdated Show resolved Hide resolved

Update upcoming_changelogs/6479.md

5e92c1d

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

daveyholler changed the title ~~Dropzone~~ EuiFilePicker dropzone style updates Dec 13, 2022

daveyholler and others added 7 commits December 13, 2022 10:32

WIP dropzone styles

962fc8b

WIP dropzone styles

17ae5ce

Variable for border width

e3ee79e

Changelog entry.

2afec45

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

ea0b40d

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

Merge branch 'dropzone' of ssh://github.com/daveyholler/eui into drop…

749f5d3

…zone

Margin instead of positioning

6ec33c9

daveyholler requested a review from cee-chen December 13, 2022 18:39

daveyholler enabled auto-merge (squash) December 13, 2022 18:40

cee-chen reviewed Dec 13, 2022

View reviewed changes

src/components/form/file_picker/_file_picker.scss Outdated Show resolved Hide resolved

Don't need no calc

7187457

Fixing compressed and invalid styles

8996e7b

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

e4f1e54

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

daveyholler added 2 commits December 13, 2022 16:30

Sets a proper-looking focus state.

ce400de

Merge branch 'dropzone' of ssh://github.com/daveyholler/eui into drop…

41ec84f

…zone

daveyholler requested a review from cee-chen December 14, 2022 16:49

cee-chen reviewed Dec 14, 2022

View reviewed changes

src/components/form/file_picker/_file_picker.scss Outdated Show resolved Hide resolved

cee-chen reviewed Dec 14, 2022

View reviewed changes

src/components/form/file_picker/_file_picker.scss Show resolved Hide resolved

cee-chen reviewed Dec 14, 2022

View reviewed changes

src/components/form/file_picker/_file_picker.scss Outdated Show resolved Hide resolved

Requested changes from code review

34d4fc8

daveyholler requested a review from cee-chen December 14, 2022 17:25

cee-chen reviewed Dec 14, 2022

View reviewed changes

src/components/form/file_picker/_file_picker.scss Outdated Show resolved Hide resolved

cee-chen reviewed Dec 14, 2022

View reviewed changes

src/components/form/file_picker/_file_picker.scss Outdated Show resolved Hide resolved

daveyholler and others added 2 commits December 14, 2022 09:34

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

a4efba7

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

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

5d99aac

Co-authored-by: Cee <constancecchen@users.noreply.github.com>

daveyholler requested a review from cee-chen December 14, 2022 17:39

cee-chen approved these changes Dec 14, 2022

View reviewed changes

daveyholler merged commit 8d79c7d into elastic:main Dec 14, 2022

cee-chen mentioned this pull request Dec 20, 2022

Upgrade EUI to v72.0.0 elastic/kibana#147888

Merged

cqliu1 mentioned this pull request Apr 6, 2023

(Accessibility) The contrast ratio from text to background is below the threshold - example 5 elastic/kibana#154426

Closed

cee-chen mentioned this pull request Jun 13, 2024

[Emotion] Convert EuiFilePicker #7833

Merged

27 tasks

Conversation

daveyholler commented Dec 13, 2022 • edited by cee-chen Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cee-chen commented Dec 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

daveyholler commented Dec 13, 2022

Uh oh!

Uh oh!

kibanamachine commented Dec 13, 2022

Uh oh!

cee-chen commented Dec 13, 2022

Uh oh!

kibanamachine commented Dec 13, 2022

Uh oh!

daveyholler commented Dec 13, 2022

Uh oh!

daveyholler commented Dec 13, 2022

Uh oh!

kibanamachine commented Dec 13, 2022

Uh oh!

cee-chen commented Dec 13, 2022

Uh oh!

daveyholler commented Dec 14, 2022

Uh oh!

kibanamachine commented Dec 14, 2022

Uh oh!

cee-chen commented Dec 14, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cee-chen commented Dec 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cee-chen commented Dec 14, 2022

Uh oh!

kibanamachine commented Dec 14, 2022

Uh oh!

cee-chen commented Dec 14, 2022

Uh oh!

cee-chen left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

daveyholler commented Dec 13, 2022 •

edited by cee-chen

Loading

cee-chen commented Dec 13, 2022 •

edited

Loading

cee-chen commented Dec 14, 2022 •

edited

Loading