Skip to content

Vislib/axis #8174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 6 commits into from
Closed

Vislib/axis #8174

wants to merge 6 commits into from

Conversation

@ppisljar
Copy link
Contributor

@ppisljar ppisljar commented Sep 7, 2016 •
edited
Loading

Update Vislib Axis classes

this PR creates some changes around Vislib.

  • it replaces YAxis and XAxis by a single Axis class. this allows us to easily switch them (to create horizontal column charts for example)
  • it puts AxisTitle inside of Axis (as they are dependant)
  • it makes Axis more customizable (labels, title, lines, position ... everything is customizable)
  • it splits Axis in smaller subclasses (Axis, AxisLabels, AxisTitle and AxisScale)
  • it makes it possible to add multiple axes to one chart (like multiple Y, multiple X .. one left one right .. two left ... you name it)

however none of the features were actually added to kibana. this is just a ground work to make that happen in the future. for now merging this PR should have 0 impact for users, charts should look and feel exactly the same and everything should work exactly the same.

its very possible that options don't work/don't work correctly yet (like setting categoryaxis position to top and yaxis position to right, setting weird fonts and rotations ....) i plan to tackle all that in the future when adding the features to kibana (when i'll have an easy way to check all the possible options kibana offers).

also i updated some other parts of the vislib to use the first axis for now (when you can add multiple). in the future i plan to do some changes to the charts as well to allow using multiple axes and some other things (like having different chart types together (line + bar )

i didn't yet update/write tests, i would first like to get some opinions.

replaces #7961

@ppisljar ppisljar added review Feature:Vislib Vislib chart implementation labels Sep 7, 2016
@spalger
Copy link
Contributor

spalger commented Sep 8, 2016

I want to start off by saying that many of my recommendations may contradict the style used in the vislib currently, hope that works for you 😸

@spalger
Copy link
Contributor

spalger commented Sep 8, 2016

I'm digging into the AxisScale and AxisLabels classes, and I think we should go ahead and try splitting fe4c318ca44f8dfd6832865b5e2ac138896bf297 up and improving the classes at the same time.

I have a few ideas about how this could go:

  • I'm thinking the new commits will go something like this:

    1. es6-ify XAxis and YAxis
    2. extract axis options from XAxis and YAxis into AxisOptions
    3. extract shared scale logic from XAxis and YAxis into AxisScale
    4. extract shared label locic from XAxis and YAxis into AxisLabels
    5. combine XAxis and YAxis into Axis

  • I think we should focus a bit on isolating the data used by the AxisScale and AxisLabels classes. Right now they are both a part of creating the Axis and require an instance of Axis. This is usually a sign that components are a bit too tightly coupled.

    Instead, lets pass the data that AxisScale needs into it's constructor and make it function without knowing anything about the Axis class.

  • Let's get rid of this.attr and this._attr, unless there is a reason for them that I'm not aware of.

spalger
spalger reviewed Sep 8, 2016
View reviewed changes
src/ui/public/vislib/lib/axis.js Outdated
Copy link
Contributor

@spalger spalger Sep 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about pulling these defaults into a AxisOptions class? I think the combination of writing these properties to this, and reading from there and this._attr is pretty confusing.

Copy link
Contributor Author

@ppisljar ppisljar Sep 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in my opinion it would make it more confusing ... maybe not with the axis itself ... but AxisLabels have their own config ... following same pattern we would then need AxisLabelsOptions as well ... and AxisTitleOptions ... and in the future i hope to do similar update to other parts of vislib where this would make even less sense. i think by defining defaults like this its quite clear what all the options that this class can handle are. let me know if you dissagree

Copy link
Contributor

@spalger spalger Sep 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My thought was that a single AxisConfig class could be used across the different Axis___ classes. I was thinking it would help document all of the options in one place, and also would help pass necessary configuration values into AxisScale and such.

@ppisljar
Copy link
Contributor Author

ppisljar commented Sep 8, 2016 •
edited
Loading

regarding this._attr and this.attr ....

  • this._attr was used in the old classes
  • some places i renamed it to this.attr to follow our styleguide ...

however you probably noticed that then i tried to use this directly ... so instead of having classes store there properties in this._attr they store it directly onto this. i am not sure thats a good idea ... the reason for it would be that the code is easier to read (at least for me ... this.type compared to this._attr.type)

regarding isolating data ... i am using object composition here as it made the most sense to me. i dont think there exists a scenario for a AxisLabel without Axis ... or AxisScale without Axis (also no axis without axisscale actually). they are tightly coupled, so i dont see a problem couping them in code as well. also i think object composition fits well here as we are modeling relationship we can describe with HAS-A ... Axis HAS-A AxisScale and Has-A AxisLabels

regarding commits

i think i am gonna start fresh, with a new PR, which will just ES6ify whole vislib ... we can then start again from there. (maybe even rebase this PR on top of it)

@ppisljar
Copy link
Contributor Author

ppisljar commented Sep 8, 2016

i created #8186 which converts vislib to use ES6 syntax

@spalger
Copy link
Contributor

spalger commented Sep 8, 2016 •
edited
Loading

i am using object composition here as it made the most sense to me

I think that's the right approach, I would just like to see more boundaries between the objects.

i dont see a problem couping

In my eyes, the problem with coupling those classes comes with maintenance. But I'm having trouble coming up with a meaningful example.

@spalger spalger mentioned this pull request Sep 10, 2016
Merged
@ppisljar
joining x_axis and y_axis into a single class axis
bc4508d 
- splitting it into 3 subclasses (Axis, AxisLabels, AxisScale)
- converting to ES6 classes + style fixes
- adding more customization options
@ppisljar
updating handler to work with new Axis class
8edc0e9 
- allowing handler to have multiple category/value axes (array)
@ppisljar
converting axis_title to ES6 classes and making it work with new axis
a630025
@ppisljar
updating column layout to support left/right top/bottom positioning o…
3708697 
…f axis

- updating css min-widths to 1px (removing them breaks the code) as we dont want to reserve the space for axes that dont exist.
@ppisljar
updating axis splits to work with new layout + new axis
82f9087
@ppisljar
updating charts and dispatcher to work with new axis
f36da8d
@spalger
Copy link
Contributor

spalger commented Sep 13, 2016 •
edited
Loading

We're going to move to a more iterative approach and start doing small pull-requests to the vislib-axis-refactor branch, which will culminate in another huge pr like this.

@spalger spalger closed this Sep 13, 2016
@ppisljar ppisljar mentioned this pull request Sep 13, 2016
Merged
mgadewoll added a commit that referenced this pull request Mar 28, 2025
@mgadewoll @elasticmachine
Upgrade EUI to v101.0.1 (#215698)
2cd777d 
`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>
mgadewoll added a commit to mgadewoll/kibana that referenced this pull request Mar 28, 2025
@mgadewoll
Upgrade EUI to v101.0.1 (elastic#215698)
d9cadca 
`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
@mgadewoll @elasticmachine
[9.0] Upgrade EUI to v101.0.1 (#215698) (#216378)
a2e929b 
# 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
@mgadewoll @elasticmachine @cqliu1
Upgrade EUI to v101.0.1 (elastic#215698)
91b3721 
`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>
mgadewoll added a commit that referenced this pull request Apr 3, 2025
@mgadewoll
[8.x] Upgrade EUI to v101.1.0-classic.0 (#216208)
44e66ff 
>[!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

Reviewers

No reviews

Assignees

@spalger spalger

Labels

Feature:Vislib Vislib chart implementation review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ppisljar @spalger