[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

      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!

…ooltips (#8174)

…ooltips (elastic#8174)

`100.0.0` ⏩ `101.0.1` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([#8444](elastic/eui#8444)) - Added types: ([#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets all usages of `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). This is because the UI for the high contrast mode functionality (and style adjustments) need to first be implemented on Kibana side (by shared-ux). ## QA Adding high contrast mode in disabled state should result in no visual changes in Kibana. Please ensure your product view remain unchanged. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`100.0.0` ⏩ `101.0.1` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([elastic#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([elastic#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([elastic#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([elastic#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([elastic#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([elastic#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([elastic#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([elastic#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([elastic#8444](elastic/eui#8444)) - Added types: ([elastic#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([elastic#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([elastic#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets all usages of `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). This is because the UI for the high contrast mode functionality (and style adjustments) need to first be implemented on Kibana side (by shared-ux). ## QA Adding high contrast mode in disabled state should result in no visual changes in Kibana. Please ensure your product view remain unchanged. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit 2cd777d) # Conflicts: # src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.test.tsx

`100.0.0` ⏩ `101.0.1` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([elastic#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([elastic#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([elastic#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([elastic#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([elastic#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([elastic#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([elastic#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([elastic#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([elastic#8444](elastic/eui#8444)) - Added types: ([elastic#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([elastic#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([elastic#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets all usages of `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). This is because the UI for the high contrast mode functionality (and style adjustments) need to first be implemented on Kibana side (by shared-ux). ## QA Adding high contrast mode in disabled state should result in no visual changes in Kibana. Please ensure your product view remain unchanged. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

>[!IMPORtANT] This PR is the direct, manual backport to `8.x` for [this PR](#215698) that's being merged to `main`. The reason it's handled manually is that `8.x` receives a custom EUI release that still has the "Amsterdam" theme as default theme enabled. --- `100.0.0` ⏩ `101.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` [`v101.1.0`](https://github.com/elastic/eui/releases/v101.1.0) - Updates `EuiTableRow` styles to check support for `:has(+)` selector ([#8498](elastic/eui#8498)) ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([#8444](elastic/eui#8444)) - Added types: ([#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets the root `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). Cloud-UI can enable this whenever it's tested and supported from their end. ## QA Adding high contrast mode in disabled state should result in no visual changes to the UI.

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 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

cee-chen mentioned this pull request Dec 6, 2024

fix: keep arrow below popover content #8207

Closed

7 tasks

cee-chen added a commit that referenced this pull request Dec 6, 2024

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and t…

02070de

…ooltips (#8174)

mgadewoll mentioned this pull request Dec 9, 2024

[Visual Refresh] Introduce shared popover arrow styles to Borealis #8212

Merged

4 tasks

cee-chen added a commit that referenced this pull request Dec 12, 2024

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and t…

8339bf7

…ooltips (#8174)

cee-chen mentioned this pull request Dec 12, 2024

High contrast mode support #8232

Closed

10 tasks

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 14, 2025

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and t…

6848f15

…ooltips (elastic#8174)

mgadewoll mentioned this pull request Mar 14, 2025

[HCM] Add high contrast mode support #8444

Merged

12 tasks

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 18, 2025

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and t…

0d95add

…ooltips (elastic#8174)

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 18, 2025

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and t…

d11316d

…ooltips (elastic#8174)

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 20, 2025

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and t…

c5696ec

…ooltips (elastic#8174)

This was referenced Mar 24, 2025

Upgrade EUI to v101.0.1 elastic/kibana#215698

Merged

[8.x] Upgrade EUI to v101.1.0-classic.0 elastic/kibana#216208

Merged

		@@ -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

Uh oh!

Conversation

cee-chen commented Nov 21, 2024 • edited by mgadewoll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Panels:

Portalled components:

Popovers and tooltips:

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll Nov 25, 2024

Choose a reason for hiding this comment

Uh oh!

cee-chen Nov 25, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Nov 26, 2024

Uh oh!

cee-chen commented Nov 26, 2024

Uh oh!

kibanamachine commented Nov 26, 2024

Uh oh!

elasticmachine commented Nov 26, 2024

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll Nov 27, 2024

Choose a reason for hiding this comment

Uh oh!

cee-chen Nov 27, 2024

Choose a reason for hiding this comment

Uh oh!

mgadewoll Nov 27, 2024

Choose a reason for hiding this comment

Uh oh!

cee-chen Nov 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cee-chen commented Nov 27, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cee-chen commented Nov 21, 2024 •

edited by mgadewoll

Loading

cee-chen Nov 27, 2024 •

edited

Loading