Skip to content

[EuiEmptyPrompt] Allow horizontal image to be smaller than 50% and added a gap #5663

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cchaos merged 6 commits into from
Mar 2, 2022
Merged

[EuiEmptyPrompt] Allow horizontal image to be smaller than 50% and added a gap #5663

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
17ee981
[EuiEmptyPrompt] Allow horizontal image to be smaller than 50%
Feb 24, 2022
a47ab16
Align `gap` sizing with `paddingSize`
Feb 24, 2022
d88cf01
Fix FF & add a `min-width`
Feb 24, 2022
f32eca7
Update from review
Mar 2, 2022
207b05c
Merge remote-tracking branch 'upstream/main' into empty_prompt/horizo…
Mar 2, 2022
e2ea02f
cl
Mar 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src-docs/src/views/empty_prompt/empty_prompt_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default () => {
return (
<>
<EuiEmptyPrompt
icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
icon={<EuiImage size="l" src={illustration} alt="" />}

@elizabetdev elizabetdev Mar 1, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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:

Screenshot 2022-03-01 at 11 17 53

title={<h2>Create your first visualization</h2>}
layout="horizontal"
color="plain"
Expand Down
19 changes: 11 additions & 8 deletions src/components/empty_prompt/_empty_prompt.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
// Consumers should use an EuiImage (recommended) with the horizontal layout
// But they can use for example an img or other react node
> * {
flex-shrink: 1;
max-width: convertToRem(360px);
}
}
Expand Down Expand Up @@ -89,22 +90,18 @@
display: flex;
align-items: center;
justify-content: center;
}

.euiEmptyPrompt__content {
@include euiBreakpoint('l', 'xl') {
padding: $euiSizeL 0;
min-width: 33%;
max-width: 50%;
}
Comment on lines 94 to 97

@elizabetdev elizabetdev Mar 1, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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%;?

empty-prompt-horizontal@2x

}

.euiEmptyPrompt__contentInner {
.euiEmptyPrompt__content {
max-width: $euiTextConstrainedMaxWidth;
}

.euiEmptyPrompt__icon,
.euiEmptyPrompt__content {
@include euiBreakpoint('l', 'xl') {
width: 50%;
padding: $euiSizeL 0;
}
}

Expand All @@ -122,5 +119,11 @@
.euiEmptyPrompt__footer {
padding: $amount;
}

&.euiEmptyPrompt--horizontal {
.euiEmptyPrompt__main {
gap: $amount; // sass-lint:disable-line no-misspelled-properties
}
}
}
}