[Visual Refresh] Provide hooks for color palette functions #8284

mgadewoll · 2025-01-20T15:55:50Z

Summary

Important

This PR merges into a feature branch.

This PR changes the color palette functions to support passing colors as argument to enable a more flexible usage outside of a React Context where the EUI default values might not be updated as expected.

Additionally this PR adds hooks for the available color palette functions (e.g. euiPaletteColorBlind and euiPaletteColorBlindBehindText and euiPaletteForStatus etc) for usage in React components.

Example added hook: useEuiPaletteColorBlind

These hooks are mainly a devX addition and they are added to provide a direct input of the theme colors (from the EuiProvider to the palette functions without having to rely on the temporary middleware EuiVisColorStore which was previously added to support multiple themes in the previously static color palette functions.

To ensure vis colors are available for custom usage with palette functions, we also need to ensure to export the vis color definitions object colorVis from the themes.

QA

tkajtoch

The changes look great! My brain had to adjust to seeing euiPaletteColorBlind-like variable names and not assume it's a function :D

- this fixes some stale palette value outputs that didn't update between theme changes yet

kibanamachine · 2025-01-29T06:33:46Z

Preview staging links for this PR:

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

elasticmachine · 2025-01-29T06:35:40Z

💚 Build Succeeded

Buildkite Build
Commit: f45a7dc

History

💚 Build #3342 succeeded 069aade

cc @mgadewoll

…8288

`99.1.0-borealis.0` ⏩ `99.2.0-borealis.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) --- ## [`v99.2.0`](https://github.com/elastic/eui/releases/v99.2.0) - Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([#8271](elastic/eui#8271)) - Added `plugs` and `web` glyphs to `EuiIcon` ([#8285](elastic/eui#8285)) - Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([#8289](elastic/eui#8289)) **Bug fixes** - Fixed an issue with EuiDataGrid with auto row height resulting in a table of 0 height ([#8251](elastic/eui#8251)) - Fixed `disabled` behavior of `EuiFieldText` to prevent input changes. ([#8271](elastic/eui#8271)) **Borealis changes** - [Visual Refresh] Provide hooks for color palette functions ([#8284](elastic/eui#8284)) - [Visual Refresh] Make Borealis default theme in EUI ([#8288](elastic/eui#8288)) --- As you can probably tell, there are plenty of updated tests and snapshots this time around. They are the result of the following: 1. We've updated the default theme in `@elastic/eui` v99.2.0 to Borealis, which led to kibana tests using `renderWithTheme`, `mountWithTheme`, and other utility functions that wrap the tested component in `<EuiThemeProvider>` to switch to the correct, new color values. With this change, all tests should now use Borealis, regardless of the testing framework or its configuration. 2. Because of the default theme change in EUI, some class name hash fragments (e.g., `css-`**`wprskz`**`-euiButtonIcon-xs-empty-primary`) regenerated. Most Borealis-related changes in this PR are test env only and have no impact on what users see when using Kibana. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`99.1.0-borealis.0` ⏩ `99.2.0-borealis.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) --- ## [`v99.2.0`](https://github.com/elastic/eui/releases/v99.2.0) - Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([elastic#8271](elastic/eui#8271)) - Added `plugs` and `web` glyphs to `EuiIcon` ([elastic#8285](elastic/eui#8285)) - Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([elastic#8289](elastic/eui#8289)) **Bug fixes** - Fixed an issue with EuiDataGrid with auto row height resulting in a table of 0 height ([elastic#8251](elastic/eui#8251)) - Fixed `disabled` behavior of `EuiFieldText` to prevent input changes. ([elastic#8271](elastic/eui#8271)) **Borealis changes** - [Visual Refresh] Provide hooks for color palette functions ([elastic#8284](elastic/eui#8284)) - [Visual Refresh] Make Borealis default theme in EUI ([elastic#8288](elastic/eui#8288)) --- As you can probably tell, there are plenty of updated tests and snapshots this time around. They are the result of the following: 1. We've updated the default theme in `@elastic/eui` v99.2.0 to Borealis, which led to kibana tests using `renderWithTheme`, `mountWithTheme`, and other utility functions that wrap the tested component in `<EuiThemeProvider>` to switch to the correct, new color values. With this change, all tests should now use Borealis, regardless of the testing framework or its configuration. 2. Because of the default theme change in EUI, some class name hash fragments (e.g., `css-`**`wprskz`**`-euiButtonIcon-xs-empty-primary`) regenerated. Most Borealis-related changes in this PR are test env only and have no impact on what users see when using Kibana. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> ## Summary Summarize your PR. If it involves visual changes include a screenshot or gif. ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...

