Playground System for Live Documentation

[anishagg17]

Summary

Fixes: #3057
used react-view to inculcate Live Documentation along with toggles

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 examples

• Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately

• Checked for accessibility including keyboard-only and screenreader modes

• Recreated knobs component with the EUI form components.

• Extract props from component using docgen

• Add Labels to toggles

Examples

• Accordion
• Bottom Bar
• Flex
• Flyout
• Header
• Horizontal Rule
• Modal
• Nav Drawer
• Page
• Panel
• Popover
• Resizable container
• Spacer
• Breadcrumbs
• Button
• Collapsible nav
• Context Menu
• Control Bar
• Facet
• Key Pad Menu
• Link
• Pagination
• Tree View
• Side Nav
• Steps
• Tabs
• Data grid
• Tables
• In-memory tables
• Aspect ratio
• Avatar
• Badge
• Callout
• Card
• Code
• Comment list
• Description List
• Drag And Drop
• EmptyPrompt
• Health
• Icons
• Image
• List Group
• Loading
• Progress
• Stat
• Text
• Title
• Toast
• ToolTip
• Tour
• Form controls
• Form layouts
• Compressed forms
• Form validation
• SuperSelect
• Combo Box
• Color Selection
• Color Selection
• Code Editor
• Date Picker
• Expression
• Filter Group
• Range sliders
• Search Bar
• Selectable
• Suggest
• Super Date Picker
• Creating charts
• Sizing
• Time series
• Categorical
• Part to whole comparisons
• Accessibility
• Beacon
• Color
• Color Palettes
• Context
• Copy
• CSS utility classes
• Delay Hide
• Delay Render
• Error Boundary
• Focus Trap
• Highlight and mark
• HTML ID Generator
• Inner Text
• I18n
• MutationObserver
• Outside Click Detector
• Overlay Mask
• Portal
• Pretty Duration
• ResizeObserver
• Responsive
• Toggle
• Window Events

[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?

[anishagg17]

I wanted to know the way to establish links between docs-site and playgrounds
currently only one /playgrounds/button playground is added
should the links be same like componentLinkTo as used in guidelines?

[thompsongl]

should the links be same like componentLinkTo as used in guidelines?

I think we can use the simpler react-router Link component, which is how most navigation is done in the docs (<Link to="/playgrounds/button">Buttons</Link>)

[thompsongl]

This is going to be a substantial PR, so let's use this as a feature branch that smaller PRs can merge into (like we're currently doing with the markdown editor work)

So let's work on establishing the correct pattern for the base-level playground here and then target this branch with PRs containing checklist items.

@cchaos can start helping here now that there's something more real to look at.

[anishagg17]

Yes, i am almost done with playground setup. Just some props extraction is remaining, and design stuff
Also I wanted to know

• the structure of directories for the new files
• Should we hide the text fields for aria, className and several other common props ?

[thompsongl]

the structure of directories for the new files

I think the playground.js pattern you have going is fine for now. Keeping the files close to the example files makes sense.

Should we hide the text fields for aria, className and several other common props?

I think yes. Those props won't have any discernible impact when added.

---

Let's shift from adding more component examples and start a spec for what prop types should use which form element. For instance, I noticed that sometimes size props use radio buttons, and sometimes use select elements. And the text input (for size) in Beacon should use a number input. We can have that discussion over in the issue if you'd like.

[thompsongl]

Thanks for getting labels in; they make a big difference for understanding.

I noticed that the code editor has trouble with some jsx syntax

Is that a limitation of ace/brace or something that we can fix with configuration?

[anishagg17]

I have updated the mode to JSX for the editor , it doesn't yields those warnings anymore

[anishagg17]

@thompsongl I tried this configuration for EuiCodeBlock and faced sever issue while selecting fontSize I tried debugging the issue for several hours but could not find what actually causes it,
can you help me out ?

import { PropTypes } from 'react-view';
import { EuiCodeBlock, EuiCode } from '../../../../src/components/';
import propUtilityForPlayground from '../../services/playground/props';

export const codeBlockConfig = () => {
  const docgenInfo = Array.isArray(EuiCodeBlock.__docgenInfo)
    ? EuiCodeBlock.__docgenInfo[0]
    : EuiCodeBlock.__docgenInfo;
  const propsToUse = propUtilityForPlayground(docgenInfo.props);

  propsToUse.language.value = 'html';
  propsToUse.children = {
    type: PropTypes.ReactNode,
    // eslint-disable-next-line quotes
    value: `<div>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </div>`,
    hidden: true,
  };

  propsToUse.inline = {
    ...propsToUse.inline,
    type: PropTypes.Boolean,
    value: false,
  };

  return {
    componentName: 'EuiCodeBlock',
    props: propsToUse,
    scope: {
      EuiCodeBlock,
    },
    imports: {
      '@elastic/eui': {
        named: ['EuiCodeBlock'],
      },
    },
  };
};

[chandlerprall]

The problem is that the labels under fontSize have the for="s" / for="m" / for="l" attributes, which target the first matching ID on the page, in this case they are finding id="s"/"m"/"l" from the paddingSize section. Can the IDs be changed to include the prop name, e.g. id="fontSize_s"?

[anishagg17]

Can the IDs be changed to include the prop name, e.g. id="fontSize_s"?

I had tried that but then the propValue passed is
fontSize="fontSize_s" instead of fontSize="s"

[anishagg17]

now I have fixed the issue. But on changing paddingSize or fontSize no change is observed in EuiCode but the EuiCodeBlock works fine. I tried setting paddingSize in codeSandBox also no change is observed for EuiCode

[thompsongl]

But on changing paddingSize or fontSize no change is observed in EuiCode but the EuiCodeBlock works fine. I tried setting paddingSize in codeSandBox also no change is observed for EuiCode

EuiCode does not really accept paddingSize or fontSize. The props interfaces for EuiCode and EuiCodeBlock should be updated to reflect what props will have functional impact.

[thompsongl]

Do we still need any code from this PR, @anishagg17?

Now that #3681 is merged and we'll work in per-component PRs, should this close?

[anishagg17]

Sure this should be closed