[Docs] Re-organize Data grid docs

scripts/a11y-testing.js

@@ -11,9 +11,6 @@ const docsPages = async (root, page) => {
     `${root}#/forms/color-selection`,
     `${root}#/forms/date-picker`,
     `${root}#/forms/super-date-picker`,
-    `${root}#/tabular-content/data-grid-styling-and-control`,
-    `${root}#/tabular-content/data-grid-virtualization`,
-    `${root}#/tabular-content/data-grid-row-heights-options`,
   ];
 
   return [

src-docs/src/routes.js

@@ -80,17 +80,12 @@ import { ControlBarExample } from './views/control_bar/control_bar_example';
 
 import { CopyExample } from './views/copy/copy_example';
 
-import { DataGridExample } from './views/datagrid/datagrid_example';
-import { DataGridMemoryExample } from './views/datagrid/datagrid_memory_example';
-import { DataGridSchemaExample } from './views/datagrid/datagrid_schema_example';
-import { DataGridCellPopoverExample } from './views/datagrid/datagrid_cell_popover_example';
-import { DataGridFocusExample } from './views/datagrid/datagrid_focus_example';
-import { DataGridStylingExample } from './views/datagrid/datagrid_styling_example';
-import { DataGridControlColumnsExample } from './views/datagrid/datagrid_controlcolumns_example';
-import { DataGridFooterRowExample } from './views/datagrid/datagrid_footer_row_example';
-import { DataGridVirtualizationExample } from './views/datagrid/datagrid_virtualization_example';
-import { DataGridRowHeightOptionsExample } from './views/datagrid/datagrid_height_options_example';
-import { DataGridRefExample } from './views/datagrid/datagrid_ref_example';
+import { DataGridExample } from './views/datagrid/basics/datagrid_example';
+import { DataGridCellsExample } from './views/datagrid/cells_popovers/datagrid_cells_example';
+import { DataGridToolbarExample } from './views/datagrid/toolbar/datagrid_toolbar_example';
+import { DataGridColumnsExample } from './views/datagrid/schema_columns/datagrid_columns_example';
+import { DataGridStylingExample } from './views/datagrid/styling/datagrid_styling_example';
+import { DataGridAdvancedExample } from './views/datagrid/advanced/datagrid_advanced_example';
 
 import { DatePickerExample } from './views/date_picker/date_picker_example';
 
@@ -480,24 +475,6 @@ const navigation = [
       TreeViewExample,
     ].map((example) => createExample(example)),
   },
