[Layout] New primitives
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
## Description
Layout "flex" primitives (see [docs](https://eui.elastic.co/docs/components/layout/flex/)) could use a refresh. The main problem is responsiveness being directly coupled to the viewport via media queries, which results in bugs, see https://github.com/elastic/kibana/issues/257075
They could also be considered a bit outdated e.g. `EuiFlexGrid` is utterly weird in the fact it has `flex` in the name but uses CSS `grid`.
## Goal
Introduce a new set of layout primitives that are responsive by default and do not depend on the viewport size (media queries).
## Proposed acceptance criteria
- New and modern layout primitives are introduced
- No media queries dependency
- Primitives are easily composable
- Naming: for how these relate to or replace the existing ones, we use common sense; avoid confusing names e.g. `EuiFlexGrid`
- Define a rollout process including deprecation schedules and the path with least breaking changes
- Documentation is updated
- Bonus: a few composition patterns are added to the docs
Contributor guide
Research direction
Start with the existing flex primitives in the EUI layout documentation and review the linked Kibana issue for the responsiveness failures. Define composable primitives that avoid viewport media queries, then document naming, rollout and deprecation plans; done includes updated documentation and, optionally, composition patterns.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100