From e8bb6b582aa83c86a3e8b19d8dcfa89320562a76 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 2 Feb 2021 12:56:16 -0500
Subject: [PATCH 01/14] =?UTF-8?q?Adding=20`EuiSplitPanel`=20(using=20rende?=
 =?UTF-8?q?r=20props=E2=80=A6=20meh)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Conflicts:
#	src-docs/src/components/guide_section/guide_section.js
#	src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx
#	src-docs/src/services/playground/playground.js
#	src-docs/src/views/utility_classes/utility_classes_section.tsx
---
 src/components/index.js                       |  2 +-
 src/components/panel/_index.scss              |  1 +
 src/components/panel/index.ts                 |  1 +
 .../__snapshots__/split_panel.test.tsx.snap   |  9 ++++
 src/components/panel/split_panel/_index.scss  |  1 +
 .../panel/split_panel/_split_panel.scss       |  8 +++
 src/components/panel/split_panel/index.ts     | 20 ++++++++
 .../panel/split_panel/split_panel.test.tsx    | 32 ++++++++++++
 .../panel/split_panel/split_panel.tsx         | 49 +++++++++++++++++++
 9 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
 create mode 100644 src/components/panel/split_panel/_index.scss
 create mode 100644 src/components/panel/split_panel/_split_panel.scss
 create mode 100644 src/components/panel/split_panel/index.ts
 create mode 100644 src/components/panel/split_panel/split_panel.test.tsx
 create mode 100644 src/components/panel/split_panel/split_panel.tsx

