Recursive tree

src-docs/src/routes.js

@@ -146,6 +146,8 @@ import { ProgressExample } from './views/progress/progress_example';
 
 import { RangeControlExample } from './views/range/range_example';
 
+import { RecursiveTreeExample } from './views/recursive_tree/recursive_tree_example';
+
 import { ResizeObserverExample } from './views/resize_observer/resize_observer_example';
 
 import { ResponsiveExample } from './views/responsive/responsive_example';
@@ -305,6 +307,7 @@ const navigation = [
       KeyPadMenuExample,
       LinkExample,
       PaginationExample,
+      RecursiveTreeExample,
       SideNavExample,
       StepsExample,
       TabsExample,

src-docs/src/views/recursive_tree/condensed.js

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { EuiRecursiveTree, EuiToken } from '../../../../src/components';
+
+export class RecursiveTreeCondensed extends React.Component {
+  showAlert = () => {
+    alert('You squashed a bug!');
+  };
+
+  render() {
+    const items = [
+      {
+        label: 'transporter',
+        id: 'transporter',
+        icon: <EuiToken size="xs" iconType="tokenObject" />,
+        children: [
+          {
+            label: 'service',
+            id: 'service',
+            icon: <EuiToken size="xs" iconType="tokenString" />,
+          },
+          {
+            label: 'auth',
+            id: 'auth',
+            icon: <EuiToken size="xs" iconType="tokenObject" />,
+            children: [
+              {
+                label: 'user',
+                id: 'user',
+                icon: <EuiToken size="xs" iconType="tokenVariable" />,
+              },
+              {
+                label: 'pass',
+                id: 'pass',
+                icon: <EuiToken size="xs" iconType="tokenVariable" />,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: 'getContact',
+        id: 'getContact',
+        icon: <EuiToken size="xs" iconType="tokenFunction" />,
+        children: [
+          {
+            label: 'render',
+            id: 'render',
+            icon: <EuiToken size="xs" iconType="tokenFunction" />,
+            children: [
+              {
+                label: 'title',
+                id: 'title',
+                icon: <EuiToken size="xs" iconType="tokenString" />,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: 'postContact',
+        id: 'postContact',
+        icon: <EuiToken size="xs" iconType="tokenFunction" />,
+        children: [
+          {
+            label: 'errors',
+            id: 'errors',
+            icon: <EuiToken size="xs" iconType="tokenConstant" />,
+          },
+          {
+            label: 'mailOptions',
+            id: 'mailOptions',
+            icon: <EuiToken size="xs" iconType="tokenObject" />,
+          },
+        ],
+      },
+      {
+        label: 'smokeMonster',
+        id: 'smokeMonster',
+        icon: <EuiToken size="xs" iconType="tokenMethod" />,
+      },
+    ];
+
+    return (
+      <div style={{ width: '20rem' }}>
+        <EuiRecursiveTree
+          items={items}
+          isCondensed
+          expandByDefault
+          showExpansionArrows
+          aria-label="Document Outline"
+        />
+      </div>
+    );
+  }
+}

src-docs/src/views/recursive_tree/recursive_tree.js

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import {
+  EuiIcon,
+  EuiRecursiveTree,
+  EuiToken,
+} from '../../../../src/components';
+
+export class RecursiveTree extends React.Component {
+  showAlert = () => {
+    alert('You squashed a bug!');
+  };
+
+  render() {
+    const items = [
+      {
+        label: 'Item One',
+        id: 'item_one',
+        icon: <EuiIcon type="folderClosed" />,
+        iconWhenExpanded: <EuiIcon type="folderOpen" />,
+        isExpanded: true,
+        children: [
+          {
+            label: 'Item A',
+            id: 'item_a',
+            icon: <EuiIcon type="document" />,
+          },
+          {
+            label: 'Item B',
+            id: 'item_b',
+            icon: <EuiIcon type="arrowRight" />,
+            iconWhenExpanded: <EuiIcon type="arrowDown" />,
+            children: [
+              {
+                label: 'A Cloud',
+                id: 'item_cloud',
+                icon: <EuiToken iconType="tokenConstant" />,
+              },
+              {
+                label: "I'm a Bug",
+                id: 'item_bug',
+                icon: <EuiToken iconType="tokenEnum" />,
+                callback: this.showAlert,
+              },
+            ],
+          },
+          {
+            label: 'Item C',
+            id: 'item_c',
+            icon: <EuiIcon type="arrowRight" />,
+            iconWhenExpanded: <EuiIcon type="arrowDown" />,
+            children: [
+              {
+                label: 'Another Cloud',
+                id: 'item_cloud2',
+                icon: <EuiToken iconType="tokenConstant" />,
+              },
+              {
+                label: 'Another Bug',
+                id: 'item_bug2',
+                icon: <EuiToken iconType="tokenEnum" />,
+                callback: this.showAlert,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: 'Item Two',
+        id: 'item_two',
+      },
+    ];
+
+    return (
+      <div style={{ width: '20rem' }}>
+        <EuiRecursiveTree items={items} aria-label="Sample Folder Tree" />
+      </div>
+    );
+  }
+}

src-docs/src/views/recursive_tree/recursive_tree_example.js

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode, EuiRecursiveTree } from '../../../../src/components';
+import { EuiRecursiveTreeNode } from './recursive_tree_props';
+import { RecursiveTree } from './recursive_tree';
+import { RecursiveTreeCondensed } from './condensed';
+
+const recursiveTreeSource = require('!!raw-loader!./recursive_tree');
+const recursiveTreeHtml = renderToHtml(RecursiveTree);
+
+const recursiveTreeCondensedSource = require('!!raw-loader!./condensed');
+const recursiveTreeCondensedHtml = renderToHtml(RecursiveTreeCondensed);
+
+export const RecursiveTreeExample = {
+  title: 'Recursive Tree',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: recursiveTreeSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: recursiveTreeHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiRecursiveTree</EuiCode> allows you to render recursive
+            objects, such as a file directory. The <EuiCode>chilldren</EuiCode>{' '}
+            prop takes an array of <EuiCode>nodes</EuiCode>.
+          </p>
+          <p>
+            Keyboard navigation allows users to navigate and interact with the
+            tree using the arrow keys, spacebar, and return.
+          </p>
+          <p>
+            The <EuiCode>icon</EuiCode> prop accepts <EuiCode>EuiIcon</EuiCode>{' '}
+            and <EuiCode>EuiToken</EuiCode> as react nodes. You can also
+            specifiy a different icon for the open state with the{' '}
+            <EuiCode>iconWhenExpanded</EuiCode> prop.
+          </p>
+        </div>
+      ),
+      components: { EuiRecursiveTree },
+      demo: <RecursiveTree />,
+      props: { EuiRecursiveTree, EuiRecursiveTreeNode },
+    },
+    {
+      title: 'Condensed version',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: recursiveTreeCondensedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: recursiveTreeCondensedHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiRecursiveTree</EuiCode> supports a condensed mode with
+            the <EuiCode>isCondensed</EuiCode> prop. When using the condensed
+            version it&apos;s highly recommended to use the small size of{' '}
+            <EuiCode>EuiIcon</EuiCode> and the extra small size of{' '}
+            <EuiCode>EuiToken</EuiCode>. This will help prevent awkard alignment
+            issues when used alongside the{' '}
+            <EuiCode>showExpansionArrows</EuiCode> prop.
+          </p>
+          <p>
+            The <EuiCode>showExpansionArrows</EuiCode> prop provides an
+            additional visual indicator. Ideal for when a tree&apos;s items use
+            icons that don&apos;t immediately let a user know that there are
+            nested nodes that may not be visible.
+          </p>
+          <p>
+            In some cases, you may want to automatically expand all the items
+            with children. In those instances, you can use the{' '}
+            <EuiCode>expandByDefault</EuiCode> prop, as seen in the example
+            below.
+          </p>
+        </div>
+      ),
+      components: { EuiRecursiveTree },
+      demo: <RecursiveTreeCondensed />,
+      props: { EuiRecursiveTree, EuiRecursiveTreeNode },
+    },
+  ],
+};

src-docs/src/views/recursive_tree/recursive_tree_props.tsx

@@ -0,0 +1,4 @@
+import React, { FunctionComponent } from 'react';
+import { Node } from '../../../../src/components/recursive_tree/recursive_tree';
+
+export const EuiRecursiveTreeNode: FunctionComponent<Node> = () => <div />;

src/components/button/button_empty/button_empty.tsx

@@ -71,7 +71,7 @@ interface CommonEuiButtonEmptyProps extends CommonProps {
   isLoading?: boolean;
 
   type?: 'button' | 'submit';
-  buttonRef?: () => void;
+  buttonRef?: (ref: HTMLButtonElement | HTMLAnchorElement | null) => void;
   /**
    * Passes props to `euiButtonEmpty__content` span
    */

src/components/index.js

@@ -220,6 +220,8 @@ export { EuiPortal } from './portal';
 
 export { EuiProgress } from './progress';
 
+export { EuiRecursiveTree } from './recursive_tree';
+
 export { EuiResizeObserver } from './observer/resize_observer';
 
 export { EuiSearchBar, Query, Ast } from './search_bar';

src/components/index.scss

@@ -45,6 +45,7 @@
 @import 'popover/index';
 @import 'portal/index';
 @import 'progress/index';
+@import 'recursive_tree/index';
 @import 'side_nav/index';
 @import 'spacer/index';
 @import 'search_bar/index';
@@ -59,4 +60,4 @@
 @import 'token/index';
 @import 'toggle/index';
 @import 'tool_tip/index';
-@import 'text/index';
+@import 'text/index';