elastic/kibana

[Detection Engine] EUI Chore - Remove usage of styled-components

Open

#211,119 opened on Feb 13, 2025

View on GitHub
 (5 comments) (0 reactions) (0 assignees)TypeScript (8,021 forks)batch import
EUI Visual RefreshTeam: SecuritySolutionTeam:Detection EngineTeam:Detection Engineeringeffort:lowgood first issuevalue:high

Repository metrics

Stars
 (19,065 stars)
PR merge metrics
 (Avg merge 1d 16h) (999 merged PRs in 30d)

Description

Summary

As part of the recent EUI Refresh, many instances of our usage of styled-components were removed necessarily as they referenced either outdated or static EUI theme variables. However, there are still several (65, at the time of creating this issue) uses of styled-components that need to be updated.

Why?

The motivation is described well here. Essentially, we are moving toward @emotion for its ability to aggregate styles from multiple component levels, and we cannot use both styled-components and @emotion in the same file.

Contributor guide

Research direction
Locate all files using styled components in the Detection Engine directory and replace them with @emotion following EUI migration guidelines.
Tech stack
typescriptreact
Domain
frontenddeveloper experience
Issue type
Chore
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
TypeScriptReactstyled components@emotion
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60