[ESLint] Warn about static z-index by weronikaolejniczak · Pull Request #9236 · elastic/eui

weronikaolejniczak · 2025-11-24T14:48:15Z

Summary

added a rule that warns about static z-index

Note

This PR was co-authored with Gemini 3 Pro.

Why are we making this change?

Resolves #9230

It was raised as a suggestion on an internal meeting. If people do not reuse euiTheme tokens it's hard to assure the correct hierarchy.

Screenshots #

Impact to users

🟢 No impact. Just a dev warning.

QA

Kibana testing branch prints warnings about static z-index
Kibana testing branch CI checks pass
unit tests are passing

acstll

Tested in Kibana, ran tests locally and it's working nicely, as expected. Added a comment about 2 uses cases I found that hopefully we can also cover. Let me know what you think. Thanks for tackling this one!

packages/eslint-plugin/src/rules/no_static_z_index.test.ts

packages/eslint-plugin/src/rules/no_static_z_index.ts

packages/eslint-plugin/changelogs/upcoming/9236.md

weronikaolejniczak · 2026-01-08T10:38:44Z

@acstll thank you for the review! I addressed your feedback, added new test cases and verified they pass:

elasticmachine · 2026-01-08T10:53:52Z

💚 Build Succeeded

History

💚 Build #2177 succeeded 7b8869b
💚 Build #2115 succeeded fe9080c
💚 Build #2065 succeeded 66ef4bd
💚 Build #2063 succeeded 6782d45

cc @weronikaolejniczak

elasticmachine · 2026-01-08T11:13:33Z

💚 Build Succeeded

Buildkite Build
Commit: 15d9d74

History

💚 Build #5399 succeeded 7b8869b
💚 Build #5352 succeeded fe9080c
💚 Build #5316 succeeded 66ef4bd
💔 Build #5314 failed 6782d45

cc @weronikaolejniczak

acstll

🟢 Thank you @weronikaolejniczak for addressing my comments. I think it's working pretty nicely.

I'm approving because I think it's good enough to ship, and we can improve it in future iterations.

There is a use case not covered (apologies for not seeing this in my first review): for styles defined as variables, functions are not being checked

✅ this gets checked

const myCss = css({ zIndex: 100 });

<MyComponent css={myCss} />

❌ this does not

const myCss = () => css({ zIndex: 100 });

<MyComponent css={myCss} />

There's also the case where styles are defined in a different file, which would be nice to support; but I understand that's out of the scope of this rule as it stands, e.g.

export const styles = {
  root: {
    zIndex: 100,
  },
};

weronikaolejniczak · 2026-01-13T09:52:29Z

@acstll ohh, both cases are worth considering, definitely! I'd love to do this on the PR but I agree with you, it's good enough to ship as is and can be extended in the future. I'll add a task for that.

## Dependency updates - `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0` - `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0` --- ## Package updates ### `@elastic/eui` [v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0) - Added `productDiscover` icon ([#9311](elastic/eui#9311)) - Updated `chartGauge` icon glyph ([#9311](elastic/eui#9311)) - Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash` `faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit` `fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity` `inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash` `lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify` `mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge` `minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested` `number` `package` `paintBucket` `palette` `paperClip` `partial` `pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot` `plusCircle` `plusSquare` `plus` `popper` `presentation` `processor` `productStreamsWired` `queryField` `queryOperand` `querySelector` `queryValue` `query` `question` `quote` `radar` `readOnly` `redo` `reporter` `return` `rocket` `scissors` `send` `shard` `share` `snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop` `sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft` `textAlignRight` `textBold` `textHeading` `textItalic` `textStrike` `textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline` `transitionLeftIn` `transitionLeftOut` `transitionTopIn` `transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer` `warningFill` `waypoint` `wifiSlash` `wifi` ([#9303](elastic/eui#9303)) ([#9303](elastic/eui#9303)) - Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight` `bulb` `cloud` `hourglass` `megaphone` `workflow` ([#9303](elastic/eui#9303)) - Added `headerVisibility` prop on `EuiDataGrid` to support rendering the datagrid header element optionally ([#9281](elastic/eui#9281)) - Updated 244 icon definitions to a more consistent naming convention. All 100 renamed icons include a backward-compatible alias in the icon map to support legacy references. ([#9279](elastic/eui#9279)) - Added icons `briefcase`, `productCloudInfra`, `productDashboard`, `productML` ([#9301](elastic/eui#9301)) - Updated glyphs `bullseye`, `bolt` ([#9301](elastic/eui#9301)) - Added `dismissButtonProps` prop to `EuiCallOut` ([#9285](elastic/eui#9285)) **Bug fixes** - Fixed `EuiFlyout` to properly forward refs when `session` prop is used. ([#9318](elastic/eui#9318)) - Fixed `EuiDataGrid` cells scrolling into view while trying to select text ([#9276](elastic/eui#9276)) **Breaking changes** - Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead. ([#9296](elastic/eui#9296)) **Accessibility** - Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels ([#9282](elastic/eui#9282)) ### `@elastic/eslint-plugin-eui` v2.7.0 - Added `no-static-z-index` rule ([#9236](elastic/eui#9236))

## Dependency updates - `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0` - `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0` --- ## Package updates ### `@elastic/eui` [v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0) - Added `productDiscover` icon ([elastic#9311](elastic/eui#9311)) - Updated `chartGauge` icon glyph ([elastic#9311](elastic/eui#9311)) - Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash` `faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit` `fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity` `inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash` `lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify` `mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge` `minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested` `number` `package` `paintBucket` `palette` `paperClip` `partial` `pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot` `plusCircle` `plusSquare` `plus` `popper` `presentation` `processor` `productStreamsWired` `queryField` `queryOperand` `querySelector` `queryValue` `query` `question` `quote` `radar` `readOnly` `redo` `reporter` `return` `rocket` `scissors` `send` `shard` `share` `snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop` `sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft` `textAlignRight` `textBold` `textHeading` `textItalic` `textStrike` `textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline` `transitionLeftIn` `transitionLeftOut` `transitionTopIn` `transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer` `warningFill` `waypoint` `wifiSlash` `wifi` ([elastic#9303](elastic/eui#9303)) ([elastic#9303](elastic/eui#9303)) - Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight` `bulb` `cloud` `hourglass` `megaphone` `workflow` ([elastic#9303](elastic/eui#9303)) - Added `headerVisibility` prop on `EuiDataGrid` to support rendering the datagrid header element optionally ([elastic#9281](elastic/eui#9281)) - Updated 244 icon definitions to a more consistent naming convention. All 100 renamed icons include a backward-compatible alias in the icon map to support legacy references. ([elastic#9279](elastic/eui#9279)) - Added icons `briefcase`, `productCloudInfra`, `productDashboard`, `productML` ([elastic#9301](elastic/eui#9301)) - Updated glyphs `bullseye`, `bolt` ([elastic#9301](elastic/eui#9301)) - Added `dismissButtonProps` prop to `EuiCallOut` ([elastic#9285](elastic/eui#9285)) **Bug fixes** - Fixed `EuiFlyout` to properly forward refs when `session` prop is used. ([elastic#9318](elastic/eui#9318)) - Fixed `EuiDataGrid` cells scrolling into view while trying to select text ([elastic#9276](elastic/eui#9276)) **Breaking changes** - Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead. ([elastic#9296](elastic/eui#9296)) **Accessibility** - Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels ([elastic#9282](elastic/eui#9282)) ### `@elastic/eslint-plugin-eui` v2.7.0 - Added `no-static-z-index` rule ([elastic#9236](elastic/eui#9236))

weronikaolejniczak self-assigned this Nov 24, 2025

weronikaolejniczak force-pushed the feat/eslint-z-index-warning branch from 6782d45 to 66ef4bd Compare November 24, 2025 15:21

weronikaolejniczak mentioned this pull request Nov 28, 2025

[ESLint] Warn about static z-index elastic/kibana#244650

Closed

weronikaolejniczak force-pushed the feat/eslint-z-index-warning branch 4 times, most recently from 44ecf1e to fe9080c Compare November 28, 2025 14:16

weronikaolejniczak marked this pull request as ready for review November 28, 2025 14:34

weronikaolejniczak requested a review from a team as a code owner November 28, 2025 14:34

weronikaolejniczak added 2 commits December 9, 2025 11:12

feat(eslint-plugin): add a no-static-z-index rule

8b8590a

chore: add changelog

7b8869b

weronikaolejniczak force-pushed the feat/eslint-z-index-warning branch from fe9080c to 7b8869b Compare December 9, 2025 10:12

acstll assigned acstll and unassigned acstll Dec 9, 2025

acstll self-requested a review December 9, 2025 10:14

acstll requested changes Dec 9, 2025

View reviewed changes

packages/eslint-plugin/src/rules/no_static_z_index.test.ts Show resolved Hide resolved

packages/eslint-plugin/src/rules/no_static_z_index.ts Outdated Show resolved Hide resolved

weronikaolejniczak commented Dec 10, 2025

View reviewed changes

packages/eslint-plugin/changelogs/upcoming/9236.md Outdated Show resolved Hide resolved

weronikaolejniczak and others added 2 commits January 8, 2026 11:33

Update packages/eslint-plugin/changelogs/upcoming/9236.md

4f3ba2b

feat: add new cases and fix syntax

15d9d74

weronikaolejniczak requested a review from acstll January 8, 2026 10:37

acstll approved these changes Jan 12, 2026

View reviewed changes

weronikaolejniczak merged commit 0ed1504 into elastic:main Jan 13, 2026
5 checks passed

tkajtoch mentioned this pull request Jan 19, 2026

Update EUI to v112.0.0 elastic/kibana#249573

Merged

weronikaolejniczak added a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026

[ESLint] Warn about static z-index (elastic#9236)

1b54f49

weronikaolejniczak deleted the feat/eslint-z-index-warning branch February 10, 2026 10:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ESLint] Warn about static z-index#9236

[ESLint] Warn about static z-index#9236
weronikaolejniczak merged 4 commits intoelastic:mainfrom
weronikaolejniczak:feat/eslint-z-index-warning

weronikaolejniczak commented Nov 24, 2025 •

edited

Loading

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Jan 8, 2026

Uh oh!

elasticmachine commented Jan 8, 2026

Uh oh!

elasticmachine commented Jan 8, 2026

Uh oh!

acstll left a comment

Uh oh!

weronikaolejniczak commented Jan 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

weronikaolejniczak commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Jan 8, 2026

Uh oh!

elasticmachine commented Jan 8, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jan 8, 2026

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak commented Jan 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

weronikaolejniczak commented Nov 24, 2025 •

edited

Loading