[EuiEmptyPrompt] Allow horizontal image to be smaller than 50% and added a gap#5663
Conversation
|
I did just realize the image could now get really small before the responsive styles kicked in so I added a 1/3 min-width to the image. 🤷♀️ It's still mostly prioritizing the text, which is good, but it does seem awkward. Open to suggestions... |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5663/ |
1 similar comment
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5663/ |
elizabetdev
left a comment
elizabetdev
left a comment
There was a problem hiding this comment.
LGTM! 🎉
I just have a few suggestions.
| <> | ||
| <EuiEmptyPrompt | ||
| icon={<EuiImage size="fullWidth" src={illustration} alt="" />} | ||
| icon={<EuiImage size="l" src={illustration} alt="" />} |
There was a problem hiding this comment.
| icon={<EuiImage size="l" src={illustration} alt="" />} | |
| icon={<EuiImage size="fullWidth" src={illustration} alt="" />} |
The other illustrations have the size "fullWidth". Also we're saying in our docs:
| @include euiBreakpoint('l', 'xl') { | ||
| padding: $euiSizeL 0; | ||
| min-width: 33%; | ||
| max-width: 50%; | ||
| } |
There was a problem hiding this comment.
I did just realize the image could now get really small before the responsive styles kicked in so I added a 1/3 min-width to the image. 🤷♀️ It's still mostly prioritizing the text, which is good, but it does seem awkward. Open to suggestions...
What if instead of a min-width: 33%; we change it to min-width: 40%;?
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5663/ |
3 participants
In Shared UX, we just re-created the
NoDataViewscomponent to use the new horizontal EuiEmptyPrompt pattern:But as you can see, because the image is always forced to be 50% of the container width, it breaks the title text where we don't want it to. In the PR, we ended up forcing (
!important) amax-widthto a fixed number based on the content. This isn't ideal or flexible.Ideally, we'd allow the image to be any size, only max setting it to 50%. That's what I've done in this PR. It still ensures the left side's max-width is the same
$euiTextConstrainedMaxWidthso that text shouldn't grow indefinitely.Before (I've highlighted the image region for better visibility)
After
Example with Kibana's text
I also noticed that there was no margin between the left and right side content so if the image has full color to it's bounds it would touch the text. So I added a
gapsize equal to the specified padding. This was especially evident in the mobile version:Before
After
Checklist
[ ] Props have proper autodocs and playground toggles[ ] Added documentation[ ] Checked Code Sandbox works for any docs examples[ ] Added or updated jest and cypress tests[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes