elastic / elastic/eui

[EuiPopover] New padding option between `s` and `m`?

Open
#9,096 4 comments 0 reactions 0 assignees View on GitHub
design decision stale-issue
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

We don't currently offer a 12px padding option for our `EuiPopover` components or any of the subcomponents within (`EuiPopoverTitle`, `EuiPopoverFooter`). We have `s` (8px) and `m` (16px) sizes. Alone, this would be fine. However, there are many situations where our popovers contain other components where there is a padding mismatch (namely `EuiSelectable`) It's a minor thing, but something that has always bugged me.

To my knowledge, `EuiSelectable` only offers list items to have a horizontal padding of 0px or 12px. Ideally, the padding used in the `EuiSelectable` would be able to match the padding for the containing `EuiPopover`, `EuiPopoverTitle`, or `EuiPopoverFooter`, but that isn't presently possible. Should we add a new 12px padding option? And if so, how can we introduce it in a way that doesn't break things (given the small–medium naming convention)?

Alternatively, should we add more padding options for the `EuiSelectable` instead? Or change it's default 12px padding?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.