Eui: 404 & 403 pages as components

[gjones]

As Elastic builds more apps in-house, its becoming apparent that to ensure that platform feel, there are some areas we should be consistent with across those apps. Rather than trying to rebuild these areas in each code base, it seems to make sense to add them as components to EUI.

One such example is 404 / 403 pages, we have them in Cloud already and have another two apps that will be needing them. We initially worked with the marketing team for the illustrations. I would think that a certain level of customisation would be required for the buttons.

Do people agree? I'd be interesting in discussing to see if we think it's a good idea.

Here's the original cloud issue
https://github.com/elastic/cloud/issues/42989

[cchaos]

This is certainly a good opportunity to develop a pattern. I agree that the actions and most likely the description too will need some level of customization. It's very similar to our EuiEmptyPrompt which could be utilized in some fashion for a 404 specific use-case.

As we start incorporating more generic illustrations like this into our patterns, I think EUI needs to come up with a plan on how to properly add and distribute them. Certainly SVG's are easy to convert to JS and so that's most likely the path, but do we also need either a specific component for illustrations with enum's for the different types?

[chandlerprall]

but do we also need either a specific component for illustrations with enum's for the different types

I'd like to avoid issues EuiIcon has with this approach, and instead of calling <Illustration type="blergh"/>, either re-use a thin wrapping in each illustration (<BlerghIllustration/>) or import the illustration type and pass that in,

import {Illustration, Bergh} from '@elastic/eui';
...
<Illustration type={Blergh}/>

[snide]

I 💯 agree with @chandlerprall's approach. One question will be whether we have two illustrations or whether we use the wrapper to allow for css selector changes in color based upon the theme.

I much prefer the later approach, only using one source image and updating its coloring through the theme itself.

Sounds like this would have a couple next steps:

• Develop an EuiIllustration component that has some opinionated css selectors.
• Figure out where we store the assets for these illustrations
• Publish a pattern for this specific example.

[cchaos]

I'm good with whatever approach to an EuiIllustration component. Would love it if an engineer could tackle that portion.

As for where to store the illustrations, should we consider that these are brand-specific and don't want to open-source them or are we good with allowing public access to them?

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.