diff --git a/src/components/index.js b/src/components/index.js
index 878c79da7f5..e17106df582 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -260,7 +260,7 @@ export {
 
 export { EuiPagination, EuiPaginationButton } from './pagination';
 
-export { EuiPanel } from './panel';
+export { EuiPanel, EuiSplitPanel } from './panel';
 
 export {
   EuiInputPopover,
diff --git a/src/components/panel/_index.scss b/src/components/panel/_index.scss
index a5b58fb8b6e..46b6312cabb 100644
--- a/src/components/panel/_index.scss
+++ b/src/components/panel/_index.scss
@@ -1 +1,2 @@
 @import 'panel';
+@import './split_panel/index'
diff --git a/src/components/panel/index.ts b/src/components/panel/index.ts
index 829cad7ff27..3aff0727bd6 100644
--- a/src/components/panel/index.ts
+++ b/src/components/panel/index.ts
@@ -18,3 +18,4 @@
  */
 
 export { EuiPanel, EuiPanelProps, PanelPaddingSize, SIZES } from './panel';
+export { EuiSplitPanel, EuiSplitPanelProps } from './split_panel';
diff --git a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
new file mode 100644
index 00000000000..68f2ff65e92
--- /dev/null
+++ b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSplitPanel is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--shadow euiPanel--flexGrowZero euiSplitPanel testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;
diff --git a/src/components/panel/split_panel/_index.scss b/src/components/panel/split_panel/_index.scss
new file mode 100644
index 00000000000..830296e4932
--- /dev/null
+++ b/src/components/panel/split_panel/_index.scss
@@ -0,0 +1 @@
+@import 'split_panel';
diff --git a/src/components/panel/split_panel/_split_panel.scss b/src/components/panel/split_panel/_split_panel.scss
new file mode 100644
index 00000000000..50c4fe81d9a
--- /dev/null
+++ b/src/components/panel/split_panel/_split_panel.scss
@@ -0,0 +1,8 @@
+.euiSplitPanel {
+  overflow: hidden; // Hide backgrounds within border-radius
+
+  .euiSplitPanel__inner {
+    // remove border from inner panels
+    border: none;
+  }
+}
diff --git a/src/components/panel/split_panel/index.ts b/src/components/panel/split_panel/index.ts
new file mode 100644
index 00000000000..a670c6be953
--- /dev/null
+++ b/src/components/panel/split_panel/index.ts
@@ -0,0 +1,20 @@
+/*
+ * 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, EuiSplitPanelProps } from './split_panel';
diff --git a/src/components/panel/split_panel/split_panel.test.tsx b/src/components/panel/split_panel/split_panel.test.tsx
new file mode 100644
index 00000000000..ca06b48c784
--- /dev/null
+++ b/src/components/panel/split_panel/split_panel.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
new file mode 100644
index 00000000000..6cc411c0b8f
--- /dev/null
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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, { FunctionComponent, ReactNode } from 'react';
+import classNames from 'classnames';
+import { EuiPanel, PanelProps } from '../panel';
+
+export type EuiSplitPanelProps = Omit<PanelProps, 'paddingSize'> & {
+  children?: (
+    panelProps: Omit<PanelProps, 'hasShadow' | 'borderRadius'>
+  ) => ReactNode;
+};
+
+export const EuiSplitPanel: FunctionComponent<EuiSplitPanelProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiSplitPanel', className);
+
+  const panelProps: PanelProps = {
+    hasShadow: false,
+    color: 'transparent',
+    borderRadius: 'none',
+    className: 'euiSplitPanel__inner',
+  };
+
+  return (
+    <EuiPanel paddingSize="none" grow={false} className={classes} {...rest}>
+      {children && children(panelProps)}
+    </EuiPanel>
+  );
+};

From 24c85a071a99edc12bc2abd1136256f605c23060 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 5 Feb 2021 19:45:09 -0500
Subject: [PATCH 02/14] Changing the split panel behavior

# Conflicts:
#	src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx
#	src-docs/src/views/utility_classes/utility_classes_section.tsx
---
 .../panel/split_panel/split_panel.tsx         | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
index 6cc411c0b8f..ce24fe0f5e9 100644
--- a/src/components/panel/split_panel/split_panel.tsx
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -21,10 +21,27 @@ import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 import { EuiPanel, PanelProps } from '../panel';
 
+const InnerPanel: FunctionComponent<Omit<
+  PanelProps,
+  'hasShadow' | 'borderRadius'
+>> = ({ children, className, ...rest }) => {
+  const classes = classNames('euiInnerPanel', className);
+
+  const panelProps: PanelProps = {
+    hasShadow: false,
+    color: 'transparent',
+    borderRadius: 'none',
+  };
+
+  return (
+    <EuiPanel className={classes} {...panelProps} {...rest}>
+      {children}
+    </EuiPanel>
+  );
+};
+
 export type EuiSplitPanelProps = Omit<PanelProps, 'paddingSize'> & {
-  children?: (
-    panelProps: Omit<PanelProps, 'hasShadow' | 'borderRadius'>
-  ) => ReactNode;
+  children?: (panel: typeof InnerPanel) => ReactNode;
 };
 
 export const EuiSplitPanel: FunctionComponent<EuiSplitPanelProps> = ({
@@ -34,16 +51,9 @@ export const EuiSplitPanel: FunctionComponent<EuiSplitPanelProps> = ({
 }) => {
   const classes = classNames('euiSplitPanel', className);
 
-  const panelProps: PanelProps = {
-    hasShadow: false,
-    color: 'transparent',
-    borderRadius: 'none',
-    className: 'euiSplitPanel__inner',
-  };
-
   return (
     <EuiPanel paddingSize="none" grow={false} className={classes} {...rest}>
-      {children && children(panelProps)}
+      {children && children(InnerPanel)}
     </EuiPanel>
   );
 };

From 2de92ff9afc987da9786cfa6704ac0a0fb0768c9 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 17 Feb 2021 14:32:56 -0500
Subject: [PATCH 03/14] Added docs example section

---
 src-docs/src/views/panel/panel_example.js | 22 ++++++++++++++++++++++
 src-docs/src/views/panel/split_panel.tsx  | 23 +++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src-docs/src/views/panel/split_panel.tsx

diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index 516a6258592..fb80dfc5202 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/src-docs/src/views/panel/panel_example.js
@@ -9,6 +9,7 @@ import { GuideSectionTypes } from '../../components';
 import {
   EuiCode,
   EuiPanel,
+  EuiSplitPanel,
   EuiSpacer,
   EuiText,
   EuiCallOut,
@@ -36,6 +37,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>`;
@@ -168,6 +173,23 @@ export const PanelExample = {
       snippet: panelGrowSnippet,
       demo: <PanelGrow />,
     },
+    {
+      title: 'Split panels',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: splitPanelSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: splitPanelHtml,
+        },
+      ],
+      text: <p>If you need to...</p>,
+      props: { EuiSplitPanel },
+      // snippet: panelGrowSnippet,
+      demo: <SplitPanel />,
+    },
     {
       title: 'Panels could be hoverable and have beta badges',
       source: [
diff --git a/src-docs/src/views/panel/split_panel.tsx b/src-docs/src/views/panel/split_panel.tsx
new file mode 100644
index 00000000000..fd6e2aefac7
--- /dev/null
+++ b/src-docs/src/views/panel/split_panel.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { EuiSplitPanel } from '../../../../src/components/panel';
+import { EuiText } from '../../../../src/components/text';
+
+export default () => (
+  <EuiSplitPanel>
+    {(InnerPanel) => (
+      <>
+        <InnerPanel>
+          <EuiText>
+            <p>Top panel</p>
+          </EuiText>
+        </InnerPanel>
+        <InnerPanel color="subdued">
+          <EuiText>
+            <p>Bottom panel</p>
+          </EuiText>
+        </InnerPanel>
+      </>
+    )}
+  </EuiSplitPanel>
+);

From 3ac66cae7def9376d76a6706d9e066cea69f9f7f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 17 Feb 2021 14:52:50 -0500
Subject: [PATCH 04/14] Changing again the way the component is setup

---
 src-docs/src/views/panel/split_panel.tsx      | 40 ++++++++++++++-----
 src/components/panel/index.ts                 |  2 +-
 src/components/panel/split_panel/index.ts     |  2 +-
 .../panel/split_panel/split_panel.test.tsx    |  2 +-
 .../panel/split_panel/split_panel.tsx         | 14 +++----
 5 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/src-docs/src/views/panel/split_panel.tsx b/src-docs/src/views/panel/split_panel.tsx
index fd6e2aefac7..abe50eff3a7 100644
--- a/src-docs/src/views/panel/split_panel.tsx
+++ b/src-docs/src/views/panel/split_panel.tsx
@@ -1,23 +1,43 @@
 import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 import { EuiSplitPanel } from '../../../../src/components/panel';
 import { EuiText } from '../../../../src/components/text';
 
 export default () => (
-  <EuiSplitPanel>
-    {(InnerPanel) => (
-      <>
-        <InnerPanel>
+  <EuiFlexGroup gutterSize="l">
+    <EuiFlexItem>
+      <EuiSplitPanel.Outer grow>
+        <EuiSplitPanel.Inner>
           <EuiText>
             <p>Top panel</p>
           </EuiText>
-        </InnerPanel>
-        <InnerPanel color="subdued">
+        </EuiSplitPanel.Inner>
+        <EuiSplitPanel.Inner grow color="subdued">
           <EuiText>
             <p>Bottom panel</p>
           </EuiText>
-        </InnerPanel>
-      </>
-    )}
-  </EuiSplitPanel>
+        </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>
 );
diff --git a/src/components/panel/index.ts b/src/components/panel/index.ts
index 3aff0727bd6..d904a01b981 100644
--- a/src/components/panel/index.ts
+++ b/src/components/panel/index.ts
@@ -18,4 +18,4 @@
  */
 
 export { EuiPanel, EuiPanelProps, PanelPaddingSize, SIZES } from './panel';
-export { EuiSplitPanel, EuiSplitPanelProps } from './split_panel';
+export { EuiSplitPanel } from './split_panel';
diff --git a/src/components/panel/split_panel/index.ts b/src/components/panel/split_panel/index.ts
index a670c6be953..cfe8d6dc00f 100644
--- a/src/components/panel/split_panel/index.ts
+++ b/src/components/panel/split_panel/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { EuiSplitPanel, EuiSplitPanelProps } from './split_panel';
+export { EuiSplitPanel } from './split_panel';
diff --git a/src/components/panel/split_panel/split_panel.test.tsx b/src/components/panel/split_panel/split_panel.test.tsx
index ca06b48c784..b15cb2e34c3 100644
--- a/src/components/panel/split_panel/split_panel.test.tsx
+++ b/src/components/panel/split_panel/split_panel.test.tsx
@@ -25,7 +25,7 @@ import { EuiSplitPanel } from './split_panel';
 
 describe('EuiSplitPanel', () => {
   test('is rendered', () => {
-    const component = render(<EuiSplitPanel {...requiredProps} />);
+    const component = render(<EuiSplitPanel.Outer {...requiredProps} />);
 
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
index ce24fe0f5e9..ab46797d3d6 100644
--- a/src/components/panel/split_panel/split_panel.tsx
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -17,11 +17,11 @@
  * under the License.
  */
 
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { EuiPanel, PanelProps } from '../panel';
 
-const InnerPanel: FunctionComponent<Omit<
+const Inner: FunctionComponent<Omit<
   PanelProps,
   'hasShadow' | 'borderRadius'
 >> = ({ children, className, ...rest }) => {
@@ -40,11 +40,7 @@ const InnerPanel: FunctionComponent<Omit<
   );
 };
 
-export type EuiSplitPanelProps = Omit<PanelProps, 'paddingSize'> & {
-  children?: (panel: typeof InnerPanel) => ReactNode;
-};
-
-export const EuiSplitPanel: FunctionComponent<EuiSplitPanelProps> = ({
+const Outer: FunctionComponent<Omit<PanelProps, 'paddingSize'>> = ({
   children,
   className,
   ...rest
@@ -53,7 +49,9 @@ export const EuiSplitPanel: FunctionComponent<EuiSplitPanelProps> = ({
 
   return (
     <EuiPanel paddingSize="none" grow={false} className={classes} {...rest}>
-      {children && children(InnerPanel)}
+      {children}
     </EuiPanel>
   );
 };
+
+export const EuiSplitPanel = { Outer, Inner };

From efab3a149d25dfbb85b1525463a0b578f795586e Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 17 Feb 2021 16:01:43 -0500
Subject: [PATCH 05/14] Adding `direction` and `responsive` props

---
 src-docs/src/views/panel/panel_example.js     |  28 ++++-
 src-docs/src/views/panel/split_panel.tsx      | 107 ++++++++++++------
 .../__snapshots__/split_panel.test.tsx.snap   |  46 ++++++++
 .../panel/split_panel/_split_panel.scss       |  13 ++-
 .../panel/split_panel/split_panel.test.tsx    |  58 ++++++++++
 .../panel/split_panel/split_panel.tsx         |  54 +++++++--
 6 files changed, 259 insertions(+), 47 deletions(-)

diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index fb80dfc5202..d6a83983120 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/src-docs/src/views/panel/panel_example.js
@@ -9,11 +9,14 @@ import { GuideSectionTypes } from '../../components';
 import {
   EuiCode,
   EuiPanel,
-  EuiSplitPanel,
   EuiSpacer,
   EuiText,
   EuiCallOut,
 } from '../../../../src/components';
+import {
+  _EuiSplitPanelOuter,
+  _EuiSplitPanelInner,
+} from '../../../../src/components/panel/split_panel/split_panel';
 
 import { panelConfig } from './playground';
 
@@ -57,6 +60,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: (
@@ -186,8 +208,8 @@ export const PanelExample = {
         },
       ],
       text: <p>If you need to...</p>,
-      props: { EuiSplitPanel },
-      // snippet: panelGrowSnippet,
+      props: { _EuiSplitPanelOuter, _EuiSplitPanelInner },
+      snippet: splitPanelSnippet,
       demo: <SplitPanel />,
     },
     {
diff --git a/src-docs/src/views/panel/split_panel.tsx b/src-docs/src/views/panel/split_panel.tsx
index abe50eff3a7..9189b5c731f 100644
--- a/src-docs/src/views/panel/split_panel.tsx
+++ b/src-docs/src/views/panel/split_panel.tsx
@@ -1,43 +1,78 @@
 import React from 'react';
+import { EuiSpacer } from '../../../../src/components/spacer';
 import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
-
 import { EuiSplitPanel } from '../../../../src/components/panel';
 import { EuiText } from '../../../../src/components/text';
+import { EuiCode } from '../../../../src/components/code';
 
 export default () => (
-  <EuiFlexGroup gutterSize="l">
-    <EuiFlexItem>
-      <EuiSplitPanel.Outer grow>
-        <EuiSplitPanel.Inner>
-          <EuiText>
-            <p>Top panel</p>
-          </EuiText>
-        </EuiSplitPanel.Inner>
-        <EuiSplitPanel.Inner grow 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>
+  <>
+    <EuiFlexGroup gutterSize="l">
+      <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 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>
+          <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>
+  </>
 );
diff --git a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
index 68f2ff65e92..16197b5f6b3 100644
--- a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
+++ b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
@@ -1,5 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiSplitPanel inner children accept panel props 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--primary euiPanel--shadow euiPanel--flexGrowZero euiSplitPanel"
+>
+  <div
+    aria-label="aria-label"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--success 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--shadow euiPanel--flexGrowZero euiSplitPanel"
+>
+  <div
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiSplitPanel__inner"
+  />
+</div>
+`;
+
 exports[`EuiSplitPanel is rendered 1`] = `
 <div
   aria-label="aria-label"
@@ -7,3 +29,27 @@ exports[`EuiSplitPanel is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiSplitPanel renders as row 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--shadow euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row"
+/>
+`;
+
+exports[`EuiSplitPanel responsive can be changed to different breakpoints 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--shadow euiPanel--flexGrowZero euiSplitPanel"
+/>
+`;
+
+exports[`EuiSplitPanel responsive can be false 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--shadow euiPanel--flexGrowZero euiSplitPanel"
+/>
+`;
+
+exports[`EuiSplitPanel responsive is rendered at small screens 1`] = `
+<div
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--shadow euiPanel--flexGrowZero euiSplitPanel"
+/>
+`;
diff --git a/src/components/panel/split_panel/_split_panel.scss b/src/components/panel/split_panel/_split_panel.scss
index 50c4fe81d9a..454725571b7 100644
--- a/src/components/panel/split_panel/_split_panel.scss
+++ b/src/components/panel/split_panel/_split_panel.scss
@@ -1,8 +1,19 @@
 .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 {
-    // remove border from inner panels
     border: none;
+    flex-basis: 0%; // Make sure they're evenly split
   }
 }
diff --git a/src/components/panel/split_panel/split_panel.test.tsx b/src/components/panel/split_panel/split_panel.test.tsx
index b15cb2e34c3..fa4babc06a8 100644
--- a/src/components/panel/split_panel/split_panel.test.tsx
+++ b/src/components/panel/split_panel/split_panel.test.tsx
@@ -29,4 +29,62 @@ describe('EuiSplitPanel', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('inner children', () => {
+    test('are rendered', () => {
+      const component = render(
+        <EuiSplitPanel.Outer>
+          <EuiSplitPanel.Inner />
+        </EuiSplitPanel.Outer>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('accept 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();
+    });
+  });
 });
diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
index ab46797d3d6..7b1f8589a44 100644
--- a/src/components/panel/split_panel/split_panel.tsx
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -17,15 +17,23 @@
  * under the License.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 import { EuiPanel, PanelProps } from '../panel';
+import { EuiBreakpointSize } from '../../../services/breakpoint';
+import { useIsWithinBreakpoints } from '../../../services/hooks';
 
-const Inner: FunctionComponent<Omit<
+export type _EuiSplitPanelInnerProps = Omit<
   PanelProps,
   'hasShadow' | 'borderRadius'
->> = ({ children, className, ...rest }) => {
-  const classes = classNames('euiInnerPanel', className);
+>;
+
+export const _EuiSplitPanelInner: FunctionComponent<_EuiSplitPanelInnerProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiSplitPanel__inner', className);
 
   const panelProps: PanelProps = {
     hasShadow: false,
@@ -40,12 +48,41 @@ const Inner: FunctionComponent<Omit<
   );
 };
 
-const Outer: FunctionComponent<Omit<PanelProps, 'paddingSize'>> = ({
+export type _EuiSplitPanelOuterProps = {
+  /**
+   * Any number of #EuiSplitPanelInner components
+   */
+  children?: ReactNode;
+  /**
+   * Changes the flex-direction
+   */
+  direction?: 'column' | 'row';
+  /**
+   * Stacks row display on small screens
+   */
+  responsive?: false | EuiBreakpointSize[];
+} & Omit<PanelProps, 'paddingSize'>;
+
+export const _EuiSplitPanelOuter: FunctionComponent<_EuiSplitPanelOuterProps> = ({
   children,
   className,
+  direction = 'column',
+  responsive = ['xs', 's'],
   ...rest
 }) => {
-  const classes = classNames('euiSplitPanel', className);
+  const isResponsive = useIsWithinBreakpoints(
+    responsive as EuiBreakpointSize[],
+    !!responsive
+  );
+
+  const classes = classNames(
+    'euiSplitPanel',
+    {
+      'euiSplitPanel--row': direction === 'row',
+      'euiSplitPanel-isResponsive': isResponsive,
+    },
+    className
+  );
 
   return (
     <EuiPanel paddingSize="none" grow={false} className={classes} {...rest}>
@@ -54,4 +91,7 @@ const Outer: FunctionComponent<Omit<PanelProps, 'paddingSize'>> = ({
   );
 };
 
-export const EuiSplitPanel = { Outer, Inner };
+export const EuiSplitPanel = {
+  Outer: _EuiSplitPanelOuter,
+  Inner: _EuiSplitPanelInner,
+};

From 12868755dcc3641e5c872fddbe409bee3528e866 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 17 Feb 2021 16:09:10 -0500
Subject: [PATCH 06/14] Update docs text

---
 src-docs/src/views/panel/panel_example.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index d6a83983120..f94dc4f6098 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/src-docs/src/views/panel/panel_example.js
@@ -207,7 +207,22 @@ export const PanelExample = {
           code: splitPanelHtml,
         },
       ],
-      text: <p>If you need to...</p>,
+      text: (
+        <>
+          <p>
+            <strong>EuiSplitPanel</strong> is a composition of an outer and
+            multiple inner <strong>EuiPanels</strong>. 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 />,

From 154c3e57f2a06475dfdbcb5b66bf88046aef5875 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 2 Mar 2021 15:48:02 -0500
Subject: [PATCH 07/14] Update types

---
 .../__snapshots__/split_panel.test.tsx.snap   | 20 ++++----
 .../panel/split_panel/split_panel.test.tsx    | 16 +++----
 .../panel/split_panel/split_panel.tsx         | 47 ++++++++++++++-----
 3 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
index 16197b5f6b3..22a2096fb3e 100644
--- a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
+++ b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiSplitPanel inner children accept panel props 1`] = `
+exports[`EuiSplitPanel accepts panel props 1`] = `
 <div
-  class="euiPanel euiPanel--borderRadiusMedium euiPanel--primary euiPanel--shadow euiPanel--flexGrowZero euiSplitPanel"
+  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 euiSplitPanel__inner testClass1 testClass2"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--success euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner testClass1 testClass2"
     data-test-subj="test subject string"
   />
 </div>
@@ -14,10 +14,10 @@ exports[`EuiSplitPanel inner children accept panel props 1`] = `
 
 exports[`EuiSplitPanel inner children are rendered 1`] = `
 <div
-  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--shadow euiPanel--flexGrowZero euiSplitPanel"
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
 >
   <div
-    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiSplitPanel__inner"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiSplitPanel__inner"
   />
 </div>
 `;
@@ -25,31 +25,31 @@ exports[`EuiSplitPanel inner children are rendered 1`] = `
 exports[`EuiSplitPanel is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--shadow euiPanel--flexGrowZero euiSplitPanel testClass1 testClass2"
+  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--shadow euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row"
+  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--shadow euiPanel--flexGrowZero euiSplitPanel"
+  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--shadow euiPanel--flexGrowZero euiSplitPanel"
+  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--shadow euiPanel--flexGrowZero euiSplitPanel"
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
 />
 `;
diff --git a/src/components/panel/split_panel/split_panel.test.tsx b/src/components/panel/split_panel/split_panel.test.tsx
index fa4babc06a8..3c12d303af2 100644
--- a/src/components/panel/split_panel/split_panel.test.tsx
+++ b/src/components/panel/split_panel/split_panel.test.tsx
@@ -40,16 +40,16 @@ describe('EuiSplitPanel', () => {
 
       expect(component).toMatchSnapshot();
     });
+  });
 
-    test('accept panel props', () => {
-      const component = render(
-        <EuiSplitPanel.Outer color="primary">
-          <EuiSplitPanel.Inner color="success" {...requiredProps} />
-        </EuiSplitPanel.Outer>
-      );
+  test('accepts panel props', () => {
+    const component = render(
+      <EuiSplitPanel.Outer color="primary">
+        <EuiSplitPanel.Inner color="success" {...requiredProps} />
+      </EuiSplitPanel.Outer>
+    );
 
-      expect(component).toMatchSnapshot();
-    });
+    expect(component).toMatchSnapshot();
   });
 
   test('renders as row', () => {
diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
index cd93c2f33e9..5252326fc3a 100644
--- a/src/components/panel/split_panel/split_panel.tsx
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -17,17 +17,27 @@
  * under the License.
  */
 
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { EuiPanel, _EuiPanelProps } from '../panel';
+import { EuiPanel, _EuiPanelProps, EuiPanelProps } from '../panel';
 import { EuiBreakpointSize } from '../../../services/breakpoint';
 import { useIsWithinBreakpoints } from '../../../services/hooks';
 
-export type _EuiSplitPanelInnerProps = Omit<
-  _EuiPanelProps,
-  'hasShadow' | 'borderRadius'
->;
+export type _EuiSplitPanelInnerProps = HTMLAttributes<HTMLDivElement> &
+  Omit<
+    _EuiPanelProps,
+    | 'hasShadow'
+    | 'hasBorder'
+    | 'borderRadius'
+    | 'betaBadgeLabel'
+    | 'betaBadgeTooltipContent'
+    | 'betaBadgeTitle'
+  >;
 
+/**
+ * Consumed via `EuiSplitPanel.Inner`.
+ * Extends most `EuiPanelProps`.
+ */
 export const _EuiSplitPanelInner: FunctionComponent<_EuiSplitPanelInnerProps> = ({
   children,
   className,
@@ -42,13 +52,13 @@ export const _EuiSplitPanelInner: FunctionComponent<_EuiSplitPanelInnerProps> =
   };
 
   return (
-    <EuiPanel className={classes} {...panelProps} {...rest}>
+    <EuiPanel className={classes} {...panelProps} {...(rest as EuiPanelProps)}>
       {children}
     </EuiPanel>
   );
 };
 
-export type _EuiSplitPanelOuterProps = {
+export type _EuiSplitPanelOuterProps = HTMLAttributes<HTMLDivElement> & {
   /**
    * Any number of #EuiSplitPanelInner components
    */
@@ -58,11 +68,22 @@ export type _EuiSplitPanelOuterProps = {
    */
   direction?: 'column' | 'row';
   /**
-   * Stacks row display on small screens
+   * Stacks row display on small screens.
+   * Remove completely with `false` or provide your own list of breakpoint sizes to stack on.
    */
   responsive?: false | EuiBreakpointSize[];
-} & Omit<_EuiPanelProps, 'paddingSize'>;
+} & Omit<
+    _EuiPanelProps,
+    | 'paddingSize'
+    | 'betaBadgeLabel'
+    | 'betaBadgeTooltipContent'
+    | 'betaBadgeTitle'
+  >;
 
+/**
+ * Consumed via `EuiSplitPanel.Outer`.
+ * Extends most `EuiPanelProps`.
+ */
 export const _EuiSplitPanelOuter: FunctionComponent<_EuiSplitPanelOuterProps> = ({
   children,
   className,
@@ -85,7 +106,11 @@ export const _EuiSplitPanelOuter: FunctionComponent<_EuiSplitPanelOuterProps> =
   );
 
   return (
-    <EuiPanel paddingSize="none" grow={false} className={classes} {...rest}>
+    <EuiPanel
+      paddingSize="none"
+      grow={false}
+      className={classes}
+      {...(rest as EuiPanelProps)}>
       {children}
     </EuiPanel>
   );

From 680af567c36b3d8dd8747dbf20a9faf28399d41b Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 2 Mar 2021 15:51:17 -0500
Subject: [PATCH 08/14] cl

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb7c91de86a..b71dc374d42 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.9.0`.
+- Added `EuiSplitPanel` component ([#4539](https://github.com/elastic/eui/pull/4539))
 
 ## [`31.9.0`](https://github.com/elastic/eui/tree/v31.9.0)
 

From 95048ee937a508978ad0d731633431c5475fbf51 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 2 Mar 2021 15:56:19 -0500
Subject: [PATCH 09/14] Quick update to docs text

---
 src-docs/src/views/panel/panel_example.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index a203735c6de..e4eed9bfbdd 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/src-docs/src/views/panel/panel_example.js
@@ -243,9 +243,12 @@ export const PanelExample = {
         <>
           <p>
             <strong>EuiSplitPanel</strong> is a composition of an outer and
-            multiple inner <strong>EuiPanels</strong>. 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,{' '}
+            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>

From 55d56c3c8abebf809f95850d5a4113e08fc435b7 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 2 Mar 2021 16:02:17 -0500
Subject: [PATCH 10/14] Change doc example to from TS to JS

---
 .../panel/{split_panel.tsx => split_panel.js} | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)
 rename src-docs/src/views/panel/{split_panel.tsx => split_panel.js} (86%)

diff --git a/src-docs/src/views/panel/split_panel.tsx b/src-docs/src/views/panel/split_panel.js
similarity index 86%
rename from src-docs/src/views/panel/split_panel.tsx
rename to src-docs/src/views/panel/split_panel.js
index 9189b5c731f..b07f1fcab5c 100644
--- a/src-docs/src/views/panel/split_panel.tsx
+++ b/src-docs/src/views/panel/split_panel.js
@@ -1,41 +1,44 @@
 import React from 'react';
-import { EuiSpacer } from '../../../../src/components/spacer';
-import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
-import { EuiSplitPanel } from '../../../../src/components/panel';
-import { EuiText } from '../../../../src/components/text';
-import { EuiCode } from '../../../../src/components/code';
+import {
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSplitPanel,
+  EuiText,
+  EuiCode,
+} from '../../../../src/components';
 
 export default () => (
   <>
     <EuiFlexGroup gutterSize="l">
       <EuiFlexItem>
-        <EuiSplitPanel.Outer grow={false}>
+        <EuiSplitPanel.Outer grow>
           <EuiSplitPanel.Inner>
             <EuiText>
-              <p>
-                Outer panel has <EuiCode>{'grow={false}'}</EuiCode>
-              </p>
+              <p>Top panel</p>
             </EuiText>
           </EuiSplitPanel.Inner>
           <EuiSplitPanel.Inner grow={false} color="subdued">
             <EuiText>
-              <p>Bottom panel</p>
+              <p>
+                Bottom panel has <EuiCode>{'grow={false}'}</EuiCode>
+              </p>
             </EuiText>
           </EuiSplitPanel.Inner>
         </EuiSplitPanel.Outer>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiSplitPanel.Outer grow>
+        <EuiSplitPanel.Outer grow={false}>
           <EuiSplitPanel.Inner>
             <EuiText>
-              <p>Top panel</p>
+              <p>
+                Outer panel has <EuiCode>{'grow={false}'}</EuiCode>
+              </p>
             </EuiText>
           </EuiSplitPanel.Inner>
           <EuiSplitPanel.Inner grow={false} color="subdued">
             <EuiText>
-              <p>
-                Bottom panel has <EuiCode>{'grow={false}'}</EuiCode>
-              </p>
+              <p>Bottom panel</p>
             </EuiText>
           </EuiSplitPanel.Inner>
         </EuiSplitPanel.Outer>

From 6a7c80b85ceb85d06c56c10a0e98ec813e23381a Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 2 Mar 2021 16:16:22 -0500
Subject: [PATCH 11/14] Cleanup a border style

---
 .../panel/split_panel/__snapshots__/split_panel.test.tsx.snap   | 2 +-
 src/components/panel/split_panel/_split_panel.scss              | 1 -
 src/components/panel/split_panel/split_panel.tsx                | 1 +
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
index 22a2096fb3e..8caa443e064 100644
--- a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
+++ b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`EuiSplitPanel inner children are rendered 1`] = `
   class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
 >
   <div
-    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiSplitPanel__inner"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner"
   />
 </div>
 `;
diff --git a/src/components/panel/split_panel/_split_panel.scss b/src/components/panel/split_panel/_split_panel.scss
index 454725571b7..b2d87ea0b54 100644
--- a/src/components/panel/split_panel/_split_panel.scss
+++ b/src/components/panel/split_panel/_split_panel.scss
@@ -13,7 +13,6 @@
   }
 
   .euiSplitPanel__inner {
-    border: none;
     flex-basis: 0%; // Make sure they're evenly split
   }
 }
diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
index 5252326fc3a..25b40e707d2 100644
--- a/src/components/panel/split_panel/split_panel.tsx
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -49,6 +49,7 @@ export const _EuiSplitPanelInner: FunctionComponent<_EuiSplitPanelInnerProps> =
     hasShadow: false,
     color: 'transparent',
     borderRadius: 'none',
+    hasBorder: false,
   };
 
   return (

From 385b6dc73071a218092a0173c3281045e1565afd Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 4 Mar 2021 13:17:07 -0500
Subject: [PATCH 12/14] Exporting props and fixing prop comment

---
 src/components/panel/split_panel/index.ts                  | 6 +++++-
 src/components/panel/split_panel/split_panel.tsx           | 2 +-
 src/components/popover/__snapshots__/popover.test.tsx.snap | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/panel/split_panel/index.ts b/src/components/panel/split_panel/index.ts
index cfe8d6dc00f..57a9057b3d4 100644
--- a/src/components/panel/split_panel/index.ts
+++ b/src/components/panel/split_panel/index.ts
@@ -17,4 +17,8 @@
  * under the License.
  */
 
-export { EuiSplitPanel } from './split_panel';
+export {
+  EuiSplitPanel,
+  _EuiSplitPanelInnerProps,
+  _EuiSplitPanelOuterProps,
+} from './split_panel';
diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
index 25b40e707d2..6f3cbe2df4a 100644
--- a/src/components/panel/split_panel/split_panel.tsx
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -61,7 +61,7 @@ export const _EuiSplitPanelInner: FunctionComponent<_EuiSplitPanelInnerProps> =
 
 export type _EuiSplitPanelOuterProps = HTMLAttributes<HTMLDivElement> & {
   /**
-   * Any number of #EuiSplitPanelInner components
+   * Any number of #_EuiSplitPanelInner components
    */
   children?: ReactNode;
   /**
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index c9b932d7c30..4fcd4f5011a 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -617,7 +617,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen testClass1 testClass2"
         data-test-subj="test subject string"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000; will-change: transform, opacity;"
+        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"

From 82821edaf11c88d9e1b2d2f75a4fba2474fae21a Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 4 Mar 2021 14:45:44 -0500
Subject: [PATCH 13/14] Adjust responsive language

---
 src-docs/src/views/panel/panel_example.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index e4eed9bfbdd..2e59f259e8f 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/src-docs/src/views/panel/panel_example.js
@@ -252,9 +252,11 @@ export const PanelExample = {
             <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.
+            For custom responsiveness, you can adjust at which breakpoints a{' '}
+            <EuiCode>row</EuiCode> layout will stack by passing a new array of
+            breakpoint names <EuiCode>{"['xs', 's']"}</EuiCode> to the{' '}
+            <EuiCode>responsive</EuiCode> prop, or completely turn it off with{' '}
+            <EuiCode>false</EuiCode>.
           </p>
         </>
       ),

From 4da5afe2b598fbf0e069188dd9f3bc1102816604 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Mon, 8 Mar 2021 14:32:26 -0500
Subject: [PATCH 14/14] Update src/components/panel/split_panel/split_panel.tsx

---
 src/components/panel/split_panel/split_panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
index 6f3cbe2df4a..0140af8fa28 100644
--- a/src/components/panel/split_panel/split_panel.tsx
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -61,7 +61,7 @@ export const _EuiSplitPanelInner: FunctionComponent<_EuiSplitPanelInnerProps> =
 
 export type _EuiSplitPanelOuterProps = HTMLAttributes<HTMLDivElement> & {
   /**
-   * Any number of #_EuiSplitPanelInner components
+   * Any number of _EuiSplitPanelInner components
    */
   children?: ReactNode;
   /**