`99.1.0-borealis.0` ⏩ `99.2.0-borealis.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) --- ## [`v99.2.0`](https://github.com/elastic/eui/releases/v99.2.0) - Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([elastic#8271](elastic/eui#8271)) - Added `plugs` and `web` glyphs to `EuiIcon` ([elastic#8285](elastic/eui#8285)) - Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([elastic#8289](elastic/eui#8289)) **Bug fixes** - Fixed an issue with EuiDataGrid with auto row height resulting in a table of 0 height ([elastic#8251](elastic/eui#8251)) - Fixed `disabled` behavior of `EuiFieldText` to prevent input changes. ([elastic#8271](elastic/eui#8271)) **Borealis changes** - [Visual Refresh] Provide hooks for color palette functions ([elastic#8284](elastic/eui#8284)) - [Visual Refresh] Make Borealis default theme in EUI ([elastic#8288](elastic/eui#8288)) --- As you can probably tell, there are plenty of updated tests and snapshots this time around. They are the result of the following: 1. We've updated the default theme in `@elastic/eui` v99.2.0 to Borealis, which led to kibana tests using `renderWithTheme`, `mountWithTheme`, and other utility functions that wrap the tested component in `<EuiThemeProvider>` to switch to the correct, new color values. With this change, all tests should now use Borealis, regardless of the testing framework or its configuration. 2. Because of the default theme change in EUI, some class name hash fragments (e.g., `css-`**`wprskz`**`-euiButtonIcon-xs-empty-primary`) regenerated. Most Borealis-related changes in this PR are test env only and have no impact on what users see when using Kibana. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit e5958a4) # Conflicts: # src/platform/packages/shared/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_css.test.ts.snap # x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/__snapshots__/entry_content.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/__mocks__/mock.ts

mgadewoll added skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) visual refresh labels Jan 20, 2025

mgadewoll force-pushed the eui-theme/palette-hooks branch from bf18c8e to 069aade Compare January 20, 2025 16:35

mgadewoll self-assigned this Jan 20, 2025

mgadewoll marked this pull request as ready for review January 20, 2025 17:19

mgadewoll requested a review from a team as a code owner January 20, 2025 17:19

tkajtoch self-requested a review January 21, 2025 14:29

tkajtoch approved these changes Jan 23, 2025

View reviewed changes

mgadewoll added 5 commits January 24, 2025 18:48

feat: add react hooks for color palette functions

43ffc69

test: add more unit tests

600fa79

refactor: update component usages to use palette hooks

1c2ee63

docs: update docs usages of palette functions to use hooks instead

e1228f3

- this fixes some stale palette value outputs that didn't update between theme changes yet

docs: update EuiFacet docs examples

f45a7dc

mgadewoll force-pushed the eui-theme/palette-hooks branch from 069aade to f45a7dc Compare January 29, 2025 06:07

mgadewoll merged commit 84d8df3 into elastic:eui-theme/borealis Jan 29, 2025
4 checks passed

mgadewoll added a commit that referenced this pull request Feb 4, 2025

fix: update tests after merge with resulting conflicts of #8284 and #…

be22634

…8288

tkajtoch mentioned this pull request Feb 9, 2025

Upgrade EUI to v99.2.0-borealis.0 elastic/kibana#209690

Merged

JoseLuisGJ mentioned this pull request Feb 13, 2025

[Search] Fixing coming soon typos elastic/kibana#210973

Closed

9 tasks

mgadewoll mentioned this pull request Mar 3, 2025

[Visual Refresh] Add Borealis theme #8386

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh] Provide hooks for color palette functions #8284

[Visual Refresh] Provide hooks for color palette functions #8284

Uh oh!

mgadewoll commented Jan 20, 2025 •

edited

Loading

Uh oh!

tkajtoch left a comment

Uh oh!

kibanamachine commented Jan 29, 2025

Uh oh!

elasticmachine commented Jan 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[Visual Refresh] Provide hooks for color palette functions #8284

[Visual Refresh] Provide hooks for color palette functions #8284

Uh oh!

Conversation

mgadewoll commented Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jan 29, 2025

Uh oh!

elasticmachine commented Jan 29, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Jan 20, 2025 •

edited

Loading