Added EuiOverlayMask directly to EuiModal by akashgp09 · Pull Request #4480 · elastic/eui

akashgp09 · 2021-02-03T02:54:52Z

Summary

This PR Fixes #4478
Added EuiOverlayMask directly to EuiModal

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Chrome, Edge, and Firefox
Props have proper autodocs and playground toggles
Added documentation
~~- [ ] Checked Code Sandbox works for the any docs 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

Signed-off-by: Akash Gupta <akashgp9@gmail.com>

kibanamachine · 2021-02-03T02:54:54Z

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

Signed-off-by: Akash Gupta <akashgp9@gmail.com>

cchaos · 2021-02-03T15:43:35Z

😆 Well this was an oversight on my part during #4421 which added the overlay mask into the EuiConfirmModal component, but now that this PR adds the overlay mask directly to EuiModal, EuiConfirmModal which imports EuiModal now renders 2 mask. 🤦 ...

@akashgp09 Could you remove the overlay mask now from EuiConfirmModal? And just do a quick search through all the src-docs/ to make sure no other modal instances are wrapped with an overlay mask?

akashgp09 · 2021-02-03T21:24:52Z

@cchaos i have made the requested changes ;)

cchaos · 2021-02-03T22:34:08Z

Jenkins, test this

kibanamachine · 2021-02-03T22:55:45Z

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

cchaos · 2021-02-05T20:37:54Z

Jenkins, test this

cchaos

Thanks @akashgp09 ! There was still one more instance, inside EuiMarkdownEditor that needed fixing. It was a specific use case where the fix was to present an actual "Close" button. I also added some wording to the docs as well as cleaned up some of the guidelines page. When this passes CI, I'll merge.

kibanamachine · 2021-02-05T20:56:45Z

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

cchaos · 2021-02-05T21:24:17Z

Flakey tooltip test.

Jenkins, test this

cchaos · 2021-02-05T21:24:48Z

Jenkins, test this

kibanamachine · 2021-02-05T21:46:53Z

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

cchaos · 2021-02-05T22:00:49Z

Flakey context menu test... ☹️
Jenkins, test this

cchaos · 2021-02-05T22:42:42Z

Testing my patience, Jenkins, test this please!

kibanamachine · 2021-02-05T23:06:15Z

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

