🎉 Documentation Section Examples Redesign by cchaos · Pull Request #4449 · elastic/eui

cchaos · 2021-01-26T16:53:19Z

... and starting to move towards playgrounds within examples

~~I'll be moving these bits and pieces over to new PR's as some of these updates are already in other PR's and will cause conflicts.~~

The Buttons page is the best example usage of the new pattern.

These are the basic ideas to implement in this PR:

Moves examples to be contained within a panel
Moves the tabs to below the rendered example, but always keeps the render visible when tabbing through the code options
Re-uses the same props table layout/display and component as the playground props table
Makes it available to put the playground directly in a docs section as an alternative example
Starts a pattern of how to better handle the display of non-component docs

We don't need to take this PR and update every playground usage right now, the separate pages still work. We'll just do a slow migration after this PR merges.

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, 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~~ This probably could be better. But I'll be sure to do a follow up
~~[ ] A changelog entry exists and is marked appropriately~~

…ide example

…with tabs

kibanamachine · 2021-01-26T17:16:21Z

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

cchaos · 2021-01-26T20:54:36Z

I've added some more context to the summary of this PR. It's going to mainly be a side-project for me, so it will move slowly. That is unless someone else is keen to take the baton. Just raise your hand here so we know whose currently working on it.

There's still a good amount of refactoring to do and some bug fixes, but overall the pieces are in place.

elizabetdev · 2021-01-27T13:05:42Z

✋🏽 I'm keen to help!

kibanamachine · 2021-02-02T18:19:11Z

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

kibanamachine · 2021-02-05T23:35:12Z

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

# Conflicts: # src-docs/src/views/button/button_ghost.js # src-docs/src/views/button/button_group.js # src-docs/src/views/utility_classes/utility_classes.js

kibanamachine · 2021-02-06T00:00:28Z

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

…f scrollable regions

kibanamachine · 2021-03-11T18:04:27Z

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

cchaos

I'd like to wrap up this PR since I think most dependencies have been merged now. There will still be a time period where we'll need to move all the playgrounds into the examples, but I think its ok to follow up.

There's also PLENTY more do to do cleanup the code, especially with more Typescripting, but another ok for follow up.

The only other thing to consider is if we want to just comment out the getting started section for now until we have better text formatting. @miukimiu ?

cchaos · 2021-03-11T20:44:16Z

src-docs/src/components/guide_section/guide_section.js

