[Docs] Consolidated tabs for Examples-Guidelines-Playground

[anishagg17]

Summary

Fixes: #3649

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox
- [ ] Props have proper autodocs
- [ ] Added documentation
- [ ] Checked Code Sandbox works for the any docs examples
- [ ] Added or updated jest tests
- [ ] Checked for breaking changes and labeled appropriately

• Checked for accessibility including keyboard-only and screenreader modes
  - [ ] A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[snide]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3650/

[thompsongl]

Woah that was quick, @anishagg17!
Looking good after a spot check. I'll take a look at the code tomorrow morning.

[anishagg17]

What about

eui/src-docs/src/views/form_layouts/form_layouts_example.js

Line 47 in 01a808c

<Link to="/guidelines/forms">forms usage guidelines</Link>.

this link

[thompsongl]

this link

Brings up a good question. Ideally I think we'd want a permalink system to navigate directly to a specific tab inside of a component page. Without committing any code yet, does react-router have a way to handle this?

[anishagg17]

does react-router have a way to handle this

Yes , I have used react-router to fix it but the only query arises with the fallback

If user goes to navigation/button/guidelines/something what should be the output guidelines page or the examples page ?

Also , I wanted to know if intro should be displayed with all tabs or the examples tab only?

[thompsongl]

If user goes to navigation/button/guidelines/something what should be the output guidelines page or the examples page ?

What's the something in this case? A sub-link in the nav sidebar below "Button"?

Also , I wanted to know if intro should be displayed with all tabs or the examples tab only?

Intro is only for Examples

[anishagg17]

What's the something in this case? A sub-link in the nav sidebar below "Button"?

No, i mean if we use react-router then users can alter the link themselves and it might appear like navigation/button/guidelines/anything

navigation/button/guidelines/ (exact) would show the content of guidelines page.
Should any change be ignored ,i.e, both navigation/button/guidelines/anything and navigation/button/guidelines/ should display the content of guidelines page.

[thompsongl]

Ah, right. Let's ignore everything after guidelines/ for now.

[anishagg17]

Should I push the commit now then?

[thompsongl]

Sure, let's try it out

[anishagg17]

Updated 🤗

[anishagg17]

Just a small question , Should we supply only the configuration file of each playground to the GuidePage (and thereby creating it's UI) instead of creating whole UI for the playground and then supplying the component to the GuidePage as it would save a lot of code.

For example : we are supplying the config file for examples

[thompsongl]

Not sure I fully understand.

Let's take https://github.com/elastic/eui/pull/3650/files#diff-da3173d0dbf7111093e736dc32c71f90R389 as an example (EuiButton playground). Are you suggesting we provide some kind of config object here instead of a component?
If so, what does that config look like?

This also may be a question that can be addressed later. This PR will merge without any playground examples showing, so as long as the choice between config or component does not dramatically alter the tab system technically, it may be best to focus on that problem individually in a separate PR.

[anishagg17]

This PR will merge without any playground examples showing, so as long as the choice between config or component does not dramatically alter the tab system technically, it may be best to focus on that problem individually in a separate PR.

Yes , my question is not related this pr, but related to future pr.

Are you suggesting we provide some kind of config object here instead of a component?

Yes , a config object instead of component as we pass for sections a bit similar.

If so, what does that config look like?

Would mostly consists of props config.

it may be best to focus on that problem individually in a separate PR.

Sure.

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3650/

[thompsongl]

All the basics are here, so let's get a design review from @cchaos

I'll do an eng review afterwards

[cchaos]

Looks great! The mobile version could use a little cleanup but a designer can do a follow-up PR.

Since this is merging into master, we'll just want to be sure to remove the blank Playground pages before merge.

[thompsongl]

Can we set up a forward/redirect for the old Guidelines routes?
It'd be nice for /guidelines/button to redirect to /navigation/button/guidelines and follow that pattern just for the couple pages that moved.

[anishagg17]

This is the new redirect-scheme

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3650/

[thompsongl]

Nice work, @anishagg17!

[anishagg17]

Thanks