eui icon indicating copy to clipboard operation
eui copied to clipboard

Add Emotion utilities to work with container queries

Open tkajtoch opened this issue 4 months ago • 0 comments

Problem Statement

Working with container queries in Emotion is not standardized.

Proposed Solution

EUI should provide utilities to work with container queries, specifically:

  • euiContainer(name: string, type?: ContainerType): string
  • euiContainerCSS(name: string, type?: ContainerType): SerializedStyles
  • euiContainerQuery(conditions: string, containerName?: string): string

Use Case

This will be hugely useful internally in components like EuiDataGrid as well as externally across Kibana, Cloud and other Elastic products.

Value / Impact

See the parent epic.

Urgency

See the parent epic.

Do alternatives or workarounds exist?

It's possible to write the styles by hand, however, having utilities like these allows us to track usage closely, provide linting rules, and more.

tkajtoch avatar Aug 12 '25 10:08 tkajtoch