Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move away from styled-components: Empty prompt page and shared components #206436

Closed
2 tasks
Tracked by #202506
angorayc opened this issue Jan 13, 2025 · 1 comment
Closed
2 tasks
Tracked by #202506

Move away from styled-components: Empty prompt page and shared components #206436

angorayc opened this issue Jan 13, 2025 · 1 comment
Assignees
@kapral18
Labels
Team:Threat Hunting:Explore

Comments

@angorayc
Copy link
Contributor

angorayc commented Jan 13, 2025 •
edited
Loading

Description

  • All usages of JSON tokens have been removed in favor of color tokens, where possible.

Exported legacy JSON tokens will be deprecated in the future and will eventually be replaced with tokens from the EUI theme. We'd appreciate it if teams could spend some time migrating away from these.

Please discontinue use of these and replace them with a JS variable from our theme context.

JSON tokens are anything from:

@elastic/eui/dist/eui_theme_light.json
@elastic/eui/dist/eui_theme_dark.json
import { euiThemeVars } from '@kbn/ui-theme'

For example:
https://github.com/elastic/kibana/blob/main/packages/kbn-visualization-ui-components/components/dimension_buttons/palette_indicator.tsx#L32

Before:

import { euiThemeVars } from '@kbn/ui-theme'
...
height: ${euiThemeVars.euiSizeXS} / 2;

After:

import { useEuiTheme } from '@elastic/eui'
....
const { euiTheme } = useEuiTheme();
...
height: ${euiTheme.size.xs} / 2;
  • Replace usage of euiThemeVars are in styled-components with emotion/react.
    (Let's leave existing usage of emotion/css as it is and deal with them later)
@angorayc angorayc mentioned this issue Jan 13, 2025
Closed
@botelastic botelastic bot added the needs-team Issues missing a team label label Jan 13, 2025
@angorayc angorayc added Team:Threat Hunting:Explore and removed needs-team Issues missing a team label labels Jan 13, 2025
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-threat-hunting-explore (Team:Threat Hunting:Explore)

@angorayc angorayc changed the title Move away from styled-components: Empty prompt page Move away from styled-components: Empty prompt page and shared components Jan 13, 2025
@kapral18 kapral18 self-assigned this Jan 22, 2025
kapral18 added a commit to kapral18/kibana that referenced this issue Feb 10, 2025
@kapral18
[Security Solution][Explore] Migrate from styled-components in shared
d8bdf28 
Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule
  to work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots
@kapral18 kapral18 mentioned this issue Feb 10, 2025
Merged
kapral18 added a commit to kapral18/kibana that referenced this issue Feb 10, 2025
@kapral18
[Security Solution][Explore] Migrate from styled-components in shared
c8176da 
Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule
  to work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots
kapral18 added a commit to kapral18/kibana that referenced this issue Feb 13, 2025
@kapral18
[Security Solution][Explore] Migrate from styled-components in shared
e1f6adf 
Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule
  to work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots
kapral18 added a commit to kapral18/kibana that referenced this issue Feb 13, 2025
@kapral18
[Security Solution][Explore] Migrate from styled-components in shared
435427b 
Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule
  to work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots
kapral18 added a commit that referenced this issue Feb 13, 2025
@kapral18
[Security Solution][Explore] Migrate from styled-components in shared (…
4b4c5ce 
…#210311)

Addresses #206436

- Replace styled-components with @emotion/react and @emotion/styled
across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule to
work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots


https://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7
kapral18 added a commit to kapral18/kibana that referenced this issue Feb 14, 2025
@kapral18
[Security Solution][Explore] Migrate from styled-components in shared (…
4c0e280 
…elastic#210311)

Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled
across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule to
work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots

https://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7
(cherry picked from commit 4b4c5ce)

# Conflicts:
#	packages/kbn-babel-preset/styled_components_files.js
#	x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
#	x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
kapral18 added a commit to kapral18/kibana that referenced this issue Feb 14, 2025
@kapral18
[Security Solution][Explore] Migrate from styled-components in shared (…
1bf77d4 
…elastic#210311)

Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled
across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule to
work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots

https://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7
(cherry picked from commit 4b4c5ce)

# Conflicts:
#	packages/kbn-babel-preset/styled_components_files.js
kapral18 added a commit to kapral18/kibana that referenced this issue Feb 14, 2025
@kapral18
[Security Solution][Explore] Migrate from styled-components in shared (…
9d7e698 
…elastic#210311)

Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled
across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule to
work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots

https://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7
(cherry picked from commit 4b4c5ce)

# Conflicts:
#	packages/kbn-babel-preset/styled_components_files.js
#	x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
#	x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
kapral18 added a commit that referenced this issue Feb 14, 2025
@kapral18 @kibanamachine
[8.x] [Security Solution][Explore] Migrate from styled-components in …
7ed5290 
…shared (#210311) (#211224)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution][Explore] Migrate from styled-components in shared
(#210311)](#210311)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Karen
Grigoryan","email":"karen.grigoryan@elastic.co"},"sourceCommit":{"committedDate":"2025-02-13T16:14:34Z","message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting","Team:Threat Hunting:Explore","backport:version","v8.18.0","EUI
Visual Refresh","v9.1.0","v8.19.0"],"title":"[Security
Solution][Explore] Migrate from styled-components in
shared","number":210311,"url":"https://github.com/elastic/kibana/pull/210311","mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210311","number":210311,"mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
kapral18 added a commit that referenced this issue Feb 14, 2025
@kapral18 @kibanamachine
[8.18] [Security Solution][Explore] Migrate from styled-components in…
ef85e74 
… shared (#210311) (#211226)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[Security Solution][Explore] Migrate from styled-components in shared
(#210311)](#210311)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Karen
Grigoryan","email":"karen.grigoryan@elastic.co"},"sourceCommit":{"committedDate":"2025-02-13T16:14:34Z","message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting","Team:Threat Hunting:Explore","backport:version","v8.18.0","EUI
Visual Refresh","v9.1.0","v8.19.0"],"title":"[Security
Solution][Explore] Migrate from styled-components in
shared","number":210311,"url":"https://github.com/elastic/kibana/pull/210311","mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210311","number":210311,"mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
kapral18 added a commit that referenced this issue Feb 14, 2025
@kapral18
[9.0] [Security Solution][Explore] Migrate from styled-components in …
267f57d 
…shared (#210311) (#211221)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Security Solution][Explore] Migrate from styled-components in shared
(#210311)](#210311)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Karen
Grigoryan","email":"karen.grigoryan@elastic.co"},"sourceCommit":{"committedDate":"2025-02-13T16:14:34Z","message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting","Team:Threat Hunting:Explore","backport:version","v8.18.0","EUI
Visual Refresh","v9.1.0","v8.19.0"],"title":"[Security
Solution][Explore] Migrate from styled-components in
shared","number":210311,"url":"https://github.com/elastic/kibana/pull/210311","mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210311","number":210311,"mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kapral18 kapral18

Labels
Team:Threat Hunting:Explore
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kapral18 @angorayc @elasticmachine