[EuiPanel] Flat by default, softer corners, simpler padding
- 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
Assessment
This issue has not been assessed yet.