[Visual Refresh] Fix computed border token mapping #8170

mgadewoll · 2024-11-19T19:20:20Z

Summary

Note

This PR merges into a feature branch

This PR fixes an issue with border token mappings for the Amsterdam theme, where references to the border.color are not actually available in the colors definitions yet.

The tokens use the underlying computed token now instead.

before

after

QA

verify the EuiCommentEvent border for "subdued" event is using proper "subdued" color instead of black (Storybook)

- the issue here seems to be that the border token is defined after color tokens and not available

packages/eui/src/global_styling/mixins/__snapshots__/_color.test.ts.snap

packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts

tkajtoch

It seems like eventColor: transparent is also using the wrong color. Could you please fix it here while you're at it?

mgadewoll · 2024-11-20T14:14:04Z

It seems like eventColor: transparent is also using the wrong color. Could you please fix it here while you're at it?

Thanks for the catch! Updated in this commit.

kibanamachine · 2024-11-20T16:49:25Z

Preview staging links for this PR:

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

elasticmachine · 2024-11-20T17:45:07Z

💚 Build Succeeded

Buildkite Build
Commit: bd65b74

History

💔 Build #3082 failed bd65b74
💚 Build #3080 succeeded dea713d
💚 Build #3079 succeeded da5ce24
💚 Build #3076 succeeded 14add60

cee-chen

LGTM - thanks for jumping on the fix!

tkajtoch

LGTM! Thanks for fixing the transparent variant as well :D

`v97.3.1-borealis.2`⏩`v98.0.0-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.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)) # `@elastic/eui-theme-borealis` **Bug fixes** - Fixed computed border token mapping (elastic/eui#8170) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`v97.3.1-borealis.2`⏩`v98.0.0-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.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 ([elastic#8135](elastic/eui#8135)) **Breaking changes** - Removed `EuiFormRow`'s deprecated `columnCompressedSwitch` display prop. Use `columnCompressed` instead ([elastic#8113](elastic/eui#8113)) # `@elastic/eui-theme-borealis` **Bug fixes** - Fixed computed border token mapping (elastic/eui#8170) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

>[!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)

fix: use computed value from colors instead of border for border token

14add60

- the issue here seems to be that the border token is defined after color tokens and not available

mgadewoll added the skip-changelog label Nov 19, 2024

mgadewoll changed the title ~~[Visual Refresh] Fix computed token mapping~~ [Visual Refresh] Fix computed border token mapping Nov 19, 2024

mgadewoll commented Nov 19, 2024

View reviewed changes

packages/eui/src/global_styling/mixins/__snapshots__/_color.test.ts.snap Show resolved Hide resolved

mgadewoll marked this pull request as ready for review November 19, 2024 19:50

mgadewoll requested a review from a team as a code owner November 19, 2024 19:50

cee-chen reviewed Nov 19, 2024

View reviewed changes

packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts Show resolved Hide resolved

refactor: inherit border.color from color tokens

dea713d

mgadewoll force-pushed the eui/theme/borealis-border-fix branch from da5ce24 to dea713d Compare November 20, 2024 10:46

tkajtoch requested changes Nov 20, 2024

View reviewed changes

fix missing transparent border mapping

bd65b74

mgadewoll mentioned this pull request Nov 20, 2024

[Obs AI Assistant] Borealis theme integration elastic/kibana#200814

Merged

1 task

cee-chen approved these changes Nov 20, 2024

View reviewed changes

tkajtoch approved these changes Nov 20, 2024

View reviewed changes

tkajtoch merged commit 96dc4f1 into elastic:eui-theme/borealis Nov 20, 2024
4 checks passed

tkajtoch pushed a commit that referenced this pull request Nov 20, 2024

[Visual Refresh] Fix computed border token mapping (#8170)

77fae69

tkajtoch mentioned this pull request Nov 20, 2024

Upgrade EUI to v98.0.0 elastic/kibana#201049

Merged

tkajtoch pushed a commit that referenced this pull request Nov 27, 2024

[Visual Refresh] Fix computed border token mapping (#8170)

5056ea1

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

[Visual Refresh] Fix computed border token mapping (#8170)

2b4be6f

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

[Visual Refresh] Fix computed border token mapping (#8170)

7f7f303

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] Fix computed border token mapping (#8170)

9ae61b1

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

[Visual Refresh] Fix computed border token mapping (elastic#8170)

daadbbf

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

[Visual Refresh] Fix computed border token mapping (elastic#8170)

82485ed

mgadewoll added the visual refresh label Jan 20, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh] Fix computed border token mapping #8170

[Visual Refresh] Fix computed border token mapping #8170

mgadewoll commented Nov 19, 2024 •

edited

Loading

tkajtoch left a comment

mgadewoll commented Nov 20, 2024

kibanamachine commented Nov 20, 2024

elasticmachine commented Nov 20, 2024

cee-chen left a comment

tkajtoch left a comment

[Visual Refresh] Fix computed border token mapping #8170

[Visual Refresh] Fix computed border token mapping #8170

Conversation

mgadewoll commented Nov 19, 2024 • edited Loading

Summary

QA

tkajtoch left a comment

Choose a reason for hiding this comment

mgadewoll commented Nov 20, 2024

kibanamachine commented Nov 20, 2024

elasticmachine commented Nov 20, 2024

💚 Build Succeeded

History

cee-chen left a comment

Choose a reason for hiding this comment

tkajtoch left a comment

Choose a reason for hiding this comment

mgadewoll commented Nov 19, 2024 •

edited

Loading