elastic/kibana

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

Open

#211119 opened on Feb 13, 2025

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

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

Tech stack
typescriptreact
Domain
frontend
Issue type
refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
ReactTypeScriptStyled components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Identify all files in the Detection Engine plugin that use styled components. The issue mentions 65 instances, likely under x pack/plugins/security solution/public/detections/. For each, replace with @emotion's css prop or styled API following EUI migration patterns. Ensure styles render correctly and no regressions. Consult EUI migration guide and existing examples in Kibana.