-  onSort = (componentName) => {
-    const { sortedComponents } = this.state;
-    if (
-      !sortedComponents[componentName] ||


This table Props column sorting, I think, is the only thing that didn't get moved to the Playground table. It still may be nice to add back in.

src-docs/src/components/guide_section/guide_section.tsx

kibanamachine · 2021-03-11T21:19:29Z

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

elizabetdev · 2021-03-11T21:50:33Z

The only other thing to consider is if we want to just comment out the getting started section for now until we have better text formatting. @miukimiu ?

Yes! I commented out the getting started section. 🙌🏽

kibanamachine · 2021-03-11T22:08:00Z

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

Also fixed some mobile styles

kibanamachine · 2021-03-13T23:45:15Z

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

snide

I did a manual functional test of all our example pages. Overall things work extremely well. These were the only small issues I noticed.

Long prop types no longer scroll within their container.

This one actually happens in all "display" and "form" playgrounds

This one happens in a lot of the charts examples

cchaos · 2021-03-15T20:30:26Z

Long prop types no longer scroll within their container.

Grr... ok 👀

Playgrounds need to be move

Yes, there are a lot of these. And I want to do them in follow ups because I want to evaluate the "right" places to move them to; especially ones that are more than one component. Basically, it require thought and want to get this initial change in first then my task is to fix up all the pages.

Move Guidelines button

😆 You're constantly pushing for this and I honestly don't thing that's a very discoverable place to put such an important navigational element. And how would the button behave? Is it a toggle button? I like the explicit tabs of "Show me the examples vs Show me the Guidelines".

This one happens in a lot of the charts examples

I thought I had this fixed, but likely I just need to adjust for if the tabs don't exist to remove any padding and/or the whole bottom panel.

- Don’t display bottom split panel if no tabs or tabcontent - Fix code blocks in prop table

kibanamachine · 2021-03-15T21:12:08Z

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

snide

Approved on functionality. I think figuring out the consistent pattern for playgrounds should be a follow up.

cchaos · 2021-03-16T16:46:39Z

I think figuring out the consistent pattern for playgrounds should be a follow up.

Yep, immediately! 😸

kibanamachine · 2021-03-16T17:35:10Z

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

cchaos added 13 commits January 23, 2021 16:57

Moving docs tabs to bottom of example and always showing demo

94032a0

Quick addition of playground example and props table into exisitng gu…

e77335f

…ide example

Moving some logic to Knobs

ef5e8ba

Added a couple renderers

9ca76f3

Created a shared GuideSectionExample component for the example panel …

f1363f9

…with tabs

Some cleanup of layout and button props

15dd396

More cleanup

71c462c

Converting the CSS Utility page to the new design

aee6a11

Moving a few more playgrounds and some fixes to the compiler display

52ce290

Moved Facet playground

ac510c3

Moving default to badge

b7e1672

More button group sections

9fcf8c7

Moving a title out of a button group example

3e2b98a

cchaos added the documentation Issues or PRs that only affect documentation - will not need changelog entries label Jan 26, 2021

cchaos mentioned this pull request Jan 27, 2021

Added playground to the PR checklist #4450

Merged

cchaos changed the title ~~[DRAFT] 😯 Docs Redesign-ish~~ [DRAFT] 😯 Documentation Section Examples Redesign Jan 28, 2021

Adding EuiSplitPanel (using render props… meh)

021e001

Fix function reference

ce36dd3

Merge remote-tracking branch 'upstream/master' into move-playground

60d7db6

# Conflicts: # src-docs/src/views/button/button_ghost.js # src-docs/src/views/button/button_group.js # src-docs/src/views/utility_classes/utility_classes.js

cchaos added 5 commits February 5, 2021 19:45

Changing the split panel behavior

cbcf2d1

Updated guidelines examples to use split panel

873decb

Fixing up form guidelines page

563305d

Fix up panels for default theme

6959e2f

Cleaned up button guidelines

3372974

cchaos added 2 commits March 11, 2021 12:29

Fixing a11y test on CSS utility classes and fixing focus indicators o…

cdef674

…f scrollable regions

Better overflow fixes

b69e740

cchaos added 4 commits March 11, 2021 13:46

Fixing a bit more markdown

36c5f0e

Fixing some button examples

b47e5d3

Fix brs in types code

3cc6da3

Cleaning up

6710021

cchaos commented Mar 11, 2021

View reviewed changes

cchaos changed the title ~~[POC] 😯 Documentation Section Examples Redesign~~ 🎉 Documentation Section Examples Redesign Mar 11, 2021

cchaos marked this pull request as ready for review March 11, 2021 21:00

elizabetdev added 2 commits March 11, 2021 21:36

Commenting out getting started section

9c23646

Reverting homepage getting started link

b041944

Moved default to it’s own column again and merged with playground toggle

ade4397

Also fixed some mobile styles

snide self-requested a review March 15, 2021 17:51

snide suggested changes Mar 15, 2021

View reviewed changes

Fixes

a9cdfb5

- Don’t display bottom split panel if no tabs or tabcontent - Fix code blocks in prop table

snide approved these changes Mar 16, 2021

View reviewed changes

Update src-docs/src/components/guide_section/guide_section.tsx

c2cfa93

cchaos merged commit 87803b4 into elastic:master Mar 16, 2021

cchaos deleted the move-playground branch March 16, 2021 19:38

elizabetdev mentioned this pull request Mar 18, 2021

[Docs] Add missing wiki file and fix links #4652

Merged

elizabetdev mentioned this pull request Jul 15, 2021

Consolidate EuiText and EuiMarkdownFormat styling #4663

Merged

6 tasks

Conversation

cchaos commented Jan 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

... and starting to move towards playgrounds within examples

These are the basic ideas to implement in this PR:

Checklist

Uh oh!

kibanamachine commented Jan 26, 2021

Uh oh!

cchaos commented Jan 26, 2021

Uh oh!

elizabetdev commented Jan 27, 2021

Uh oh!

kibanamachine commented Feb 2, 2021

Uh oh!

kibanamachine commented Feb 5, 2021

Uh oh!

kibanamachine commented Feb 6, 2021

Uh oh!

kibanamachine commented Mar 11, 2021

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

cchaos Mar 11, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kibanamachine commented Mar 11, 2021

Uh oh!

elizabetdev commented Mar 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibanamachine commented Mar 11, 2021

Uh oh!

kibanamachine commented Mar 13, 2021

Uh oh!

snide left a comment

Choose a reason for hiding this comment

This one actually happens in all "display" and "form" playgrounds

This one happens in a lot of the charts examples

Uh oh!

cchaos commented Mar 15, 2021

Uh oh!

kibanamachine commented Mar 15, 2021

Uh oh!

snide left a comment

Choose a reason for hiding this comment

Uh oh!

cchaos commented Mar 16, 2021

Uh oh!

kibanamachine commented Mar 16, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cchaos commented Jan 26, 2021 •

edited

Loading

elizabetdev commented Mar 11, 2021 •

edited

Loading