elastic / elastic/eui

[Layout] New primitives

Open
#9,867 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.