Flyout component

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 - Updated `euiPopover` to propagate `panelPaddingSize` padding values to content only (title does inherit horizontal values) via CSS. [(#229)](https://github.com/elastic/eui/pull/229)
 - Updated `<EuiErrorBoundary>` to preserve newlines in error. [(#238)[https://github.com/elastic/eui/pull/238]]
+- Added `EuiFlyout` component. [(#227)](https://github.com/elastic/eui/pull/227)
+
+**Breaking changes**
+
+- Renamed `EuiModalOverlay` to `EuiOverlayMask`. [(#227)](https://github.com/elastic/eui/pull/227)
 
 **Bug fixes**
 

src-docs/src/services/routes/routes.js

@@ -65,6 +65,9 @@ import { ExpressionExample }
 import { FlexExample }
   from '../../views/flex/flex_example';
 
+import { FlyoutExample }
+  from '../../views/flyout/flyout_example';
+
 import { FormExample }
   from '../../views/form/form_example';
 
@@ -199,6 +202,7 @@ const components = [
   ErrorBoundaryExample,
   ExpressionExample,
   FlexExample,
+  FlyoutExample,
   FormExample,
   HeaderExample,
   HealthExample,

src-docs/src/views/flyout/flyout.js

@@ -0,0 +1,72 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiButton,
+  EuiText,
+} from '../../../../src/components';
+
+export class Flyout extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isFlyoutVisible: false,
+      isSwitchChecked: true,
+    };
+
+    this.closeFlyout = this.closeFlyout.bind(this);
+    this.showFlyout = this.showFlyout.bind(this);
+  }
+
+  onSwitchChange = () => {
+    this.setState({
+      isSwitchChecked: !this.state.isSwitchChecked,
+    });
+  }
+
+  closeFlyout() {
+    this.setState({ isFlyoutVisible: false });
+  }
+
+  showFlyout() {
+    this.setState({ isFlyoutVisible: true });
+  }
+
+  render() {
+
+    let flyout;
+    if (this.state.isFlyoutVisible) {
+      flyout = (
+        <EuiFlyout
+          onClose={this.closeFlyout}
+        >
+          <EuiFlyoutBody>
+            <EuiText>
+              <p>You can use ESC to close this panel, but we could also pass in a close button like so.</p>
+
+              <EuiButton
+                iconType="cross"
+                onClick={this.closeFlyout}
+              >
+                Close me
+              </EuiButton>
+            </EuiText>
+          </EuiFlyoutBody>
+        </EuiFlyout>
+      );
+    }
+    return (
+      <div>
+        <EuiButton onClick={this.showFlyout}>
+          Show Flyout
+        </EuiButton>
+
+        {flyout}
+      </div>
+    );
+  }
+}

src-docs/src/views/flyout/flyout_complicated.js

@@ -0,0 +1,195 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTabs,
+  EuiTab,
+  EuiText,
+  EuiTextColor,
+} from '../../../../src/components';
+
+export class FlyoutComplicated extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isFlyoutVisible: false,
+      isSwitchChecked: true,
+      selectedTabId: '1',
+    };
+
+    this.tabs = [{
+      id: '1',
+      name: 'Tab 1',
+    }, {
+      id: '2',
+      name: 'Tab 2',
+    }];
+
+    this.closeFlyout = this.closeFlyout.bind(this);
+    this.showFlyout = this.showFlyout.bind(this);
+  }
+
+  onSwitchChange = () => {
+    this.setState({
+      isSwitchChecked: !this.state.isSwitchChecked,
+    });
+  }
+
+  closeFlyout() {
+    this.setState({ isFlyoutVisible: false });
+  }
+
+  showFlyout() {
+    this.setState({ isFlyoutVisible: true });
+  }
+
+  onSelectedTabChanged = id => {
+    this.setState({
+      selectedTabId: id,
+    });
+  }
+
+  renderTabs() {
+    return this.tabs.map((tab, index) => (
+      <EuiTab
+        onClick={() => this.onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === this.state.selectedTabId}
+        key={index}
+      >
+        {tab.name}
+      </EuiTab>
+    ));
+  }
+
+  render() {
+    const flyoutContent = (
+      <EuiText>
+        <p>
+          Far out in the uncharted backwaters of the unfashionable end of
+          the western spiral arm of the Galaxy lies a small unregarded
+          yellow sun.
+        </p>
+
+        <p>
+          Orbiting this at a distance of roughly ninety-two million miles
+          is an utterly insignificant little blue green planet whose ape-
+          descended life forms are so amazingly primitive that they still
+          think digital watches are a pretty neat idea.
+        </p>
+
+        <ul>
+          <li>List item one</li>
+          <li>List item two</li>
+          <li>Dolphins</li>
+        </ul>
+
+        <p>
+          This planet has - or rather had - a problem, which was this: most
+          of the people living on it were unhappy for pretty much of the time.
+          Many solutions were suggested for this problem, but most of these
+          were largely concerned with the movements of small green pieces
+          of paper, which is odd because on the whole it was not the small
+          green pieces of paper that were unhappy.
+        </p>
+
+        <h2>This is Heading Two</h2>
+
+        <ol>
+          <li>Number one</li>
+          <li>Number two</li>
+          <li>Dolphins again</li>
+        </ol>
+
+        <p>
+          But the dog wasn&rsquo;t lazy, it was just
+          practicing mindfulness, so it had a greater sense of
+          life-satisfaction than that fox with all its silly jumping.
+        </p>
+
+        <p>
+          And from the fox&rsquo;s perspective, life was full of hoops to jump <em>through</em>, low-hanging
+          fruit to jump <em>for</em>, and dead car batteries to jump-<em>start</em>.
+        </p>
+
+        <h3>This is Heading Three</h3>
+
+        <p>
+          So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+          What if its car broke down?
+        </p>
+      </EuiText>
+    );
+
+
+    let flyout;
+
+    if (this.state.isFlyoutVisible) {
+      flyout = (
+        <EuiFlyout
+          onClose={this.closeFlyout}
+        >
+          <EuiFlyoutHeader>
+            <EuiTitle>
+              <h2>
+                Flyout header
+              </h2>
+            </EuiTitle>
+            <EuiTextColor color="subdued">
+              <EuiText>
+                <p>Put navigation items in the header, and cross tab actions in a footer.</p>
+              </EuiText>
+            </EuiTextColor>
+            <EuiSpacer size="s" />
+            <EuiTabs>
+              {this.renderTabs()}
+            </EuiTabs>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+            {flyoutContent}
+          </EuiFlyoutBody>
+          <EuiFlyoutFooter>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  iconType="cross"
+                  onClick={this.closeFlyout}
+                >
+                  Close
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  onClick={this.closeFlyout}
+                  fill
+                >
+                  Save
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlyoutFooter>
+        </EuiFlyout>
+      );
+    }
+    return (
+      <div>
+        <EuiButton onClick={this.showFlyout}>
+          Show Flyout
+        </EuiButton>
+
+        {flyout}
+      </div>
+    );
+  }
+}

src-docs/src/views/flyout/flyout_example.js

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+} from '../../../../src/components';
+
+import { Flyout } from './flyout';
+const flyoutSource = require('!!raw-loader!./flyout');
+const flyoutHtml = renderToHtml(Flyout);
+
+import { FlyoutComplicated } from './flyout_complicated';
+const flyoutComplicatedSource = require('!!raw-loader!./flyout_complicated');
+const flyoutComplicatedHtml = renderToHtml(FlyoutComplicated);
+
+import { FlyoutSize } from './flyout_size';
+const flyoutSizeSource = require('!!raw-loader!./flyout_size');
+const flyoutSizeHtml = renderToHtml(FlyoutSize);
+
+export const FlyoutExample = {
+  title: 'Flyout',
+  sections: [
+    {
+      title: 'Flyout',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: flyoutSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: flyoutHtml,
+      }],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiFlyout</EuiCode> is a fixed position panel that pops in
+            from the right side of the screen. It should be used any time you
+            need to perform quick, individual actions to a larger page or list.
+          </p>
+          <ul>
+            <li>
+              <EuiCode>size</EuiCode> accepts <EuiCode>s / m / l</EuiCode> and
+              defines the width of the panel.
+            </li>
+            <li>
+              <EuiCode>ownFocus</EuiCode> is a boolean that
+              when <EuiCode>true</EuiCode> will lock the mouse / keyboard focus
+              to within the flyout. It is off by default.
+            </li>
+          </ul>
+        </div>
+      ),
+      demo: <Flyout />,
+    },
+    {
+      title: 'More complicated Flyout',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: flyoutComplicatedSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: flyoutComplicatedHtml,
+      }],
+      text: (
+        <p>
+          In this example we use <EuiCode>EuiFlyoutHeader</EuiCode> and
+          <EuiCode>EuiFlyoutFooter</EuiCode> to allow for fixed position navigation
+          and actions within a flyout. Note that any content
+          within <EuiCode>EuiContentBody</EuiCode> will automatcially overflow.
+        </p>
+      ),
+      demo: <FlyoutComplicated />,
+    },
+    {
+      title: 'Flyout sizing and focus',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: flyoutSizeSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: flyoutSizeHtml,
+      }],
+      text: (
+        <p>
+          In this example, we set <EuiCode>size</EuiCode> to <EuiCode>s</EuiCode> and
+          aply the <EuiCode>ownFocus</EuiCode> prop. The later not only traps the
+          focus of our flyout, but also adds background overlay to reinforce your
+          boundries.
+        </p>
+      ),
+      demo: <FlyoutSize />,
+    },
+  ],
+};