From 03cdc7b993eacb76eab7fef3e7cb0be21b0bceec Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 10 Dec 2020 09:26:52 -0700
Subject: [PATCH 1/2] Fix docs site to not intercept hash-only links (#4371)

---
 src-docs/src/views/link_wrapper.js                         | 7 ++-----
 src/components/table/table_pagination/table_pagination.tsx | 2 --
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/link_wrapper.js b/src-docs/src/views/link_wrapper.js
index faaf0a27f21d..f1aa96a5dcd0 100644
--- a/src-docs/src/views/link_wrapper.js
+++ b/src-docs/src/views/link_wrapper.js
@@ -21,11 +21,8 @@ export const LinkWrapper = ({ children }) => {
       if (anchor && anchor.nodeName === 'A') {
         const href = anchor.getAttribute('href');
         // check if this is an internal link
-        if (href.startsWith('#')) {
-          if (href !== '#') {
-            // a lone # character is used in the docs as a placeholder/demo value and should be ignored
-            history.push(href.replace('#', ''));
-          }
+        if (href.startsWith('#/')) {
+          history.push(href.replace('#', ''));
           e.preventDefault();
         }
       }
diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx
index 1f5dddb5533d..5540ccca4ba0 100644
--- a/src/components/table/table_pagination/table_pagination.tsx
+++ b/src/components/table/table_pagination/table_pagination.tsx
@@ -73,7 +73,6 @@ export class EuiTablePagination extends Component<Props, State> {
       onChangeItemsPerPage = () => {},
       onChangePage,
       pageCount,
-      'aria-controls': ariaControls,
       ...rest
     } = this.props;
 
@@ -132,7 +131,6 @@ export class EuiTablePagination extends Component<Props, State> {
 
         <EuiFlexItem grow={false}>
           <EuiPagination
-            aria-controls={ariaControls}
             pageCount={pageCount}
             activePage={activePage}
             onPageClick={onChangePage}

From 007c69095d9c7695a79cec90bc1dc6641cc71368 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 10 Dec 2020 11:43:44 -0500
Subject: [PATCH 2/2] [EuiResizableContainer] Allow collapsible panels (#3978)

* will add custom icons

* playing with props

* adding example files

* working on the example

* example is dynamic

* cleaner example

* add class to button

* cl

* fix dom structure warnings

* refactor; reducer pattern

* snapshots; clean up

* vertical collapsibles; combined registration

* WIP

* WIP: showOnFocus

* POC: mode prop

* memoize actions; toggle button placement

* clean up

* clean up

* better vertical collapsibles

* external toggle example

* better resizer focus state; fallback redistribution logic

* add shadow to toggle button

* shift button when collapsed; blur on mouse click

* clean up; inline side-effects

* cleaner examples

* snapshots

* docs

* adjustments for collapsible options

* clean up actions

* more docs, snippets

* remove custom icons; update example

* account for more external toggling situations; update rotated icons

* larger click area for collapsed toggle button

* Using and EuiPanel as the `.euiResizablePanel__content`

- Added `paddingSize` to EuiPage

* Fixing the buttons
- Removed size option from resizable button and changed to `0` width via negative margins
- Updated toggle button positioning

Still need to update examples and tests

* address padding; collapsedContent

* collapsedContent -> collapsedButton

* new icons

* clean up

* position prop; remove collapsedButton

* Consolidate and organize a few things
- Made the EuiCollapsiblePanel and extension of EuiPanel with `wrapperProps` and `wrapperPadding` instead of the other way around
- Added `left | right` positions specifically for the vertical layout
- Created external EuiResizableCollapseButton for easier maintenance
- Continue to show the EuiPanel to keep the visuals when collapsed (if showing collapsed button)

- Fixed up examples/docs

* 0 size on collapse

* allow toggle blur

* maintain focus; maintain state while collapsed

* Apply suggestions from code review

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

* null check

* small review updates

* optional externalPosition

* toggle button focus

* add some tests

* remove async

* CL

* Apply suggestions from code review

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* remove callout from intro

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 CHANGELOG.md                                  |   7 +
 .../resizable_container_basic.js              |   8 +-
 .../resizable_container_example.js            | 342 +++++++--
 .../resizable_container_reset_values.js       |   8 +-
 .../resizable_container_three_panels.js       |  35 -
 .../resizable_container_vertical.js           |   8 +-
 .../resizable_panel_collapsible.js            | 164 ++++
 .../resizable_panel_collapsible_external.js   | 123 +++
 .../resizable_panel_collapsible_options.js    | 104 +++
 .../resizable_container/resizable_panels.js   |  63 ++
 .../resizable_resizer_size.js                 |  69 --
 .../page/__snapshots__/page.test.tsx.snap     |   8 +-
 src/components/page/_page.scss                |   9 +-
 src/components/page/page.tsx                  |  36 +-
 src/components/panel/index.ts                 |   2 +-
 src/components/panel/panel.tsx                |  13 +-
 .../resizable_container.test.tsx.snap         | 243 ++++--
 .../resizable_container/_index.scss           |   1 +
 .../_resizable_button.scss                    |  32 +-
 .../_resizable_collapse_button.scss           | 152 ++++
 .../resizable_container/_resizable_panel.scss |  47 ++
 .../resizable_container/_variables.scss       |  10 +-
 .../resizable_container/context.tsx           |  73 +-
 .../resizable_container/helpers.test.ts       |  66 ++
 src/components/resizable_container/helpers.ts | 720 +++++++++++++-----
 .../resizable_container/resizable_button.tsx  |  83 +-
 .../resizable_collapse_button.tsx             |  98 +++
 .../resizable_container.test.tsx              |  61 +-
 .../resizable_container.tsx                   | 188 ++++-
 .../resizable_container/resizable_panel.tsx   | 335 +++++++-
 src/components/resizable_container/types.ts   | 198 +++++
 31 files changed, 2681 insertions(+), 625 deletions(-)
 delete mode 100644 src-docs/src/views/resizable_container/resizable_container_three_panels.js
 create mode 100644 src-docs/src/views/resizable_container/resizable_panel_collapsible.js
 create mode 100644 src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js
 create mode 100644 src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js
 create mode 100644 src-docs/src/views/resizable_container/resizable_panels.js
 delete mode 100644 src-docs/src/views/resizable_container/resizable_resizer_size.js
 create mode 100644 src/components/resizable_container/_resizable_collapse_button.scss
 create mode 100644 src/components/resizable_container/helpers.test.ts
 create mode 100644 src/components/resizable_container/resizable_collapse_button.tsx
 create mode 100644 src/components/resizable_container/types.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4085c85869ba..26e434cd7057 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,16 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added collapsble behavior to `EuiResizableContainer` panels ([#3978](https://github.com/elastic/eui/pull/3978))
+- Updated `EuiResizablePanel` to use `EuiPanel` ([#3978](https://github.com/elastic/eui/pull/3978))
+
 **Bug fixes**
 
 - Fixed `EuiSuggest` popover opening when an empty array is passed into the `suggestions` prop ([#4349](https://github.com/elastic/eui/pull/4349))
 
+**Breaking changes**
+
+- Removed `size` prop from `EuiResizableButton` ([#3978](https://github.com/elastic/eui/pull/3978))
+
 ## [`30.6.0`](https://github.com/elastic/eui/tree/v30.6.0)
 
 - Adjusted the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
diff --git a/src-docs/src/views/resizable_container/resizable_container_basic.js b/src-docs/src/views/resizable_container/resizable_container_basic.js
index 3c4f9eeffffa..c9e1d4fc1591 100644
--- a/src-docs/src/views/resizable_container/resizable_container_basic.js
+++ b/src-docs/src/views/resizable_container/resizable_container_basic.js
@@ -11,12 +11,12 @@ const text = (
 );
 
 export default () => (
-  <EuiResizableContainer style={{ height: '400px' }}>
+  <EuiResizableContainer style={{ height: '200px' }}>
     {(EuiResizablePanel, EuiResizableButton) => (
       <>
         <EuiResizablePanel initialSize={50} minSize="30%">
           <EuiText>
-            <p>{text}</p>
+            <div>{text}</div>
             <a href="">Hello world</a>
           </EuiText>
         </EuiResizablePanel>
@@ -24,9 +24,7 @@ export default () => (
         <EuiResizableButton />
 
         <EuiResizablePanel initialSize={50} minSize="200px">
-          <EuiText>
-            <p>{text}</p>
-          </EuiText>
+          <EuiText>{text}</EuiText>
         </EuiResizablePanel>
       </>
     )}
diff --git a/src-docs/src/views/resizable_container/resizable_container_example.js b/src-docs/src/views/resizable_container/resizable_container_example.js
index 759edda7017a..a2d817755e6d 100644
--- a/src-docs/src/views/resizable_container/resizable_container_example.js
+++ b/src-docs/src/views/resizable_container/resizable_container_example.js
@@ -1,4 +1,5 @@
-import React, { Fragment } from 'react';
+import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { renderToHtml } from '../../services';
 
@@ -7,40 +8,117 @@ import { GuideSectionTypes } from '../../components';
 import {
   EuiCallOut,
   EuiCode,
+  EuiCodeBlock,
   EuiLink,
   EuiResizableContainer,
   EuiSpacer,
   EuiText,
 } from '../../../../src/components';
+// eslint-disable-next-line
 import { EuiResizablePanel } from '../../../../src/components/resizable_container/resizable_panel';
 import { EuiResizableButton } from '../../../../src/components/resizable_container/resizable_button';
 
+// eslint-disable-next-line
+import { ModeOptions, ToggleOptions } from '!!prop-loader!../../../../src/components/resizable_container/resizable_panel';
+import { PanelModeType } from '!!prop-loader!../../../../src/components/resizable_container/types';
+
 import ResizableContainerBasic from './resizable_container_basic';
 import ResizableContainerVertical from './resizable_container_vertical';
-import ResizableContainerThreePanels from './resizable_container_three_panels';
 import ResizableContainerResetValues from './resizable_container_reset_values';
-import ResizableResizerSize from './resizable_resizer_size';
+import ResizablePanels from './resizable_panels';
+import ResizablePanelCollapsible from './resizable_panel_collapsible';
+import ResizablePanelCollapsibleOpts from './resizable_panel_collapsible_options';
+import ResizablePanelCollapsibleExt from './resizable_panel_collapsible_external';
 
 const ResizableContainerSource = require('!!raw-loader!./resizable_container_basic');
-const ResizableContainerVericalSource = require('!!raw-loader!./resizable_container_vertical');
-const ResizableContainerThreePanelsSource = require('!!raw-loader!./resizable_container_three_panels');
+const ResizableContainerVerticalSource = require('!!raw-loader!./resizable_container_vertical');
 const ResizableContainerResetValuesSource = require('!!raw-loader!./resizable_container_reset_values');
-const ResizableResizerSizeSource = require('!!raw-loader!./resizable_resizer_size');
+const ResizablePanelsSource = require('!!raw-loader!./resizable_panels');
+const ResizablePanelCollapsibleSource = require('!!raw-loader!./resizable_panel_collapsible');
+const ResizablePanelCollapsibleOptsSource = require('!!raw-loader!./resizable_panel_collapsible_options');
+const ResizablePanelCollapsibleExtSource = require('!!raw-loader!./resizable_panel_collapsible_external');
 
 const ResizableContainerHtml = renderToHtml(ResizableContainerBasic);
-const ResizableContainerVericalHtml = renderToHtml(ResizableContainerVertical);
-const ResizableContainerThreePanelsHtml = renderToHtml(
-  ResizableContainerThreePanels
-);
+const basicSnippet = `<EuiResizableContainer>
+  {(EuiResizablePanel, EuiResizableButton) => (
+    <>
+      <EuiResizablePanel initialSize={50} minSize="200px">
+        <!-- Left panel content -->
+      </EuiResizablePanel>
+
+      <EuiResizableButton />
+
+      <EuiResizablePanel initialSize={50} minSize="200px">
+        <!-- Right panel content -->
+      </EuiResizablePanel>
+    </>
+  )}
+</EuiResizableContainer>`;
+
+const ResizablePanelsHtml = renderToHtml(ResizablePanels);
+const panelsSnippet = `<EuiResizablePanel color="subdued" paddingSize="none" wrapperPadding="m">
+  <EuiText>
+    <p>{text}</p>
+  </EuiText>
+</EuiResizablePanel>`;
+
+const ResizableContainerVerticalHtml = renderToHtml(ResizableContainerVertical);
+const verticalSnippet = `<EuiResizableContainer direction="vertical">
+  {(EuiResizablePanel, EuiResizableButton) => (
+    <>
+      <EuiResizablePanel initialSize={50} minSize="20%">
+        <EuiText>
+          <p>{text}</p>
+        </EuiText>
+      </EuiResizablePanel>
+
+      <EuiResizableButton />
+
+      <EuiResizablePanel initialSize={50} minSize="20%">
+        <EuiText>
+          <p>{text}</p>
+        </EuiText>
+      </EuiResizablePanel>
+    </>
+  )}
+</EuiResizableContainer>`;
 const ResizableContainerResetValuesHtml = renderToHtml(
   ResizableContainerResetValues
 );
-const ResizableResizerSizeHtml = renderToHtml(ResizableResizerSize);
+const ResizablePanelCollapsibleHtml = renderToHtml(ResizablePanelCollapsible);
+const collapsibleSnippet = `<EuiResizableContainer>
+  {(EuiResizablePanel, EuiResizableButton) => (
+    <>
+      <EuiResizablePanel mode="collapsible" initialSize={20} minSize="5px">
+        <EuiText>
+          <p>{text}</p>
+        </EuiText>
+      </EuiResizablePanel>
+
+      <EuiResizableButton />
 
-const snippet = `<EuiResizableContainer style={{ height: '400px' }}>
+      <EuiResizablePanel mode="main" initialSize={80} minSize="200px">
+        <EuiText>
+          <p>{text}</p>
+        </EuiText>
+      </EuiResizablePanel>
+    </>
+  )}
+</EuiResizableContainer>`;
+const ResizablePanelCollapsibleOptsHtml = renderToHtml(
+  ResizablePanelCollapsibleOpts
+);
+const collapsibleOptsSnippet = `<EuiResizableContainer style={{ height: '400px' }}>
   {(EuiResizablePanel, EuiResizableButton) => (
     <>
-      <EuiResizablePanel initialSize={50} minSize="200px">
+      <EuiResizablePanel mode={['collapsible', {
+          className: 'panel-toggle',
+          'data-test-subj: 'test',
+          position: 'top'
+        }]}
+        initialSize={20}
+        minSize="5px"
+      >
         <EuiText>
           <p>{text}</p>
         </EuiText>
@@ -48,7 +126,29 @@ const snippet = `<EuiResizableContainer style={{ height: '400px' }}>
 
       <EuiResizableButton />
 
-      <EuiResizablePanel initialSize={50} minSize="200px">
+      <EuiResizablePanel mode="main" initialSize={80} minSize="200px">
+        <EuiText>
+          <p>{text}</p>
+        </EuiText>
+      </EuiResizablePanel>
+    </>
+  )}
+</EuiResizableContainer>`;
+const ResizablePanelCollapsibleExtHtml = renderToHtml(
+  ResizablePanelCollapsibleExt
+);
+const collapsibleExtSnippet = `<EuiResizableContainer style={{ height: '400px' }}>
+  {(EuiResizablePanel, EuiResizableButton, {togglePanel}) => (
+    <>
+      <EuiResizablePanel initialSize={20} minSize="5px">
+        <EuiText>
+          <p>{text}</p>
+        </EuiText>
+      </EuiResizablePanel>
+
+      <EuiResizableButton />
+
+      <EuiResizablePanel initialSize={80} minSize="200px">
         <EuiText>
           <p>{text}</p>
         </EuiText>
@@ -61,28 +161,25 @@ export const ResizableContainerExample = {
   title: 'Resizable container',
   isNew: true,
   intro: (
-    <Fragment>
-      <EuiCallOut title="Consuming" color="warning">
-        <EuiText size="s">
-          <p>
-            This component is handy for various resizable containers.{' '}
-            <strong>EuiResizableContainer</strong> uses the{' '}
-            <EuiLink
-              href="https://reactjs.org/docs/render-props.html#using-props-other-than-render"
-              external>
-              React Render Props
-            </EuiLink>{' '}
-            technique to provide <strong>EuiResizablePanel</strong> and{' '}
-            <strong>EuiResizableButton</strong> components for you layout. Wrap
-            parts of your content with the <strong>EuiResizablePanel</strong>{' '}
-            component and put the <strong>EuiResizableButton</strong> component
-            between.
-          </p>
-        </EuiText>
-      </EuiCallOut>
+    <EuiText>
+      <p>
+        This component is handy for various resizable containers.{' '}
+        <strong>EuiResizableContainer</strong> uses the{' '}
+        <EuiLink
+          href="https://reactjs.org/docs/render-props.html#using-props-other-than-render"
+          external>
+          React Render Props
+        </EuiLink>{' '}
+        technique to provide <strong>EuiResizablePanel</strong> and{' '}
+        <strong>EuiResizableButton</strong> components for layout, and{' '}
+        <EuiCode>actions</EuiCode> for custom handling collapse and resize
+        functionality in your app. Wrap parts of your content with the{' '}
+        <strong>EuiResizablePanel</strong> component and put the{' '}
+        <strong>EuiResizableButton</strong> component between.
+      </p>
 
       <EuiSpacer size="l" />
-    </Fragment>
+    </EuiText>
   ),
   sections: [
     {
@@ -111,7 +208,7 @@ export const ResizableContainerExample = {
             <li>
               add <EuiCode>initialSize</EuiCode> in percents to each panel to
               specify the initial size of it. Other calculations will be
-              incapsulated, you don&#39;t worry about it.
+              encapsulated, you don&#39;t worry about it.
             </li>
             <li>
               add <EuiCode>scrollable=false</EuiCode> prop to a panel to
@@ -120,10 +217,49 @@ export const ResizableContainerExample = {
           </ul>
         </div>
       ),
-      props: { EuiResizableContainer, EuiResizablePanel, EuiResizableButton },
-      snippet,
+      props: {
+        EuiResizableContainer,
+        EuiResizablePanel,
+        EuiResizableButton,
+      },
+      snippet: basicSnippet,
       demo: <ResizableContainerBasic />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: ResizablePanelsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: ResizablePanelsHtml,
+        },
+      ],
+      title: 'Resizable panel options',
+      text: (
+        <div>
+          <p>
+            Each <strong>EuiResizablePanel</strong> is simply an{' '}
+            <strong>EuiPanel</strong> wrapped with a{' '}
+            <EuiCode>{'<div>'}</EuiCode> for controlling the width. It stretches
+            to fill its container and accepts all of the same{' '}
+            <Link to="/layout/panel">
+              <strong>EuiPanel</strong>
+            </Link>{' '}
+            props to style your panel.
+          </p>
+          <p>
+            The default props clear most of the <strong>EuiPanel</strong>{' '}
+            styles, but you can add them back in with <EuiCode>color</EuiCode>,{' '}
+            <EuiCode>hasShadow</EuiCode>, and <EuiCode>paddingSize</EuiCode>.
+          </p>
+        </div>
+      ),
+      props: { EuiResizablePanel },
+      snippet: panelsSnippet,
+      demo: <ResizablePanels />,
+    },
     {
       source: [
         {
@@ -166,77 +302,147 @@ export const ResizableContainerExample = {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: ResizableContainerThreePanelsSource,
+          code: ResizableContainerVerticalSource,
         },
         {
           type: GuideSectionTypes.HTML,
-          code: ResizableContainerThreePanelsHtml,
+          code: ResizableContainerVerticalHtml,
         },
       ],
-      title: 'Horizontal resizing with three panels',
+      title: 'Vertical resizing',
       text: (
         <p>
-          The <strong>EuiResizablePanel</strong> and{' '}
-          <strong>EuiResizableButton</strong> components can each be used
-          multiple times to create a more complex layout.
+          Set <EuiCode>direction=vertical</EuiCode> on{' '}
+          <strong>EuiResizableContainer</strong> to set a vertical orientation
+          of the resizable panels.
         </p>
       ),
       props: { EuiResizableContainer, EuiResizablePanel, EuiResizableButton },
-      demo: <ResizableContainerThreePanels />,
+      demo: <ResizableContainerVertical />,
+      snippet: verticalSnippet,
     },
     {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: ResizableContainerVericalSource,
+          code: ResizablePanelCollapsibleSource,
         },
         {
           type: GuideSectionTypes.HTML,
-          code: ResizableContainerVericalHtml,
+          code: ResizablePanelCollapsibleHtml,
         },
       ],
-      title: 'Vertical resizing',
+      title: 'Collapsible resizable panels',
       text: (
-        <p>
-          Set <EuiCode>direction=vertical</EuiCode> on{' '}
-          <strong>EuiResizableContainer</strong> to set a vertical orientation
-          of the resizable panels.
-        </p>
+        <div>
+          <p>
+            Panels can be designated as collapsible, which allows them to hide
+            content and automatically resize to a minimal width. The intent of
+            collapsible panels is to enable large, layout-level content areas to
+            cede space to a main content area. For instance, collapsing an
+            action panel to allow more focus on the primary display panel.
+          </p>
+          <p>
+            Use the <EuiCode>mode</EuiCode> prop on an{' '}
+            <strong>EuiResizablePanel</strong> to mark it as{' '}
+            <EuiCode>collapsible</EuiCode> or <EuiCode>main</EuiCode>. From the
+            provided <EuiCode>mode</EuiCode> configuration, the{' '}
+            <strong>EuiResizableContainer</strong> will determine placement of
+            the toggle button and functionality of panel collapsing. To prevent
+            empty states, not all panels can be{' '}
+            <EuiCode>mode=collapsible</EuiCode> (there must be at least one{' '}
+            <EuiCode>mode=main</EuiCode> panel).
+          </p>
+        </div>
       ),
-      props: { EuiResizableContainer, EuiResizablePanel, EuiResizableButton },
-      demo: (
-        <div className="guideDemo__highlightSpacer">
-          <ResizableContainerVertical />
+      props: {
+        EuiResizableContainer,
+        EuiResizablePanel,
+        EuiResizableButton,
+        ModeOptions,
+        PanelModeType,
+        ToggleOptions,
+      },
+      demo: <ResizablePanelCollapsible />,
+      snippet: collapsibleSnippet,
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: ResizablePanelCollapsibleOptsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: ResizablePanelCollapsibleOptsHtml,
+        },
+      ],
+      title: 'Collapsible panel options',
+      text: (
+        <div>
+          <p>
+            An <strong>EuiResizablePanel</strong> marked as{' '}
+            <EuiCode language="ts">{"mode={['collapsible']}"}</EuiCode> also
+            accepts configuration options for the collapsible button by passing
+            a second parameter, in the form of:
+          </p>
+          <EuiCodeBlock language="js" isCopyable>
+            {`mode={['collapsible', {
+  'data-test-subj': 'panel-1-toggle',
+  className: 'panel-toggle',
+  position: 'top',
+}]}`}
+          </EuiCodeBlock>
         </div>
       ),
+      demo: <ResizablePanelCollapsibleOpts />,
+      snippet: collapsibleOptsSnippet,
     },
     {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: ResizableResizerSizeSource,
+          code: ResizablePanelCollapsibleExtSource,
         },
         {
           type: GuideSectionTypes.HTML,
-          code: ResizableResizerSizeHtml,
+          code: ResizablePanelCollapsibleExtHtml,
         },
       ],
-      title: 'Resizable button spacing',
+      title: 'Collapsible panels with external control',
       text: (
         <div>
           <p>
-            You can control the space between panels by modifying the{' '}
-            <EuiCode>size</EuiCode> prop of the{' '}
-            <strong>EuiResizableButton</strong> component. The available sizes
-            are <EuiCode>xl</EuiCode>, <EuiCode>l</EuiCode>,{' '}
-            <EuiCode>m</EuiCode>, and <EuiCode>s</EuiCode>. You should avoid
-            using different sizes within the same{' '}
-            <strong>EuiResizableContainer</strong>, as shown in the demo below.
+            <strong>EuiResizableContainer</strong> also provides action hooks
+            for parent components to access internal methods, such as{' '}
+            <strong>EuiResizablePanel</strong> collapse toggling. The actions
+            are accessible via the third parameter of the render prop function.
+          </p>
+          <p>
+            Note that when bypassing internal{' '}
+            <strong>EuiResizableContainer</strong> logic, it is possible to
+            create situations that would otherwise be prevented. For instance,
+            allowing all panels to be collapsed creates a scenerio where your
+            app will need to account for empty state and accesibility in regards
+            to keyboard navigation.
+          </p>
+          <h3>Custom collapse button</h3>
+          <p>
+            You can also provide an external collapse button for custom
+            placement and look within your panel with{' '}
+            <EuiCode language="ts">{"mode={['custom']}"}</EuiCode>. When
+            collapsed, however, the default collapsed button will be used for
+            users to uncollapse the panel.
+          </p>
+          <p>
+            For consistency, we recommend the usage of the{' '}
+            <EuiCode>menuLeft</EuiCode>, <EuiCode>menuRight</EuiCode>, etc, icon
+            types.
           </p>
         </div>
       ),
-      props: { EuiResizableContainer, EuiResizablePanel, EuiResizableButton },
-      demo: <ResizableResizerSize />,
+      demo: <ResizablePanelCollapsibleExt />,
+      snippet: collapsibleExtSnippet,
     },
   ],
 };
diff --git a/src-docs/src/views/resizable_container/resizable_container_reset_values.js b/src-docs/src/views/resizable_container/resizable_container_reset_values.js
index aa3ba302ee60..525bc7c56057 100644
--- a/src-docs/src/views/resizable_container/resizable_container_reset_values.js
+++ b/src-docs/src/views/resizable_container/resizable_container_reset_values.js
@@ -83,7 +83,7 @@ export default () => {
       <EuiSpacer />
 
       <EuiResizableContainer
-        style={{ height: '400px' }}
+        style={{ height: '200px' }}
         onPanelWidthChange={onPanelWidthChange}>
         {(EuiResizablePanel, EuiResizableButton) => (
           <>
@@ -92,18 +92,18 @@ export default () => {
               size={sizes[firstPanelId]}
               minSize="30%">
               <EuiText>
-                <p>{text}</p>
+                <div>{text}</div>
               </EuiText>
             </EuiResizablePanel>
 
-            <EuiResizableButton size="l" />
+            <EuiResizableButton />
 
             <EuiResizablePanel
               id={secondPanelId}
               size={sizes[secondPanelId]}
               minSize="200px">
               <EuiText>
-                <p>{text}</p>
+                <div>{text}</div>
               </EuiText>
             </EuiResizablePanel>
           </>
diff --git a/src-docs/src/views/resizable_container/resizable_container_three_panels.js b/src-docs/src/views/resizable_container/resizable_container_three_panels.js
deleted file mode 100644
index ee37135cfe99..000000000000
--- a/src-docs/src/views/resizable_container/resizable_container_three_panels.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { EuiText, EuiResizableContainer } from '../../../../src/components';
-import { fake } from 'faker';
-
-const text = fake('{{lorem.paragraphs}}');
-
-export default () => (
-  <EuiResizableContainer style={{ height: '400px' }}>
-    {(EuiResizablePanel, EuiResizableButton) => (
-      <>
-        <EuiResizablePanel initialSize={100 / 3} minSize="50px">
-          <EuiText>
-            <p>{text}</p>
-          </EuiText>
-        </EuiResizablePanel>
-
-        <EuiResizableButton size="l" />
-
-        <EuiResizablePanel initialSize={100 / 3}>
-          <EuiText>
-            <p>{text}</p>
-          </EuiText>
-        </EuiResizablePanel>
-
-        <EuiResizableButton size="l" />
-
-        <EuiResizablePanel initialSize={100 / 3} minSize="10%">
-          <EuiText>
-            <p>{text}</p>
-          </EuiText>
-        </EuiResizablePanel>
-      </>
-    )}
-  </EuiResizableContainer>
-);
diff --git a/src-docs/src/views/resizable_container/resizable_container_vertical.js b/src-docs/src/views/resizable_container/resizable_container_vertical.js
index edc649f29ee4..5807bf771740 100644
--- a/src-docs/src/views/resizable_container/resizable_container_vertical.js
+++ b/src-docs/src/views/resizable_container/resizable_container_vertical.js
@@ -12,20 +12,20 @@ const text = (
 );
 
 export default () => (
-  <EuiResizableContainer style={{ height: '600px' }} direction="vertical">
+  <EuiResizableContainer style={{ height: '400px' }} direction="vertical">
     {(EuiResizablePanel, EuiResizableButton) => (
       <>
         <EuiResizablePanel initialSize={60} minSize="40%">
           <EuiText>
-            <p>{text}</p>
+            <div>{text}</div>
           </EuiText>
         </EuiResizablePanel>
 
-        <EuiResizableButton size="xl" />
+        <EuiResizableButton />
 
         <EuiResizablePanel initialSize={40} minSize="10%">
           <EuiText>
-            <p>{text}</p>
+            <div>{text}</div>
           </EuiText>
         </EuiResizablePanel>
       </>
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js
new file mode 100644
index 000000000000..f540a3240d03
--- /dev/null
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js
@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import {
+  EuiText,
+  EuiResizableContainer,
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiPanel,
+  EuiTitle,
+  EuiSpacer,
+  EuiPage,
+} from '../../../../src/components';
+import { fake } from 'faker';
+
+const texts = [];
+
+for (let i = 0; i < 4; i++) {
+  texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
+}
+
+export default () => {
+  const items = [
+    {
+      id: 1,
+      label: 'First item',
+      text: texts[0],
+      active: true,
+    },
+    {
+      id: 2,
+      label: 'Second item',
+      text: texts[1],
+    },
+    {
+      id: 3,
+      label: 'Third item',
+      text: texts[2],
+    },
+    {
+      id: 4,
+      label: 'Forth item',
+      text: texts[3],
+    },
+  ];
+
+  const [itemSelected, setItemSelected] = useState(items[0]);
+  const itemElements = items.map((item, index) => (
+    <EuiListGroupItem
+      key={index}
+      onClick={() => setItemSelected(item)}
+      label={item.label}
+      size="s"
+    />
+  ));
+
+  return (
+    <>
+      <EuiText>
+        <h3>Simple</h3>
+      </EuiText>
+      <EuiSpacer />
+      <EuiPage paddingSize="none">
+        <EuiResizableContainer style={{ height: '320px' }}>
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel
+                mode="collapsible"
+                initialSize={20}
+                minSize="10%">
+                <EuiListGroup flush>{itemElements}</EuiListGroup>
+              </EuiResizablePanel>
+
+              <EuiResizableButton />
+
+              <EuiResizablePanel mode="main" initialSize={80} minSize="50px">
+                <EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
+                  <EuiTitle>
+                    <p>{itemSelected.label}</p>
+                  </EuiTitle>
+                  <EuiSpacer />
+                  <EuiText>{itemSelected.text}</EuiText>
+                </EuiPanel>
+              </EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
+      </EuiPage>
+
+      <EuiSpacer />
+      <EuiText>
+        <h3>Multiple collapsible panels</h3>
+      </EuiText>
+      <EuiSpacer />
+
+      <EuiPage paddingSize="none">
+        <EuiResizableContainer style={{ height: '320px' }}>
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel
+                mode="collapsible"
+                initialSize={20}
+                minSize="10%">
+                <EuiListGroup flush>{itemElements}</EuiListGroup>
+              </EuiResizablePanel>
+
+              <EuiResizableButton />
+
+              <EuiResizablePanel mode="main" initialSize={60} minSize="50px">
+                <EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
+                  <EuiTitle>
+                    <p>{itemSelected.label}</p>
+                  </EuiTitle>
+                  <EuiSpacer />
+                  <EuiText>{itemSelected.text}</EuiText>
+                </EuiPanel>
+              </EuiResizablePanel>
+
+              <EuiResizableButton />
+
+              <EuiResizablePanel
+                mode="collapsible"
+                initialSize={20}
+                minSize="10%">
+                <EuiListGroup flush>{itemElements}</EuiListGroup>
+              </EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
+      </EuiPage>
+
+      <EuiSpacer />
+      <EuiText>
+        <h3>Vertical collapsible panels</h3>
+      </EuiText>
+      <EuiSpacer />
+
+      <EuiPage paddingSize="none">
+        <EuiResizableContainer direction="vertical" style={{ height: '400px' }}>
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel
+                mode="collapsible"
+                initialSize={20}
+                minSize="10%">
+                <EuiListGroup flush>{itemElements}</EuiListGroup>
+              </EuiResizablePanel>
+
+              <EuiResizableButton />
+
+              <EuiResizablePanel mode="main" initialSize={80} minSize="50px">
+                <EuiPanel paddingSize="l" style={{ height: '100%' }}>
+                  <EuiTitle>
+                    <p>{itemSelected.label}</p>
+                  </EuiTitle>
+                  <EuiSpacer />
+                  <EuiText>{itemSelected.text}</EuiText>
+                </EuiPanel>
+              </EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
+      </EuiPage>
+    </>
+  );
+};
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js
new file mode 100644
index 000000000000..bd1679baf586
--- /dev/null
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js
@@ -0,0 +1,123 @@
+import React, { useRef, useState } from 'react';
+import {
+  EuiResizableContainer,
+  EuiPanel,
+  EuiTitle,
+  EuiSpacer,
+  EuiButtonGroup,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+} from '../../../../src/components';
+
+const toggleButtons = [
+  {
+    id: '1',
+    label: 'Toggle Panel 1',
+  },
+  {
+    id: '2',
+    label: 'Toggle Panel 2',
+  },
+];
+
+export default () => {
+  const collapseFn = useRef(() => {});
+
+  const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({});
+
+  const onCollapse = (optionId) => {
+    const newToggleIdToSelectedMap = {
+      ...toggleIdToSelectedMap,
+      [optionId]: !toggleIdToSelectedMap[optionId],
+    };
+    setToggleIdToSelectedMap(newToggleIdToSelectedMap);
+  };
+
+  const onChange = (optionId) => {
+    onCollapse(optionId);
+    collapseFn.current(`panel${optionId}`, optionId === '3' ? 'right' : 'left');
+  };
+
+  return (
+    <>
+      <div className="eui-textCenter">
+        <EuiButtonGroup
+          legend="Collapsible panels"
+          options={toggleButtons}
+          idToSelectedMap={toggleIdToSelectedMap}
+          onChange={onChange}
+          color="primary"
+          type="multi"
+        />
+      </div>
+      <EuiSpacer />
+      <EuiResizableContainer
+        onToggleCollapsed={onCollapse}
+        style={{ height: '250px' }}>
+        {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
+          collapseFn.current = (id, direction = 'left') =>
+            togglePanel(id, { direction });
+          return (
+            <>
+              <EuiResizablePanel id="panel1" initialSize={30} minSize="10%">
+                <EuiPanel paddingSize="l" style={{ height: '100%' }}>
+                  <EuiTitle>
+                    <p>Panel 1</p>
+                  </EuiTitle>
+                </EuiPanel>
+              </EuiResizablePanel>
+
+              <EuiResizableButton />
+
+              <EuiResizablePanel id="panel2" initialSize={35} minSize="50px">
+                <EuiPanel paddingSize="l" style={{ height: '100%' }}>
+                  <EuiTitle>
+                    <p>Panel 2</p>
+                  </EuiTitle>
+                </EuiPanel>
+              </EuiResizablePanel>
+
+              <EuiResizableButton />
+
+              <EuiResizablePanel
+                mode={['custom', { position: 'top' }]}
+                id="panel3"
+                initialSize={35}
+                minSize="10%">
+                <EuiPanel paddingSize="l" style={{ height: '100%' }}>
+                  <EuiFlexGroup
+                    justifyContent="spaceBetween"
+                    alignItems="center">
+                    <EuiFlexItem>
+                      <EuiTitle>
+                        <p>Panel 3</p>
+                      </EuiTitle>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiButtonIcon
+                        color="text"
+                        aria-label={'Toggle panel 3'}
+                        iconType="menuRight"
+                        onClick={() => onChange(3)}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                  <EuiSpacer />
+                  <EuiText size="s">
+                    <p>
+                      This panel provides its own button for triggering
+                      collapsibility but relies on the default collapsed button
+                      to uncollapse.
+                    </p>
+                  </EuiText>
+                </EuiPanel>
+              </EuiResizablePanel>
+            </>
+          );
+        }}
+      </EuiResizableContainer>
+    </>
+  );
+};
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js
new file mode 100644
index 000000000000..8115d0465fc0
--- /dev/null
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import {
+  EuiResizableContainer,
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiPanel,
+  EuiTitle,
+  EuiSpacer,
+  EuiText,
+  EuiPage,
+} from '../../../../src/components';
+import { fake } from 'faker';
+
+const texts = [];
+
+for (let i = 0; i < 4; i++) {
+  texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
+}
+
+export default () => {
+  const items = [
+    {
+      id: 1,
+      label: 'First item',
+      text: texts[0],
+    },
+    {
+      id: 2,
+      label: 'Second item',
+      text: texts[1],
+    },
+    {
+      id: 3,
+      label: 'Third item',
+      text: texts[2],
+    },
+    {
+      id: 4,
+      label: 'Forth item',
+      text: texts[3],
+    },
+  ];
+
+  const [itemSelected, setItemSelected] = useState(items[0]);
+  const itemElements = items.map((item, index) => (
+    <EuiListGroupItem
+      key={index}
+      onClick={() => setItemSelected(item)}
+      label={item.label}
+      size="s"
+    />
+  ));
+  return (
+    <EuiPage paddingSize="none">
+      <EuiResizableContainer style={{ height: '320px' }}>
+        {(EuiResizablePanel, EuiResizableButton) => (
+          <>
+            <EuiResizablePanel
+              mode={[
+                'collapsible',
+                {
+                  className: 'panel-toggle',
+                  'data-test-subj': 'panel-1-toggle',
+                  position: 'top',
+                },
+              ]}
+              initialSize={20}
+              minSize="10%">
+              <EuiListGroup flush>{itemElements}</EuiListGroup>
+            </EuiResizablePanel>
+
+            <EuiResizableButton />
+
+            <EuiResizablePanel mode="main" initialSize={60} minSize="20%">
+              <EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
+                <EuiTitle>
+                  <p>{itemSelected.label}</p>
+                </EuiTitle>
+                <EuiSpacer />
+                <EuiText>{itemSelected.text}</EuiText>
+              </EuiPanel>
+            </EuiResizablePanel>
+
+            <EuiResizableButton />
+
+            <EuiResizablePanel
+              mode={[
+                'collapsible',
+                {
+                  className: 'panel-toggle',
+                  'data-test-subj': 'panel-3-toggle',
+                  position: 'bottom',
+                },
+              ]}
+              initialSize={20}
+              minSize="10%">
+              <EuiListGroup flush>{itemElements}</EuiListGroup>
+            </EuiResizablePanel>
+          </>
+        )}
+      </EuiResizableContainer>
+    </EuiPage>
+  );
+};
diff --git a/src-docs/src/views/resizable_container/resizable_panels.js b/src-docs/src/views/resizable_container/resizable_panels.js
new file mode 100644
index 000000000000..19c29c5db3fe
--- /dev/null
+++ b/src-docs/src/views/resizable_container/resizable_panels.js
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import {
+  EuiText,
+  EuiCode,
+  EuiResizableContainer,
+  EuiPanel,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiResizableContainer style={{ height: '200px' }}>
+    {(EuiResizablePanel, EuiResizableButton) => (
+      <>
+        <EuiResizablePanel initialSize={20} color="subdued">
+          <EuiText size="s">
+            <p>
+              This <strong>EuiResizablePanel</strong> changes the background
+              with <EuiCode>{'color="subdued"'}</EuiCode>.
+            </p>
+          </EuiText>
+        </EuiResizablePanel>
+
+        <EuiResizableButton />
+
+        <EuiResizablePanel
+          initialSize={40}
+          color="plain"
+          hasShadow
+          borderRadius="m"
+          wrapperPadding="m"
+          minSize="20%">
+          <EuiText size="s">
+            <p>
+              This <strong>EuiResizablePanel</strong> resets most of the{' '}
+              <strong>EuiPanel</strong> props back to default with{' '}
+              <EuiCode>{'color="plain" hasShadow borderRadius="m"'}</EuiCode>.
+            </p>
+            <p>
+              It also adds padding to the wrapping div with{' '}
+              <EuiCode>{'wrapperPadding="m"'}</EuiCode> to maintain the scroll{' '}
+              <strong>inside</strong> the panel.
+            </p>
+          </EuiText>
+        </EuiResizablePanel>
+
+        <EuiResizableButton />
+
+        <EuiResizablePanel initialSize={40} color="subdued">
+          <EuiPanel>
+            <EuiText size="s">
+              <p>
+                This <strong>EuiResizablePanel</strong> also changes the
+                background color but adds an internal <strong>EuiPanel</strong>{' '}
+                that will not stretch and will scroll within the{' '}
+                <strong>EuiResizablePanel</strong>.
+              </p>
+            </EuiText>
+          </EuiPanel>
+        </EuiResizablePanel>
+      </>
+    )}
+  </EuiResizableContainer>
+);
diff --git a/src-docs/src/views/resizable_container/resizable_resizer_size.js b/src-docs/src/views/resizable_container/resizable_resizer_size.js
deleted file mode 100644
index 0a42e0cb03c7..000000000000
--- a/src-docs/src/views/resizable_container/resizable_resizer_size.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-
-import {
-  EuiText,
-  EuiCode,
-  EuiResizableContainer,
-} from '../../../../src/components';
-
-export default () => (
-  <EuiResizableContainer style={{ height: '200px' }}>
-    {(EuiResizablePanel, EuiResizableButton) => (
-      <>
-        <EuiResizablePanel initialSize={35} minSize="100px">
-          <EuiText size="s">
-            <p>
-              The <strong>EuiResizableButton</strong> to the right of this{' '}
-              <strong>EuiResizablePanel</strong> uses size <EuiCode>xl</EuiCode>
-            </p>
-          </EuiText>
-        </EuiResizablePanel>
-
-        <EuiResizableButton size="xl" />
-
-        <EuiResizablePanel initialSize={25}>
-          <EuiText size="s">
-            <p>
-              The <strong>EuiResizableButton</strong> to the right of this{' '}
-              <strong>EuiResizablePanel</strong> uses size <EuiCode>l</EuiCode>
-            </p>
-          </EuiText>
-        </EuiResizablePanel>
-
-        <EuiResizableButton size="l" />
-
-        <EuiResizablePanel initialSize={15}>
-          <EuiText size="s">
-            <p>
-              The <strong>EuiResizableButton</strong> to the right of this{' '}
-              <strong>EuiResizablePanel</strong> uses size <EuiCode>m</EuiCode>,
-              which is the <strong>default</strong> size.
-            </p>
-          </EuiText>
-        </EuiResizablePanel>
-
-        <EuiResizableButton size="m" />
-
-        <EuiResizablePanel initialSize={15}>
-          <EuiText size="s">
-            <p>
-              The <strong>EuiResizableButton</strong> to the right of this{' '}
-              <strong>EuiResizablePanel</strong> uses size <EuiCode>s</EuiCode>
-            </p>
-          </EuiText>
-        </EuiResizablePanel>
-
-        <EuiResizableButton size="s" />
-
-        <EuiResizablePanel initialSize={10} minSize="100px">
-          <EuiText size="s">
-            <p>
-              This is the last <strong>EuiResizablePanel</strong>, so it is not
-              followed by a <strong>EuiResizableButton</strong>
-            </p>
-          </EuiText>
-        </EuiResizablePanel>
-      </>
-    )}
-  </EuiResizableContainer>
-);
diff --git a/src/components/page/__snapshots__/page.test.tsx.snap b/src/components/page/__snapshots__/page.test.tsx.snap
index 622d924aabd7..8d0b7edb54a7 100644
--- a/src/components/page/__snapshots__/page.test.tsx.snap
+++ b/src/components/page/__snapshots__/page.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiPage is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPage testClass1 testClass2"
+  class="euiPage euiPage--paddingMedium testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
@@ -11,7 +11,7 @@ exports[`EuiPage is rendered 1`] = `
 exports[`EuiPage restrict width can be set to a custom number 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPage euiPage--restrictWidth-custom testClass1 testClass2"
+  class="euiPage euiPage--restrictWidth-custom euiPage--paddingMedium testClass1 testClass2"
   data-test-subj="test subject string"
   style="max-width:1024px"
 />
@@ -20,7 +20,7 @@ exports[`EuiPage restrict width can be set to a custom number 1`] = `
 exports[`EuiPage restrict width can be set to a custom value and measurement 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPage euiPage--restrictWidth-custom testClass1 testClass2"
+  class="euiPage euiPage--restrictWidth-custom euiPage--paddingMedium testClass1 testClass2"
   data-test-subj="test subject string"
   style="max-width:24rem"
 />
@@ -29,7 +29,7 @@ exports[`EuiPage restrict width can be set to a custom value and measurement 1`]
 exports[`EuiPage restrict width can be set to a default 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPage euiPage--restrictWidth-default testClass1 testClass2"
+  class="euiPage euiPage--restrictWidth-default euiPage--paddingMedium testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/page/_page.scss b/src/components/page/_page.scss
index 5bae268ad8a3..973a1ee53b1b 100644
--- a/src/components/page/_page.scss
+++ b/src/components/page/_page.scss
@@ -1,6 +1,5 @@
 .euiPage {
   display: flex;
-  padding: $euiSize;
   background-color: $euiPageBackgroundColor;
 
   &--restrictWidth-default,
@@ -15,6 +14,12 @@
 
   @include euiBreakpoint('xs', 's') {
     flex-direction: column;
-    // padding: 0; temporarily removing
+  }
+}
+
+// Uses the same values as EuiPanel
+@each $modifier, $amount in $euiPanelPaddingModifiers {
+  .euiPage--#{$modifier} {
+    padding: $amount;
   }
 }
diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx
index 9a7e077877d0..89668dd07e7b 100644
--- a/src/components/page/page.tsx
+++ b/src/components/page/page.tsx
@@ -19,26 +19,41 @@
 
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { CommonProps } from '../common';
+import { CommonProps, keysOf } from '../common';
+
+const paddingSizeToClassNameMap = {
+  none: null,
+  s: 'euiPage--paddingSmall',
+  m: 'euiPage--paddingMedium',
+  l: 'euiPage--paddingLarge',
+};
+
+export const SIZES = keysOf(paddingSizeToClassNameMap);
 
 export interface EuiPageProps
   extends CommonProps,
     HTMLAttributes<HTMLDivElement> {
-  restrictWidth?: boolean | number | string;
-}
-
-export const EuiPage: FunctionComponent<EuiPageProps> = ({
-  children,
   /**
    * Sets the max-width of the page,
-   * set to `true` to use the default size,
+   * set to `true` to use the default size of `1000px`,
    * set to `false` to not restrict the width,
    * set to a number for a custom width in px,
    * set to a string for a custom width in custom measurement.
    */
+  restrictWidth?: boolean | number | string;
+  /**
+   * Adjust the padding.
+   * When using this setting it's best to be consistent throught all similar usages.
+   */
+  paddingSize?: typeof SIZES[number];
+}
+
+export const EuiPage: FunctionComponent<EuiPageProps> = ({
+  children,
   restrictWidth = false,
   style,
   className,
+  paddingSize = 'm',
   ...rest
 }) => {
   let widthClassname;
@@ -51,7 +66,12 @@ export const EuiPage: FunctionComponent<EuiPageProps> = ({
     newStyle = { ...style, maxWidth: restrictWidth };
   }
 
-  const classes = classNames('euiPage', widthClassname, className);
+  const classes = classNames(
+    'euiPage',
+    widthClassname,
+    paddingSizeToClassNameMap[paddingSize],
+    className
+  );
 
   return (
     <div className={classes} style={newStyle || style} {...rest}>
diff --git a/src/components/panel/index.ts b/src/components/panel/index.ts
index b7419dcafed6..829cad7ff273 100644
--- a/src/components/panel/index.ts
+++ b/src/components/panel/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { EuiPanel, PanelPaddingSize, SIZES } from './panel';
+export { EuiPanel, EuiPanelProps, PanelPaddingSize, SIZES } from './panel';
diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
index d18163566ae5..36a8feb2da42 100644
--- a/src/components/panel/panel.tsx
+++ b/src/components/panel/panel.tsx
@@ -29,6 +29,13 @@ import classNames from 'classnames';
 import { CommonProps, keysOf, ExclusiveUnion } from '../common';
 import { EuiBetaBadge } from '../badge/beta_badge';
 
+export const panelPaddingValues = {
+  none: 0,
+  s: 8,
+  m: 16,
+  l: 24,
+};
+
 const paddingSizeToClassNameMap = {
   none: null,
   s: 'euiPanel--paddingSmall',
@@ -60,7 +67,7 @@ export type PanelColor = typeof COLORS[number];
 export type PanelPaddingSize = typeof SIZES[number];
 export type PanelBorderRadius = typeof BORDER_RADII[number];
 
-interface Props extends CommonProps {
+export interface PanelProps extends CommonProps {
   /**
    * Adds a medium shadow to the panel;
    * Clickable cards will still get a shadow on hover
@@ -103,11 +110,11 @@ interface Props extends CommonProps {
 }
 
 interface Divlike
-  extends Props,
+  extends PanelProps,
     Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'color'> {}
 
 interface Buttonlike
-  extends Props,
+  extends PanelProps,
     Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {}
 
 export type EuiPanelProps = ExclusiveUnion<Divlike, Buttonlike>;
diff --git a/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap b/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
index 175467df6b48..4f96f293df93 100644
--- a/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
+++ b/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
@@ -1,30 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiResizableContainer can adjust button spacing 1`] = `
+exports[`EuiResizableContainer can adjust panel props 1`] = `
 <div
   aria-label="aria-label"
   class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:100%;min-width:0px;min-height:0"
+    style="width:50%;height:auto"
   >
-    Testing
+    <div
+      class="euiPanel euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Testing
+    </div>
   </div>
   <button
     aria-label="Press left or right to adjust panels size"
-    class="euiResizableButton euiResizableButton--sizeSmall euiResizableButton--horizontal"
-    data-test-subj="splitPanelResizer"
+    class="euiResizableButton euiResizableButton--horizontal"
+    data-test-subj="euiResizableButton"
+    id="resizable-button_generated-id"
     type="button"
   />
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:100%;min-width:0px;min-height:0"
+    style="width:50%;height:auto"
   >
-    123
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--plain euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      123
+    </div>
   </div>
 </div>
 `;
@@ -36,24 +45,33 @@ exports[`EuiResizableContainer can be controlled externally 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:100%;min-width:0px;min-height:0"
+    style="width:50%;height:auto"
   >
-    Testing
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Testing
+    </div>
   </div>
   <button
     aria-label="Press left or right to adjust panels size"
-    class="euiResizableButton euiResizableButton--sizeMedium euiResizableButton--horizontal"
-    data-test-subj="splitPanelResizer"
+    class="euiResizableButton euiResizableButton--horizontal"
+    data-test-subj="euiResizableButton"
+    id="resizable-button_generated-id"
     type="button"
   />
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:100%;min-width:0px;min-height:0"
+    style="width:50%;height:auto"
   >
-    123
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      123
+    </div>
   </div>
 </div>
 `;
@@ -65,24 +83,33 @@ exports[`EuiResizableContainer can be vertical 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:100%;height:50%;min-width:0;min-height:0px"
+    style="width:100%;height:50%"
   >
-    Testing
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Testing
+    </div>
   </div>
   <button
     aria-label="Press up or down to adjust panels size"
-    class="euiResizableButton euiResizableButton--sizeMedium euiResizableButton--vertical"
-    data-test-subj="splitPanelResizer"
+    class="euiResizableButton euiResizableButton--vertical"
+    data-test-subj="euiResizableButton"
+    id="resizable-button_generated-id"
     type="button"
   />
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:100%;height:50%;min-width:0;min-height:0px"
+    style="width:100%;height:50%"
   >
-    123
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      123
+    </div>
   </div>
 </div>
 `;
@@ -94,37 +121,51 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:33%;height:100%;min-width:0px;min-height:0"
+    style="width:33%;height:auto"
   >
-    Testing
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Testing
+    </div>
   </div>
   <button
     aria-label="Press left or right to adjust panels size"
-    class="euiResizableButton euiResizableButton--sizeMedium euiResizableButton--horizontal"
-    data-test-subj="splitPanelResizer"
+    class="euiResizableButton euiResizableButton--horizontal"
+    data-test-subj="euiResizableButton"
+    id="resizable-button_generated-id"
     type="button"
   />
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:33%;height:100%;min-width:0px;min-height:0"
+    style="width:33%;height:auto"
   >
-    123
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      123
+    </div>
   </div>
   <button
     aria-label="Press left or right to adjust panels size"
-    class="euiResizableButton euiResizableButton--sizeMedium euiResizableButton--horizontal"
-    data-test-subj="splitPanelResizer"
+    class="euiResizableButton euiResizableButton--horizontal"
+    data-test-subj="euiResizableButton"
+    id="resizable-button_generated-id"
     type="button"
   />
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:33%;height:100%;min-width:0px;min-height:0"
+    style="width:33%;height:auto"
   >
-    And again
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      And again
+    </div>
   </div>
 </div>
 `;
@@ -136,24 +177,71 @@ exports[`EuiResizableContainer can have scrollable panels 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:100%;min-width:0px;min-height:0"
+    style="width:50%;height:auto"
   >
-    Testing
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Testing
+    </div>
   </div>
   <button
     aria-label="Press left or right to adjust panels size"
-    class="euiResizableButton euiResizableButton--sizeMedium euiResizableButton--horizontal"
-    data-test-subj="splitPanelResizer"
+    class="euiResizableButton euiResizableButton--horizontal"
+    data-test-subj="euiResizableButton"
+    id="resizable-button_generated-id"
     type="button"
   />
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:100%;min-width:0px;min-height:0"
+    style="width:50%;height:auto"
   >
-    123
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      123
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiResizableContainer can have toggleable panels 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiResizablePanel euiResizablePanel--collapsible euiResizablePanel--middle"
+    id="resizable-panel_generated-id"
+    style="width:20%;height:auto"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Sidebar
+    </div>
+  </div>
+  <button
+    aria-label="Press left or right to adjust panels size"
+    class="euiResizableButton euiResizableButton--horizontal"
+    data-test-subj="euiResizableButton"
+    id="resizable-button_generated-id"
+    type="button"
+  />
+  <div
+    class="euiResizablePanel euiResizablePanel--middle"
+    id="resizable-panel_generated-id"
+    style="width:80%;height:auto"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Sidebar content
+    </div>
   </div>
 </div>
 `;
@@ -165,24 +253,71 @@ exports[`EuiResizableContainer is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
+    id="resizable-panel_generated-id"
+    style="width:50%;height:auto"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Testing
+    </div>
+  </div>
+  <button
+    aria-label="Press left or right to adjust panels size"
+    class="euiResizableButton euiResizableButton--horizontal"
+    data-test-subj="euiResizableButton"
+    id="resizable-button_generated-id"
+    type="button"
+  />
+  <div
+    class="euiResizablePanel euiResizablePanel--middle"
+    id="resizable-panel_generated-id"
+    style="width:50%;height:auto"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      123
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiResizablePanel euiResizablePanel--collapsible euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:100%;min-width:0px;min-height:0"
+    style="width:20%;height:auto"
   >
-    Testing
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Sidebar
+    </div>
   </div>
   <button
     aria-label="Press left or right to adjust panels size"
-    class="euiResizableButton euiResizableButton--sizeMedium euiResizableButton--horizontal"
-    data-test-subj="splitPanelResizer"
+    class="euiResizableButton euiResizableButton--horizontal"
+    data-test-subj="euiResizableButton"
+    id="resizable-button_generated-id"
     type="button"
   />
   <div
-    class="euiResizablePanel"
+    class="euiResizablePanel euiResizablePanel--middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:100%;min-width:0px;min-height:0"
+    style="width:80%;height:auto"
   >
-    123
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable"
+    >
+      Sidebar content
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/resizable_container/_index.scss b/src/components/resizable_container/_index.scss
index 0f42947c498a..8c52f0fffbe0 100644
--- a/src/components/resizable_container/_index.scss
+++ b/src/components/resizable_container/_index.scss
@@ -1,4 +1,5 @@
 @import 'variables';
 @import 'resizable_button';
+@import 'resizable_collapse_button';
 @import 'resizable_container';
 @import 'resizable_panel';
diff --git a/src/components/resizable_container/_resizable_button.scss b/src/components/resizable_container/_resizable_button.scss
index 212e7c8eabab..e0aac37146cc 100644
--- a/src/components/resizable_container/_resizable_button.scss
+++ b/src/components/resizable_container/_resizable_button.scss
@@ -3,6 +3,7 @@
 .euiResizableButton {
   position: relative;
   flex-shrink: 0;
+  z-index: $euiZLevel1;
 
   &:before,
   &:after {
@@ -22,11 +23,14 @@
 
   &.euiResizableButton--horizontal {
     cursor: col-resize;
+    width: $euiResizableButtonSize;
+    margin-left: -($euiResizableButtonSize / 2);
+    margin-right: -($euiResizableButtonSize / 2);
 
     &:before,
     &:after {
       width: 1px;
-      height: 12px;
+      height: $euiSizeM;
     }
 
     &:before {
@@ -40,10 +44,13 @@
 
   &.euiResizableButton--vertical {
     cursor: row-resize;
+    height: $euiResizableButtonSize;
+    margin-top: -($euiResizableButtonSize / 2);
+    margin-bottom: -($euiResizableButtonSize / 2);
 
     &:before,
     &:after {
-      width: 12px;
+      width: $euiSizeM;
       height: 1px;
     }
 
@@ -57,7 +64,7 @@
   }
 
   //Lighten the "grab" icon on :hover
-  &:hover {
+  &:hover:not(:disabled) {
     &:before,
     &:after {
       background-color: $euiColorMediumShade;
@@ -66,7 +73,7 @@
   }
 
   //Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus
-  &:focus {
+  &:focus:not(:disabled) {
     background-color: transparentize($euiColorPrimary, .9);
 
     &:before,
@@ -83,8 +90,8 @@
   }
 
   //Morph the "grab" icon into a fluid 2px straight line on :hover and :focus
-  &:hover,
-  &:focus {
+  &:hover:not(:disabled),
+  &:focus:not(:disabled) {
     &.euiResizableButton--horizontal {
       &:before,
       &:after {
@@ -115,17 +122,8 @@
       }
     }
   }
-}
-
-//Generate modifier classes that control the size of the resizer
-@each $modifier, $amount in $euiResizableButtonSizeModifiers {
-  .euiResizableButton--#{$modifier} {
-    &.euiResizableButton--vertical {
-      height: $amount;
-    }
 
-    &.euiResizableButton--horizontal {
-      width: $amount;
-    }
+  &:disabled {
+    display: none !important; // sass-lint:disable-line no-important
   }
 }
diff --git a/src/components/resizable_container/_resizable_collapse_button.scss b/src/components/resizable_container/_resizable_collapse_button.scss
new file mode 100644
index 000000000000..ccc6100993a4
--- /dev/null
+++ b/src/components/resizable_container/_resizable_collapse_button.scss
@@ -0,0 +1,152 @@
+// This file has lots of modifiers and is somewhat nesty by nature because of positioning
+// sass-lint:disable nesting-depth
+
+/**
+ * 1. The default position of the button should always be `middle`, so
+ *    those position styles aren't restricted to a class
+ * 2. When collpsed, the button itself is the full collapsed area and we use
+ *    flex to align the icon within
+ */
+
+.euiResizableToggleButton {
+  @include euiSlightShadow;
+  position: absolute;
+  z-index: $euiZLevel1 + 1;
+  // Remove animations from EuiButtonIcon because of the custom transforms
+  animation: none !important; // sass-lint:disable-line no-important
+  // Remove transition from EuiButtonIcon because of the custom transforms
+  transition: none !important; // sass-lint:disable-line no-important
+
+  &,
+  &:hover,
+  &:focus {
+    background-color: $euiColorLightestShade;
+  }
+
+  &:focus {
+    @include euiSlightShadowHover;
+    background-color: $euiColorLightShade;
+  }
+
+  &-isCollapsed {
+    box-shadow: none;
+    background: transparent;
+    border-radius: 0;
+    display: flex; /* 2 */
+  }
+
+  &:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) {
+    @include euiScreenReaderOnly;
+  }
+}
+
+.euiResizableToggleButton--horizontal {
+  &.euiResizableToggleButton {
+    &.euiResizableToggleButton--after {
+      right: 0;
+      top: 50%; /* 1 */
+      transform: translate(50%, -50%); /* 1 */
+      justify-content: center; /* 1, 2 */
+
+      &.euiResizableToggleButton--top {
+        top: 0;
+        transform: translate(50%, $euiSize);
+        justify-content: flex-start; /* 2 */
+      }
+
+      &.euiResizableToggleButton--bottom {
+        top: auto;
+        bottom: 0;
+        transform: translate(50%, -$euiSize);
+        justify-content: flex-end; /* 2 */
+      }
+    }
+
+    &.euiResizableToggleButton--before {
+      left: 0;
+      top: 50%; /* 1 */
+      transform: translate(-50%, -50%); /* 1 */
+      justify-content: center; /* 1, 2 */
+
+      &.euiResizableToggleButton--top {
+        top: 0;
+        transform: translate(-50%, $euiSize);
+        justify-content: flex-start; /* 2 */
+      }
+
+      &.euiResizableToggleButton--bottom {
+        top: auto;
+        bottom: 0;
+        transform: translate(-50%, -$euiSize);
+        justify-content: flex-end; /* 2 */
+      }
+    }
+
+    &.euiResizableToggleButton-isCollapsed {
+      flex-direction: column;
+      top: 0 !important; // sass-lint:disable-line no-important
+      bottom: 0 !important; // sass-lint:disable-line no-important
+      transform: none !important; // sass-lint:disable-line no-important
+      // Give some space from the cross edges
+      padding-top: $euiSize;
+      padding-bottom: $euiSize;
+    }
+  }
+}
+
+.euiResizableToggleButton--vertical {
+  &.euiResizableToggleButton {
+
+    &.euiResizableToggleButton--after {
+      top: 100%;
+      left: 50%; /* 1 */
+      transform: translate(-50%, -50%); /* 1 */
+      justify-content: center; /* 1, 2 */
+
+      &.euiResizableToggleButton--left {
+        left: 0;
+        transform: translate($euiSize, -50%);
+        justify-content: flex-start; /* 2 */
+      }
+
+      &.euiResizableToggleButton--right {
+        left: auto;
+        right: 0;
+        transform: translate(-$euiSize, -50%);
+        justify-content: flex-end; /* 2 */
+      }
+    }
+
+    &.euiResizableToggleButton--before {
+      bottom: 100%;
+      left: 50%; /* 1 */
+      transform: translate(-50%, 50%); /* 1 */
+      justify-content: center; /* 1, 2 */
+
+      &.euiResizableToggleButton--left {
+        left: 0;
+        transform: translate($euiSize, 50%);
+        justify-content: flex-start; /* 2 */
+      }
+
+      &.euiResizableToggleButton--right {
+        left: auto;
+        right: 0;
+        transform: translate(-$euiSize, 50%);
+        justify-content: flex-end; /* 2 */
+      }
+    }
+
+    &.euiResizableToggleButton-isCollapsed {
+      flex-direction: row;
+      top: 0 !important; // sass-lint:disable-line no-important
+      bottom: 0 !important; // sass-lint:disable-line no-important
+      left: 0 !important; // sass-lint:disable-line no-important
+      transform: none !important; // sass-lint:disable-line no-important
+      width: 100%;
+      // Give some space from the cross edges
+      padding-left: $euiSize;
+      padding-right: $euiSize;
+    }
+  }
+}
diff --git a/src/components/resizable_container/_resizable_panel.scss b/src/components/resizable_container/_resizable_panel.scss
index 72d872b563dd..f9c6438b41b7 100644
--- a/src/components/resizable_container/_resizable_panel.scss
+++ b/src/components/resizable_container/_resizable_panel.scss
@@ -1,4 +1,51 @@
 .euiResizablePanel {
+  position: relative;
+}
+
+@each $modifier, $amount in $euiPanelPaddingModifiers {
+  .euiResizablePanel--#{$modifier} {
+    padding: $amount;
+  }
+}
+
+.euiResizablePanel__content {
+  height: 100%;
+
+  // Manually remove the border for default theme
+  &:not([class*='plain']) {
+    border-width: 0;
+  }
+}
+
+.euiResizablePanel__content--scrollable {
   @include euiScrollBar;
   overflow-y: auto;
 }
+
+.euiResizablePanel-isCollapsed {
+  overflow: hidden;
+
+  .euiResizablePanel__content * {
+    display: none;
+  }
+}
+
+.euiResizableContainer--horizontal {
+  .euiResizablePanel-isCollapsed {
+    min-width: 0 !important; // sass-lint:disable-line no-important
+  }
+
+  .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed {
+    min-width: $euiSizeL !important; // sass-lint:disable-line no-important
+  }
+}
+
+.euiResizableContainer--vertical {
+  .euiResizablePanel-isCollapsed {
+    min-height: 0 !important; // sass-lint:disable-line no-important
+  }
+
+  .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed {
+    min-height: $euiSizeL !important; // sass-lint:disable-line no-important
+  }
+}
diff --git a/src/components/resizable_container/_variables.scss b/src/components/resizable_container/_variables.scss
index 0d55002fa6dd..f4287b2f1118 100644
--- a/src/components/resizable_container/_variables.scss
+++ b/src/components/resizable_container/_variables.scss
@@ -1,8 +1,2 @@
-$euiResizableButtonTransitionSpeed: $euiAnimSpeedFast;
-
-$euiResizableButtonSizeModifiers: (
-  'sizeSmall': $euiSizeM,
-  'sizeMedium': $euiSize,
-  'sizeLarge': $euiSizeL,
-  'sizeExtraLarge': $euiSizeXXL
-) !default;
\ No newline at end of file
+$euiResizableButtonTransitionSpeed: $euiAnimSpeedFast !default;
+$euiResizableButtonSize: $euiSize !default;
diff --git a/src/components/resizable_container/context.tsx b/src/components/resizable_container/context.tsx
index 27ea85a8f19d..e070645426f8 100644
--- a/src/components/resizable_container/context.tsx
+++ b/src/components/resizable_container/context.tsx
@@ -18,87 +18,36 @@
  */
 
 import React, { createContext, useContext } from 'react';
-
-export interface EuiResizablePanelController {
-  id: string;
-  setSize: (panelSize: number) => void;
-  getSizePx: () => number;
-  minSize: string;
-}
-
-export class EuiResizablePanelRegistry {
-  private panels: { [key: string]: EuiResizablePanelController } = {};
-  private resizerRefs = new Set<HTMLElement>();
-
-  registerPanel(panel: EuiResizablePanelController) {
-    this.panels[panel.id] = panel;
-  }
-
-  deregisterPanel(id: EuiResizablePanelController['id']) {
-    delete this.panels[id];
-  }
-
-  registerResizerRef(resizerRef: HTMLElement) {
-    this.resizerRefs.add(resizerRef);
-  }
-
-  deregisterResizerRef(resizerRef: HTMLElement) {
-    this.resizerRefs.delete(resizerRef);
-  }
-
-  getResizerSiblings(prevPanelId: string, nextPanelId: string) {
-    return [this.panels[prevPanelId], this.panels[nextPanelId]];
-  }
-
-  getAllResizers() {
-    return Array.from(this.resizerRefs);
-  }
-
-  fetchAllPanels(
-    prevPanelId: string,
-    nextPanelId: string,
-    containerSize: number
-  ) {
-    const panelWithSizes: { [key: string]: number } = {};
-    for (const key in this.panels) {
-      if (key !== prevPanelId && key !== nextPanelId) {
-        panelWithSizes[key] =
-          (this.panels[key].getSizePx() / containerSize) * 100;
-      }
-    }
-    return panelWithSizes;
-  }
-}
-
-interface ContextProps {
-  registry?: EuiResizablePanelRegistry;
+import { EuiResizableContainerRegistry } from './types';
+interface ContainerContextProps {
+  registry?: EuiResizableContainerRegistry;
 }
 
-const EuiResizablePanelContext = createContext<ContextProps>({});
+const EuiResizableContainerContext = createContext<ContainerContextProps>({});
 
-interface ContextProviderProps extends Required<ContextProps> {
+interface ContextProviderProps extends Required<ContainerContextProps> {
   /**
    * ReactNode to render as this component's content
    */
   children: any;
 }
 
-export function EuiResizablePanelContextProvider({
+export function EuiResizableContainerContextProvider({
   children,
   registry,
 }: ContextProviderProps) {
   return (
-    <EuiResizablePanelContext.Provider value={{ registry }}>
+    <EuiResizableContainerContext.Provider value={{ registry }}>
       {children}
-    </EuiResizablePanelContext.Provider>
+    </EuiResizableContainerContext.Provider>
   );
 }
 
-export const useEuiResizablePanelContext = () => {
-  const context = useContext(EuiResizablePanelContext);
+export const useEuiResizableContainerContext = () => {
+  const context = useContext(EuiResizableContainerContext);
   if (!context.registry) {
     throw new Error(
-      'useEuiResizablePanelContext must be used within a <EuiResizablePanelContextProvider />'
+      'useEuiResizableContainerContext must be used within a <EuiResizableContainerContextProvider />'
     );
   }
   return context;
diff --git a/src/components/resizable_container/helpers.test.ts b/src/components/resizable_container/helpers.test.ts
new file mode 100644
index 000000000000..77b9d1c9366b
--- /dev/null
+++ b/src/components/resizable_container/helpers.test.ts
@@ -0,0 +1,66 @@
+/*
+ * 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 { pxToPercent, sizesOnly, getPanelMinSize } from './helpers';
+
+import { EuiResizableContainerRegistry } from './types';
+
+describe('pxToPercent', () => {
+  it('should convert px to percent of whole', () => {
+    expect(pxToPercent(10, 100)).toEqual(10);
+    expect(pxToPercent(0, 1000)).toEqual(0);
+    expect(pxToPercent(135.5, 1000)).toEqual(13.55);
+    expect(pxToPercent(101, 100)).toEqual(101);
+    expect(pxToPercent(10, 0)).toEqual(0);
+    expect(pxToPercent(10, -1)).toEqual(0);
+    expect(pxToPercent(-1, 100)).toEqual(0);
+  });
+});
+
+describe('sizesOnly', () => {
+  it('reduce to sizes values only', () => {
+    const panels = [
+      { id: '1', size: 10 },
+      { id: '2', size: 20 },
+      { id: '3', size: 30 },
+      { id: '4', size: 0 },
+    ].reduce((out: EuiResizableContainerRegistry['panels'], panel) => {
+      out[panel.id] = {
+        getSizePx: () => 10,
+        minSize: ['0px', '0px'],
+        isCollapsed: false,
+        prevSize: 0,
+        position: 'middle',
+        ...panel,
+      };
+      return out;
+    }, {});
+    expect(sizesOnly(panels)).toEqual({ '1': 10, '2': 20, '3': 30, '4': 0 });
+  });
+});
+
+describe('getPanelMinSize', () => {
+  it('should return the larger of the two, as a percentage of the whole', () => {
+    expect(getPanelMinSize(['10px', '10%'], 100)).toEqual(10);
+    expect(getPanelMinSize(['10px', '20%'], 100)).toEqual(20);
+    expect(getPanelMinSize(['30px', '29%'], 100)).toEqual(30);
+    expect(getPanelMinSize(['99px', '95%'], 100)).toEqual(99);
+    expect(getPanelMinSize(['50px', '50%'], 150)).toEqual(50);
+  });
+});
diff --git a/src/components/resizable_container/helpers.ts b/src/components/resizable_container/helpers.ts
index fc008d8115dd..4577cb132683 100644
--- a/src/components/resizable_container/helpers.ts
+++ b/src/components/resizable_container/helpers.ts
@@ -17,230 +17,606 @@
  * under the License.
  */
 
-import { useCallback, MouseEvent, TouchEvent } from 'react';
+import {
+  useMemo,
+  useReducer,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+} from 'react';
 
-import { keys } from '../../services';
+import { assertNever } from '../common';
 import {
-  EuiResizableButtonMouseEvent,
-  EuiResizableButtonKeyDownEvent,
-} from './resizable_button';
-import { EuiResizablePanelRegistry } from './context';
-import { EuiResizableContainerState } from './resizable_container';
+  EuiResizablePanelController,
+  EuiResizableButtonController,
+  EuiResizableContainerRegistry,
+  EuiResizableContainerState,
+  EuiResizableContainerAction,
+  EuiResizableContainerActions,
+  ActionDragStart,
+  ActionDragMove,
+  ActionKeyMove,
+  ActionToggle,
+  ActionFocus,
+} from './types';
 
 interface Params {
-  isHorizontal: boolean;
-  state: EuiResizableContainerState;
-  setState: React.Dispatch<React.SetStateAction<EuiResizableContainerState>>;
+  initialState: EuiResizableContainerState;
   containerRef: React.RefObject<HTMLDivElement>;
-  registryRef: React.MutableRefObject<EuiResizablePanelRegistry>;
   onPanelWidthChange?: ({}: { [key: string]: number }) => any;
 }
 
-type onMouseMove = (event: MouseEvent | TouchEvent) => void;
-
-function isMouseEvent(event: MouseEvent | TouchEvent): event is MouseEvent {
+function isMouseEvent(
+  event: ReactMouseEvent | ReactTouchEvent
+): event is ReactMouseEvent {
   return typeof event === 'object' && 'pageX' in event && 'pageY' in event;
 }
 
-const pxToPercent = (proportion: number, whole: number) =>
-  (proportion / whole) * 100;
+export const pxToPercent = (proportion: number, whole: number) => {
+  if (whole < 1 || proportion < 0) return 0;
+  return (proportion / whole) * 100;
+};
 
-const getPanelMinSize = (
-  panelMinSize: string,
-  containerSize: number,
-  resizerSize: number
+export const sizesOnly = (
+  panelObject: EuiResizableContainerRegistry['panels']
 ) => {
+  return Object.values(panelObject).reduce(
+    (out: { [key: string]: number }, panel) => {
+      out[panel.id] = panel.size;
+      return out;
+    },
+    {}
+  );
+};
+
+const _getPanelMinSize = (panelMinSize: string, containerSize: number) => {
   let panelMinSizePercent = 0;
   const panelMinSizeInt = parseInt(panelMinSize);
   if (panelMinSize.indexOf('px') > -1) {
     panelMinSizePercent = pxToPercent(panelMinSizeInt, containerSize);
   } else if (panelMinSize.indexOf('%') > -1) {
-    panelMinSizePercent =
-      panelMinSizeInt + (resizerSize / containerSize) * panelMinSizeInt;
+    panelMinSizePercent = pxToPercent(
+      containerSize * (panelMinSizeInt / 100),
+      containerSize
+    );
   }
   return panelMinSizePercent;
 };
 
+export const getPanelMinSize = (
+  panelMinSize: string[],
+  containerSize: number
+) => {
+  const paddingMin = _getPanelMinSize(panelMinSize[1], containerSize);
+  const configMin = _getPanelMinSize(panelMinSize[0], containerSize);
+  return Math.max(configMin, paddingMin);
+};
+
+export const getPosition = (
+  event: ReactMouseEvent | ReactTouchEvent,
+  isHorizontal: boolean
+) => {
+  const clientX = isMouseEvent(event)
+    ? event.clientX
+    : event.touches[0].clientX;
+  const clientY = isMouseEvent(event)
+    ? event.clientY
+    : event.touches[0].clientY;
+  return isHorizontal ? clientX : clientY;
+};
+
+const getSiblingPanel = (
+  element: HTMLElement | null,
+  adjacency: 'prev' | 'next'
+) => {
+  if (!element) return null;
+  const method =
+    adjacency === 'prev' ? 'previousElementSibling' : 'nextElementSibling';
+  let sibling = element[method];
+  while (sibling) {
+    if (
+      sibling.matches('.euiResizablePanel:not(.euiResizablePanel-isCollapsed)')
+    ) {
+      return sibling;
+    }
+    sibling = sibling[method];
+  }
+};
+
+// lazy initialization to prevent rerender on initial interaction
+const init = (state: EuiResizableContainerState) => state;
+
 export const useContainerCallbacks = ({
-  isHorizontal,
-  state,
-  setState,
+  initialState,
   containerRef,
-  registryRef,
   onPanelWidthChange,
-}: Params) => {
-  const getContainerSize = useCallback(() => {
-    return isHorizontal
-      ? containerRef.current!.getBoundingClientRect().width
-      : containerRef.current!.getBoundingClientRect().height;
-  }, [containerRef, isHorizontal]);
-
-  const getResizerButtonsSize = useCallback(() => {
-    // get sum of all of resizer button sizes to proper calculate panels ratio
-    const allResizers = registryRef.current.getAllResizers();
-    return allResizers.reduce(
-      (size, resizer) =>
-        size + (isHorizontal ? resizer.offsetWidth : resizer.offsetHeight),
-      0
-    );
-  }, [registryRef, isHorizontal]);
-
-  const onMouseDown = useCallback(
-    (event: EuiResizableButtonMouseEvent) => {
-      const currentTarget = event.currentTarget;
-      const clientX = isMouseEvent(event)
-        ? event.clientX
-        : event.touches[0].clientX;
-      const clientY = isMouseEvent(event)
-        ? event.clientY
-        : event.touches[0].clientY;
-      setState((prevState) => ({
-        ...prevState,
-        isDragging: true,
-        currentResizerPos: isHorizontal ? clientX : clientY,
-        previousPanelId: currentTarget.previousElementSibling!.id,
-        nextPanelId: currentTarget.nextElementSibling!.id,
-        resizersSize: getResizerButtonsSize(),
-      }));
-    },
-    [getResizerButtonsSize, isHorizontal, setState]
-  );
+}: Params): [EuiResizableContainerActions, EuiResizableContainerState] => {
+  function reducer(
+    state: EuiResizableContainerState,
+    action: EuiResizableContainerAction
+  ): EuiResizableContainerState {
+    const getContainerSize = () => {
+      return state.isHorizontal
+        ? containerRef.current!.getBoundingClientRect().width
+        : containerRef.current!.getBoundingClientRect().height;
+    };
+
+    const runSideEffect = (panels: EuiResizableContainerState['panels']) => {
+      if (onPanelWidthChange) {
+        onPanelWidthChange(sizesOnly(panels));
+      }
+    };
 
-  const onKeyDown = useCallback(
-    (event: EuiResizableButtonKeyDownEvent) => {
-      const { key, currentTarget } = event;
-      const shouldResizeHorizontalPanel =
-        isHorizontal && (key === keys.ARROW_LEFT || key === keys.ARROW_RIGHT);
-      const shouldResizeVerticalPanel =
-        !isHorizontal && (key === keys.ARROW_UP || key === keys.ARROW_DOWN);
-      const prevPanelId = currentTarget.previousElementSibling!.id;
-      const nextPanelId = currentTarget.nextElementSibling!.id;
-
-      if (
-        (shouldResizeHorizontalPanel || shouldResizeVerticalPanel) &&
-        prevPanelId &&
-        nextPanelId
-      ) {
-        event.preventDefault();
-
-        const { current: registry } = registryRef;
-        const [prevPanel, nextPanel] = registry.getResizerSiblings(
+    const withSideEffect = (newState: EuiResizableContainerState) => {
+      runSideEffect(newState.panels);
+      return newState;
+    };
+
+    switch (action.type) {
+      case 'EUI_RESIZABLE_CONTAINER_INIT': {
+        return {
+          ...state,
+          containerSize: getContainerSize(),
+        };
+      }
+      case 'EUI_RESIZABLE_PANEL_REGISTER': {
+        const { panel } = action.payload;
+        return {
+          ...state,
+          panels: {
+            ...state.panels,
+            [panel.id]: panel,
+          },
+        };
+      }
+      case 'EUI_RESIZABLE_PANEL_DEREGISTER': {
+        const { panelId } = action.payload;
+        return {
+          ...state,
+          panels: Object.values(state.panels).reduce(
+            (out: EuiResizableContainerState['panels'], panel) => {
+              if (panel.id !== panelId) {
+                out[panel.id] = panel;
+              }
+              return out;
+            },
+            {}
+          ),
+        };
+      }
+      case 'EUI_RESIZABLE_BUTTON_REGISTER': {
+        const { resizer } = action.payload;
+        return {
+          ...state,
+          resizers: {
+            ...state.resizers,
+            [resizer.id]: resizer,
+          },
+        };
+      }
+      case 'EUI_RESIZABLE_BUTTON_DEREGISTER': {
+        const { resizerId } = action.payload;
+        return {
+          ...state,
+          resizers: Object.values(state.resizers).reduce(
+            (out: EuiResizableContainerState['resizers'], panel) => {
+              if (panel.id !== resizerId) {
+                out[panel.id] = panel;
+              }
+              return out;
+            },
+            {}
+          ),
+        };
+      }
+      case 'EUI_RESIZABLE_DRAG_START': {
+        const { position, prevPanelId, nextPanelId } = action.payload;
+        return {
+          ...state,
+          isDragging: true,
+          currentResizerPos: position,
           prevPanelId,
-          nextPanelId
-        );
-        const resizersSize = getResizerButtonsSize();
-        const containerSize = getContainerSize();
+          nextPanelId,
+        };
+      }
+      case 'EUI_RESIZABLE_DRAG_MOVE': {
+        if (!state.isDragging) {
+          return state;
+        }
+        const { position, prevPanelId, nextPanelId } = action.payload;
+        const prevPanel = state.panels[prevPanelId];
+        const nextPanel = state.panels[nextPanelId];
+        const delta = position - state.currentResizerPos;
 
+        const prevPanelMin = getPanelMinSize(
+          prevPanel.minSize,
+          state.containerSize
+        );
+        const nextPanelMin = getPanelMinSize(
+          nextPanel.minSize,
+          state.containerSize
+        );
         const prevPanelSize = pxToPercent(
-          prevPanel.getSizePx() -
-            (key === keys.ARROW_UP || key === keys.ARROW_LEFT ? 10 : -10),
-          containerSize - resizersSize
+          prevPanel.getSizePx() + delta,
+          state.containerSize
         );
         const nextPanelSize = pxToPercent(
-          nextPanel.getSizePx() -
-            (key === keys.ARROW_DOWN || key === keys.ARROW_RIGHT ? 10 : -10),
-          containerSize - resizersSize
-        );
-
-        setState({ ...state, isDragging: false });
-        const panelObject = registry.fetchAllPanels(
-          prevPanelId,
-          nextPanelId,
-          containerSize - resizersSize
+          nextPanel.getSizePx() - delta,
+          state.containerSize
         );
 
-        if (onPanelWidthChange) {
-          onPanelWidthChange({
-            ...panelObject,
-            [prevPanelId]: prevPanelSize,
-            [nextPanelId]: nextPanelSize,
+        if (prevPanelSize >= prevPanelMin && nextPanelSize >= nextPanelMin) {
+          return withSideEffect({
+            ...state,
+            currentResizerPos: position,
+            panels: {
+              ...state.panels,
+              [prevPanelId]: {
+                ...state.panels[prevPanelId],
+                size: prevPanelSize,
+              },
+              [nextPanelId]: {
+                ...state.panels[nextPanelId],
+                size: nextPanelSize,
+              },
+            },
           });
         }
-        prevPanel.setSize(prevPanelSize);
-        nextPanel.setSize(nextPanelSize);
+
+        return state;
       }
-    },
-    // `setState` is safe to omit from `useCallback`
-    // (https://reactjs.org/docs/hooks-reference.html#usestate)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      getContainerSize,
-      getResizerButtonsSize,
-      isHorizontal,
-      onPanelWidthChange,
-      registryRef,
-    ]
-  );
+      case 'EUI_RESIZABLE_KEY_MOVE': {
+        const { prevPanelId, nextPanelId, direction } = action.payload;
+        const prevPanel = state.panels[prevPanelId];
+        const nextPanel = state.panels[nextPanelId];
 
-  const onMouseMove: onMouseMove = useCallback(
-    (event) => {
-      if (state.isDragging && state.previousPanelId && state.nextPanelId) {
-        const clientX = isMouseEvent(event)
-          ? event.clientX
-          : event.touches[0].clientX;
-        const clientY = isMouseEvent(event)
-          ? event.clientY
-          : event.touches[0].clientY;
-        const x = isHorizontal ? clientX : clientY;
-        const { current: registry } = registryRef;
-        const [prevPanel, nextPanel] = registry.getResizerSiblings(
-          state.previousPanelId,
-          state.nextPanelId
-        );
-        const delta = x - state.currentResizerPos;
-        const containerSize = getContainerSize() - state.resizersSize;
         const prevPanelMin = getPanelMinSize(
           prevPanel.minSize,
-          containerSize,
-          state.resizersSize
+          state.containerSize
         );
         const nextPanelMin = getPanelMinSize(
           nextPanel.minSize,
-          containerSize,
-          state.resizersSize
+          state.containerSize
         );
         const prevPanelSize = pxToPercent(
-          prevPanel.getSizePx() + delta,
-          containerSize
+          prevPanel.getSizePx() - (direction === 'backward' ? 10 : -10),
+          state.containerSize
         );
         const nextPanelSize = pxToPercent(
-          nextPanel.getSizePx() - delta,
-          containerSize
+          nextPanel.getSizePx() - (direction === 'forward' ? 10 : -10),
+          state.containerSize
         );
 
-        const panelObject = registry.fetchAllPanels(
-          state.previousPanelId,
-          state.nextPanelId,
-          containerSize
-        );
         if (prevPanelSize >= prevPanelMin && nextPanelSize >= nextPanelMin) {
-          if (onPanelWidthChange) {
-            onPanelWidthChange({
-              ...panelObject,
-              [state.previousPanelId]: prevPanelSize,
-              [state.nextPanelId]: nextPanelSize,
-            });
+          return withSideEffect({
+            ...state,
+            isDragging: false,
+            panels: {
+              ...state.panels,
+              [prevPanelId]: {
+                ...state.panels[prevPanelId],
+                size: prevPanelSize,
+              },
+              [nextPanelId]: {
+                ...state.panels[nextPanelId],
+                size: nextPanelSize,
+              },
+            },
+          });
+        }
+
+        return state;
+      }
+
+      case 'EUI_RESIZABLE_TOGGLE': {
+        const { options, panelId: currentPanelId } = action.payload;
+        const currentPanel = state.panels[currentPanelId];
+        const shouldCollapse = !currentPanel.isCollapsed;
+        const panelElement = document.getElementById(currentPanelId);
+        const prevResizer = panelElement!.previousElementSibling;
+        const prevPanel = prevResizer
+          ? prevResizer.previousElementSibling
+          : null;
+        const nextResizer = panelElement!.nextElementSibling;
+        const nextPanel = nextResizer ? nextResizer.nextElementSibling : null;
+
+        const resizersToDisable: { [id: string]: boolean | null } = {};
+        if (prevResizer && prevPanel) {
+          resizersToDisable[prevResizer.id] = state.panels[prevPanel.id]
+            .isCollapsed
+            ? true
+            : shouldCollapse;
+        }
+        if (nextResizer && nextPanel) {
+          resizersToDisable[nextResizer.id] = state.panels[nextPanel.id]
+            .isCollapsed
+            ? true
+            : shouldCollapse;
+        }
+        let otherPanels: EuiResizableContainerRegistry['panels'] = {};
+        if (
+          prevPanel &&
+          !state.panels[prevPanel.id].isCollapsed &&
+          options.direction === 'right'
+        ) {
+          otherPanels[prevPanel.id] = state.panels[prevPanel.id];
+        }
+        if (
+          nextPanel &&
+          !state.panels[nextPanel.id].isCollapsed &&
+          options.direction === 'left'
+        ) {
+          otherPanels[nextPanel.id] = state.panels[nextPanel.id];
+        }
+        let siblings = Object.keys(otherPanels).length;
+
+        // A toggling sequence has occurred where an immediate sibling panel
+        // has not been found. We need to move more broadly through the DOM
+        // to find the next most suitable panel or space affordance.
+        // Can only occur when multiple immediate sibling panels are collapsed.
+        if (!siblings) {
+          const maybePrevPanel = getSiblingPanel(panelElement, 'prev');
+          const maybeNextPanel = getSiblingPanel(panelElement, 'next');
+          const validPrevPanel = maybePrevPanel
+            ? state.panels[maybePrevPanel.id]
+            : null;
+          const validNextPanel = maybeNextPanel
+            ? state.panels[maybeNextPanel.id]
+            : null;
+          // Intentional, preferential redistribution order
+          if (validPrevPanel && options.direction === 'right') {
+            otherPanels[validPrevPanel.id] = validPrevPanel;
+          } else if (validNextPanel && options.direction === 'left') {
+            otherPanels[validNextPanel.id] = validNextPanel;
+          } else {
+            if (validPrevPanel) otherPanels[validPrevPanel.id] = validPrevPanel;
+            if (validNextPanel) otherPanels[validNextPanel.id] = validNextPanel;
           }
-          prevPanel.setSize(prevPanelSize);
-          nextPanel.setSize(nextPanelSize);
+          siblings = Object.keys(otherPanels).length;
+        }
 
-          setState({ ...state, currentResizerPos: x });
+        let newPanelSize = shouldCollapse
+          ? pxToPercent(
+              !currentPanel.mode ? 0 : 24, // size of the default toggle button
+              state.containerSize
+            )
+          : currentPanel.prevSize;
+
+        const delta = shouldCollapse
+          ? (currentPanel.size - newPanelSize) / siblings
+          : ((newPanelSize - currentPanel.size) / siblings) * -1;
+
+        const collapsedPanelsSize = Object.values(state.panels).reduce(
+          (sum: number, panel) => {
+            if (panel.id !== currentPanelId && panel.isCollapsed) {
+              sum += panel.size;
+            }
+            return sum;
+          },
+          0
+        );
+
+        // A toggling sequence has occurred where a to-be-opened panel will
+        // become the only open panel. Rather than reopen to its previous
+        // size, give it the full width, less size occupied by collapsed panels.
+        // Can only occur with external toggling.
+        if (!shouldCollapse && !siblings) {
+          newPanelSize = 100 - collapsedPanelsSize;
         }
+        let updatedPanels: EuiResizableContainerState['panels'] = {};
+        if (
+          delta < 0 &&
+          Object.values(otherPanels).some(
+            (panel) =>
+              panel.size + delta <
+              getPanelMinSize(panel.minSize, state.containerSize)
+          )
+        ) {
+          // A toggling sequence has occurred where a to-be-opened panel is
+          // requesting more space than its logical sibling panel can afford.
+          // Rather than choose another single panel to sacrifice space,
+          // or try to pull proportionally from all availble panels
+          // (neither of which is guaranteed to prevent negative resulting widths),
+          // or attempt something even more complex,
+          // we redistribute _all_ space evenly to non-collapsed panels
+          // as something of a reset.
+          // This situation can only occur when (n-1) panels are collapsed at once
+          // and the most recently collapsed panel gains significant width
+          // during the previously occurring collapse.
+          // That is (largely), external toggling where the default logic has
+          // been negated by the lack of panel mode distinction.
+          otherPanels = Object.values(state.panels).reduce(
+            (out: EuiResizableContainerState['panels'], panel) => {
+              if (panel.id !== currentPanelId && !panel.isCollapsed) {
+                out[panel.id] = {
+                  ...panel,
+                };
+              }
+              return out;
+            },
+            {}
+          );
+
+          newPanelSize =
+            (100 - collapsedPanelsSize) / (Object.keys(otherPanels).length + 1);
+
+          updatedPanels = Object.values(otherPanels).reduce(
+            (out: EuiResizableContainerState['panels'], panel) => {
+              out[panel.id] = {
+                ...panel,
+                size: newPanelSize,
+              };
+              return out;
+            },
+            {}
+          );
+        } else {
+          // A toggling sequence has occurred that is standard and predictable
+          updatedPanels = Object.values(otherPanels).reduce(
+            (out: EuiResizableContainerState['panels'], panel) => {
+              out[panel.id] = {
+                ...panel,
+                size: panel.size + delta,
+              };
+              return out;
+            },
+            {}
+          );
+        }
+
+        return withSideEffect({
+          ...state,
+          panels: {
+            ...state.panels,
+            ...updatedPanels,
+            [currentPanelId]: {
+              ...state.panels[currentPanelId],
+              size: newPanelSize,
+              isCollapsed: shouldCollapse,
+              prevSize: shouldCollapse ? currentPanel.size : newPanelSize,
+            },
+          },
+          resizers: Object.values(state.resizers).reduce(
+            (out: EuiResizableContainerState['resizers'], resizer) => {
+              out[resizer.id] = {
+                ...resizer,
+                isFocused: false,
+                isDisabled: resizersToDisable[resizer.id] ?? resizer.isDisabled,
+              };
+              return out;
+            },
+            {}
+          ),
+        });
       }
-    },
-    [
-      getContainerSize,
-      isHorizontal,
-      onPanelWidthChange,
-      registryRef,
-      setState,
-      state,
-    ]
-  );
+      case 'EUI_RESIZABLE_BUTTON_FOCUS': {
+        const { resizerId } = action.payload;
+        return {
+          ...state,
+          resizers: Object.values(state.resizers).reduce(
+            (out: EuiResizableContainerState['resizers'], resizer) => {
+              out[resizer.id] = {
+                ...resizer,
+                isFocused: resizer.id === resizerId,
+              };
+              return out;
+            },
+            {}
+          ),
+        };
+      }
+      case 'EUI_RESIZABLE_BUTTON_BLUR': {
+        return {
+          ...state,
+          resizers: Object.values(state.resizers).reduce(
+            (out: EuiResizableContainerState['resizers'], resizer) => {
+              out[resizer.id] = {
+                ...resizer,
+                isFocused: false,
+              };
+              return out;
+            },
+            {}
+          ),
+        };
+      }
+      case 'EUI_RESIZABLE_RESET': {
+        return {
+          ...initialState,
+          panels: state.panels,
+          resizers: state.resizers,
+          containerSize: state.containerSize,
+        };
+      }
+      case 'EUI_RESIZABLE_ONCHANGE': {
+        onPanelWidthChange!(sizesOnly(state.panels));
+        return state;
+      }
+      // TODO: Implement more generic version of
+      // 'EUI_RESIZABLE_DRAG_MOVE' to expose to consumers
+      case 'EUI_RESIZABLE_RESIZE': {
+        return state;
+      }
+      default:
+        assertNever(action);
+        return state;
+    }
+  }
+
+  const [reducerState, dispatch] = useReducer(reducer, initialState, init);
+
+  const actions: EuiResizableContainerActions = useMemo(() => {
+    return {
+      reset: () => dispatch({ type: 'EUI_RESIZABLE_RESET' }),
+      initContainer: () =>
+        dispatch({
+          type: 'EUI_RESIZABLE_CONTAINER_INIT',
+        }),
+      registerPanel: (panel: EuiResizablePanelController) =>
+        dispatch({
+          type: 'EUI_RESIZABLE_PANEL_REGISTER',
+          payload: { panel },
+        }),
+      deregisterPanel: (panelId: EuiResizablePanelController['id']) =>
+        dispatch({
+          type: 'EUI_RESIZABLE_PANEL_DEREGISTER',
+          payload: { panelId },
+        }),
+      registerResizer: (resizer: EuiResizableButtonController) =>
+        dispatch({
+          type: 'EUI_RESIZABLE_BUTTON_REGISTER',
+          payload: { resizer },
+        }),
+      deregisterResizer: (resizerId: EuiResizableButtonController['id']) =>
+        dispatch({
+          type: 'EUI_RESIZABLE_BUTTON_DEREGISTER',
+          payload: { resizerId },
+        }),
+      dragStart: ({
+        prevPanelId,
+        nextPanelId,
+        position,
+      }: ActionDragStart['payload']) =>
+        dispatch({
+          type: 'EUI_RESIZABLE_DRAG_START',
+          payload: { position, prevPanelId, nextPanelId },
+        }),
+      dragMove: ({
+        prevPanelId,
+        nextPanelId,
+        position,
+      }: ActionDragMove['payload']) =>
+        dispatch({
+          type: 'EUI_RESIZABLE_DRAG_MOVE',
+          payload: { position, prevPanelId, nextPanelId },
+        }),
+      keyMove: ({
+        prevPanelId,
+        nextPanelId,
+        direction,
+      }: ActionKeyMove['payload']) =>
+        dispatch({
+          type: 'EUI_RESIZABLE_KEY_MOVE',
+          payload: { prevPanelId, nextPanelId, direction },
+        }),
+      togglePanel: (
+        panelId: ActionToggle['payload']['panelId'],
+        options: ActionToggle['payload']['options']
+      ) =>
+        dispatch({
+          type: 'EUI_RESIZABLE_TOGGLE',
+          payload: { panelId, options },
+        }),
+      resizerFocus: (resizerId: ActionFocus['payload']['resizerId']) =>
+        dispatch({
+          type: 'EUI_RESIZABLE_BUTTON_FOCUS',
+          payload: { resizerId },
+        }),
+      resizerBlur: () =>
+        dispatch({
+          type: 'EUI_RESIZABLE_BUTTON_BLUR',
+        }),
+    };
+  }, []);
 
-  return {
-    onMouseDown,
-    onKeyDown,
-    onMouseMove,
-  };
+  return [actions, reducerState];
 };
diff --git a/src/components/resizable_container/resizable_button.tsx b/src/components/resizable_container/resizable_button.tsx
index 9d29ad319ab9..4ae98c83ddb0 100644
--- a/src/components/resizable_container/resizable_button.tsx
+++ b/src/components/resizable_container/resizable_button.tsx
@@ -20,31 +20,34 @@
 import React, {
   FunctionComponent,
   ButtonHTMLAttributes,
-  KeyboardEvent,
   MouseEvent,
-  TouchEvent,
   useCallback,
+  useMemo,
   useRef,
 } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
 import { EuiI18n } from '../i18n';
-import { EuiResizablePanelRegistry } from './context';
-
-export type EuiResizableButtonMouseEvent =
-  | MouseEvent<HTMLButtonElement>
-  | TouchEvent<HTMLButtonElement>;
-export type EuiResizableButtonKeyDownEvent = KeyboardEvent<HTMLButtonElement>;
-
-export type EuiResizableButtonSize = 's' | 'm' | 'l' | 'xl';
+import { htmlIdGenerator } from '../../services';
+import { useEuiResizableContainerContext } from './context';
+import {
+  EuiResizableButtonController,
+  EuiResizableButtonMouseEvent,
+  EuiResizableButtonKeyDownEvent,
+} from './types';
 
 interface EuiResizableButtonControls {
   onKeyDown: (eve: EuiResizableButtonKeyDownEvent) => void;
   onMouseDown: (eve: EuiResizableButtonMouseEvent) => void;
   onTouchStart: (eve: EuiResizableButtonMouseEvent) => void;
+  onFocus: (id: string) => void;
+  onBlur: () => void;
+  registration: {
+    register: (resizer: EuiResizableButtonController) => void;
+    deregister: (resizerId: EuiResizableButtonController['id']) => void;
+  };
   isHorizontal: boolean;
-  registryRef: React.MutableRefObject<EuiResizablePanelRegistry>;
 }
 
 export interface EuiResizableButtonProps
@@ -53,35 +56,36 @@ export interface EuiResizableButtonProps
       keyof EuiResizableButtonControls
     >,
     CommonProps,
-    Partial<EuiResizableButtonControls> {
-  /**
-   * The size of the Resizer (the space between panels)
-   */
-  size?: EuiResizableButtonSize;
-}
+    Partial<EuiResizableButtonControls> {}
 
-const sizeToClassNameMap = {
-  s: 'euiResizableButton--sizeSmall',
-  m: 'euiResizableButton--sizeMedium',
-  l: 'euiResizableButton--sizeLarge',
-  xl: 'euiResizableButton--sizeExtraLarge',
-};
-
-export const SIZES = Object.keys(sizeToClassNameMap);
+const generatePanelId = htmlIdGenerator('resizable-button');
 
 export const EuiResizableButton: FunctionComponent<EuiResizableButtonProps> = ({
   isHorizontal,
   className,
-  size = 'm',
-  registryRef,
+  id,
+  registration,
+  disabled,
+  onFocus,
+  onBlur,
   ...rest
 }) => {
+  const resizerId = useRef(id || generatePanelId());
+  const {
+    registry: { resizers } = { resizers: {} },
+  } = useEuiResizableContainerContext();
+  const isDisabled = useMemo(
+    () =>
+      disabled ||
+      (resizers[resizerId.current] && resizers[resizerId.current].isDisabled),
+    [resizers, disabled]
+  );
   const classes = classNames(
     'euiResizableButton',
-    size ? sizeToClassNameMap[size] : null,
     {
       'euiResizableButton--vertical': !isHorizontal,
       'euiResizableButton--horizontal': isHorizontal,
+      'euiResizableButton--disabled': isDisabled,
     },
     className
   );
@@ -89,22 +93,33 @@ export const EuiResizableButton: FunctionComponent<EuiResizableButtonProps> = ({
   const previousRef = useRef<HTMLElement>();
   const onRef = useCallback(
     (ref: HTMLElement | null) => {
+      if (!registration) return;
+      const id = resizerId.current;
       if (ref) {
         previousRef.current = ref;
-        registryRef!.current.registerResizerRef(ref);
+        registration.register({
+          id,
+          ref,
+          isFocused: false,
+          isDisabled: disabled || false,
+        });
       } else {
         if (previousRef.current != null) {
-          registryRef!.current.deregisterResizerRef(previousRef.current);
+          registration.deregister(id);
           previousRef.current = undefined;
         }
       }
     },
-    [registryRef]
+    [registration, disabled]
   );
 
   const setFocus = (e: MouseEvent<HTMLButtonElement>) =>
     e.currentTarget.focus();
 
+  const handleFocus = () => {
+    onFocus && onFocus(resizerId.current);
+  };
+
   return (
     <EuiI18n
       tokens={[
@@ -117,14 +132,18 @@ export const EuiResizableButton: FunctionComponent<EuiResizableButtonProps> = ({
       ]}>
       {([horizontalResizerAriaLabel, verticalResizerAriaLabel]: string[]) => (
         <button
+          id={resizerId.current}
           ref={onRef}
           aria-label={
             isHorizontal ? horizontalResizerAriaLabel : verticalResizerAriaLabel
           }
           className={classes}
-          data-test-subj="splitPanelResizer"
+          data-test-subj="euiResizableButton"
           type="button"
           onClick={setFocus}
+          onFocus={handleFocus}
+          onBlur={onBlur}
+          disabled={isDisabled}
           {...rest}
         />
       )}
diff --git a/src/components/resizable_container/resizable_collapse_button.tsx b/src/components/resizable_container/resizable_collapse_button.tsx
new file mode 100644
index 000000000000..51c8c6eb5d67
--- /dev/null
+++ b/src/components/resizable_container/resizable_collapse_button.tsx
@@ -0,0 +1,98 @@
+/*
+ * 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 } from 'react';
+import classNames from 'classnames';
+
+import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../button';
+import { ToggleOptions } from './resizable_panel';
+import { EuiResizableContainerProps } from './resizable_container';
+
+export type EuiResizableCollapseButtonProps = Omit<
+  EuiButtonIconPropsForButton,
+  'iconType'
+> & {
+  /**
+   * Position of the toggle button.
+   * Enums based on the `direction` of the EuiResizableContainer
+   */
+  internalPosition?: ToggleOptions['position'];
+  /**
+   * Position of the toggle button.
+   * Enums based on the `direction` of the EuiResizableContainer
+   */
+  externalPosition?: 'before' | 'after';
+  /**
+   * Same direction derived from EuiResizableContainer
+   */
+  direction?: EuiResizableContainerProps['direction'];
+  /**
+   *
+   */
+  isVisible?: boolean;
+  isCollapsed?: boolean;
+};
+
+export const EuiResizableCollapseButton: FunctionComponent<EuiResizableCollapseButtonProps> = ({
+  className,
+  externalPosition,
+  internalPosition = 'middle',
+  direction = 'horizontal',
+  isVisible,
+  isCollapsed,
+  ...rest
+}) => {
+  const isHorizontal = direction === 'horizontal';
+
+  const classes = classNames(
+    'euiResizableToggleButton',
+    `euiResizableToggleButton--${direction}`,
+    `euiResizableToggleButton--${externalPosition}`,
+    `euiResizableToggleButton--${internalPosition}`,
+    {
+      'euiResizableToggleButton-isVisible': isVisible,
+      'euiResizableToggleButton-isCollapsed': isCollapsed,
+    },
+    className
+  );
+
+  // Default to simiple grab icon in case there is no externalPosition specified
+  let COLLAPSED_ICON = isHorizontal ? 'grab' : 'grabHorizontal';
+  let NOT_COLLAPSED_ICON = isHorizontal ? 'grab' : 'grabHorizontal';
+
+  switch (externalPosition) {
+    case 'before':
+      COLLAPSED_ICON = isHorizontal ? 'menuLeft' : 'menuUp';
+      NOT_COLLAPSED_ICON = isHorizontal ? 'menuRight' : 'menuDown';
+      break;
+    case 'after':
+      COLLAPSED_ICON = isHorizontal ? 'menuRight' : 'menuDown';
+      NOT_COLLAPSED_ICON = isHorizontal ? 'menuLeft' : 'menuUp';
+      break;
+  }
+
+  return (
+    <EuiButtonIcon
+      color="text"
+      {...rest}
+      className={classes}
+      iconType={isCollapsed ? COLLAPSED_ICON : NOT_COLLAPSED_ICON}
+    />
+  );
+};
diff --git a/src/components/resizable_container/resizable_container.test.tsx b/src/components/resizable_container/resizable_container.test.tsx
index 77a26cf64da5..1a735fc153ed 100644
--- a/src/components/resizable_container/resizable_container.test.tsx
+++ b/src/components/resizable_container/resizable_container.test.tsx
@@ -112,14 +112,67 @@ describe('EuiResizableContainer', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('can adjust button spacing', () => {
+  test('can adjust panel props', () => {
     const component = render(
       <EuiResizableContainer {...requiredProps}>
         {(EuiResizablePanel, EuiResizableButton) => (
           <>
-            <EuiResizablePanel initialSize={50}>Testing</EuiResizablePanel>
-            <EuiResizableButton size="s" />
-            <EuiResizablePanel initialSize={50}>123</EuiResizablePanel>
+            <EuiResizablePanel initialSize={50} paddingSize="none">
+              Testing
+            </EuiResizablePanel>
+            <EuiResizableButton />
+            <EuiResizablePanel initialSize={50} color="plain">
+              123
+            </EuiResizablePanel>
+          </>
+        )}
+      </EuiResizableContainer>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('can have toggleable panels', () => {
+    const component = render(
+      <EuiResizableContainer {...requiredProps}>
+        {(EuiResizablePanel, EuiResizableButton) => (
+          <>
+            <EuiResizablePanel mode="collapsible" initialSize={20}>
+              Sidebar
+            </EuiResizablePanel>
+            <EuiResizableButton />
+            <EuiResizablePanel mode="main" initialSize={80}>
+              Sidebar content
+            </EuiResizablePanel>
+          </>
+        )}
+      </EuiResizableContainer>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('toggleable panels can be configurable', () => {
+    const component = render(
+      <EuiResizableContainer {...requiredProps}>
+        {(EuiResizablePanel, EuiResizableButton) => (
+          <>
+            <EuiResizablePanel
+              mode={[
+                'collapsible',
+                {
+                  'data-test-subj': 'panel-toggle',
+                  className: 'panel-toggle',
+                  position: 'top',
+                },
+              ]}
+              initialSize={20}>
+              Sidebar
+            </EuiResizablePanel>
+            <EuiResizableButton />
+            <EuiResizablePanel mode="main" initialSize={80}>
+              Sidebar content
+            </EuiResizablePanel>
           </>
         )}
       </EuiResizableContainer>
diff --git a/src/components/resizable_container/resizable_container.tsx b/src/components/resizable_container/resizable_container.tsx
index b98908556e0c..4f8bf4c16172 100644
--- a/src/components/resizable_container/resizable_container.tsx
+++ b/src/components/resizable_container/resizable_container.tsx
@@ -19,8 +19,9 @@
 
 import React, {
   ReactNode,
+  ReactElement,
+  useEffect,
   useRef,
-  useState,
   useCallback,
   CSSProperties,
   FunctionComponent,
@@ -30,10 +31,9 @@ import React, {
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
-import {
-  EuiResizablePanelContextProvider,
-  EuiResizablePanelRegistry,
-} from './context';
+import { keys } from '../../services';
+import { useResizeObserver } from '../observer/resize_observer';
+import { EuiResizableContainerContextProvider } from './context';
 import {
   EuiResizableButtonProps,
   euiResizableButtonWithControls,
@@ -41,8 +41,16 @@ import {
 import {
   EuiResizablePanelProps,
   euiResizablePanelWithControls,
+  getModeType,
+  ToggleCollapseCallback,
 } from './resizable_panel';
-import { useContainerCallbacks } from './helpers';
+import { useContainerCallbacks, getPosition } from './helpers';
+import {
+  EuiResizableButtonMouseEvent,
+  EuiResizableButtonKeyDownEvent,
+  EuiResizableContainerState,
+  EuiResizableContainerActions,
+} from './types';
 
 const containerDirections = {
   vertical: 'vertical',
@@ -62,30 +70,26 @@ export interface EuiResizableContainerProps
    */
   children: (
     Panel: ComponentType<EuiResizablePanelProps>,
-    Resizer: ComponentType<EuiResizableButtonProps>
+    Resizer: ComponentType<EuiResizableButtonProps>,
+    actions: Partial<EuiResizableContainerActions>
   ) => ReactNode;
   /**
    * Pure function which accepts an object where keys are IDs of panels, which sizes were changed,
    * and values are actual sizes in percents
    */
   onPanelWidthChange?: ({}: { [key: string]: number }) => any;
+  onToggleCollapsed?: ToggleCollapseCallback;
   style?: CSSProperties;
 }
 
-export interface EuiResizableContainerState {
-  isDragging: boolean;
-  currentResizerPos: number;
-  previousPanelId: string | null;
-  nextPanelId: string | null;
-  resizersSize: number;
-}
-
 const initialState: EuiResizableContainerState = {
   isDragging: false,
   currentResizerPos: -1,
-  previousPanelId: null,
+  prevPanelId: null,
   nextPanelId: null,
-  resizersSize: 0,
+  containerSize: 1,
+  panels: {},
+  resizers: {},
 };
 
 export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps> = ({
@@ -93,11 +97,10 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
   children,
   className,
   onPanelWidthChange,
+  onToggleCollapsed,
   ...rest
 }) => {
-  const registryRef = useRef(new EuiResizablePanelRegistry());
   const containerRef = useRef<HTMLDivElement>(null);
-  const [state, setState] = useState<EuiResizableContainerState>(initialState);
   const isHorizontal = direction === containerDirections.horizontal;
 
   const classes = classNames(
@@ -109,52 +112,169 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
     className
   );
 
-  const { onKeyDown, onMouseDown, onMouseMove } = useContainerCallbacks({
-    isHorizontal,
-    state,
-    setState,
+  const [actions, reducerState] = useContainerCallbacks({
+    initialState: { ...initialState, isHorizontal },
     containerRef,
-    registryRef,
     onPanelWidthChange,
   });
 
+  const initialize = useCallback(() => {
+    actions.initContainer();
+  }, [actions]);
+
+  const containerSize = useResizeObserver(
+    containerRef.current,
+    isHorizontal ? 'width' : 'height'
+  );
+
+  useEffect(() => {
+    initialize();
+  }, [initialize, containerSize]);
+
+  const onMouseDown = useCallback(
+    (event: EuiResizableButtonMouseEvent) => {
+      const currentTarget = event.currentTarget;
+      const prevPanel = currentTarget.previousElementSibling;
+      const nextPanel = currentTarget.nextElementSibling;
+      if (!prevPanel || !nextPanel) return;
+      const prevPanelId = prevPanel!.id;
+      const nextPanelId = nextPanel!.id;
+      const position = getPosition(event, isHorizontal);
+      actions.dragStart({ position, prevPanelId, nextPanelId });
+    },
+    [actions, isHorizontal]
+  );
+
+  const onMouseMove = useCallback(
+    (event: React.MouseEvent | React.TouchEvent) => {
+      if (
+        !reducerState.prevPanelId ||
+        !reducerState.nextPanelId ||
+        !reducerState.isDragging
+      )
+        return;
+      const position = getPosition(event, isHorizontal);
+      actions.dragMove({
+        position,
+        prevPanelId: reducerState.prevPanelId,
+        nextPanelId: reducerState.nextPanelId,
+      });
+    },
+    [
+      actions,
+      isHorizontal,
+      reducerState.prevPanelId,
+      reducerState.nextPanelId,
+      reducerState.isDragging,
+    ]
+  );
+
+  const onKeyDown = useCallback(
+    (event: EuiResizableButtonKeyDownEvent) => {
+      const { key, currentTarget } = event;
+      const shouldResizeHorizontalPanel =
+        isHorizontal && (key === keys.ARROW_LEFT || key === keys.ARROW_RIGHT);
+      const shouldResizeVerticalPanel =
+        !isHorizontal && (key === keys.ARROW_UP || key === keys.ARROW_DOWN);
+      const prevPanelId = currentTarget.previousElementSibling!.id;
+      const nextPanelId = currentTarget.nextElementSibling!.id;
+      let direction;
+      if (key === keys.ARROW_DOWN || key === keys.ARROW_RIGHT) {
+        direction = 'forward';
+      }
+      if (key === keys.ARROW_UP || key === keys.ARROW_LEFT) {
+        direction = 'backward';
+      }
+
+      if (
+        direction === 'forward' ||
+        (direction === 'backward' &&
+          (shouldResizeHorizontalPanel || shouldResizeVerticalPanel) &&
+          prevPanelId &&
+          nextPanelId)
+      ) {
+        event.preventDefault();
+        actions.keyMove({ direction, prevPanelId, nextPanelId });
+      }
+    },
+    [actions, isHorizontal]
+  );
+
+  const onMouseUp = useCallback(() => {
+    actions.reset();
+  }, [actions]);
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const EuiResizableButton = useCallback(
     euiResizableButtonWithControls({
       onKeyDown,
       onMouseDown,
       onTouchStart: onMouseDown,
+      onFocus: actions.resizerFocus,
+      onBlur: actions.resizerBlur,
       isHorizontal,
-      registryRef,
+      registration: {
+        register: actions.registerResizer,
+        deregister: actions.deregisterResizer,
+      },
     }),
-    [onKeyDown, onMouseDown, isHorizontal, registryRef]
+    [actions, isHorizontal]
   );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const EuiResizablePanel = useCallback(
     euiResizablePanelWithControls({
       isHorizontal,
+      registration: {
+        register: actions.registerPanel,
+        deregister: actions.deregisterPanel,
+      },
+      onToggleCollapsed,
+      onToggleCollapsedInternal: actions.togglePanel,
     }),
-    [isHorizontal]
+    [actions, isHorizontal]
   );
 
-  const onMouseUp = useCallback(() => {
-    setState(initialState);
-  }, []);
+  const render = () => {
+    const DEFAULT = 'custom';
+    const content = children(EuiResizablePanel, EuiResizableButton, {
+      togglePanel: actions.togglePanel,
+    });
+    const modes = React.isValidElement(content)
+      ? content.props.children.map(
+          (el: ReactElement) => getModeType(el.props.mode) || DEFAULT
+        )
+      : null;
+    if (
+      modes &&
+      (['collapsible', 'main'].every((i) => modes.includes(i)) ||
+        modes.every((i?: string) => i === DEFAULT))
+    ) {
+      return content;
+    } else {
+      throw new Error(
+        'Both `collapsible` and `main` mode panels are required.'
+      );
+    }
+  };
 
   return (
-    <EuiResizablePanelContextProvider registry={registryRef.current}>
+    <EuiResizableContainerContextProvider
+      registry={{
+        panels: reducerState.panels,
+        resizers: reducerState.resizers,
+      }}>
       <div
         className={classes}
         ref={containerRef}
-        onMouseMove={onMouseMove}
+        onMouseMove={reducerState.isDragging ? onMouseMove : undefined}
         onMouseUp={onMouseUp}
         onMouseLeave={onMouseUp}
         onTouchMove={onMouseMove}
         onTouchEnd={onMouseUp}
         {...rest}>
-        {children(EuiResizablePanel, EuiResizableButton)}
+        {!!reducerState.containerSize && render()}
       </div>
-    </EuiResizablePanelContextProvider>
+    </EuiResizableContainerContextProvider>
   );
 };
diff --git a/src/components/resizable_container/resizable_panel.tsx b/src/components/resizable_container/resizable_panel.tsx
index 3baf24c25dbd..3842393f683d 100644
--- a/src/components/resizable_container/resizable_panel.tsx
+++ b/src/components/resizable_container/resizable_panel.tsx
@@ -21,28 +21,91 @@ import React, {
   CSSProperties,
   ReactNode,
   useEffect,
+  useMemo,
   useRef,
-  useState,
   FunctionComponent,
   HTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
-import { useEuiResizablePanelContext } from './context';
+import { useEuiResizableContainerContext } from './context';
 import { htmlIdGenerator } from '../../services';
+import { EuiPanel } from '../panel';
+import {
+  PanelPaddingSize,
+  panelPaddingValues,
+  PanelProps,
+} from '../panel/panel';
+import { useEuiI18n } from '../i18n';
+import {
+  EuiResizablePanelController,
+  ActionToggleOptions,
+  PanelModeType,
+  PanelPosition,
+} from './types';
+import { EuiResizableCollapseButton } from './resizable_collapse_button';
 
-interface EuiResizablePanelControls {
+export interface ToggleOptions {
+  'data-test-subj'?: string;
+  className?: string;
+  /**
+   * Position of the toggle button.
+   * Enums based on the `direction` of the EuiResizableContainer
+   */
+  position?: 'top' | 'middle' | 'bottom' | 'left' | 'right';
+}
+
+export type ModeOptions =
+  | PanelModeType
+  | [PanelModeType, Partial<ToggleOptions>];
+
+export type ToggleCollapseCallback = (
+  panelId: EuiResizablePanelController['id'],
+  options: ActionToggleOptions
+) => void;
+
+const defaultToggleOptions = {
+  className: null,
+  'data-test-subj': undefined,
+  position: 'middle',
+};
+
+export const getModeType = (mode?: ModeOptions) =>
+  typeof mode === 'object' ? mode[0] : mode;
+export const getToggleOptions = (mode?: ModeOptions) =>
+  typeof mode === 'object'
+    ? { ...defaultToggleOptions, ...mode[1] }
+    : defaultToggleOptions;
+
+export interface EuiResizablePanelControls {
   isHorizontal: boolean;
+  registration: {
+    register: (panel: EuiResizablePanelController) => void;
+    deregister: (panelId: EuiResizablePanelController['id']) => void;
+  };
+  /**
+   * #ToggleCollapseCallback
+   */
+  onToggleCollapsed?: ToggleCollapseCallback;
+  onToggleCollapsedInternal: ToggleCollapseCallback;
 }
 
+const paddingSizeToClassNameMap = {
+  none: null,
+  s: 'euiResizablePanel--paddingSmall',
+  m: 'euiResizablePanel--paddingMedium',
+  l: 'euiResizablePanel--paddingLarge',
+};
 export interface EuiResizablePanelProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends PanelProps,
     CommonProps,
     Partial<EuiResizablePanelControls> {
   /**
-   * Specify minimum panel size in pixels or percents,
+   * Specify a desired minimum panel size in pixels or percents,
    * for example "300px" or "30%"
+   * The actual minimum size will be calculated,
+   * using the larger of this prop and the panelProps.paddingSize
    */
   minSize?: string;
   /**
@@ -54,29 +117,53 @@ export interface EuiResizablePanelProps
    * Specify this prop if you don't need to handle the panel size from outside
    */
   initialSize?: number;
-
   /**
    * Size of the panel in percents.
    * Specify this prop if you want to control the size from outside, the panel will ignore the "initialSize"
    */
   size?: number;
-
   /**
    * Add Eui scroll and overflow for the panel
    */
   scrollable?: boolean;
+  /*
+   * For use with collapsible panels.
+   * Specify either `'collapsible'`, `'main'`, or `'custom'`.
+   * `'collapsible'` also accepts an array where
+   * the second item is attributes for the toggle button:
+   * `['collapsible', {'data-test-subj'?: string, className?: string;}]
+   */
+  mode?: ModeOptions;
 
   /**
    * ReactNode to render as this component's content
    */
   children: ReactNode;
-
   /**
-   * Custom CSS properties
+   * Custom CSS properties applied to the wrapping `.euiResizablePanel` div
    */
   style?: CSSProperties;
+  /**
+   * Props to add to the wrapping `.euiResizablePanel` div
+   */
+  wrapperProps?: HTMLAttributes<HTMLDivElement>;
+  /**
+   * Padding to add directly to the wrapping `.euiResizablePanel` div
+   * Gives space around the actual panel.
+   */
+  wrapperPadding?: PanelPaddingSize;
 }
 
+const getPosition = (ref: HTMLDivElement) => {
+  let position: PanelPosition = 'middle';
+  if (ref.matches(':first-of-type')) {
+    position = 'first';
+  } else if (ref.matches(':last-of-type')) {
+    position = 'last';
+  }
+  return position;
+};
+
 const generatePanelId = htmlIdGenerator('resizable-panel');
 
 export const EuiResizablePanel: FunctionComponent<EuiResizablePanelProps> = ({
@@ -86,21 +173,97 @@ export const EuiResizablePanel: FunctionComponent<EuiResizablePanelProps> = ({
   isHorizontal,
   size,
   initialSize,
-  minSize = '0px',
+  minSize = '0px', // Actual minSize is calculated in `./helpers.ts`
   scrollable = true,
   style = {},
+  mode,
+  registration,
+  onToggleCollapsed,
+  onToggleCollapsedInternal,
+  wrapperProps,
+  hasShadow = false,
+  borderRadius = 'none',
+  color = 'transparent',
+  paddingSize = 'm',
+  wrapperPadding = 'none',
   ...rest
 }) => {
-  const [innerSize, setInnerSize] = useState(
-    initialSize && !size ? initialSize : 0
-  );
-  const { registry } = useEuiResizablePanelContext();
+  const {
+    registry: { panels, resizers } = {
+      panels: {},
+      resizers: {},
+    },
+  } = useEuiResizableContainerContext();
   const divRef = useRef<HTMLDivElement>(null);
   const panelId = useRef(id || generatePanelId());
+  const resizerIds = useRef<string[]>([]);
+  const modeType = useMemo(() => getModeType(mode), [mode]);
+  const toggleOpts = useMemo(() => getToggleOptions(mode), [mode]);
+  const innerSize = useMemo(
+    () =>
+      (panels[panelId.current] && panels[panelId.current].size) ??
+      (initialSize || 0),
+    [panels, initialSize]
+  );
+  const isCollapsed = useMemo(
+    () =>
+      (panels[panelId.current] && panels[panelId.current].isCollapsed) || false,
+    [panels]
+  );
+  const position = useMemo(
+    () =>
+      (panels[panelId.current] && panels[panelId.current].position) || 'middle',
+    [panels]
+  );
+  const isCollapsible = useMemo(() => modeType === 'collapsible', [modeType]);
+  const direction = useMemo(() => {
+    let direction = null;
+    if (position === 'middle' && (isCollapsible || isCollapsed)) {
+      const ids = Object.keys(panels);
+      const index = ids.indexOf(panelId.current);
+      const prevPanel = panels[ids[index - 1]];
+      const nextPanel = panels[ids[index + 1]];
+      const prevPanelMode = prevPanel ? getModeType(prevPanel.mode) : null;
+      const nextPanelMode = nextPanel ? getModeType(nextPanel.mode) : null;
+      // Intentional, preferential order
+      if (prevPanelMode === 'main') {
+        direction = 'right';
+      } else if (nextPanelMode === 'main') {
+        direction = 'left';
+      } else if (prevPanelMode && prevPanelMode !== 'collapsible') {
+        direction = 'right';
+      } else if (nextPanelMode && nextPanelMode !== 'collapsible') {
+        direction = 'left';
+      } else if (prevPanel && nextPanel) {
+        direction = prevPanel.size > nextPanel.size ? 'right' : 'left';
+      } else if (prevPanel) {
+        direction = 'right';
+      } else if (nextPanel) {
+        direction = 'left';
+      }
+    }
+    return direction;
+  }, [isCollapsed, isCollapsible, position, panels]);
+
+  const padding = useMemo(() => {
+    return `${panelPaddingValues[paddingSize] * 2}px`;
+  }, [paddingSize]);
 
   const classes = classNames(
+    'euiResizablePanel',
+    paddingSizeToClassNameMap[wrapperPadding],
     {
-      euiResizablePanel: scrollable,
+      'euiResizablePanel--collapsible': isCollapsible,
+      'euiResizablePanel-isCollapsed': isCollapsed,
+    },
+    `euiResizablePanel--${position}`,
+    wrapperProps && wrapperProps.className
+  );
+
+  const panelClasses = classNames(
+    'euiResizablePanel__content',
+    {
+      'euiResizablePanel__content--scrollable': scrollable,
     },
     className
   );
@@ -110,52 +273,146 @@ export const EuiResizablePanel: FunctionComponent<EuiResizablePanelProps> = ({
   if (size) {
     dimensions = {
       width: isHorizontal ? `${size}%` : '100%',
-      height: isHorizontal ? '100%' : `${size}%`,
+      height: isHorizontal ? 'auto' : `${size}%`,
     };
   } else {
     dimensions = {
       width: isHorizontal ? `${innerSize}%` : '100%',
-      height: isHorizontal ? '100%' : `${innerSize}%`,
+      height: isHorizontal ? 'auto' : `${innerSize}%`,
     };
   }
 
   const styles = {
     ...style,
     ...dimensions,
-    minWidth: isHorizontal ? minSize : 0,
-    minHeight: isHorizontal ? 0 : minSize,
   };
 
   useEffect(() => {
+    if (!registration) return;
     const id = panelId.current;
-    registry &&
-      registry.registerPanel({
-        id,
-        setSize(panelSize) {
-          if (initialSize && !size) {
-            setInnerSize(panelSize);
-          }
-        },
-        getSizePx() {
-          return isHorizontal
-            ? divRef.current!.getBoundingClientRect().width
-            : divRef.current!.getBoundingClientRect().height;
-        },
-        minSize,
-      });
+    const initSize = size ?? (initialSize || 0);
+    resizerIds.current = [
+      divRef.current!.previousElementSibling
+        ? divRef.current!.previousElementSibling.id
+        : '',
+      divRef.current!.nextElementSibling
+        ? divRef.current!.nextElementSibling!.id
+        : '',
+    ];
+    registration.register({
+      id,
+      size: initSize,
+      prevSize: initSize,
+      getSizePx() {
+        return isHorizontal
+          ? divRef.current!.getBoundingClientRect().width
+          : divRef.current!.getBoundingClientRect().height;
+      },
+      minSize: [minSize, padding],
+      mode: modeType,
+      isCollapsed: false,
+      position: getPosition(divRef.current!),
+    });
     return () => {
-      registry && registry.deregisterPanel(id);
+      registration.deregister(id);
     };
-  }, [initialSize, isHorizontal, minSize, registry, size]);
+  }, [
+    initialSize,
+    isHorizontal,
+    minSize,
+    size,
+    registration,
+    modeType,
+    padding,
+  ]);
+
+  const onClickCollapse = (options: ActionToggleOptions) => {
+    onToggleCollapsedInternal &&
+      onToggleCollapsedInternal(panelId.current, options);
+    onToggleCollapsed && onToggleCollapsed(panelId.current, options);
+  };
+
+  const collapseRight = (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClickCollapse({ direction: 'right' });
+    if (e.detail) e.currentTarget.blur();
+  };
+
+  const collapseLeft = (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClickCollapse({ direction: 'left' });
+    if (e.detail) e.currentTarget.blur();
+  };
+
+  const toggleButtonAriaLabel = useEuiI18n(
+    'euiResizablePanel.toggleButtonAriaLabel',
+    'Press to toggle this panel'
+  );
+
+  const hasLeftToggle =
+    (isCollapsible || isCollapsed) &&
+    (position === 'last' || (position === 'middle' && direction === 'right'));
+
+  const hasRightToggle =
+    (isCollapsible || isCollapsed) &&
+    (position === 'first' || (position === 'middle' && direction === 'left'));
+
+  const hasVisibleToggle =
+    (modeType === 'custom' && isCollapsed) || isCollapsible;
+
+  let theToggle;
+  if ((isCollapsible || modeType === 'custom') && hasLeftToggle) {
+    theToggle = (
+      <EuiResizableCollapseButton
+        externalPosition="before"
+        direction={isHorizontal ? 'horizontal' : 'vertical'}
+        isVisible={
+          resizers[resizerIds.current[0]].isFocused ||
+          resizers[resizerIds.current[0]].isDisabled
+        }
+        isCollapsed={resizers[resizerIds.current[0]].isDisabled}
+        internalPosition={toggleOpts.position as ToggleOptions['position']}
+        data-test-subj={toggleOpts['data-test-subj']}
+        aria-label={toggleButtonAriaLabel}
+        onClick={collapseRight}
+      />
+    );
+  } else if ((isCollapsible || modeType === 'custom') && hasRightToggle) {
+    theToggle = (
+      <EuiResizableCollapseButton
+        externalPosition="after"
+        direction={isHorizontal ? 'horizontal' : 'vertical'}
+        isVisible={
+          resizers[resizerIds.current[1]].isFocused ||
+          resizers[resizerIds.current[1]].isDisabled
+        }
+        isCollapsed={resizers[resizerIds.current[1]].isDisabled}
+        internalPosition={toggleOpts.position as ToggleOptions['position']}
+        data-test-subj={toggleOpts['data-test-subj']}
+        aria-label={toggleButtonAriaLabel}
+        onClick={collapseLeft}
+      />
+    );
+  }
 
   return (
     <div
-      className={classes}
+      {...wrapperProps}
       id={panelId.current}
       ref={divRef}
       style={styles}
-      {...rest}>
-      {children}
+      className={classes}>
+      {/* The toggle is displayed on either side for tab order */}
+      {hasVisibleToggle && hasLeftToggle && theToggle}
+      <EuiPanel
+        className={panelClasses}
+        hasShadow={hasShadow}
+        borderRadius={borderRadius}
+        color={color}
+        paddingSize={isCollapsed ? 'none' : paddingSize}
+        {...rest}>
+        {children}
+      </EuiPanel>
+      {/* The toggle is displayed on either side for tab order */}
+      {hasVisibleToggle && hasRightToggle && theToggle}
     </div>
   );
 };
diff --git a/src/components/resizable_container/types.ts b/src/components/resizable_container/types.ts
new file mode 100644
index 000000000000..cf064411a26f
--- /dev/null
+++ b/src/components/resizable_container/types.ts
@@ -0,0 +1,198 @@
+/*
+ * 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 { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
+
+export type PanelModeType = 'collapsible' | 'main' | 'custom';
+
+export type PanelPosition = 'first' | 'middle' | 'last';
+
+export type PanelDirection = 'left' | 'right';
+
+export interface EuiResizablePanelController {
+  id: string;
+  size: number;
+  getSizePx: () => number;
+  minSize: string[];
+  mode?: PanelModeType;
+  isCollapsed: boolean;
+  prevSize: number;
+  position: PanelPosition;
+}
+
+export interface EuiResizableButtonController {
+  id: string;
+  ref: HTMLElement;
+  isDisabled: boolean;
+  isFocused: boolean;
+}
+
+export interface EuiResizableContainerRegistry {
+  panels: { [key: string]: EuiResizablePanelController };
+  resizers: { [key: string]: EuiResizableButtonController };
+}
+
+export type EuiResizableButtonMouseEvent =
+  | MouseEvent<HTMLButtonElement>
+  | TouchEvent<HTMLButtonElement>;
+
+export type EuiResizableButtonKeyDownEvent = KeyboardEvent<HTMLButtonElement>;
+
+export interface EuiResizableContainerState {
+  isDragging: boolean;
+  currentResizerPos: number;
+  prevPanelId: string | null;
+  nextPanelId: string | null;
+  containerSize: number;
+  isHorizontal?: boolean;
+  panels: EuiResizableContainerRegistry['panels'];
+  resizers: EuiResizableContainerRegistry['resizers'];
+}
+
+export interface ActionToggleOptions {
+  direction: PanelDirection;
+}
+
+interface ActionReset {
+  type: 'EUI_RESIZABLE_RESET';
+}
+
+interface ActionInit {
+  type: 'EUI_RESIZABLE_CONTAINER_INIT';
+}
+
+export interface ActionDragStart {
+  type: 'EUI_RESIZABLE_DRAG_START';
+  payload: { prevPanelId: string; nextPanelId: string; position: number };
+}
+
+export interface ActionDragMove {
+  type: 'EUI_RESIZABLE_DRAG_MOVE';
+  payload: { prevPanelId: string; nextPanelId: string; position: number };
+}
+
+export interface ActionKeyMove {
+  type: 'EUI_RESIZABLE_KEY_MOVE';
+  payload: {
+    prevPanelId: string;
+    nextPanelId: string;
+    direction: 'forward' | 'backward';
+  };
+}
+
+export interface ActionResize {
+  type: 'EUI_RESIZABLE_RESIZE';
+  payload: {};
+}
+
+export interface ActionToggle {
+  type: 'EUI_RESIZABLE_TOGGLE';
+  payload: {
+    panelId: string;
+    options: ActionToggleOptions;
+  };
+}
+
+interface ActionRegisterPanel {
+  type: 'EUI_RESIZABLE_PANEL_REGISTER';
+  payload: {
+    panel: EuiResizablePanelController;
+  };
+}
+
+interface ActionDeregisterPanel {
+  type: 'EUI_RESIZABLE_PANEL_DEREGISTER';
+  payload: {
+    panelId: EuiResizablePanelController['id'];
+  };
+}
+
+interface ActionRegisterResizer {
+  type: 'EUI_RESIZABLE_BUTTON_REGISTER';
+  payload: {
+    resizer: EuiResizableButtonController;
+  };
+}
+
+interface ActionDeregisterResizer {
+  type: 'EUI_RESIZABLE_BUTTON_DEREGISTER';
+  payload: {
+    resizerId: EuiResizableButtonController['id'];
+  };
+}
+
+export interface ActionFocus {
+  type: 'EUI_RESIZABLE_BUTTON_FOCUS';
+  payload: {
+    resizerId: EuiResizableButtonController['id'];
+  };
+}
+
+interface ActionBlur {
+  type: 'EUI_RESIZABLE_BUTTON_BLUR';
+}
+interface ActionOnChange {
+  type: 'EUI_RESIZABLE_ONCHANGE';
+}
+
+export type EuiResizableContainerAction =
+  | ActionReset
+  | ActionInit
+  | ActionRegisterPanel
+  | ActionDeregisterPanel
+  | ActionRegisterResizer
+  | ActionDeregisterResizer
+  | ActionDragStart
+  | ActionDragMove
+  | ActionKeyMove
+  | ActionResize
+  | ActionToggle
+  | ActionFocus
+  | ActionBlur
+  | ActionOnChange;
+
+export interface EuiResizableContainerActions {
+  reset: () => void;
+  initContainer: () => void;
+  registerPanel: (panel: EuiResizablePanelController) => void;
+  deregisterPanel: (panelId: EuiResizablePanelController['id']) => void;
+  registerResizer: (resizer: EuiResizableButtonController) => void;
+  deregisterResizer: (resizerId: EuiResizableButtonController['id']) => void;
+  dragStart: ({
+    prevPanelId,
+    nextPanelId,
+    position,
+  }: ActionDragStart['payload']) => void;
+  dragMove: ({
+    prevPanelId,
+    nextPanelId,
+    position,
+  }: ActionDragMove['payload']) => void;
+  keyMove: ({
+    prevPanelId,
+    nextPanelId,
+    direction,
+  }: ActionKeyMove['payload']) => void;
+  resizerFocus: (resizerId: ActionFocus['payload']['resizerId']) => void;
+  resizerBlur: () => void;
+  togglePanel: (
+    panelId: ActionToggle['payload']['panelId'],
+    options: ActionToggle['payload']['options']
+  ) => void;
+}