elastic / elastic/eui

[EuiPanel] Flat by default, softer corners, simpler padding

Open
#9,895 1 comment 0 reactions 1 assignee Claimed by @mgadewoll View on GitHub
visual refresh
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

Part of #9893

Depends on: #9894 (panel radius, quieter-edge decision, semantic spacing / `spacing.panelInset`)

## Goal

Flat panels by default: no elevation shadow, visible quieter edge, panel radius, and a tighter preferred padding set.

## Decisions (locked)

### Defaults
- **`hasShadow` → `false`** (elevation opt-in)
- **`hasBorder` → `true`** for the default edged look
- Existing gates stay: border only for `plain` / `transparent`; elevation shadow remains incompatible with border (`canHaveShadow` requires `!hasBorder`)

### Edge treatment (follows #9894)
- Today bordered panels use **`euiTheme.border.color`** (→ `borderBaseSubdued`)
- Quieter edge is **not** a Panel-specific color fork — it follows the #9894 / epic decision: quieter real border color **or** a shared **faux border** (`box-shadow: 0 0 0 1px …`) pattern
- Spike [#9910](https://github.com/elastic/eui/pull/9910) can land flat defaults + panel radius first; final edge recipe may adjust once that decision lands

### Radius
- Apply **`border.radius.panel`** (12) — (today `borderRadius="m"` maps to `border.radius.medium` 4)

### Related: other `border.radius.panel` consumers (design feedback)

Same panel-tier corner (12px) — can land with Panel or as a small follow-up PR once `border.radius.panel` exists (#9903):

- **`EuiCallOut`**
- **`EuiBanner`**
- **`EuiMarkdownEditor`**
- **`EuiModal`**
- **`EuiConfirmModal`**

### Padding options (Panel only)
Reduce documented options; simplify decision making:

| `paddingSize` | Role |
| --- | --- |
| `none` | Flush / nested / split panels |
| `s` | Dense UI |
| `m` | **Default** → `spacing.panelInset` / `size.base` |
| `l` | Roomier sections |

- Soft-deprecate **`xs` / `xl`** on **EuiPanel** only (not a global `PADDING_SIZES` cull)
- Hard removal of `xs`/`xl` is not a blocker for the visual flip

### Sequencing
**Flat defaults + panel radius can land** once `border.radius.panel` exists (#9903 / #9894). Edge quieting follows the #9894 faux-border vs real-border decision. Soft-deprecate padding in the same PR or a follow-up.

## Scope

- Flip defaults: `hasShadow={false}`, `hasBorder={true}`
- Wire `border.radius.panel`
- Edge color / faux-border via shared tokens or pattern from #9894 (no one-off Panel paint)
- Map default / preferred padding to `spacing.panelInset` when the spacing alias exists
- Soft-deprecate Panel `xs`/`xl`; update docs to the preferred set

### Related scope
- Wire CallOut / Banner / MarkdownEditor / Modal / ConfirmModal to `border.radius.panel`

## Out of scope / later

- Hard removal of Panel `xs`/`xl`
- Global `PADDING_SIZES` collapse
- Form-control quieter edges — #9897 (HOLD) / #9894
- Semantic spacing alias definitions themselves — #9894

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.