Skip to content

Deprecate support for React 16#8868

Merged
tkajtoch merged 10 commits intoelastic:mainfrom
tkajtoch:feat/deprecate-react-16
Jul 21, 2025
Merged

Deprecate support for React 16#8868
tkajtoch merged 10 commits intoelastic:mainfrom
tkajtoch:feat/deprecate-react-16

Conversation

@tkajtoch
Copy link
Copy Markdown
Member

@tkajtoch tkajtoch commented Jul 15, 2025 •
edited by mgadewoll
Loading

Summary

Resolves #8578

This PR removes React 16 from peerDependencies and removes related CI steps running tests against React 16 environments.

Why are we making this change?

React 16 reached end-of-life over 4 years ago and no actively maintained projects still use it with modern versions of @elastic/eui internally.

Impact to users

This change doesn't break EUI compatibility with React 16, however, due to dropped support, no further changes will be tested against React 16.

Please upgrade to a modern version of React. If you can't do it immediately, consider v106.0.0 the last EUI version compatible with React 16.

QA

  • Confirm no CI steps related to React 16 run on this PR

@tkajtoch tkajtoch self-assigned this Jul 15, 2025
@tkajtoch tkajtoch added dependencies PRs that update a dependency file tech debt labels Jul 15, 2025
@tkajtoch tkajtoch mentioned this pull request Jul 16, 2025
Closed
1 task
@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jul 16, 2025

💚 Build Succeeded

History

cc @tkajtoch

@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jul 16, 2025

💚 Build Succeeded

History

cc @tkajtoch

@tkajtoch tkajtoch marked this pull request as ready for review July 17, 2025 18:04
@tkajtoch tkajtoch requested a review from a team as a code owner July 17, 2025 18:04
mgadewoll
mgadewoll approved these changes Jul 21, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

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

🟢 Code changes LGTM and CI passed. Thanks for cleaning up legacy support! 🎉

🟢 Tested manually that the following are working as expected:

  • ✅ run and build Storybook
  • ✅ run and build website
  • ✅ run tests yarn test-ci
  • ✅ build EUI
  • ✅ compile eui icons yarn compile-icons
  • ✅ local release (using docker registry)
  • ✅ EUI works as expected in Kibana (installed local packages and ran test:type_check but not CI)

@tkajtoch tkajtoch merged commit 14efaca into elastic:main Jul 21, 2025
6 checks passed
@weronikaolejniczak weronikaolejniczak mentioned this pull request Jul 21, 2025
Merged
weronikaolejniczak added a commit to elastic/kibana that referenced this pull request Jul 23, 2025
@weronikaolejniczak
Upgrade EUI to v106.1.0 and ESLint plugin to v2.2.1 (#228828)
d7aca7b 
`@elastic/eui`: `106.0.0` ⏩ `106.1.0`
`@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.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)

New props and defaults have been added to `EuiFlyout`, including
`includeSelectorInFocusTrap`, plus new global CSS variables for push
mode offset control. Additionally, we introduced a small spacing fix for
invalid `EuiDualRange` append component and added support for custom
styles on `EuiTreeView` nodes via the css key.

:warning: **React 16 is now deprecated:** EUI no longer tests against it
or fixes issues specific to it.

## Changes

- I removed forced click in:
`x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts`
- I removed `{enter}` in:
`x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts`
(see #228517)

## Package updates

### `@elastic/eui`

#### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0)

- Added `--euiPushFlyoutOffsetInlineStart` and
`--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the
`EuiFlyout` in `push` mode.
([#8872](elastic/eui#8872))
- Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange`
([#8866](elastic/eui#8866))
- Added `includeSelectorInFocusTrap` prop for `EuiFlyout`
([#8849](elastic/eui#8849))
- Added component defaults for `EuiFlyout` that include
`includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap`
([#8849](elastic/eui#8849))

**Bug fixes**

- Fixed flaky manual return focus behavior on `EuiFlyout` by relying on
`FocusTrap` returning focus instead
([#8878](elastic/eui#8878))
- Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape`
keypress ([#8878](elastic/eui#8878))
- Fixed support for `css` key in items object passed to `EuiTreeView`
([#8864](elastic/eui#8864))

**Deprecations**

- Deprecated support for React 16. Please update to a modern version of
React or stay on EUI version 106.0.0 if you can't switch right now.
([#8868](elastic/eui#8868))
  
### `@elastic/eslint-plugin-eui`

####
[`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1)

**Bug fixes**

- Removed `no-css_color` entry which mapped to a duplicate
`no-css-color` rule ([#8888](elastic/eui#8888))

####
[`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0)

- Added new `prefer-eui-icon-tip` rule.
([#8877](elastic/eui#8877))
kertal pushed a commit to kertal/kibana that referenced this pull request Jul 25, 2025
@weronikaolejniczak @kertal
Upgrade EUI to v106.1.0 and ESLint plugin to v2.2.1 (elastic#228828)
382fc86 
`@elastic/eui`: `106.0.0` ⏩ `106.1.0`
`@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.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)

New props and defaults have been added to `EuiFlyout`, including
`includeSelectorInFocusTrap`, plus new global CSS variables for push
mode offset control. Additionally, we introduced a small spacing fix for
invalid `EuiDualRange` append component and added support for custom
styles on `EuiTreeView` nodes via the css key.

:warning: **React 16 is now deprecated:** EUI no longer tests against it
or fixes issues specific to it.

## Changes

- I removed forced click in:
`x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts`
- I removed `{enter}` in:
`x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts`
(see elastic#228517)

## Package updates

### `@elastic/eui`

#### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0)

- Added `--euiPushFlyoutOffsetInlineStart` and
`--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the
`EuiFlyout` in `push` mode.
([elastic#8872](elastic/eui#8872))
- Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange`
([elastic#8866](elastic/eui#8866))
- Added `includeSelectorInFocusTrap` prop for `EuiFlyout`
([elastic#8849](elastic/eui#8849))
- Added component defaults for `EuiFlyout` that include
`includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap`
([elastic#8849](elastic/eui#8849))

**Bug fixes**

- Fixed flaky manual return focus behavior on `EuiFlyout` by relying on
`FocusTrap` returning focus instead
([elastic#8878](elastic/eui#8878))
- Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape`
keypress ([elastic#8878](elastic/eui#8878))
- Fixed support for `css` key in items object passed to `EuiTreeView`
([elastic#8864](elastic/eui#8864))

**Deprecations**

- Deprecated support for React 16. Please update to a modern version of
React or stay on EUI version 106.0.0 if you can't switch right now.
([elastic#8868](elastic/eui#8868))
  
### `@elastic/eslint-plugin-eui`

####
[`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1)

**Bug fixes**

- Removed `no-css_color` entry which mapped to a duplicate
`no-css-color` rule ([elastic#8888](elastic/eui#8888))

####
[`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0)

- Added new `prefer-eui-icon-tip` rule.
([elastic#8877](elastic/eui#8877))
eokoneyo pushed a commit to eokoneyo/kibana that referenced this pull request Jul 31, 2025
@weronikaolejniczak @eokoneyo
Upgrade EUI to v106.1.0 and ESLint plugin to v2.2.1 (elastic#228828)
a78c2fb 
`@elastic/eui`: `106.0.0` ⏩ `106.1.0`
`@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.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)

New props and defaults have been added to `EuiFlyout`, including
`includeSelectorInFocusTrap`, plus new global CSS variables for push
mode offset control. Additionally, we introduced a small spacing fix for
invalid `EuiDualRange` append component and added support for custom
styles on `EuiTreeView` nodes via the css key.

:warning: **React 16 is now deprecated:** EUI no longer tests against it
or fixes issues specific to it.

## Changes

- I removed forced click in:
`x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts`
- I removed `{enter}` in:
`x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts`
(see elastic#228517)

## Package updates

### `@elastic/eui`

#### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0)

- Added `--euiPushFlyoutOffsetInlineStart` and
`--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the
`EuiFlyout` in `push` mode.
([elastic#8872](elastic/eui#8872))
- Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange`
([elastic#8866](elastic/eui#8866))
- Added `includeSelectorInFocusTrap` prop for `EuiFlyout`
([elastic#8849](elastic/eui#8849))
- Added component defaults for `EuiFlyout` that include
`includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap`
([elastic#8849](elastic/eui#8849))

**Bug fixes**

- Fixed flaky manual return focus behavior on `EuiFlyout` by relying on
`FocusTrap` returning focus instead
([elastic#8878](elastic/eui#8878))
- Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape`
keypress ([elastic#8878](elastic/eui#8878))
- Fixed support for `css` key in items object passed to `EuiTreeView`
([elastic#8864](elastic/eui#8864))

**Deprecations**

- Deprecated support for React 16. Please update to a modern version of
React or stay on EUI version 106.0.0 if you can't switch right now.
([elastic#8868](elastic/eui#8868))
  
### `@elastic/eslint-plugin-eui`

####
[`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1)

**Bug fixes**

- Removed `no-css_color` entry which mapped to a duplicate
`no-css-color` rule ([elastic#8888](elastic/eui#8888))

####
[`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0)

- Added new `prefer-eui-icon-tip` rule.
([elastic#8877](elastic/eui#8877))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mgadewoll mgadewoll mgadewoll approved these changes

Assignees

@tkajtoch tkajtoch

Labels

dependencies PRs that update a dependency file tech debt

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Deprecate Support for React 16

4 participants

@tkajtoch @elasticmachine @mgadewoll @JasonStoltz