Skip to content
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

[Docs EuiEmptyPrompt] Add new page not found illustration #6061

Merged
merged 4 commits into from
Jul 19, 2022
Merged

[Docs EuiEmptyPrompt] Add new page not found illustration #6061

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a3b6a9
[Docs EuiEmptyPrompt] Add new 404 illustration
elizabetdev Jul 19, 2022
863badb
Adding `alt` descriptions
elizabetdev Jul 19, 2022
b30a6a9
Update src-docs/src/views/empty_prompt/_types_of_use_cases.tsx
elizabetdev Jul 19, 2022
81f1d26
Better `alt` description
elizabetdev Jul 19, 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
Binary file removed src-docs/src/images/empty-prompt/404_rainy_cloud_dark.png
View file
Open in desktop
Binary file not shown.
Binary file removed src-docs/src/images/empty-prompt/404_rainy_cloud_light.png
View file
Open in desktop
Binary file not shown.
Binary file added src-docs/src/images/empty-prompt/pageNotFound--dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src-docs/src/images/empty-prompt/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src-docs/src/images/empty-prompt/pageNotFound--light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src-docs/src/images/empty-prompt/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion src-docs/src/views/empty_prompt/_types_of_empty_states.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,9 +150,16 @@ export default () => {
const iconImg: string = isDarkTheme
? currentUseCaseExample.iconDark!
: currentUseCaseExample.iconLight!;
const iconImg2x: string = isDarkTheme
? currentUseCaseExample.iconDark2x!
: currentUseCaseExample.iconLight2x!;

const hasRetinaImage = iconImg2x !== '';

const srcSet = hasRetinaImage ? `${iconImg} 1x, ${iconImg2x} 2x` : '';

icon = {
icon: <EuiImage size="fullWidth" src={iconImg} alt="" />,
icon: <EuiImage size="fullWidth" alt="" srcSet={srcSet} src={iconImg} />,
};
}

Expand Down
11 changes: 9 additions & 2 deletions src-docs/src/views/empty_prompt/_types_of_use_cases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,11 @@ import {
IconType,
} from '../../../../src/components';

import pageNotFoundLight from '../../images/empty-prompt/404_rainy_cloud_light.png';
import pageNotFoundDark from '../../images/empty-prompt/404_rainy_cloud_dark.png';
import pageNotFoundDark from '../../images/empty-prompt/pageNotFound--dark.png';
import pageNotFoundLight from '../../images/empty-prompt/pageNotFound--light.png';
import pageNotFoundDark2x from '../../images/empty-prompt/[email protected]';
import pageNotFoundLight2x from '../../images/empty-prompt/[email protected]';

import noResultsLight from '../../images/empty-prompt/no-results--light.svg';
import noResultsDark from '../../images/empty-prompt/no-results--dark.svg';

Expand All @@ -31,6 +34,8 @@ export const typesOfUseCases: {
iconLoading?: ReactNode;
iconLight?: string;
iconDark?: string;
iconLight2x?: string;
iconDark2x?: string;
iconType?: IconType;
title: ReactNode;
body?: ReactNode;
Expand Down Expand Up @@ -218,6 +223,8 @@ export const typesOfUseCases: {
example: {
iconLight: pageNotFoundLight,
iconDark: pageNotFoundDark,
iconLight2x: pageNotFoundLight2x,
iconDark2x: pageNotFoundDark2x,
title: <h2>Page not found</h2>,
body: (
<p>
Expand Down
19 changes: 15 additions & 4 deletions src-docs/src/views/empty_prompt/prompt_types/page_not_found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,30 @@ import {
EuiButtonEmpty,
} from '../../../../../src/components';
import { ThemeContext } from '../../../components/with_theme';
import pageNotFoundLight from '../../../images/empty-prompt/404_rainy_cloud_light.png';
import pageNotFoundDark from '../../../images/empty-prompt/404_rainy_cloud_dark.png';

import pageNotFoundDark from '../../../images/empty-prompt/pageNotFound--dark.png';
import pageNotFoundLight from '../../../images/empty-prompt/pageNotFound--light.png';
import pageNotFoundDark2x from '../../../images/empty-prompt/[email protected]';
import pageNotFoundLight2x from '../../../images/empty-prompt/[email protected]';

export default () => {
const themeContext = useContext(ThemeContext);
const isDarkTheme = themeContext.theme.includes('dark');

const iconImg: string = isDarkTheme ? pageNotFoundDark : pageNotFoundLight;
const pageNotFound = isDarkTheme ? pageNotFoundDark : pageNotFoundLight;
const pageNotFound2x = isDarkTheme ? pageNotFoundDark2x : pageNotFoundLight2x;

return (
<EuiEmptyPrompt
color="subdued"
icon={<EuiImage size="fullWidth" src={iconImg} alt="" />}
icon={
<EuiImage
size="fullWidth"
srcSet={`${pageNotFound} 1x, ${pageNotFound2x} 2x`}
src={pageNotFound}
alt=""
/>
}
Copy link
Contributor Author

@elizabetdev elizabetdev Jul 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

@thompsongl this is a pattern that I would like to get solved for our EuiIllustration project.

We're going to use .png as agreed with the Design team. Should we enforce retina images and a fallback for non-retina displays?

Let me know what do you think?

Once the EuiIllustration is ready we should replace all the <EuiEmptyPrompt icon={<EuiImage />} /> with <EuiEmptyPrompt icon={<EuiIllustration />} />.

Copy link
Contributor

Choose a reason for hiding this comment

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

srcSet!

Should we enforce retina images and a fallback for non-retina displays?

We should definitely have strong recommendations in documentation for supporting multiple screen resolutions, but the only way I see to enforce it with code would be to throw an error if the 1x or 2x file isn't found.

If I understand EuiIllustration correctly, consumers cannot simply provide custom illustrations. So we will have codeowner/review control over what illustrations are added and can ensure that any new images support multiple resolutions.

title={<h2>Page not found</h2>}
layout="vertical"
body={
Expand Down