elastic / elastic/eui

[EuiTab] Remove inline padding

Open Beginner friendly
#9,817 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

#### Request
Remove the inline padding on `EuiTab`

#### Reason
"Should I align surrounding content to the text label or edge/border?"
Let's eliminate this question and, in turn, the small padding workarounds that exist today by making the label and border be flush to the edge. Further, in exploring ways to modernize our UI design, this as a more common and (subjectively) desirable style.

*Example workaround*
| To achieve text alignment... | ...you need custom padding |
|----------|----------|
| Image | Image |

#### Proposed solution
Remove the 4px `padding-inline` from `EuiTab` so that tab content sits flush to edge. This way, surrounding content can similarly sit flush to edge which it naturally does (i.e. no custom padding needed).

| Proposed | Proposed |
|----------|----------|
| Image | Image |

Contributor guide

Open the contributing guide

Research direction

Start by locating the EuiTab component and its styling, then find the 4px padding-inline declaration described in the issue. Remove that padding and verify that the tab label and border sit flush with the edge, including the alignment examples shown in the request.

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
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.