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

mgadewoll · 2024-12-09T11:43:49Z

Summary

Note

This PR merges into a feature branch.

This PR introduces changes made in this PR as part of the the High Contrast mode changes to the Borealis feature branch.

Important

All changes are moved over from this feature branch and only adjusted to not (yet) include high contrast mode.

This will fix an issue with arrows overlapping content as mentioned here and additionally fixes an alignment issues of popover arrow and beacon in EuiTour.

before

after

Note

EuiTour color mappings are being updated/fixed in this PR.

QA

verify EuiTour arrow and beacon positioning match between this PR and production
verify the updated components are positioned as before on the production

weronikaolejniczak

Great job! 🎉 Seems to be working as expected. I don't have much to say about the code, maybe @cee-chen, @acstll or @tkajtoch can chime in.

Testing notes:

Chrome, Safari

✅ EuiTour - The arrow + badge position / dimensions (not sure which is it) is not exactly the same but that's not an issue IMO.
✅ EuiPopover - The popover is positioned correctly, the only detail I noticed (again, not an issue IMO) is a border visible in left position (Chrome v131.0.6778.86)
✅ EuiToolTip

mgadewoll · 2024-12-11T09:00:42Z

✅ EuiPopover - The popover is positioned correctly, the only detail I noticed (again, not an issue IMO) is a border visible in left position (Chrome v131.0.6778.86)

I checked this in Storybook and the EUI docs but can't reproduce the line (Chrome 131.0.6778.87) 🙈

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

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

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

cee-chen · 2024-12-13T08:39:26Z

packages/eui/src/components/form/range/range.stories.tsx

Not sure if I'm missing something, but is there a particular reason why these range stories updates came along for the ride? It'd make sense if you grabbed the range tooltip arrow styles as well, but without it I'm a little confused as to why these were added.

OH wait ha right it's because they replace the failing Cypress test, derp. My god, look at me not remembering my own code from less than a week ago 😭

Will leave it up to you if you want to grab range tooltip arrow updates as well, no preference either way here!

Sure, let's add it here already 👍
Added in this commit.

cee-chen · 2024-12-13T08:50:40Z

This LGTM other than the missing popover tour footer lines! Feel free to merge in after that.

The popover is positioned correctly, the only detail I noticed (again, not an issue IMO) is a border visible in left position (Chrome v131.0.6778.86)

I can't repro this either, but I'm on Firefox with a custom devPixelsPerPx setting, so I often see subpixel aliasing shenanigans stuff in any case and tend to tune it out 🙈

If I zoom in to 150% I can see the barest hint of a border (also helps if I set --euiPopoverBackgroundColor: red; as an inline style), which goes away if I add a .1px to the margin offset... but like... I kiiinda don't want to bother with that? 💀 But it's a fairly minor change, up to you all.

mgadewoll · 2024-12-13T08:54:48Z

If I zoom in to 150% I can see the barest hint of a border (also helps if I set --euiPopoverBackgroundColor: red; as an inline style), which goes away if I add a .1px to the margin offset... but like... I kiiinda don't want to bother with that? 💀 But it's a fairly minor change, up to you all.

I'm always cautious about sub-pixel magic values like that. They might only work in some browsers/zoom levels and not in others. 😅

cee-chen

🎉 Changes look terrific!! Totally agree as well with the subpixel magic - let's just ignore it 🙈

kibanamachine · 2024-12-13T09:19:28Z

Preview staging links for this PR:

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

elasticmachine · 2024-12-13T09:21:20Z

💚 Build Succeeded

Buildkite Build
Commit: f5eecac

History

💚 Build #3199 succeeded 633c6c1

…8212)

`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2` _[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)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([#8247](elastic/eui#8247)) - [Visual Refresh] Fix transparent color variable definitions ([8249](elastic/eui#8249)) - [Visual Refresh] Update EuiToken colors ([8250](elastic/eui#8250)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2` _[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)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([elastic#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([elastic#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([elastic#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([elastic#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([elastic#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([elastic#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([elastic#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([elastic#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([elastic#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([elastic#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([elastic#8247](elastic/eui#8247)) - [Visual Refresh] Fix transparent color variable definitions ([8249](elastic/eui#8249)) - [Visual Refresh] Update EuiToken colors ([8250](elastic/eui#8250)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

…8212)

>[!IMPORTANT] This PR introduces the Borealis enabled EUI package to `8.x`. The intention is to support new features being developed that need to live in `main` as well as `8.x`. >[!IMPORTANT] All `8.x` versions should continue to use the current Amsterdam theme. To ensure this even with upcoming changes to the default theme for EUI, we're adding `euiThemeAmsterdam` on `EuiProvider` usages manually. ## Description This PR introduces all previous Borealis related PR changes but excludes the specific changes to support `@elastic/eui-theme-borealis` as only Amsterdam is supported as theme in `8.x`. Previous PRs - #199993 - #201049 - #202073 --- `v97.3.1`⏩`v98.2.1-borealis.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)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([#8247](elastic/eui#8247)) --- # `@elastic/eui` ## [`v98.1.0`](https://github.com/elastic/eui/releases/v98.1.0) - Updated `EuiBetaBadge` with a new `warning` color variant ([#8177](elastic/eui#8177)) **Accessibility** - Ensures `autoFocus` on `EuiSelectableList` triggers initial focus ([#8091](elastic/eui#8091)) - Improved the accessibility of `EuiSearchBarFilters` by: ([#8091](elastic/eui#8091)) - adding a more descriptive `aria-label` to selection filter buttons - ensuring the selection listbox is initially focused when opening a selection popover - Improved the accessibility experience of tabs (EuiTab, EuiTabs): tab group is a tab stop and tabs can be traversed with arrow keys. ([#8116](elastic/eui#8116)) - Updated `EuiCodeBlock` with a new `copyAriaLabel` prop, which allows setting a custom screen reader label on the copy button. ([#8176](elastic/eui#8176)) **CSS-in-JS conversions** - Removed the following global Sass variables: ([#8169](elastic/eui#8169)) - `$euiButtonMinWidth` - `$euiDatePickerCalendarWidth` - Removed the following Sass animations: ([#8169](elastic/eui#8169)) - `euiAnimFadeIn` - `euiGrow` - `focusRingAnimate` - `focusRingAnimateLarge` - `euiButtonActive` - Removed the following Sass mixins: ([#8169](elastic/eui#8169)) - `euiFullHeight` - `euiSlightShadowHover` - `datePickerArrow` # Borealis updates - [Visual Refresh] Fix euiColorFullShade Sass variable mapping (elastic/eui#8178) --- # `@elastic/eui` ## [`v98.0.0`](https://github.com/elastic/eui/releases/v98.0.0) **Bug fixes** - Fixed an `EuiDataGrid` bug where column actions where not clickable when `EuiDataGrid` with `columnVisibility.canDragAndDropColumns` was used inside a modal ([#8135](elastic/eui#8135)) **Breaking changes** - Removed `EuiFormRow`'s deprecated `columnCompressedSwitch` display prop. Use `columnCompressed` instead ([#8113](elastic/eui#8113)) # Borealis updates **Bug fixes** - Fixed computed border token mapping (elastic/eui#8170)

`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2` _[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)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([elastic#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([elastic#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([elastic#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([elastic#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([elastic#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([elastic#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([elastic#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([elastic#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([elastic#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([elastic#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([elastic#8247](elastic/eui#8247)) - [Visual Refresh] Fix transparent color variable definitions ([8249](elastic/eui#8249)) - [Visual Refresh] Update EuiToken colors ([8250](elastic/eui#8250)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

…lastic#8212)

`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2` _[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)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([elastic#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([elastic#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([elastic#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([elastic#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([elastic#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([elastic#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([elastic#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([elastic#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([elastic#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([elastic#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([elastic#8247](elastic/eui#8247)) - [Visual Refresh] Fix transparent color variable definitions ([8249](elastic/eui#8249)) - [Visual Refresh] Update EuiToken colors ([8250](elastic/eui#8250)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

mgadewoll added 4 commits December 9, 2024 12:27

feat: introduce shared popover arrow styles

4c40f5f

refactor: update components to use shared popover arrow styles

1f41a59

test: update snapshots

a5a78d2

docs(storybook): add loki fix

e268e7a

mgadewoll added skip-changelog visual refresh labels Dec 9, 2024

This was referenced Dec 9, 2024

[Visual Refresh] Update color token mappings #8211

Merged

fix: keep arrow below popover content #8207

Closed

mgadewoll changed the title ~~Eui theme/borealis align popover arrow styles~~ [Visual Refresh] Introduce shared popover arrow styles to Borealis Dec 9, 2024

mgadewoll added 3 commits December 9, 2024 13:05

test: update snapshots

43913c0

test: update datagrid popover cypress test

a261801

test(VRT): remove range unit test in favor of VRT

633c6c1

mgadewoll marked this pull request as ready for review December 9, 2024 14:29

mgadewoll requested a review from a team as a code owner December 9, 2024 14:29

weronikaolejniczak approved these changes Dec 11, 2024

View reviewed changes

cee-chen reviewed Dec 13, 2024

View reviewed changes

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

cee-chen reviewed Dec 13, 2024

View reviewed changes

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

cee-chen reviewed Dec 13, 2024

View reviewed changes

packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts Outdated Show resolved Hide resolved

cee-chen reviewed Dec 13, 2024

View reviewed changes

mgadewoll added 2 commits December 13, 2024 09:40

fix: add missing tour styles

93674b1

refactor: add Loki selector

6973ab7

refactor: add shared arrow styles on range tooltip

f5eecac

cee-chen approved these changes Dec 13, 2024

View reviewed changes

mgadewoll merged commit e162ad1 into elastic:eui-theme/borealis Dec 13, 2024
4 checks passed

tkajtoch pushed a commit that referenced this pull request Dec 16, 2024

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

0735fc9

…8212)

mgadewoll mentioned this pull request Dec 16, 2024

Upgrade EUI to v98.2.1 elastic/kibana#204482

Merged

tkajtoch pushed a commit that referenced this pull request Dec 17, 2024

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

963a999

…8212)

mgadewoll mentioned this pull request Dec 18, 2024

[8.x] Upgrade EUI to v98.2.1-borealis.1 elastic/kibana#204783

Merged

mgadewoll added a commit that referenced this pull request Jan 7, 2025

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

3695e96

…8212)

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Jan 20, 2025

[Visual Refresh] Introduce shared popover arrow styles to Borealis (e…

b244429

…lastic#8212)

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Jan 20, 2025

[Visual Refresh] Introduce shared popover arrow styles to Borealis (e…

b4a0271

…lastic#8212)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mgadewoll commented Dec 9, 2024 •

edited by weronikaolejniczak

Loading

weronikaolejniczak left a comment

mgadewoll commented Dec 11, 2024

cee-chen Dec 13, 2024

cee-chen Dec 13, 2024

mgadewoll Dec 13, 2024

cee-chen commented Dec 13, 2024

mgadewoll commented Dec 13, 2024

cee-chen left a comment

kibanamachine commented Dec 13, 2024

elasticmachine commented Dec 13, 2024

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

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

Conversation

mgadewoll commented Dec 9, 2024 • edited by weronikaolejniczak Loading

Summary

QA

weronikaolejniczak left a comment

Choose a reason for hiding this comment

mgadewoll commented Dec 11, 2024

cee-chen Dec 13, 2024

Choose a reason for hiding this comment

cee-chen Dec 13, 2024

Choose a reason for hiding this comment

mgadewoll Dec 13, 2024

Choose a reason for hiding this comment

cee-chen commented Dec 13, 2024

mgadewoll commented Dec 13, 2024

cee-chen left a comment

Choose a reason for hiding this comment

kibanamachine commented Dec 13, 2024

elasticmachine commented Dec 13, 2024

💚 Build Succeeded

History

mgadewoll commented Dec 9, 2024 •

edited by weronikaolejniczak

Loading