…emoving the EuiOverlayMask Fixes [this issue](elastic#92798), introduced when [the EUI modal implementation changed](elastic/eui#4480), such that it's no longer necessary to wrap modals in an `EuiOverlayMask`. The mask is now built-in to `EuiModal`. The change above became effective throughout Kibana when it was upgraded to use a newer version of EUI via [this commit on Feb 16](elastic@8126488#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519). This PR resolves the issue by removing the `EuiOverlayMask` around the `Customize Event Renderers modal`, shown in the `After` screenshot below: ### Before ![before](https://user-images.githubusercontent.com/59917825/109154007-b2e23880-7793-11eb-83bb-4774df77c5d6.png) ### After ![after](https://user-images.githubusercontent.com/4459398/109561954-0c4fad80-7a9b-11eb-9283-51d50ec8ea26.png) ### Desk testing Desk-tested on a 16" 2019 MBP, and on the desktop with the following browser versions: - Chrome `88.0.4324.192` - Firefox `86.0` - Safari `14.0.3`

…ving the EuiOverlayMask (#93150) * ## [Security Solution] Fixes the Customize Event Renderers modal by removing the EuiOverlayMask Fixes [this issue](#92798), introduced when [the EUI modal implementation changed](elastic/eui#4480), such that it's no longer necessary to wrap modals in an `EuiOverlayMask`. The mask is now built-in to `EuiModal`. The change above became effective throughout Kibana when it was upgraded to use a newer version of EUI via [this commit on Feb 16](8126488#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519). This PR resolves the issue by removing the `EuiOverlayMask` around the `Customize Event Renderers modal`, shown in the `After` screenshot below: ### Before ![before](https://user-images.githubusercontent.com/59917825/109154007-b2e23880-7793-11eb-83bb-4774df77c5d6.png) ### After ![after](https://user-images.githubusercontent.com/4459398/109561954-0c4fad80-7a9b-11eb-9283-51d50ec8ea26.png) ### Desk testing Desk-tested on a 16" 2019 MBP, and on the desktop with the following browser versions: - Chrome `88.0.4324.192` - Firefox `86.0` - Safari `14.0.3` * - force precommit git hooks to run Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…ving the EuiOverlayMask (elastic#93150) * ## [Security Solution] Fixes the Customize Event Renderers modal by removing the EuiOverlayMask Fixes [this issue](elastic#92798), introduced when [the EUI modal implementation changed](elastic/eui#4480), such that it's no longer necessary to wrap modals in an `EuiOverlayMask`. The mask is now built-in to `EuiModal`. The change above became effective throughout Kibana when it was upgraded to use a newer version of EUI via [this commit on Feb 16](elastic@8126488#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519). This PR resolves the issue by removing the `EuiOverlayMask` around the `Customize Event Renderers modal`, shown in the `After` screenshot below: ### Before ![before](https://user-images.githubusercontent.com/59917825/109154007-b2e23880-7793-11eb-83bb-4774df77c5d6.png) ### After ![after](https://user-images.githubusercontent.com/4459398/109561954-0c4fad80-7a9b-11eb-9283-51d50ec8ea26.png) ### Desk testing Desk-tested on a 16" 2019 MBP, and on the desktop with the following browser versions: - Chrome `88.0.4324.192` - Firefox `86.0` - Safari `14.0.3` * - force precommit git hooks to run Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…ving the EuiOverlayMask (#93150) (#93213) * ## [Security Solution] Fixes the Customize Event Renderers modal by removing the EuiOverlayMask Fixes [this issue](#92798), introduced when [the EUI modal implementation changed](elastic/eui#4480), such that it's no longer necessary to wrap modals in an `EuiOverlayMask`. The mask is now built-in to `EuiModal`. The change above became effective throughout Kibana when it was upgraded to use a newer version of EUI via [this commit on Feb 16](8126488#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519). This PR resolves the issue by removing the `EuiOverlayMask` around the `Customize Event Renderers modal`, shown in the `After` screenshot below: ### Before ![before](https://user-images.githubusercontent.com/59917825/109154007-b2e23880-7793-11eb-83bb-4774df77c5d6.png) ### After ![after](https://user-images.githubusercontent.com/4459398/109561954-0c4fad80-7a9b-11eb-9283-51d50ec8ea26.png) ### Desk testing Desk-tested on a 16" 2019 MBP, and on the desktop with the following browser versions: - Chrome `88.0.4324.192` - Firefox `86.0` - Safari `14.0.3` * - force precommit git hooks to run Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Andrew Goldstein <andrew-goldstein@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…ving the EuiOverlayMask (#93150) (#93215) * ## [Security Solution] Fixes the Customize Event Renderers modal by removing the EuiOverlayMask Fixes [this issue](#92798), introduced when [the EUI modal implementation changed](elastic/eui#4480), such that it's no longer necessary to wrap modals in an `EuiOverlayMask`. The mask is now built-in to `EuiModal`. The change above became effective throughout Kibana when it was upgraded to use a newer version of EUI via [this commit on Feb 16](8126488#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519). This PR resolves the issue by removing the `EuiOverlayMask` around the `Customize Event Renderers modal`, shown in the `After` screenshot below: ### Before ![before](https://user-images.githubusercontent.com/59917825/109154007-b2e23880-7793-11eb-83bb-4774df77c5d6.png) ### After ![after](https://user-images.githubusercontent.com/4459398/109561954-0c4fad80-7a9b-11eb-9283-51d50ec8ea26.png) ### Desk testing Desk-tested on a 16" 2019 MBP, and on the desktop with the following browser versions: - Chrome `88.0.4324.192` - Firefox `86.0` - Safari `14.0.3` * - force precommit git hooks to run Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Andrew Goldstein <andrew-goldstein@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

unrevised6419 · 2022-10-04T10:12:04Z

Hey! Can someone confirm if this should’ve been a breaking change, but was released as minor by mistake? 👀

akashgp09 added 2 commits February 3, 2021 08:14

added EuiOverlayMask directly

7802a85

Signed-off-by: Akash Gupta <akashgp9@gmail.com>

updated snapshots

2b32e39

Signed-off-by: Akash Gupta <akashgp9@gmail.com>

akashgp09 added 2 commits February 3, 2021 08:30

Updated CL

9c50bcf

Signed-off-by: Akash Gupta <akashgp9@gmail.com>

removed EuiOverlayMask

e98dfdc

akashgp09 and others added 4 commits February 6, 2021 00:39

Merge branch 'master' into EuiModal

20a2380

Fixing EuiMarkdownEditor usage

564d240

Cleaning up the docs and fixing mobile widths

193ed1a

Merge branch 'EuiModal' of github.com:akashgp09/eui into EuiModal

2351457

cchaos approved these changes Feb 5, 2021

View reviewed changes

Merge branch 'master' into EuiModal

2edf742

cchaos merged commit 5e75993 into elastic:master Feb 5, 2021

thompsongl mentioned this pull request Feb 11, 2021

Upgrade EUI to v31.7.0 elastic/kibana#91210

Merged

andrew-goldstein mentioned this pull request Feb 25, 2021

[Security Solution]Customize event rendering under timeline area was disabled on all browser elastic/kibana#92798

Closed

andrew-goldstein mentioned this pull request Mar 1, 2021

[Security Solution] Fixes the Customize Event Renderers modal by removing the EuiOverlayMask elastic/kibana#93150

Merged

diegozubieta95 mentioned this pull request Mar 18, 2022

Eui Modal prysmex/ember-eui#110

Merged

1 task

Conversation

akashgp09 commented Feb 3, 2021

Summary

Checklist

Uh oh!

kibanamachine commented Feb 3, 2021

Uh oh!

cchaos commented Feb 3, 2021

Uh oh!

akashgp09 commented Feb 3, 2021

Uh oh!

cchaos commented Feb 3, 2021

Uh oh!

kibanamachine commented Feb 3, 2021

Uh oh!

cchaos commented Feb 5, 2021

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Feb 5, 2021

Uh oh!

cchaos commented Feb 5, 2021

Uh oh!

cchaos commented Feb 5, 2021

Uh oh!

kibanamachine commented Feb 5, 2021

Uh oh!

cchaos commented Feb 5, 2021

Uh oh!

cchaos commented Feb 5, 2021

Uh oh!

kibanamachine commented Feb 5, 2021

Uh oh!

unrevised6419 commented Oct 4, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants