[ESLint] Warn about static z-index

[weronikaolejniczak]

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!

[weronikaolejniczak]

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 15d9d74
• Documentation website
• Storybook

History

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

cc @weronikaolejniczak

[elasticmachine]

💚 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]

@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.