elastic/kibana

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

Open

#211.119 geöffnet am 13. Feb. 2025

Auf GitHub ansehen
 (5 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (19.065 Stars) (8.021 Forks)batch import
EUI Visual RefreshTeam: SecuritySolutionTeam:Detection Engineeffort:lowgood first issuevalue:high

Beschreibung

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
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-2 days
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
mostly clear
Voraussetzungen
ReactTypeScriptStyled components
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
50
Research-Richtung
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.