[#187] [On Week] Improve and enrich EUI ESLint plugin #8304
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
weronikaolejniczak
added
the
skip-changelog
weronikaolejniczak
changed the title
weronikaolejniczak
added
skip-changelog
weronikaolejniczak
force-pushed
the
chore/187-eslint-plugin-eui
branch
from
d69e9c5 to
7fc8386
Compare
weronikaolejniczak
force-pushed
the
chore/187-eslint-plugin-eui
branch
from
5248aa8 to
93831a6
Compare
Closed
tkajtoch
reviewed
Feb 26, 2025
weronikaolejniczak
force-pushed
the
chore/187-eslint-plugin-eui
branch
from
b8f4827 to
7a40fae
Compare
tkajtoch
approved these changes
Mar 20, 2025
Member
tkajtoch
left a comment
tkajtoch
left a comment
There was a problem hiding this comment.
The changes look good to me now. Thank you for addressing my concerns!
weronikaolejniczak
force-pushed
the
chore/187-eslint-plugin-eui
branch
from
733d059 to
81d88f7
Compare
|
Preview staging links for this PR:
|
Collaborator
💚 Build Succeeded
History
|
This was referenced Mar 26, 2025
weronikaolejniczak
added a commit
to elastic/kibana
that referenced
this pull request
Apr 2, 2025
## Summary Bring in the changes from elastic/eui#8304, specifically ESLint rules: - `no-restricted-eui-imports` - `no-css-color` (migrated from `@kbn/eslint-plugin-css`) - `prefer-css-attribute-for-eui-components` (migrated from `@kbn/eslint-plugin-css`) Relates to elastic/eui#8201, elastic/eui-private#275 ## QA ### Instructions 1. Checkout this branch: `gh pr checkout 210082`. 2. Reinstall dependencies: `yarn kbn bootstrap`. 3. See output of ESLint. There should be no errors. 4. Test below cases. ### Test cases #### `no-restricted-eui-imports` Example files: - JSON imports: `src/platform/packages/shared/kbn-ui-theme/src/theme.ts` - `@kbn/ui-theme`: `src/platform/plugins/private/vis_types/vega/public/data_model/utils.ts` #### `no-css-color` Example file: `src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx:50`  #### `prefer-css-attribute-for-eui-components` Example file: `x-pack/examples/alerting_example/public/alert_types/always_firing.tsx:166`
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 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.
Summary
Closes #187
This PR is part of an On Week initiative to improve the state of the EUI ESLint plugin and enrich with useful rules.
The changes done:
no-restricted-eui-importsrule to display a warning on JSON token importsno-css-colorandprefer-css-attribute-for-eui-componentsfromkbn-eslint-plugin-cssno-css-colorrule: highlights hard-coded colorsprefer-css-attribute-for-eui-componentsrule: recommendscssuse overstyle(inline styles)Potential future changes:
no-restricted-eui-importsI added a new rule to our ESLint plugin,
no-restricted-eui-imports, that won't conflict with the inbuiltno-restricted-importsrule and will allow us to define several error levels at once. I.e. we want some imports to be marked as warning and not an error, as it's done in Kibana.Context:
The JSON token imports in
@kbn/eslint/module_migrationneed to be removed as well:https://github.com/elastic/kibana/blob/212b1926743ca5821992c2877d9c68f621e1875e/packages/kbn-eslint-config/.eslintrc.js#L131-L140
no-css-colorandprefer-css-attribute-for-eui-componentsfromkbn-eslint-plugin-cssWritten by @eokoneyo. We agreed to move the rules to EUI repo, as the rules concern EUI components and may benefit other EUI consumers like Cloud UI.
Example files in Kibana:
src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsxx-pack/examples/alerting_example/public/alert_types/always_firing.tsxWith additional configuration:
src/platform/plugins/private/vis_types/vega/public/data_model/utils.tsUseful resources
typescript-eslinttypescript-eslinttypescript-eslintpackage.jsonQA
yarn workspace @elastic/eslint-plugin-eui test.