elastic / elastic/eui

Define a default text style to the Form Row labelAppend prop

Open Beginner friendly
#10,021 0 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

**Requestor**

@joana-cps

**Problem Statement**

The `EuiFormRow` `labelAppend` prop is type any and by default renders a big text that very often needs to be reduced by different solutions manually.

**Proposed Solution**

Provide a more appropriate default style to the text passed to this prop but keep letting pass a custom React element if needed.

Form `16px` and `black` -> `xs` and a `subdued`

**Use Case**

Image

Image

Image

**Value / Impact**

- Brings more consistency
- Removes overhead on tweaking the output manually by different solution teams

**Urgency**

**Do alternatives or workarounds exist?**

**Related code or customizations**

**Additional context (Optional)**

**Designs or Specs (Optional)**

Contributor guide

Open the contributing guide

Research direction

Start by locating the EuiFormRow implementation and its labelAppend prop handling, then inspect nearby component tests or stories. Verify how plain text and custom React elements are rendered, and confirm that plain text uses the requested xs and subdued styling while custom elements remain supported.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.