Added docs

src-docs/src/routes.js

@@ -64,6 +64,9 @@ import { ColorPickerExample }
 import { ContextMenuExample }
   from './views/context_menu/context_menu_example';
 
+import { DelayHideExample }
+  from './views/delay_hide/delay_hide_example';
+
 import { DescriptionListExample }
   from './views/description_list/description_list_example';
 
@@ -226,6 +229,7 @@ const components = [
   CodeExample,
   ColorPickerExample,
   ContextMenuExample,
+  DelayHideExample,
   DescriptionListExample,
   ErrorBoundaryExample,
   ExpressionExample,

src-docs/src/views/delay_hide/delay_hide.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import { EuiDelayHide } from '../../../../src/components/delay_hide';
+import { EuiFlexItem } from '../../../../src/components/flex/flex_item';
+import { EuiCheckbox } from '../../../../src/components/form/checkbox/checkbox';
+import { EuiFormRow } from '../../../../src/components/form/form_row/form_row';
+import { EuiFieldNumber } from '../../../../src/components/form/field_number';
+
+export default class extends Component {
+  state = {
+    minimumDuration: 1000,
+    hide: false
+  };
+
+  onChangeMinimumDuration = event => {
+    this.setState({ minimumDuration: parseInt(event.target.value, 10) });
+  };
+
+  onChangeHide = event => {
+    this.setState({ hide: event.target.checked });
+  };
+
+  render() {
+    return (
+      <div>
+        <EuiFlexItem>
+          <EuiFormRow>
+            <EuiCheckbox
+              id="dummy-id"
+              checked={this.state.hide}
+              onChange={this.onChangeHide}
+              label="Hide child"
+            />
+          </EuiFormRow>
+          <EuiFormRow label="Minimum duration">
+            <EuiFieldNumber
+              value={this.state.minimumDuration}
+              onChange={this.onChangeMinimumDuration}
+            />
+          </EuiFormRow>
+
+          <EuiFormRow label="Child to render">
+            <EuiDelayHide
+              hide={this.state.hide}
+              minimumDuration={this.state.minimumDuration}
+              render={() => <div>Hello world</div>}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </div>
+    );
+  }
+}

src-docs/src/views/delay_hide/delay_hide_example.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import DelayHide from './delay_hide';
+import { GuideSectionTypes } from '../../components';
+import { EuiCode, EuiDelayHide } from '../../../../src/components';
+import { renderToHtml } from '../../services';
+
+const delayHideSource = require('!!raw-loader!./delay_hide');
+const delayHideHtml = renderToHtml(DelayHide);
+
+export const DelayHideExample = {
+  title: 'DelayHide',
+  sections: [
+    {
+      title: 'DelayHide',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: delayHideSource
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: delayHideHtml
+        }
+      ],
+      text: (
+        <p>
+          <EuiCode>DelayHide</EuiCode> is a component for conditionally toggling
+          the visibility of a child component. It will ensure that the child is
+          visible for at least 1000ms (default). This avoids UI glitches that
+          are common with loading spinners and other elements that are rendered
+          conditionally and potentially for a short amount of time.
+        </p>
+      ),
+      props: { EuiDelayHide },
+      demo: <DelayHide />
+    }
+  ]
+};

src/components/index.js

@@ -53,6 +53,10 @@ export {
   EuiContextMenuItem,
 } from './context_menu';
 
+export {
+  EuiDelayHide
+} from './delay_hide';
+
 export {
   EuiDescriptionList,
   EuiDescriptionListTitle,