EUI pattern for in product help

[gchaps]

Sometimes users need more help than can be provided in the UI copy and tooltips. It would be nice to have a pattern for in product help.

I've seen some apps use the flyout on the right. If this is the pattern we want, can we get some guidelines on how to use it, such as width size?

[github-actions]

👋 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.

[gchaps]

Can we revive this issue? This is a topic I'm hearing a lot about from both devs and PMs. Lens is now using a "How it works" pop-up, and ML is following. If this, or any other way type of in-product help is a recommended way for Kibana, we should have guidelines for how to use it.

[miukimiu]

I agree we should have guidelines. I'm going to investigate what is being done in Kibana and see how we can bring some guidelines to EUI.

[cchaos]

Came across this video today that I thought might be helpful. Specifically this callout:

[miukimiu]

Today, @cristina-eleonora, @gchaps, @kyrspl and I, had a meeting and we now have a plan to follow up on this issue.

Finish the Figma prototype

Cristina started this Figma project and the idea is to finish the guidelines there. After that and if we all agree on the content we can move them to our EUI Docs.

A new tabbed page under EUI Docs Guidelines

The idea is to create a new tabbed page called "In-product help" under Guidelines. Following the Writing page structure:

• Guidelines - This page will contain the guidelines
• Examples - This page will contain some components showing some usage examples

[miukimiu]

@cristina-eleonora, @kyrspl, @cchaos just to give some updates what was agreed with @gchaps is the in-product help will live in tech-writing-guidelines. You can find the work in progress here: https://github.com/elastic/tech-writing-guidelines/blob/main/docs/in-prod-help.mdx.

But we also want to make sure EUI follows those guidelines. So in EUI, the idea is to update all the components to reflect those guidelines:

• EuiTooltip - Should have guidelines and the examples should be better
• EuiFlyout - Should also have guidelines (Patterns to trigger a flyout, widths to use)
• EuiPopover - Should also have guidelines.
• EuiLink - We should explain when it's ok to use external={true}. Also provide some examples with Learn more links.

[daveyholler]

@miukimiu will create separate issues for the still-relevant work.