elastic/kibana

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

Open

#211 119 ouverte le 13 févr. 2025

Voir sur GitHub
 (5 commentaires) (0 réactions) (0 assignés)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.

Guide contributeur

Stack technique
typescriptreact
Domaine
frontend
Type d'issue
refactor
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-2 days
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
fresh
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
mostly clear
Prérequis
ReactTypeScriptStyled components
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
50
Direction de recherche
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.