[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 <[email protected]>

* 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 <[email protected]>

* remove callout from intro

Co-authored-by: Greg Thompson <[email protected]>
Co-authored-by: cchaos <[email protected]>
Co-authored-by: Chandler Prall <[email protected]>
Co-authored-by: Caroline Horn <[email protected]>

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))

src-docs/src/views/resizable_container/resizable_container_basic.js

@@ -11,22 +11,20 @@ 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>
 
         <EuiResizableButton />
 
         <EuiResizablePanel initialSize={50} minSize="200px">
-          <EuiText>
-            <p>{text}</p>
-          </EuiText>
+          <EuiText>{text}</EuiText>
         </EuiResizablePanel>
       </>
     )}