Skip to content

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

Description

@ryankeairns

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

  • hasShadowfalse (elevation opt-in)
  • hasBordertrue 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 Token updates: surfaces, radii, borders, semantic spacing #9894 / epic decision: quieter real border color or a shared faux border (box-shadow: 0 0 0 1px …) pattern
  • Spike #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 Defaultspacing.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 Token updates: surfaces, radii, borders, semantic spacing #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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions