[Amsterdam] Remove borders from flyouts and popover arrows by johnbarrierwilson · Pull Request #3477 · elastic/eui

johnbarrierwilson · 2020-05-13T21:27:13Z

Summary

A. Removes the left border on flyouts to better match other Amsterdam aesthetics.

Flyout

Before	After

B. Also removes the borders from popover arrows while improving the aesthetic to better match the drop shadow of the related panel.

Bottom

Before	After

Top

Before	After

Left

Before	After

Right

Before	After

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in IE11 and Firefox
- [ ] Props have proper autodocs
~~- [ ] Added documentation examples~~
- [ ] Added or updated jest tests
Checked for breaking changes and labeled appropriately
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
A changelog entry exists and is marked appropriately

johnbarrierwilson · 2020-05-13T21:27:55Z

Working on the checklist before moving out of draft status

kibanamachine · 2020-05-13T22:07:40Z

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

kibanamachine · 2020-05-14T03:35:59Z

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

CHANGELOG.md

A few adjustments

kibanamachine · 2020-05-14T16:46:08Z

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

Easier override of border with variable

Change template %eui-flyout to mixin euiFlyout

johnbarrierwilson · 2020-05-14T18:12:00Z

Just making note here that clip is now depricated. Will need to rework using clip-path and possibly use @include internetExplorerOnly() to remove shadow for IE.

kibanamachine · 2020-05-14T18:13:52Z

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

src/themes/eui-amsterdam/overrides/_popover.scss

johnbarrierwilson · 2020-05-21T03:25:31Z

I added @include internetExplorerOnly{} to disable the arrow shadows. Everything else checks out in all browsers.

kibanamachine · 2020-05-21T03:44:58Z

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

kibanamachine · 2020-05-21T19:05:14Z

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

src/themes/eui-amsterdam/overrides/_popover.scss

johnbarrierwilson · 2020-05-26T22:13:51Z

@cchaos Ready for another round/review! 😁

kibanamachine · 2020-05-27T15:54:14Z

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

cchaos · 2020-05-27T17:32:35Z

Hmm, it looks like the left and right ones may need some more tweaking.

johnbarrierwilson · 2020-05-27T17:50:04Z

That's really weird—I had that issue at one point and fixed it and now I can't reproduce it. Is your display scaled at all?

cchaos · 2020-05-27T17:53:59Z

No, and I just used the build link above in Chrome.

cchaos · 2020-05-27T17:54:11Z

You might just want to overcompensate?

johnbarrierwilson · 2020-05-28T14:43:04Z

I increased the arrow compensation by 1 in order to overcompensate. Let me know if that fixes it for you. I was still having trouble re-producing.

kibanamachine · 2020-05-28T15:02:20Z

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

cchaos · 2020-05-28T21:17:31Z

I actually noticed played directly in the dev tools, and it looks related to the position of the arrow not the clip mask. So I adjusted all the arrows to be 1px closer to the popover panel.

But like you, I didn't see it locally, but it seems to always exist in the build, so will double-check that it's fixed in the build once CI runs it.

kibanamachine · 2020-05-28T21:39:40Z

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

cchaos · 2020-05-28T21:44:19Z

^^ That seemed to work 🎉

@johnbarrierwilson Do you want to do a final pass on the shadow again?

kibanamachine · 2020-05-28T22:06:04Z

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

cchaos

👍 LGTM!

kibanamachine · 2020-05-29T18:33:50Z

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

johnbarrierwilson · 2020-05-29T21:33:42Z

Sweet! Looks good on my end! Thanks @cchaos!

johnbarrierwilson added 2 commits May 13, 2020 13:46

[Amsterdam] Removing border-left from flyout

788031a

Improve popover arrow borders into faux-shadows

39ffc49

johnbarrierwilson added Amsterdam labels May 13, 2020

Use $euiColorInk for arrow shadow

00c5d8c

johnbarrierwilson added 2 commits May 13, 2020 22:08

Use clip for IE11 (instead of clip-path)

