elastic
[Epic] Support container queries in EUI components
Elevator pitch
The new Kibana Chrome will require elements to use responsive styles based on the container they're in, not the size of the screen. We'll add helpers for this in EUI.
✨ Summary
Some Kibana initiatives will need container queries to be implemented soon. I did an investigation spike to see if and how we could implement these, and the epic is a follow-up to that work.
❗ Problem or Opportunity
Until recently, the primary method of creating responsive layouts was using media queries. They allow applying styles based on viewport dimensions and other device characteristics, such as adjusting the layout, controlling what's visible, and setting the size. The biggest limitation to this is that these values tell us nothing about the page's structure and how elements are nested together. We have no idea whether our components are rendered directly in the document or within a narrow section that requires a specific set of styles to look right.
Container queries are made to fix this issue. They allow styling elements based on their container's attributes, like dimensions, scroll position, or even applied styles. They're the solution to having good looking components that adapt to the content of the page, and enable us to build better layouts.
Currently, EUI components use media queries and assume the structure of the page, considering the most likely scenario. This works fine, but is error-prone. Components like EuiDataGrid are used in both wide containers like Discover and narrow flyouts across the product.
🎯 Value
Updating EUI components to work with container queries and providing utility functions to help work with them at scale would be a great enabler and help in initiatives like the new chrome, global flyouts, and more.
🎯 Urgency
Container queries would be very useful for many upcoming initiatives like global flyouts, the new chrome as well as internally for some EUI components, specifically EuiDataGrid and all EUI table components.
🧠 Feasibility & Direction
❓ Open Questions to answer
This work is scheduled for implementation this quarter, which runs August through October.
