[EuiFlyout] Add paddingSize prop #4448
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4448/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4448/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4448/ |
There was a problem hiding this comment.
Here's a quick component review. Nothing major, looks pretty good overall. I also had an idea for the docs that is easier to just show then to type it out, so here is a PR: elizabetdev#10
src/components/flyout/_flyout.scss
Outdated
| .euiFlyout__closeButton { | ||
| @if $paddingAmount == $euiSizeS { | ||
| right: $paddingAmount; | ||
| top: $paddingAmount; | ||
| } @else if $paddingAmount == 0 { | ||
| right: $euiSizeS; | ||
| top: $euiSizeS; | ||
| } @else { | ||
| // The actual size of the X button in pixels is a bit fuzzy because of all the | ||
| // button padding so there is some pixel pushing here. | ||
| right: $paddingAmount - 7px; | ||
| top: $paddingAmount - 7px; | ||
| } | ||
| } |
There was a problem hiding this comment.
I would honestly just leave the close button in one place and not move it around with the padding. This way it's always in the same place for the user no matter what the flyout content is. (It also makes this math less complicated 😜 )
There was a problem hiding this comment.
The close button is now in just one place. 😄
Make example interactive
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
|
Thanks @cchaos, for the suggestions and PR. The example looks much better now, being more interactive. |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4448/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4448/ |
elizabetdev
changed the title
elizabetdev
changed the title
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4448/ |
Summary
This PR adds a
paddingSizeprop to EuiFlyout:noneis passed to thepaddingSizethe close button it's overlapping the body but I'm assuming consumers are going to pass into the header content with padding. So the overlap is not going to happen.paddingSizeset tolto keep the original paddings. Consumers won't see any change.Checklist
Checked in mobileChecked Code Sandbox works for the any docs examplesChecked for accessibility including keyboard-only and screenreader modesA changelog entry exists and is marked appropriately