[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and tooltips #8174

cee-chen · 2024-11-21T20:25:06Z

Summary

Note

This PR merges into a feature branch. It continues expanding upon the high contrast mode setup (#8142), improving border display at a slightly more granular component level.

The following components with shadows should now have all-around borders in high contrast mode (both MacOS and Windows/emulated forced colors):

Panels:

EuiPanels should always have a border around them regardless of hasShadow or hasBorder props. Split panels should not have a border between inner panels (open to feedback on the latter, but it started feeling too visually noisy at that point)
(MacOS only, not Windows) EuiCallOuts and other colored panels should have border colors that match the panel background
Clickable cards should still have a slight extra border-bottom "shadow" on hover/focus for both MacOS and Windows

MacOS	Windows

Portalled components:

Modals, flyouts, and toasts should have borders all around them

Modals	Flyouts	Toasts

Popovers and tooltips:

Note for tooltips: effects are primarily only visible in dark mode or in forced colors/Windows high contrast mode mode. While I was here, I also added a border for non-high-contrast tooltips in darkmode, as I found the visibility against dark mode background colors to be insufficient to even see the dang tooltip. See the added VRT screenshots.

Popovers in particular required a good amount of custom CSS shenanigans to account for their arrows 😅 See the individual git messages for some details on the CSS tricks used to get them working (primarily using clip-path instead of CSS borders to render a triangle, and using a rotated pseudo element to render the border).

The final effect has some minute pixel aliasing on different zoom levels, but IMO it's Good Enough and way better than just being totally broken:

Popover	Tooltips
	Windows high contrast:

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox~
  ~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA - N/A
Code quality checklist
- [ ] Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist - N/A, feature branch will have one final changelog
Designer checklist - N/A

packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png

packages/eui/src/components/popover/popover_arrow/_popover_arrow.styles.ts

… high contrast mode - have to use actual `border` CSS and not `box-shadow` due to Windows + fix obvious components that require this - flyouts, modals, toasts

- add filter workaround for clickable panels/cards

- rewrite arrows completely using `clip-path` instead of CSS borders (required for high contrast themes, which otherwise overrides borders and as such will break on Windows) - add a pseudo element workaround for high contrast mode to preserve the border - this has some subpixel aliasing issues at different zoom levels, but is good enough IMO

- add a new story for high contrast mode, to catch regressions with the arrow rendering - fix popover footer/title screenshots to actually capture the portalled popvoer

- background color is ignored in Windows, so we have to rely entirely on borders

+ fix flakiness via `sleep`

packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts

packages/eui/src/components/panel/panel.styles.ts

packages/eui/src/components/panel/split_panel/split_panel.styles.ts

mgadewoll · 2024-11-25T10:51:39Z

packages/eui/src/global_styling/mixins/_color.ts

@@ -140,9 +140,17 @@ export const euiBorderColor = (
    case 'subdued':
      return euiTheme.border.color;
    case 'warning':
-      return tintOrShade(euiTheme.colors.warning, 0.4, colorMode);
+      return tintOrShade(


Borealis note: color calculations were removed in favor of tokens. This will require consolidating.

Right yeah, I think I saw that in another PR. I'll need to add a bunch more border tokens in the high contrast mode overrides/modifications

packages/eui/src/components/resizable_container/resizable_panel.styles.ts

packages/eui/src/components/popover/popover_arrow/_popover_arrow.styles.ts

packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts

packages/eui/src/components/tool_tip/tool_tip.styles.ts

packages/eui/src/global_styling/mixins/_color.ts

…AG requirements

Cleanup: - remove need for pseudo element - always render a border (transparent on light mode) and update the the popover arrow position logic to offset for it - update popover positioning JS to use `100%` positioning instead of a static calculated number - update EuiToolTip to match rotation + clip-path logic (simpler all around and less chance of the arrow overlapping content)

- requires an extra wrapper due to the arrow's clip-path and transform CSS

packages/eui/src/components/tool_tip/tool_tip.styles.ts

mgadewoll · 2024-11-26T10:48:58Z

The latest changes look good to me!
I see there are some tests failing, I'll wait to approve in case additional changes are needed 🙂

- popover positions were flaky/imprecise - this is significantly easier to scan at a glance + update all other range VRT and improve some Storybook DX while here

cee-chen · 2024-11-26T21:24:30Z

I see there are some tests failing, I'll wait to approve in case additional changes are needed 🙂

Thanks for the precaution! One was a pretty small pixel update but the other was pretty dang annoying, so I ended up converting to a Storybook VRT test: 8bc755b

Feel free to shout if you have any Storybook preferences there. I went back and forth on making it VRT only vs not, and settled on "not", but I don't feel super strongly either way 🤷

kibanamachine · 2024-11-26T21:46:58Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8174/
Storybook: https://eui.elastic.co/pr_8174/storybook
New docs: https://eui.elastic.co/pr_8174/new-docs

elasticmachine · 2024-11-26T21:50:33Z

💚 Build Succeeded

Buildkite Build
Commit: 420570d

History

💔 Build #3141 failed 5272b62
💚 Build #3140 succeeded 1b59c0a
💚 Build #3125 succeeded b601612
💚 Build #3113 succeeded 9589b3f
💔 Build #3098 failed 3eb8a10
💔 Build #3097 failed 8d39de5

mgadewoll

🚢 🐈‍⬛ Thanks for the additional changes, they look great! Awesome job on cleaning up code and tests ✨

mgadewoll · 2024-11-27T09:05:38Z

packages/eui/src/services/popover/popover_arrow.styles.ts

+  );
+
+  return {
+    _arrowStyles: `


I like the starting underscore for the base styles. Adds some more distinction between same named object and key 👍

To add some more context - I tend to use underscore prefixes to denote private or internal usage. In this case I also don't want Emotion to render this extra label in its generated classNames, hence the underscore and the static string as opposed to css template literal.

mgadewoll · 2024-11-27T09:18:05Z

packages/eui/changelogs/upcoming/8174.md

@@ -0,0 +1 @@
+- Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode.


❓ Is this fine to add here already while it's merging into a feature branch?

Yes, I might either collate all the changelogs in the final feature branch PR, or I might leave them as-is. It's not bad to have the changelog pointing at the original PR so it's easier to find the atomic git history and see any discussions for color/context.

cee-chen · 2024-11-27T17:44:38Z

Thanks again for the fantastic review Lene, my code is so much better for it!

cee-chen changed the title ~~High contrast mode 2~~ [High Contrast Mode] Handle components that should replace their shadows with an all-around border Nov 21, 2024

cee-chen changed the title ~~[High Contrast Mode] Handle components that should replace their shadows with an all-around border~~ [High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and tooltips Nov 22, 2024

cee-chen force-pushed the high-contrast-mode-2 branch 2 times, most recently from 8d39de5 to 3eb8a10 Compare November 22, 2024 01:16

cee-chen commented Nov 22, 2024

View reviewed changes

packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png Outdated Show resolved Hide resolved

cee-chen commented Nov 22, 2024

View reviewed changes

packages/eui/src/components/popover/popover_arrow/_popover_arrow.styles.ts Outdated Show resolved Hide resolved

cee-chen marked this pull request as ready for review November 22, 2024 01:35

cee-chen requested a review from a team as a code owner November 22, 2024 01:35

cee-chen force-pushed the high-contrast-mode branch from 3815597 to 53315b5 Compare November 23, 2024 01:03

cee-chen added 6 commits November 22, 2024 17:03

[shadows] Add new option to allow components to specify border-all in…

48688f7

… high contrast mode - have to use actual `border` CSS and not `box-shadow` due to Windows + fix obvious components that require this - flyouts, modals, toasts

[EuiPanel] High contrast mode updates

cda36a2

- add filter workaround for clickable panels/cards

[EuiPopover] VRT screenshots

11dbad3

- add a new story for high contrast mode, to catch regressions with the arrow rendering - fix popover footer/title screenshots to actually capture the portalled popvoer

[EuiToolTip] Fix rendering in Windows high contrast mode

f9010d3

- background color is ignored in Windows, so we have to rely entirely on borders

[EuiToolTip] VRT screenshots

b601612

+ fix flakiness via `sleep`

cee-chen force-pushed the high-contrast-mode-2 branch from 9589b3f to b601612 Compare November 23, 2024 01:03

mgadewoll reviewed Nov 25, 2024

View reviewed changes

cee-chen added 4 commits November 25, 2024 11:21

[PR feedback] Increase high contrast border colors further to meet WC…

1b59c0a

…AG requirements

Update VRT screenshots

23ece37

Fix EuiTour beacon display

25dd6ab

- requires an extra wrapper due to the arrow's clip-path and transform CSS

mgadewoll reviewed Nov 26, 2024

View reviewed changes

packages/eui/src/components/tool_tip/tool_tip.styles.ts Outdated Show resolved Hide resolved

cee-chen added 6 commits November 26, 2024 13:19

Update downstream position snapshots

f5b96f6

Update Cypress popover dimension assertion

5025828

[PR feedback] DRY out high contrast fns slightly more

abc2e09

[PR feedback] DRY out arrow styles to a service

be472af

Replace failing EuiRange Cypress test with VRT

8bc755b

- popover positions were flaky/imprecise - this is significantly easier to scan at a glance + update all other range VRT and improve some Storybook DX while here

changelog documenting intentional dark mode border change

420570d

cee-chen force-pushed the high-contrast-mode-2 branch from 5272b62 to 420570d Compare November 26, 2024 21:21

mgadewoll approved these changes Nov 27, 2024

View reviewed changes

cee-chen merged commit ca9a01e into elastic:high-contrast-mode Nov 27, 2024
4 checks passed

cee-chen deleted the high-contrast-mode-2 branch November 27, 2024 17:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and tooltips #8174

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and tooltips #8174

cee-chen commented Nov 21, 2024 •

edited by mgadewoll

Loading

mgadewoll Nov 25, 2024

cee-chen Nov 25, 2024

mgadewoll commented Nov 26, 2024

cee-chen commented Nov 26, 2024

kibanamachine commented Nov 26, 2024

elasticmachine commented Nov 26, 2024

mgadewoll left a comment

mgadewoll Nov 27, 2024

cee-chen Nov 27, 2024

mgadewoll Nov 27, 2024

cee-chen Nov 27, 2024 •

edited

Loading

cee-chen commented Nov 27, 2024

		@@ -0,0 +1 @@
		- Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode.

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and tooltips #8174

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and tooltips #8174

Conversation

cee-chen commented Nov 21, 2024 • edited by mgadewoll Loading

Summary

Panels:

Portalled components:

Popovers and tooltips:

General checklist

mgadewoll Nov 25, 2024

Choose a reason for hiding this comment

cee-chen Nov 25, 2024

Choose a reason for hiding this comment

mgadewoll commented Nov 26, 2024

cee-chen commented Nov 26, 2024

kibanamachine commented Nov 26, 2024

elasticmachine commented Nov 26, 2024

💚 Build Succeeded

History

mgadewoll left a comment

Choose a reason for hiding this comment

mgadewoll Nov 27, 2024

Choose a reason for hiding this comment

cee-chen Nov 27, 2024

Choose a reason for hiding this comment

mgadewoll Nov 27, 2024

Choose a reason for hiding this comment

cee-chen Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

cee-chen commented Nov 27, 2024

cee-chen commented Nov 21, 2024 •

edited by mgadewoll

Loading

cee-chen Nov 27, 2024 •

edited

Loading