b244433

Add changelog notices for amsterdam changes

9c2a389

johnbarrierwilson requested a review from cchaos May 14, 2020 03:15

johnbarrierwilson marked this pull request as ready for review May 14, 2020 03:15

johnbarrierwilson mentioned this pull request May 14, 2020

[META] EUI Amsterdam Roadmap #2639

Closed

cchaos reviewed May 14, 2020

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

cchaos and others added 4 commits May 14, 2020 12:00

Remove some uneccessary overrides

1e600da

Using sizing vars wherever possible

d4dc576

cl

692424a

Merge pull request #3 from cchaos/johnbarrierwilson/amsterdam/borders

aa5dd37

A few adjustments

cchaos and others added 2 commits May 14, 2020 13:46

Change template %eui-flyout to mixin euiFlyout

c757297

Easier override of border with variable

Merge pull request #4 from cchaos/johnbarrierwilson/amsterdam/borders

2681ff8

Change template %eui-flyout to mixin euiFlyout

Replace clip with clip-path

a2928e9

johnbarrierwilson commented May 21, 2020

View reviewed changes

src/themes/eui-amsterdam/overrides/_popover.scss Outdated Show resolved Hide resolved

Merge branch 'master' into amsterdam/borders

07dd7e6

johnbarrierwilson assigned cchaos May 26, 2020

johnbarrierwilson self-assigned this May 26, 2020

cchaos self-requested a review May 26, 2020 15:00

cchaos reviewed May 26, 2020

View reviewed changes

src/themes/eui-amsterdam/overrides/_popover.scss Outdated Show resolved Hide resolved

johnbarrierwilson added 2 commits May 26, 2020 17:05

Remove IE only helper for popover arrows

e8e89ca

Add interpolation for all arrow shadow calculations

3da07fc

cl

25c5535

Adjust arrow compensation

8054216

Compensate by position

00e54c7

Merge branch 'master' into amsterdam/borders

c9f43da

Merge branch 'master' into amsterdam/borders

04110b6

cchaos approved these changes May 29, 2020

View reviewed changes

johnbarrierwilson merged commit e319819 into elastic:master May 29, 2020

johnbarrierwilson deleted the amsterdam/borders branch May 29, 2020 21:33

thompsongl mentioned this pull request Jun 3, 2020

Upgrade EUI to v24.1.0 elastic/kibana#68141

Merged

Conversation

johnbarrierwilson commented May 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Flyout

Bottom

Top

Left

Right

Checklist

Uh oh!

johnbarrierwilson commented May 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibanamachine commented May 13, 2020

Uh oh!

kibanamachine commented May 14, 2020

Uh oh!

Uh oh!

kibanamachine commented May 14, 2020

Uh oh!

johnbarrierwilson commented May 14, 2020

Uh oh!

kibanamachine commented May 14, 2020

Uh oh!

Uh oh!

johnbarrierwilson commented May 21, 2020

Uh oh!

kibanamachine commented May 21, 2020

Uh oh!

kibanamachine commented May 21, 2020

Uh oh!

Uh oh!

johnbarrierwilson commented May 26, 2020

Uh oh!

kibanamachine commented May 27, 2020

Uh oh!

cchaos commented May 27, 2020

Uh oh!

johnbarrierwilson commented May 27, 2020

Uh oh!

cchaos commented May 27, 2020

Uh oh!

cchaos commented May 27, 2020

Uh oh!

johnbarrierwilson commented May 28, 2020

Uh oh!

kibanamachine commented May 28, 2020

Uh oh!

cchaos commented May 28, 2020

Uh oh!

kibanamachine commented May 28, 2020

Uh oh!

cchaos commented May 28, 2020

Uh oh!

kibanamachine commented May 28, 2020

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented May 29, 2020

Uh oh!

johnbarrierwilson commented May 29, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

johnbarrierwilson commented May 13, 2020 •

edited

Loading

johnbarrierwilson commented May 13, 2020 •

edited

Loading