-  {
-    name: 'Tabular content',
-    items: [
-      DataGridExample,
-      DataGridMemoryExample,
-      DataGridSchemaExample,
-      DataGridCellPopoverExample,
-      DataGridFocusExample,
-      DataGridStylingExample,
-      DataGridControlColumnsExample,
-      DataGridFooterRowExample,
-      DataGridVirtualizationExample,
-      DataGridRowHeightOptionsExample,
-      DataGridRefExample,
-      TableExample,
-      TableInMemoryExample,
-    ].map((example) => createExample(example)),
-  },
   {
     name: 'Display',
     items: [
@@ -547,6 +524,19 @@ const navigation = [
       SuperSelectExample,
     ].map((example) => createExample(example)),
   },
+  {
+    name: 'Tabular content',
+    items: [
+      DataGridExample,
+      DataGridColumnsExample,
+      DataGridCellsExample,
+      DataGridToolbarExample,
+      DataGridStylingExample,
+      DataGridAdvancedExample,
+      TableExample,
+      TableInMemoryExample,
+    ].map((example) => createExample(example)),
+  },
   {
     name: 'Editors & syntax',
     items: [

src-docs/src/services/index.js

@@ -6,6 +6,8 @@ export {
   listExtraDeps,
 } from './string/clean_imports';
 
+export { getPropsFromComponent } from './props/get_props';
+
 export { registerTheme, applyTheme } from './theme/theme';
 
 export { ExampleContext, useExitPath } from './routing/routing';

src-docs/src/services/playground/knobs.js

@@ -25,15 +25,23 @@ import {
   EuiPanel,
   EuiMarkdownFormat,
 } from '../../../../src/components/';
-import { parsingPluginList, processingPluginList } from './markdown_format';
+import {
+  parsingPluginList,
+  processingPluginListWithLinkedProps,
+  processingPluginListWithBoldProps,
+} from '../props/markdown_format';
 
-export const markup = (text) => {
+export const markup = (text, isPlayground) => {
   return (
     <EuiMarkdownFormat
       textSize="xs"
       color="subdued"
       parsingPluginList={parsingPluginList}
-      processingPluginList={processingPluginList}
+      processingPluginList={
+        isPlayground
+          ? processingPluginListWithBoldProps
+          : processingPluginListWithLinkedProps
+      }
     >
       {text}
     </EuiMarkdownFormat>
@@ -449,7 +457,7 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
               <>
                 <EuiSpacer size="xs" />
 
-                {markup(state[name].description)}
+                {markup(state[name].description, isPlayground)}
               </>
             )}
           </div>

src-docs/src/services/props/get_description.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { EuiMarkdownFormat, EuiMarkdownFormatProps } from '../../../../src';
+
+import {
+  parsingPluginList,
+  processingPluginListWithBoldProps,
+  // @ts-ignore Importing from JS
+} from './markdown_format';
+
+export function getDescriptionSmall(
+  type: any,
+  markdownProps?: Partial<EuiMarkdownFormatProps>
+) {
+  return getDescription(type, {
+    textSize: 'xs',
+    color: 'subdued',
+    ...markdownProps,
+  });
+}
+
+export function getDescription(
+  type: any,
+  markdownProps?: Partial<EuiMarkdownFormatProps>
+) {
+  if (type?.description) {
+    return (
+      <EuiMarkdownFormat
+        textSize="s"
+        parsingPluginList={parsingPluginList}
+        processingPluginList={processingPluginListWithBoldProps}
+        {...markdownProps}
+      >
+        {type.description}
+      </EuiMarkdownFormat>
+    );
+  }
+}

src-docs/src/services/props/get_props.tsx

@@ -0,0 +1,14 @@
+import { useView } from 'react-view';
+
+// @ts-ignore NOT TS
+import { propUtilityForPlayground } from '../../services/playground';
+
+export function getPropsFromComponent(component: any) {
+  const docgenInfo = Array.isArray(component.__docgenInfo)
+    ? component.__docgenInfo[0]
+    : component.__docgenInfo;
+  const { props } = docgenInfo;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const params = useView({ props: propUtilityForPlayground(props) });
+  return params.knobProps.state;
+}

src-docs/src/services/props/markdown_format/index.js

@@ -0,0 +1,5 @@
+export {
+  parsingPluginList,
+  processingPluginListWithLinkedProps,
+  processingPluginListWithBoldProps,
+} from './plugin_list';

src-docs/src/services/playground/markdown_format/plugin_list.js → src-docs/src/services/props/markdown_format/plugin_list.js

@@ -4,7 +4,8 @@ import { getDefaultEuiMarkdownProcessingPlugins } from '../../../../../src/compo
 
 import {
   PropsLinkMarkdownParser,
-  PropsLinkMarkdownRenderer,
+  PropsLinkRenderer,
+  PropsBoldRenderer,
 } from './props_link_plugin';
 
 export const parsingPluginList = [
@@ -15,5 +16,8 @@ export const parsingPluginList = [
   [PropsLinkMarkdownParser, {}],
 ];
 
-export const processingPluginList = getDefaultEuiMarkdownProcessingPlugins();
-processingPluginList[1][1].components.propsLinkPlugin = PropsLinkMarkdownRenderer;
+export const processingPluginListWithLinkedProps = getDefaultEuiMarkdownProcessingPlugins();
+processingPluginListWithLinkedProps[1][1].components.propsLinkPlugin = PropsLinkRenderer;
+
+export const processingPluginListWithBoldProps = getDefaultEuiMarkdownProcessingPlugins();
+processingPluginListWithBoldProps[1][1].components.propsLinkPlugin = PropsBoldRenderer;

src-docs/src/services/playground/markdown_format/props_link_plugin.js → src-docs/src/services/props/markdown_format/props_link_plugin.js

@@ -25,11 +25,15 @@ export function PropsLinkMarkdownParser() {
   methods.splice(methods.indexOf('text'), 0, 'propsLink');
 }
 
-export const PropsLinkMarkdownRenderer = ({ propId }) => {
+export const PropsLinkRenderer = ({ propId }) => {
   const onClick = () => {
     document.getElementById(propId).scrollIntoView();
     window.scrollBy(0, -48); // Account for sticky header height
   };
 
   return <EuiLink onClick={onClick}>{propId}</EuiLink>;
 };
+
+export const PropsBoldRenderer = ({ propId }) => {
+  return <strong>{propId}</strong>;
+};

src-docs/src/views/datagrid/_props_table.tsx

@@ -0,0 +1,115 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  EuiCodeBlock,
+  EuiBasicTable,
+  EuiBasicTableProps,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import { getPropsFromComponent } from '../../services/props/get_props';
+import { getDescription } from '../../services/props/get_description';
+
+export interface BasicItem {
+  id: string;
+  prop: string;
+  type?: any;
+  sample?: any;
+  link?: any;
+}
+
+export const DataGridPropsTable: FunctionComponent<{
+  component: any;
+  exclude?: string[];
+  snippets: any;
+  links?: any;
+}> = ({ component, exclude, snippets, links }) => {
+  const gridProps = getPropsFromComponent(component);
+  const gridPropsKeys = Object.keys(gridProps)
+    .filter((i) => !exclude?.includes(i))
+    .sort();
+
+  const items: BasicItem[] = gridPropsKeys.map((prop) => {
+    return {
+      id: prop,
+      prop: prop,
+      type: gridProps[prop],
+      sample: snippets[prop],
+      link: links && links[prop],
+    };
+  });
+
+  const renderPropDescription = (item: BasicItem) => {
+    const description = getDescription(item.type || item, { color: 'subdued' });
+
+    if (description) {
+      return (
+        <>
+          <EuiSpacer size="s" />
+          {description}
+        </>
+      );
+    }
+  };
+
+  const renderProp = (item: BasicItem) => {
+    if (item.link) {
+      return (
+        <Link to={item.link}>
+          <strong>{item.prop}</strong>
+        </Link>
+      );
+    } else {
+      return <strong>{item.prop}</strong>;
+    }
+  };
+
+  const renderSample = (sample: BasicItem['sample']) => {
+    if (sample) {
+      return (
+        <div style={{ flexGrow: 1 }}>
+          <EuiSpacer />
+          {typeof sample === 'string' ? (
+            <EuiCodeBlock paddingSize="s" language="js" isCopyable>
+              {sample}
+            </EuiCodeBlock>
+          ) : (
+            sample
+          )}
+        </div>
+      );
+    }
+  };
+
+  const columns: EuiBasicTableProps<BasicItem>['columns'] = [
+    {
+      field: 'prop',
+      name: 'Prop',
+      valign: 'top',
+      textOnly: false,
+      render: (prop: ReactNode, item) => (
+        <div>
+          {renderProp(item)}
+          {renderPropDescription(item)}
+        </div>
+      ),
+      mobileOptions: {
+        header: false, // Won't show inline header in mobile view
+        width: '100%', // Applies a specific width
+      },
+    },
+    {
+      field: 'sample',
+      name: 'Sample snippet',
+      align: 'left',
+      valign: 'top',
+      render: (sample: ReactNode) => renderSample(sample),
+      mobileOptions: {
+        header: false, // Won't show inline header in mobile view
+        width: '100%', // Applies a specific width
+      },
+    },
+  ];
+
+  return <EuiBasicTable items={items} columns={columns} />;
+};