elastic / elastic/eui

[HOLD][EuiFormControlLayout] Quieter borders

Open
#9,897 0 comments 0 reactions 0 assignees 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 (quieter-edge decision)

## Status: HOLD

Do not start until #9894 / epic #9893 settles the quieter-edge approach: **real `1px` border** (optionally quieter color) vs **faux border** (`box-shadow: 0 0 0 1px …`).

## Why hold

Form controls already read theme tokens for rest borders:

- `form.borderColor` → `components.forms.border` → **`colors.borderBasePlain`** (not `euiTheme.border.color` / `borderBaseSubdued`)
- Width is still `border.width.thin` (1px)

So a **color-only** quieting on `borderBasePlain` (or remapping `forms.border`) may propagate to `EuiFormControlLayout` automatically — this issue could then **close as absorbed**.

A **faux-border** system likely needs a shared pattern (Panel + forms), not a one-off on `EuiFormControlLayout`.

## Re-open / keep only if still needed after #9894

- Apply the chosen edge system to forms if it doesn’t land via tokens alone
- **Grouped controls** share one outer edge
- Keep **dividers** within redesigned inputs (appends/prepends)
- Keep existing **focus** design

## Goal (when unblocked)

Quieter default form controls — softer rest edge via the shared system — without a parallel one-off that fights the token / pattern decision.

## Related (not this issue)

Form **corner radius** (`border.radius.control`) is tracked on #9896 — not blocked by the quieter-edge HOLD.

Contributor guide

Open the contributing guide

Research direction

Wait for #9894 and epic #9893 to settle the quieter-edge approach before starting. Then inspect EuiFormControlLayout and the form tokens described here; the work is done only if the chosen shared edge system applies to default and grouped controls, preserves append/prepend dividers and existing focus styling, or is absorbed by the token change.

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
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.