[EuiTab] Remove inline padding

Open Beginner friendly
#9,817 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

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.

Description

visual refresh
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
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
76

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from elastic/eui

All issues in elastic/eui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.