[Security Solution][Explore][Data Quality Dashboard] migrate to emotion and use new tokens #205449
Assignees
Labels
8.18 candidate
Team:Threat Hunting:Explore
Team:Threat Hunting
Security Solution Threat Hunting Team
Comments
kapral18
added
Team:Threat Hunting
|
Pinging @elastic/security-threat-hunting (Team:Threat Hunting) |
|
Pinging @elastic/security-threat-hunting-explore (Team:Threat Hunting:Explore) |
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Jan 4, 2025
…s to Emotion Addresses elastic#205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Jan 4, 2025
…s to Emotion Addresses elastic#205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Jan 4, 2025
…s to Emotion Addresses elastic#205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Jan 4, 2025
…s to Emotion Addresses elastic#205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration - Removed ecs_data_quality_dashboard package from packages/kbn-babel-preset/styled_components_files.js so that emotion is properly compiled - Added emotion babel preset to packages/kbn-test/src/jest/transforms/babel.js so that css prop is compiled correctly in tests as well
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Jan 5, 2025
…s to Emotion Addresses elastic#205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration - Removed ecs_data_quality_dashboard package from packages/kbn-babel-preset/styled_components_files.js so that emotion is properly compiled
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Jan 5, 2025
…s to Emotion Addresses elastic#205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration - Removed ecs_data_quality_dashboard package from packages/kbn-babel-preset/styled_components_files.js so that emotion is properly compiled
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Jan 5, 2025
…s to Emotion Addresses elastic#205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration - Removed ecs_data_quality_dashboard package from packages/kbn-babel-preset/styled_components_files.js so that emotion is properly compiled
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Jan 5, 2025
…s to Emotion Addresses elastic#205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration - Removed ecs_data_quality_dashboard package from packages/kbn-babel-preset/styled_components_files.js so that emotion is properly compiled
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Jan 5, 2025
…s to Emotion Addresses elastic#205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration - Removed ecs_data_quality_dashboard package from packages/kbn-babel-preset/styled_components_files.js so that emotion is properly compiled
kapral18
added a commit
that referenced
this issue
Jan 6, 2025
#205559) …s to Emotion Addresses #205449 This PR migrates `ecs_data_quality_dashboard` package from `styled-components` to `emotion`. In the process we also convert the `kbn/ui-theme` json tokens to `euiTheme` counterparts. Additionally we decorate root `babel-jest` [transform](https://github.com/kapral18/kibana/blob/211d4a6889f314eb11761b0bc65f7f93d3b55ffd/packages/kbn-test/src/jest/transforms/babel.js) locally in `security_solution/public/overview` and `ecs_data_quality_dashboard` package folder to include `@emotion/babel-preset-css-prop`. The reason for local `babel-jest` transforms is that root `babel-jest` transform doesn't include `@emotion/babel-preset-css-prop` which is necessary for proper compilation of emotion css prop in tests. Without it there is a warning  appearing in every test that tests a component that uses css prop with theme function passed into it. Other use cases seem to be compiling fine without this babel preset. But theme callback is a valid way of using emotion so we shouldn't avoid using it just because it's not added properly to the test compilation step. Hence I am adding it locally to `ecs_data_quality_dashboard` package and `security_solution/public/overview`. --------- Co-authored-by: kibanamachine <[email protected]>
|
Merged |
kowalczyk-krzysztof
pushed a commit
to kowalczyk-krzysztof/kibana
that referenced
this issue
Jan 7, 2025
elastic#205559) …s to Emotion Addresses elastic#205449 This PR migrates `ecs_data_quality_dashboard` package from `styled-components` to `emotion`. In the process we also convert the `kbn/ui-theme` json tokens to `euiTheme` counterparts. Additionally we decorate root `babel-jest` [transform](https://github.com/kapral18/kibana/blob/211d4a6889f314eb11761b0bc65f7f93d3b55ffd/packages/kbn-test/src/jest/transforms/babel.js) locally in `security_solution/public/overview` and `ecs_data_quality_dashboard` package folder to include `@emotion/babel-preset-css-prop`. The reason for local `babel-jest` transforms is that root `babel-jest` transform doesn't include `@emotion/babel-preset-css-prop` which is necessary for proper compilation of emotion css prop in tests. Without it there is a warning  appearing in every test that tests a component that uses css prop with theme function passed into it. Other use cases seem to be compiling fine without this babel preset. But theme callback is a valid way of using emotion so we shouldn't avoid using it just because it's not added properly to the test compilation step. Hence I am adding it locally to `ecs_data_quality_dashboard` package and `security_solution/public/overview`. --------- Co-authored-by: kibanamachine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See #202506
This ticket is for handling the scope of data quality dashboard package
The text was updated successfully, but these errors were encountered: