[EuiSplitPanel] New component

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `panelProps` to `EuiPopover` ([#4573](https://github.com/elastic/eui/pull/4573))
+- Added `EuiSplitPanel` component ([#4539](https://github.com/elastic/eui/pull/4539))
 
 **Bug fixes**
 

src-docs/src/views/panel/panel_example.js

@@ -13,6 +13,10 @@ import {
   EuiText,
   EuiCallOut,
 } from '../../../../src/components';
+import {
+  _EuiSplitPanelOuter,
+  _EuiSplitPanelInner,
+} from '../../../../src/components/panel/split_panel/split_panel';
 
 import { panelConfig } from './playground';
 
@@ -36,6 +40,10 @@ import PanelGrow from './panel_grow';
 const panelGrowSource = require('!!raw-loader!./panel_grow');
 const panelGrowHtml = renderToHtml(PanelGrow);
 
+import SplitPanel from './split_panel';
+const splitPanelSource = require('!!raw-loader!./split_panel');
+const splitPanelHtml = renderToHtml(SplitPanel);
+
 const panelSnippet = `<EuiPanel paddingSize="none">
   <!-- Panel with no padding -->
 </EuiPanel>`;
@@ -62,6 +70,25 @@ const panelGrowSnippet = `<EuiPanel grow={false}>
   <!-- Panel whose height won't grow to match -->
 </EuiPanel>`;
 
+const splitPanelSnippet = [
+  `<EuiSplitPanel.Outer>
+  <EuiSplitPanel.Inner>
+    <!-- Top panel content -->
+  </EuiSplitPanel.Inner>
+  <EuiSplitPanel.Inner color="subdued">
+    <!-- Bottom panel content -->
+  </EuiSplitPanel.Inner>
+</EuiSplitPanel.Outer>`,
+  `<EuiSplitPanel.Outer direction="row">
+  <EuiSplitPanel.Inner>
+    <!-- Left panel content -->
+  </EuiSplitPanel.Inner>
+  <EuiSplitPanel.Inner color="subdued">
+    <!-- Right panel content -->
+  </EuiSplitPanel.Inner>
+</EuiSplitPanel.Outer>`,
+];
+
 export const PanelExample = {
   title: 'Panel',
   intro: (
@@ -200,6 +227,41 @@ export const PanelExample = {
       snippet: panelGrowSnippet,
       demo: <PanelGrow />,
     },
+    {
+      title: 'Split panels',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: splitPanelSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: splitPanelHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            <strong>EuiSplitPanel</strong> is a composition of an outer and
+            multiple inner <strong>EuiPanels</strong>. It is a namespaced
+            component that you consume using{' '}
+            <EuiCode>EuiSplitPanel.Outer</EuiCode> and{' '}
+            <EuiCode>EuiSplitPanel.Inner</EuiCode> respectively. You can supply
+            the same panel props to both components with the exception of a few
+            to ensure the visual layout is correct. It also has two directions,{' '}
+            <EuiCode>column</EuiCode> (default) and <EuiCode>row</EuiCode>.
+          </p>
+          <p>
+            You can adjust at which breakpoints a <EuiCode>row</EuiCode> layout
+            will stack by passing a new array, or <EuiCode>false</EuiCode>, to
+            the <EuiCode>responsive</EuiCode> prop.
+          </p>
+        </>
+      ),
+      props: { _EuiSplitPanelOuter, _EuiSplitPanelInner },
+      snippet: splitPanelSnippet,
+      demo: <SplitPanel />,
+    },
     {
       title: 'Panels could be hoverable and have beta badges',
       source: [

src-docs/src/views/panel/split_panel.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSplitPanel,
+  EuiText,
+  EuiCode,
+} from '../../../../src/components';
+
+export default () => (
+  <>
+    <EuiFlexGroup gutterSize="l">
+      <EuiFlexItem>
+        <EuiSplitPanel.Outer grow>
+          <EuiSplitPanel.Inner>
+            <EuiText>
+              <p>Top panel</p>
+            </EuiText>
+          </EuiSplitPanel.Inner>
+          <EuiSplitPanel.Inner grow={false} color="subdued">
+            <EuiText>
+              <p>
+                Bottom panel has <EuiCode>{'grow={false}'}</EuiCode>
+              </p>
+            </EuiText>
+          </EuiSplitPanel.Inner>
+        </EuiSplitPanel.Outer>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiSplitPanel.Outer grow={false}>
+          <EuiSplitPanel.Inner>
+            <EuiText>
+              <p>
+                Outer panel has <EuiCode>{'grow={false}'}</EuiCode>
+              </p>
+            </EuiText>
+          </EuiSplitPanel.Inner>
+          <EuiSplitPanel.Inner grow={false} color="subdued">
+            <EuiText>
+              <p>Bottom panel</p>
+            </EuiText>
+          </EuiSplitPanel.Inner>
+        </EuiSplitPanel.Outer>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiSplitPanel.Outer>
+          <EuiSplitPanel.Inner>
+            <EuiText>
+              <p>Top panel</p>
+            </EuiText>
+          </EuiSplitPanel.Inner>
+          <EuiSplitPanel.Inner color="subdued">
+            <EuiText>
+              <p>Middle panel</p>
+            </EuiText>
+          </EuiSplitPanel.Inner>
+          <EuiSplitPanel.Inner color="danger">
+            <EuiText>
+              <p>Danger panel</p>
+            </EuiText>
+          </EuiSplitPanel.Inner>
+        </EuiSplitPanel.Outer>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer />
+    <EuiSplitPanel.Outer direction="row">
+      <EuiSplitPanel.Inner>
+        <EuiText>
+          <p>Left panel</p>
+          <p>Has more content</p>
+        </EuiText>
+      </EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner color="subdued">
+        <EuiText>
+          <p>Right panel</p>
+        </EuiText>
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+  </>
+);

src/components/index.js

@@ -261,7 +261,7 @@ export {
 
 export { EuiPagination, EuiPaginationButton } from './pagination';
 
-export { EuiPanel } from './panel';
+export { EuiPanel, EuiSplitPanel } from './panel';
 
 export {
   EuiInputPopover,

src/components/panel/_index.scss

@@ -1 +1,2 @@
 @import 'panel';
+@import './split_panel/index'

src/components/panel/index.ts

@@ -18,3 +18,4 @@
  */
 
 export { EuiPanel, EuiPanelProps, PanelPaddingSize, SIZES } from './panel';
+export { EuiSplitPanel } from './split_panel';

src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSplitPanel accepts panel props 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel"
+>
+  <div
+    aria-label="aria-label"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--success euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner testClass1 testClass2"
+    data-test-subj="test subject string"
+  />
+</div>
+`;
+
+exports[`EuiSplitPanel inner children are rendered 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
+>
+  <div
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner"
+  />
+</div>
+`;
+
+exports[`EuiSplitPanel is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;
+
+exports[`EuiSplitPanel renders as row 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row"
+/>
+`;
+
+exports[`EuiSplitPanel responsive can be changed to different breakpoints 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
+/>
+`;
+
+exports[`EuiSplitPanel responsive can be false 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
+/>
+`;
+
+exports[`EuiSplitPanel responsive is rendered at small screens 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
+/>
+`;

src/components/panel/split_panel/_index.scss

@@ -0,0 +1 @@
+@import 'split_panel';

src/components/panel/split_panel/_split_panel.scss

@@ -0,0 +1,18 @@
+.euiSplitPanel {
+  overflow: hidden; // Hide backgrounds within border-radius
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+
+  &--row {
+    flex-direction: row;
+
+    &.euiSplitPanel-isResponsive {
+      flex-direction: column;
+    }
+  }
+
+  .euiSplitPanel__inner {
+    flex-basis: 0%; // Make sure they're evenly split
+  }
+}

src/components/panel/split_panel/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {
+  EuiSplitPanel,
+  _EuiSplitPanelInnerProps,
+  _EuiSplitPanelOuterProps,
+} from './split_panel';

src/components/panel/split_panel/split_panel.test.tsx

@@ -0,0 +1,90 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { EuiSplitPanel } from './split_panel';
+
+describe('EuiSplitPanel', () => {
+  test('is rendered', () => {
+    const component = render(<EuiSplitPanel.Outer {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('inner children', () => {
+    test('are rendered', () => {
+      const component = render(
+        <EuiSplitPanel.Outer>
+          <EuiSplitPanel.Inner />
+        </EuiSplitPanel.Outer>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  test('accepts panel props', () => {
+    const component = render(
+      <EuiSplitPanel.Outer color="primary">
+        <EuiSplitPanel.Inner color="success" {...requiredProps} />
+      </EuiSplitPanel.Outer>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('renders as row', () => {
+    const component = render(<EuiSplitPanel.Outer direction="row" />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('responsive', () => {
+    // @ts-ignore innerWidth might be read only but we can still override it for the sake of testing
+    beforeAll(() => (window.innerWidth = 520));
+    afterAll(() => 1024); // reset to jsdom's default
+
+    test('is rendered at small screens', () => {
+      const component = render(<EuiSplitPanel.Outer />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('can be false', () => {
+      const component = render(<EuiSplitPanel.Outer responsive={false} />);
+
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('responsive', () => {
+    // @ts-ignore innerWidth might be read only but we can still override it for the sake of testing
+    beforeAll(() => (window.innerWidth = 1000));
+    afterAll(() => 1024); // reset to jsdom's default
+
+    test('can be changed to different breakpoints', () => {
+      const component = render(<EuiSplitPanel.Outer responsive={['m', 'l']} />);
+
+      expect(component).toMatchSnapshot();
+    });
+  });
+});