Upgrade EUI to v101.0.1 #215698
Merged
Upgrade EUI to v101.0.1 #215698
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- mono prop was removed
- it will be enabled once Kibana has implemented the required UI for it
mgadewoll
added
release_note:skip
🤖 GitHub commentsExpand to view the GitHub comments
Just comment with:
|
|
Pinging @elastic/eui-team (EUI) |
iblancof
reviewed
Mar 27, 2025
Dosant
approved these changes
Mar 27, 2025
|
@iblancof the cc @ek-so |
ThomThomson
approved these changes
Mar 27, 2025
mgadewoll
added
backport:skip
|
@elasticmachine merge upstream |
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
Page load bundle
History
cc @mgadewoll |
|
Starting backport for target branches: 9.0 |
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
mgadewoll
added a commit
to mgadewoll/kibana
that referenced
this pull request
Mar 28, 2025
`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
mgadewoll
added a commit
that referenced
this pull request
Mar 31, 2025
# Backport This will backport the following commits from `main` to `9.0`: - [Upgrade EUI to v101.0.1 (#215698)](#215698) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Lene Gadewoll","email":"lene.gadewoll@elastic.co"},"sourceCommit":{"committedDate":"2025-03-28T18:29:23Z","message":"Upgrade EUI to v101.0.1 (#215698)\n\n`100.0.0` ⏩ `101.0.1`\n\n[Questions? Please see our Kibana upgrade\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)\n\n## Package updates\n\n### `@elastic/eui`\n[`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1)\n\n- Updated `EuiProvider` and `EuiThemeProvider` with a new\n`highContrastMode` ([#8444](https://github.com/elastic/eui/pull/8444))\n- This prop allows toggling a higher contrast visual style that\nprimarily affects borders and shadows\n- On `EuiProvider`, if the `highContrastMode` prop is not passed, this\nsetting will inherit from the user's OS/system settings\n- If the user is using a forced colors mode (e.g. Windows' high contrast\nthemes), this system setting will take precedence over any\n`highContrastMode` or `colorMode` props passed\n- Added `highContrastModeStyles` and `preventForcedColors` styling utils\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated `EuiRangeTooltip` to be easier to see in dark mode\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated some deprecated color token usages that have direct\nsubstitutes ([#8444](https://github.com/elastic/eui/pull/8444))\n - `text` -> `textParagraph`\n - `title` -> `textHeading`\n - `subduedText` -> `textSubdued`\n - `disabledText` -> `textDisabled`\n - `accentText` -> `textAccent`\n - `dangerText` -> `textDanger`\n - `warningText` -> `textWarning`\n- `useEuiShadow()` now accepts a second `options` argument\n([#8234](https://github.com/elastic/eui/pull/8234))\n- `useEuiShadowFlat()` now accepts an `options` object instead of only a\ncolor ([#8234](https://github.com/elastic/eui/pull/8234))\n- Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark\nmode. ([#8174](https://github.com/elastic/eui/pull/8174))\n\n**Bug fixes**\n\n- Fixed a visual bug where a transparent border would create visible\nempty space (`LIGHT` mode only) for the components:\n([#8427](https://github.com/elastic/eui/pull/8427))\n - `EuiPanel`\n - `EuiPopover`\n - `EuiToolTip`\n - `EuiToast`\n - `EuiTour`\n \n --- \n \n### `@elastic/eui-theme-common`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n- Removed type `EuiShadowCustomColor`\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Added types: ([#8444](https://github.com/elastic/eui/pull/8444))\n - `EuiShadowOptions`\n - `EuiThemeHighContrastModeProp`\n - `EuiThemeHighContrastMode`\n- Updated shadow utils to accepts a second `options` argument and return\nborders in high contrast mode:\n([#8444](https://github.com/elastic/eui/pull/8444))\n - `euiShadow`\n - `euiShadowXSmall`\n - `euiShadowSmall`\n - `euiShadowMedium`\n - `euiShadowLarge`\n - `euiSlightShadowHover`\n - `euiShadowFlat`\n \n ---\n \n### `@elastic/eui-theme-borealis`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n- Added new component level tokens:\n([#8444](https://github.com/elastic/eui/pull/8444))\n - `buttonGroupBackgroundDisabledSelected`\n - `overlayMaskBackground`\n - `overlayMaskBackgroundHighContrast`\n - `skeletonBackgroundSkeletonMiddleHighContrast`\n \n\n## Additional changes\n\nThe latest `@elastic/eui` package introduces high contrast mode support.\nThis PR sets all usages of `EuiProvider` to use\n`highContrastMode={false}` to introduce it in disabled state (this\nreflects the current functionality in Kibana). This is because the UI\nfor the high contrast mode functionality (and style adjustments) need to\nfirst be implemented on Kibana side (by shared-ux).\n\n## QA\n\nAdding high contrast mode in disabled state should result in no visual\nchanges in Kibana. Please ensure your product view remain unchanged.\n\n---------\n\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"2cd777d96909a73bab547cc3e3f509fc7ef916af","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","backport:prev-minor","ci:cloud-deploy","ci:project-deploy-elasticsearch","ci:project-deploy-observability","ci:project-deploy-security","Team:obs-ux-infra_services","Team:obs-ux-management","v9.1.0"],"title":"Upgrade EUI to v101.0.1","number":215698,"url":"https://github.com/elastic/kibana/pull/215698","mergeCommit":{"message":"Upgrade EUI to v101.0.1 (#215698)\n\n`100.0.0` ⏩ `101.0.1`\n\n[Questions? Please see our Kibana upgrade\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)\n\n## Package updates\n\n### `@elastic/eui`\n[`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1)\n\n- Updated `EuiProvider` and `EuiThemeProvider` with a new\n`highContrastMode` ([#8444](https://github.com/elastic/eui/pull/8444))\n- This prop allows toggling a higher contrast visual style that\nprimarily affects borders and shadows\n- On `EuiProvider`, if the `highContrastMode` prop is not passed, this\nsetting will inherit from the user's OS/system settings\n- If the user is using a forced colors mode (e.g. Windows' high contrast\nthemes), this system setting will take precedence over any\n`highContrastMode` or `colorMode` props passed\n- Added `highContrastModeStyles` and `preventForcedColors` styling utils\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated `EuiRangeTooltip` to be easier to see in dark mode\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated some deprecated color token usages that have direct\nsubstitutes ([#8444](https://github.com/elastic/eui/pull/8444))\n - `text` -> `textParagraph`\n - `title` -> `textHeading`\n - `subduedText` -> `textSubdued`\n - `disabledText` -> `textDisabled`\n - `accentText` -> `textAccent`\n - `dangerText` -> `textDanger`\n - `warningText` -> `textWarning`\n- `useEuiShadow()` now accepts a second `options` argument\n([#8234](https://github.com/elastic/eui/pull/8234))\n- `useEuiShadowFlat()` now accepts an `options` object instead of only a\ncolor ([#8234](https://github.com/elastic/eui/pull/8234))\n- Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark\nmode. ([#8174](https://github.com/elastic/eui/pull/8174))\n\n**Bug fixes**\n\n- Fixed a visual bug where a transparent border would create visible\nempty space (`LIGHT` mode only) for the components:\n([#8427](https://github.com/elastic/eui/pull/8427))\n - `EuiPanel`\n - `EuiPopover`\n - `EuiToolTip`\n - `EuiToast`\n - `EuiTour`\n \n --- \n \n### `@elastic/eui-theme-common`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n- Removed type `EuiShadowCustomColor`\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Added types: ([#8444](https://github.com/elastic/eui/pull/8444))\n - `EuiShadowOptions`\n - `EuiThemeHighContrastModeProp`\n - `EuiThemeHighContrastMode`\n- Updated shadow utils to accepts a second `options` argument and return\nborders in high contrast mode:\n([#8444](https://github.com/elastic/eui/pull/8444))\n - `euiShadow`\n - `euiShadowXSmall`\n - `euiShadowSmall`\n - `euiShadowMedium`\n - `euiShadowLarge`\n - `euiSlightShadowHover`\n - `euiShadowFlat`\n \n ---\n \n### `@elastic/eui-theme-borealis`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n- Added new component level tokens:\n([#8444](https://github.com/elastic/eui/pull/8444))\n - `buttonGroupBackgroundDisabledSelected`\n - `overlayMaskBackground`\n - `overlayMaskBackgroundHighContrast`\n - `skeletonBackgroundSkeletonMiddleHighContrast`\n \n\n## Additional changes\n\nThe latest `@elastic/eui` package introduces high contrast mode support.\nThis PR sets all usages of `EuiProvider` to use\n`highContrastMode={false}` to introduce it in disabled state (this\nreflects the current functionality in Kibana). This is because the UI\nfor the high contrast mode functionality (and style adjustments) need to\nfirst be implemented on Kibana side (by shared-ux).\n\n## QA\n\nAdding high contrast mode in disabled state should result in no visual\nchanges in Kibana. Please ensure your product view remain unchanged.\n\n---------\n\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"2cd777d96909a73bab547cc3e3f509fc7ef916af"}},"sourceBranch":"main","suggestedTargetBranches":["9.0"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/215698","number":215698,"mergeCommit":{"message":"Upgrade EUI to v101.0.1 (#215698)\n\n`100.0.0` ⏩ `101.0.1`\n\n[Questions? Please see our Kibana upgrade\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)\n\n## Package updates\n\n### `@elastic/eui`\n[`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1)\n\n- Updated `EuiProvider` and `EuiThemeProvider` with a new\n`highContrastMode` ([#8444](https://github.com/elastic/eui/pull/8444))\n- This prop allows toggling a higher contrast visual style that\nprimarily affects borders and shadows\n- On `EuiProvider`, if the `highContrastMode` prop is not passed, this\nsetting will inherit from the user's OS/system settings\n- If the user is using a forced colors mode (e.g. Windows' high contrast\nthemes), this system setting will take precedence over any\n`highContrastMode` or `colorMode` props passed\n- Added `highContrastModeStyles` and `preventForcedColors` styling utils\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated `EuiRangeTooltip` to be easier to see in dark mode\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated some deprecated color token usages that have direct\nsubstitutes ([#8444](https://github.com/elastic/eui/pull/8444))\n - `text` -> `textParagraph`\n - `title` -> `textHeading`\n - `subduedText` -> `textSubdued`\n - `disabledText` -> `textDisabled`\n - `accentText` -> `textAccent`\n - `dangerText` -> `textDanger`\n - `warningText` -> `textWarning`\n- `useEuiShadow()` now accepts a second `options` argument\n([#8234](https://github.com/elastic/eui/pull/8234))\n- `useEuiShadowFlat()` now accepts an `options` object instead of only a\ncolor ([#8234](https://github.com/elastic/eui/pull/8234))\n- Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark\nmode. ([#8174](https://github.com/elastic/eui/pull/8174))\n\n**Bug fixes**\n\n- Fixed a visual bug where a transparent border would create visible\nempty space (`LIGHT` mode only) for the components:\n([#8427](https://github.com/elastic/eui/pull/8427))\n - `EuiPanel`\n - `EuiPopover`\n - `EuiToolTip`\n - `EuiToast`\n - `EuiTour`\n \n --- \n \n### `@elastic/eui-theme-common`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n- Removed type `EuiShadowCustomColor`\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Added types: ([#8444](https://github.com/elastic/eui/pull/8444))\n - `EuiShadowOptions`\n - `EuiThemeHighContrastModeProp`\n - `EuiThemeHighContrastMode`\n- Updated shadow utils to accepts a second `options` argument and return\nborders in high contrast mode:\n([#8444](https://github.com/elastic/eui/pull/8444))\n - `euiShadow`\n - `euiShadowXSmall`\n - `euiShadowSmall`\n - `euiShadowMedium`\n - `euiShadowLarge`\n - `euiSlightShadowHover`\n - `euiShadowFlat`\n \n ---\n \n### `@elastic/eui-theme-borealis`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n- Added new component level tokens:\n([#8444](https://github.com/elastic/eui/pull/8444))\n - `buttonGroupBackgroundDisabledSelected`\n - `overlayMaskBackground`\n - `overlayMaskBackgroundHighContrast`\n - `skeletonBackgroundSkeletonMiddleHighContrast`\n \n\n## Additional changes\n\nThe latest `@elastic/eui` package introduces high contrast mode support.\nThis PR sets all usages of `EuiProvider` to use\n`highContrastMode={false}` to introduce it in disabled state (this\nreflects the current functionality in Kibana). This is because the UI\nfor the high contrast mode functionality (and style adjustments) need to\nfirst be implemented on Kibana side (by shared-ux).\n\n## QA\n\nAdding high contrast mode in disabled state should result in no visual\nchanges in Kibana. Please ensure your product view remain unchanged.\n\n---------\n\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"2cd777d96909a73bab547cc3e3f509fc7ef916af"}}]}] BACKPORT--> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
cqliu1
pushed a commit
to cqliu1/kibana
that referenced
this pull request
Mar 31, 2025
`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>
tsullivan
added a commit
that referenced
this pull request
Apr 2, 2025
) ## Summary Closes #176219 Depends on #215698 EUI provides documentation about high contrast mode. This includes info about when it is enabled automatically, and some developer utilities. See: https://eui.elastic.co/#/theming/high-contrast-mode  ## Release note Added an option to User Settings that allows the Kibana interface to display in a high contrast mode.
mgadewoll
added a commit
that referenced
this pull request
Apr 3, 2025
>[!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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
18 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
100.0.0⏩101.0.1Questions? Please see our Kibana upgrade FAQ.
Package updates
@elastic/euiv101.0.1EuiProviderandEuiThemeProviderwith a newhighContrastMode(#8444)EuiProvider, if thehighContrastModeprop is not passed, this setting will inherit from the user's OS/system settingshighContrastModeorcolorModeprops passedhighContrastModeStylesandpreventForcedColorsstyling utils (#8444)EuiRangeTooltipto be easier to see in dark mode (#8444)text->textParagraphtitle->textHeadingsubduedText->textSubdueddisabledText->textDisabledaccentText->textAccentdangerText->textDangerwarningText->textWarninguseEuiShadow()now accepts a secondoptionsargument (#8234)useEuiShadowFlat()now accepts anoptionsobject instead of only a color (#8234)EuiPopoverandEuiToolTipto be easier to see in dark mode. (#8174)Bug fixes
Fixed a visual bug where a transparent border would create visible empty space (
LIGHTmode only) for the components: (#8427)EuiPanelEuiPopoverEuiToolTipEuiToastEuiTour@elastic/eui-theme-commonv0.1.0Removed type
EuiShadowCustomColor(#8444)Added types: (#8444)
EuiShadowOptionsEuiThemeHighContrastModePropEuiThemeHighContrastModeUpdated shadow utils to accepts a second
optionsargument and return borders in high contrast mode: (#8444)euiShadoweuiShadowXSmalleuiShadowSmalleuiShadowMediumeuiShadowLargeeuiSlightShadowHovereuiShadowFlat@elastic/eui-theme-borealisv0.1.0buttonGroupBackgroundDisabledSelectedoverlayMaskBackgroundoverlayMaskBackgroundHighContrastskeletonBackgroundSkeletonMiddleHighContrastAdditional changes
The latest
@elastic/euipackage introduces high contrast mode support. This PR sets all usages ofEuiProviderto usehighContrastMode={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.