[EuiTab] Remove inline padding
- 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 |
|----------|----------|
| |
|
#### 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 |
|----------|----------|
| |
|
Contributor 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