From 177a2b3c65fe7fc80a8414cee1b3bf4ef130c278 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Tue, 18 Oct 2022 05:36:28 -0700
Subject: [PATCH] [Emotion] Convert EuiResizableContainer and EuiResizablePanel
 (#6287)

* [EuiResizableContainer] Convert styles

* [EuiResizablePanel] Emotion setup

- basic styles only
- leave wrapper modifier classes in for now - will handle in another commit
+ rename inlineStyles due to var name conflict

* [EuiResizablePanel] Convert & update padding CSS

- Add new `euiPaddingSizeCSS` util that our internal components can use to generate a CSS map, and update `useEuiPaddingSize` to call that util instead of being its own fn

- Remove panel padding size map in favor of calling euiPaddingSize util directly

- Remove modifier map and ts error

+ add wrapperPadding unit test

* [EuiResizablePanel] Convert remaining collapse CSS to Emotion

+ DRY out axis direction to a const

* [EuiResizablePanel] Remove remaining modifier classes in favor of data attributes

- left out isCollapsible modifier - consumers can likely look for the collapsible button instead

+ fix misc parseInt usage missing `10` radix - prefer parseFloat instead

* [EuiResizablePanel] Convert inline style dimensions to logical properties

+ simplify conditional logic

+ fix logicalSizeStyle util not correctly camelCasing keys

* [EuiResizablePanel] Remove Sass files

* [docs] Convert all resizable examples to Typescript

* Changelog
---
 ...basic.js => resizable_container_basic.tsx} |   1 +
 .../resizable_container_callbacks.tsx         |   4 +-
 .../resizable_container_example.js            |  16 +--
 ...s => resizable_container_reset_values.tsx} |   9 +-
 ...al.js => resizable_container_vertical.tsx} |   2 +-
 ...ble.js => resizable_panel_collapsible.tsx} |  15 +-
 ... resizable_panel_collapsible_external.tsx} |  19 ++-
 ...> resizable_panel_collapsible_options.tsx} |  15 +-
 ...esizable_panel_collapsible_responsive.tsx} |  15 +-
 ...sizable_panels.js => resizable_panels.tsx} |   0
 .../resizable_container.test.tsx.snap         | 135 ++++++++++--------
 .../resizable_panel.test.tsx.snap             |  26 +++-
 .../resizable_container/_index.scss           |   2 -
 .../_resizable_container.scss                 |   8 --
 .../resizable_container/_resizable_panel.scss |  51 -------
 src/components/resizable_container/helpers.ts |   6 +-
 .../resizable_container.styles.ts             |  23 +++
 .../resizable_container.test.tsx              |  13 ++
 .../resizable_container.tsx                   |  22 ++-
 .../resizable_panel.styles.ts                 |  67 +++++++++
 .../resizable_panel.test.tsx                  |  14 ++
 .../resizable_container/resizable_panel.tsx   |  94 +++++-------
 src/global_styling/functions/logicals.ts      |   4 +-
 src/global_styling/mixins/_padding.ts         |  30 ++--
 upcoming_changelogs/6287.md                   |   3 +
 25 files changed, 331 insertions(+), 263 deletions(-)
 rename src-docs/src/views/resizable_container/{resizable_container_basic.js => resizable_container_basic.tsx} (93%)
 rename src-docs/src/views/resizable_container/{resizable_container_reset_values.js => resizable_container_reset_values.tsx} (95%)
 rename src-docs/src/views/resizable_container/{resizable_container_vertical.js => resizable_container_vertical.tsx} (94%)
 rename src-docs/src/views/resizable_container/{resizable_panel_collapsible.js => resizable_panel_collapsible.tsx} (94%)
 rename src-docs/src/views/resizable_container/{resizable_panel_collapsible_external.js => resizable_panel_collapsible_external.tsx} (89%)
 rename src-docs/src/views/resizable_container/{resizable_panel_collapsible_options.js => resizable_panel_collapsible_options.tsx} (90%)
 rename src-docs/src/views/resizable_container/{resizable_panel_collapsible_responsive.js => resizable_panel_collapsible_responsive.tsx} (87%)
 rename src-docs/src/views/resizable_container/{resizable_panels.js => resizable_panels.tsx} (100%)
 delete mode 100644 src/components/resizable_container/_resizable_container.scss
 delete mode 100644 src/components/resizable_container/_resizable_panel.scss
 create mode 100644 src/components/resizable_container/resizable_container.styles.ts
 create mode 100644 src/components/resizable_container/resizable_panel.styles.ts
 create mode 100644 upcoming_changelogs/6287.md

diff --git a/src-docs/src/views/resizable_container/resizable_container_basic.js b/src-docs/src/views/resizable_container/resizable_container_basic.tsx
similarity index 93%
rename from src-docs/src/views/resizable_container/resizable_container_basic.js
rename to src-docs/src/views/resizable_container/resizable_container_basic.tsx
index c9e1d4fc159..c412fa724e3 100644
--- a/src-docs/src/views/resizable_container/resizable_container_basic.js
+++ b/src-docs/src/views/resizable_container/resizable_container_basic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { EuiText, EuiResizableContainer } from '../../../../src/components';
+// @ts-ignore - faker does not have type declarations
 import { fake } from 'faker';
 
 const text = (
diff --git a/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx b/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
index 2877e146b4c..d3871292c76 100644
--- a/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
@@ -6,10 +6,10 @@ import {
   EuiFlexItem,
   EuiStat,
   EuiPanel,
-} from '../../../../src/components';
+  useGeneratedHtmlId,
+} from '../../../../src';
 // @ts-ignore - faker does not have type declarations
 import { fake } from 'faker';
-import { useGeneratedHtmlId } from '../../../../src/services';
 
 const text = (
   <>
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 8f3e2d6f753..53b1e247277 100644
--- a/src-docs/src/views/resizable_container/resizable_container_example.js
+++ b/src-docs/src/views/resizable_container/resizable_container_example.js
@@ -218,7 +218,7 @@ export const ResizableContainerExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: ResizableContainerSource,
         },
       ],
@@ -257,7 +257,7 @@ export const ResizableContainerExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: ResizablePanelsSource,
         },
       ],
@@ -288,7 +288,7 @@ export const ResizableContainerExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: ResizableContainerResetValuesSource,
         },
       ],
@@ -322,7 +322,7 @@ export const ResizableContainerExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: ResizableContainerVerticalSource,
         },
       ],
@@ -365,7 +365,7 @@ export const ResizableContainerExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: ResizablePanelCollapsibleSource,
         },
       ],
@@ -406,7 +406,7 @@ export const ResizableContainerExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: ResizablePanelCollapsibleResponsiveSource,
         },
       ],
@@ -424,7 +424,7 @@ export const ResizableContainerExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: ResizablePanelCollapsibleOptsSource,
         },
       ],
@@ -452,7 +452,7 @@ export const ResizableContainerExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: ResizablePanelCollapsibleExtSource,
         },
       ],
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.tsx
similarity index 95%
rename from src-docs/src/views/resizable_container/resizable_container_reset_values.js
rename to src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
index 0d688f57bdc..2ab65cb591c 100644
--- a/src-docs/src/views/resizable_container/resizable_container_reset_values.js
+++ b/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useState } from 'react';
-
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -7,11 +6,11 @@ import {
   EuiResizableContainer,
   EuiButton,
   EuiSpacer,
-} from '../../../../src/components';
+  htmlIdGenerator,
+} from '../../../../src';
+// @ts-ignore - faker does not have type declarations
 import { fake } from 'faker';
 
-import { htmlIdGenerator } from '../../../../src/services';
-
 const text = (
   <>
     <p>{fake('{{lorem.paragraphs}}')}</p>
@@ -33,7 +32,7 @@ export default () => {
   const [savedSizes, setSavedSizes] = useState(storedSizes);
   const [sizes, setSizes] = useState(defaultSizes);
   const onPanelWidthChange = useCallback((newSizes) => {
-    setSizes((prevSizes) => ({
+    setSizes((prevSizes: Record<string, number>) => ({
       ...prevSizes,
       ...newSizes,
     }));
diff --git a/src-docs/src/views/resizable_container/resizable_container_vertical.js b/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
similarity index 94%
rename from src-docs/src/views/resizable_container/resizable_container_vertical.js
rename to src-docs/src/views/resizable_container/resizable_container_vertical.tsx
index 5807bf77174..791eeca4745 100644
--- a/src-docs/src/views/resizable_container/resizable_container_vertical.js
+++ b/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-
 import { EuiText, EuiResizableContainer } from '../../../../src/components';
+// @ts-ignore - faker does not have type declarations
 import { fake } from 'faker';
 
 const text = (
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
similarity index 94%
rename from src-docs/src/views/resizable_container/resizable_panel_collapsible.js
rename to src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
index 7c5c7ed3a5f..4898aa31d89 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
@@ -9,36 +9,31 @@ import {
   EuiSpacer,
   EuiPage,
 } from '../../../../src/components';
+// @ts-ignore - faker does not have type declarations
 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],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
       active: true,
     },
     {
       id: 2,
       label: 'Second item',
-      text: texts[1],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
     {
       id: 3,
       label: 'Third item',
-      text: texts[2],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
     {
       id: 4,
       label: 'Forth item',
-      text: texts[3],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
   ];
 
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.tsx
similarity index 89%
rename from src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js
rename to src-docs/src/views/resizable_container/resizable_panel_collapsible_external.tsx
index cfeb14a53b2..028537d4db2 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.tsx
@@ -23,11 +23,13 @@ const toggleButtons = [
 ];
 
 export default () => {
-  const collapseFn = useRef(() => {});
+  const collapseFn = useRef<Function>(() => {});
 
-  const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({});
+  const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState<
+    Record<string, boolean>
+  >({});
 
-  const onCollapse = (optionId) => {
+  const onCollapse = (optionId: string) => {
     const newToggleIdToSelectedMap = {
       ...toggleIdToSelectedMap,
       [optionId]: !toggleIdToSelectedMap[optionId],
@@ -35,7 +37,7 @@ export default () => {
     setToggleIdToSelectedMap(newToggleIdToSelectedMap);
   };
 
-  const onChange = (optionId) => {
+  const onChange = (optionId: string) => {
     onCollapse(optionId);
     collapseFn.current(`panel${optionId}`, optionId === '3' ? 'right' : 'left');
   };
@@ -58,8 +60,11 @@ export default () => {
         style={{ height: '250px' }}
       >
         {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
-          collapseFn.current = (id, direction = 'left') =>
-            togglePanel(id, { direction });
+          collapseFn.current = (
+            id: string,
+            direction: 'left' | 'right' = 'left'
+          ) => togglePanel?.(id, { direction });
+
           return (
             <>
               <EuiResizablePanel id="panel1" initialSize={30} minSize="10%">
@@ -103,7 +108,7 @@ export default () => {
                         color="text"
                         aria-label={'Toggle panel 3'}
                         iconType="menuRight"
-                        onClick={() => onChange(3)}
+                        onClick={() => onChange('3')}
                       />
                     </EuiFlexItem>
                   </EuiFlexGroup>
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.tsx
similarity index 90%
rename from src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js
rename to src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
index 35c364261dd..6cfb3f4bcce 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
@@ -9,35 +9,30 @@ import {
   EuiText,
   EuiPage,
 } from '../../../../src/components';
+// @ts-ignore - faker does not have type declarations
 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],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
     {
       id: 2,
       label: 'Second item',
-      text: texts[1],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
     {
       id: 3,
       label: 'Third item',
-      text: texts[2],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
     {
       id: 4,
       label: 'Forth item',
-      text: texts[3],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
   ];
 
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.tsx
similarity index 87%
rename from src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js
rename to src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.tsx
index 44fe0ef1b2b..10560f97f58 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.tsx
@@ -10,36 +10,31 @@ import {
   EuiPage,
   useIsWithinBreakpoints,
 } from '../../../../src';
+// @ts-ignore - faker does not have type declarations
 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],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
       active: true,
     },
     {
       id: 2,
       label: 'Second item',
-      text: texts[1],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
     {
       id: 3,
       label: 'Third item',
-      text: texts[2],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
     {
       id: 4,
       label: 'Forth item',
-      text: texts[3],
+      text: <p>{fake('{{lorem.paragraphs}}')}</p>,
     },
   ];
 
diff --git a/src-docs/src/views/resizable_container/resizable_panels.js b/src-docs/src/views/resizable_container/resizable_panels.tsx
similarity index 100%
rename from src-docs/src/views/resizable_container/resizable_panels.js
rename to src-docs/src/views/resizable_container/resizable_panels.tsx
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 293457b8e31..0b5263a09fd 100644
--- a/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
+++ b/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
@@ -3,16 +3,17 @@
 exports[`EuiResizableContainer can adjust panel props 1`] = `
 <div
   aria-label="aria-label"
-  class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
+  class="euiResizableContainer testClass1 testClass2 emotion-euiResizableContainer-horizontal"
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:auto"
+    style="inline-size:50%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-transparent"
+      class="euiPanel euiPanel--transparent euiResizablePanel__content emotion-euiPanel-grow-none-transparent-euiResizablePanel__content-scrollable"
     >
       Testing
     </div>
@@ -25,12 +26,13 @@ exports[`EuiResizableContainer can adjust panel props 1`] = `
     type="button"
   />
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:auto"
+    style="inline-size:50%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-plain"
+      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-plain-euiResizablePanel__content-scrollable"
     >
       123
     </div>
@@ -41,16 +43,17 @@ exports[`EuiResizableContainer can adjust panel props 1`] = `
 exports[`EuiResizableContainer can be controlled externally 1`] = `
 <div
   aria-label="aria-label"
-  class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
+  class="euiResizableContainer testClass1 testClass2 emotion-euiResizableContainer-horizontal"
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:auto"
+    style="inline-size:50%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       Testing
     </div>
@@ -63,12 +66,13 @@ exports[`EuiResizableContainer can be controlled externally 1`] = `
     type="button"
   />
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:auto"
+    style="inline-size:50%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       123
     </div>
@@ -79,16 +83,17 @@ exports[`EuiResizableContainer can be controlled externally 1`] = `
 exports[`EuiResizableContainer can be vertical 1`] = `
 <div
   aria-label="aria-label"
-  class="euiResizableContainer euiResizableContainer--vertical testClass1 testClass2"
+  class="euiResizableContainer testClass1 testClass2 emotion-euiResizableContainer-vertical"
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:100%;height:50%"
+    style="inline-size:100%;block-size:50%"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       Testing
     </div>
@@ -101,12 +106,13 @@ exports[`EuiResizableContainer can be vertical 1`] = `
     type="button"
   />
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:100%;height:50%"
+    style="inline-size:100%;block-size:50%"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       123
     </div>
@@ -117,16 +123,17 @@ exports[`EuiResizableContainer can be vertical 1`] = `
 exports[`EuiResizableContainer can have more than two panels 1`] = `
 <div
   aria-label="aria-label"
-  class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
+  class="euiResizableContainer testClass1 testClass2 emotion-euiResizableContainer-horizontal"
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:33%;height:auto"
+    style="inline-size:33%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       Testing
     </div>
@@ -139,12 +146,13 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
     type="button"
   />
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:33%;height:auto"
+    style="inline-size:33%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       123
     </div>
@@ -157,12 +165,13 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
     type="button"
   />
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:33%;height:auto"
+    style="inline-size:33%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       And again
     </div>
@@ -173,16 +182,17 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
 exports[`EuiResizableContainer can have scrollable panels 1`] = `
 <div
   aria-label="aria-label"
-  class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
+  class="euiResizableContainer testClass1 testClass2 emotion-euiResizableContainer-horizontal"
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:auto"
+    style="inline-size:50%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       Testing
     </div>
@@ -195,12 +205,13 @@ exports[`EuiResizableContainer can have scrollable panels 1`] = `
     type="button"
   />
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:auto"
+    style="inline-size:50%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       123
     </div>
@@ -211,16 +222,17 @@ exports[`EuiResizableContainer can have scrollable panels 1`] = `
 exports[`EuiResizableContainer can have toggleable panels 1`] = `
 <div
   aria-label="aria-label"
-  class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
+  class="euiResizableContainer testClass1 testClass2 emotion-euiResizableContainer-horizontal"
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel euiResizablePanel--collapsible euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:20%;height:auto"
+    style="inline-size:20%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable-hasCollapsibleButton"
     >
       Sidebar
     </div>
@@ -233,12 +245,13 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
     type="button"
   />
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:80%;height:auto"
+    style="inline-size:80%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       Sidebar content
     </div>
@@ -249,16 +262,17 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
 exports[`EuiResizableContainer is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
+  class="euiResizableContainer testClass1 testClass2 emotion-euiResizableContainer-horizontal"
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:auto"
+    style="inline-size:50%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       Testing
     </div>
@@ -271,12 +285,13 @@ exports[`EuiResizableContainer is rendered 1`] = `
     type="button"
   />
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:50%;height:auto"
+    style="inline-size:50%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       123
     </div>
@@ -287,16 +302,17 @@ exports[`EuiResizableContainer is rendered 1`] = `
 exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
 <div
   aria-label="aria-label"
-  class="euiResizableContainer euiResizableContainer--horizontal testClass1 testClass2"
+  class="euiResizableContainer testClass1 testClass2 emotion-euiResizableContainer-horizontal"
   data-test-subj="test subject string"
 >
   <div
-    class="euiResizablePanel euiResizablePanel--collapsible euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:20%;height:auto"
+    style="inline-size:20%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable-hasCollapsibleButton"
     >
       Sidebar
     </div>
@@ -309,12 +325,13 @@ exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
     type="button"
   />
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width:80%;height:auto"
+    style="inline-size:80%;block-size:auto"
   >
     <div
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
     >
       Sidebar content
     </div>
diff --git a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
index af9ae37832e..f7c68c8c1ae 100644
--- a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
+++ b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
@@ -1,15 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiResizablePanel props wrapperPadding 1`] = `
+<div>
+  <div
+    class="euiResizablePanel emotion-euiResizablePanel-l"
+    data-position="middle"
+    id="resizable-panel_generated-id"
+    style="inline-size: 100%; block-size: 0%;"
+  >
+    <div
+      aria-label="aria-label"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content testClass1 testClass2 emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
+      data-test-subj="test subject string"
+    >
+      Content
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiResizablePanel renders 1`] = `
 <div>
   <div
-    class="euiResizablePanel euiResizablePanel--middle"
+    class="euiResizablePanel emotion-euiResizablePanel"
+    data-position="middle"
     id="resizable-panel_generated-id"
-    style="width: 100%; height: 0%;"
+    style="inline-size: 100%; block-size: 0%;"
   >
     <div
       aria-label="aria-label"
-      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable testClass1 testClass2 emotion-euiPanel-grow-none-m-transparent"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content testClass1 testClass2 emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
       data-test-subj="test subject string"
     >
       Content
diff --git a/src/components/resizable_container/_index.scss b/src/components/resizable_container/_index.scss
index 8c52f0fffbe..00311b94de6 100644
--- a/src/components/resizable_container/_index.scss
+++ b/src/components/resizable_container/_index.scss
@@ -1,5 +1,3 @@
 @import 'variables';
 @import 'resizable_button';
 @import 'resizable_collapse_button';
-@import 'resizable_container';
-@import 'resizable_panel';
diff --git a/src/components/resizable_container/_resizable_container.scss b/src/components/resizable_container/_resizable_container.scss
deleted file mode 100644
index aad47f45861..00000000000
--- a/src/components/resizable_container/_resizable_container.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.euiResizableContainer {
-  display: flex;
-  width: 100%;
-
-  &--vertical {
-    flex-direction: column;
-  }
-}
diff --git a/src/components/resizable_container/_resizable_panel.scss b/src/components/resizable_container/_resizable_panel.scss
deleted file mode 100644
index f9c6438b41b..00000000000
--- a/src/components/resizable_container/_resizable_panel.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.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/helpers.ts b/src/components/resizable_container/helpers.ts
index 2c3d89ed78d..e70ba268c63 100644
--- a/src/components/resizable_container/helpers.ts
+++ b/src/components/resizable_container/helpers.ts
@@ -59,7 +59,7 @@ export const sizesOnly = (
 
 const _getPanelMinSize = (panelMinSize: string, containerSize: number) => {
   let panelMinSizePercent = 0;
-  const panelMinSizeInt = parseInt(panelMinSize);
+  const panelMinSizeInt = parseFloat(panelMinSize);
   if (panelMinSize.indexOf('px') > -1) {
     panelMinSizePercent = pxToPercent(panelMinSizeInt, containerSize);
   } else if (panelMinSize.indexOf('%') > -1) {
@@ -102,9 +102,7 @@ const getSiblingPanel = (
     adjacency === 'prev' ? 'previousElementSibling' : 'nextElementSibling';
   let sibling = element[method];
   while (sibling) {
-    if (
-      sibling.matches('.euiResizablePanel:not(.euiResizablePanel-isCollapsed)')
-    ) {
+    if (sibling.matches('.euiResizablePanel:not([data-collapsed])')) {
       return sibling;
     }
     sibling = sibling[method];
diff --git a/src/components/resizable_container/resizable_container.styles.ts b/src/components/resizable_container/resizable_container.styles.ts
new file mode 100644
index 00000000000..9df0455bdef
--- /dev/null
+++ b/src/components/resizable_container/resizable_container.styles.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+
+export const euiResizableContainerStyles = () => {
+  return {
+    euiResizableContainer: css`
+      display: flex;
+      ${logicalCSS('width', '100%')}
+    `,
+    horizontal: css``,
+    vertical: css`
+      flex-direction: column;
+    `,
+  };
+};
diff --git a/src/components/resizable_container/resizable_container.test.tsx b/src/components/resizable_container/resizable_container.test.tsx
index 7f7fe34f0db..63b6a0a803f 100644
--- a/src/components/resizable_container/resizable_container.test.tsx
+++ b/src/components/resizable_container/resizable_container.test.tsx
@@ -9,11 +9,24 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import { findTestSubject, requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../..//test/internal';
 
 import { EuiResizableContainer } from './resizable_container';
 import { keys } from '../../services';
 
 describe('EuiResizableContainer', () => {
+  shouldRenderCustomStyles(
+    <EuiResizableContainer {...requiredProps}>
+      {(EuiResizablePanel, EuiResizableButton) => (
+        <>
+          <EuiResizablePanel initialSize={50}>Testing</EuiResizablePanel>
+          <EuiResizableButton />
+          <EuiResizablePanel initialSize={50}>123</EuiResizablePanel>
+        </>
+      )}
+    </EuiResizableContainer>
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiResizableContainer {...requiredProps}>
diff --git a/src/components/resizable_container/resizable_container.tsx b/src/components/resizable_container/resizable_container.tsx
index 5ed7e66381e..578d6aed5ba 100644
--- a/src/components/resizable_container/resizable_container.tsx
+++ b/src/components/resizable_container/resizable_container.tsx
@@ -43,10 +43,7 @@ import {
   ResizeTrigger,
 } from './types';
 
-const containerDirections = {
-  vertical: 'vertical',
-  horizontal: 'horizontal',
-};
+import { euiResizableContainerStyles } from './resizable_container.styles';
 
 export interface EuiResizableContainerProps
   extends HTMLAttributes<HTMLDivElement>,
@@ -54,7 +51,7 @@ export interface EuiResizableContainerProps
   /**
    * Specify the container direction
    */
-  direction?: keyof typeof containerDirections;
+  direction?: 'vertical' | 'horizontal';
   /**
    * Pure function which accepts Panel and Resizer components in arguments
    * and returns a component tree
@@ -102,16 +99,12 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
   ...rest
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const isHorizontal = direction === containerDirections.horizontal;
+  const isHorizontal = direction === 'horizontal';
 
-  const classes = classNames(
-    'euiResizableContainer',
-    {
-      'euiResizableContainer--vertical': !isHorizontal,
-      'euiResizableContainer--horizontal': isHorizontal,
-    },
-    className
-  );
+  const classes = classNames('euiResizableContainer', className);
+
+  const styles = euiResizableContainerStyles();
+  const cssStyles = [styles.euiResizableContainer, styles[direction]];
 
   const [actions, reducerState] = useContainerCallbacks({
     initialState: { ...initialState, isHorizontal },
@@ -328,6 +321,7 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
       }}
     >
       <div
+        css={cssStyles}
         className={classes}
         ref={containerRef}
         onMouseMove={reducerState.isDragging ? onMouseMove : undefined}
diff --git a/src/components/resizable_container/resizable_panel.styles.ts b/src/components/resizable_container/resizable_panel.styles.ts
new file mode 100644
index 00000000000..9ae6772b549
--- /dev/null
+++ b/src/components/resizable_container/resizable_panel.styles.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import {
+  logicalCSS,
+  logicalCSSWithFallback,
+  euiScrollBarStyles,
+  euiPaddingSizeCSS,
+} from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+
+export const euiResizablePanelStyles = (euiThemeContext: UseEuiTheme) => {
+  return {
+    euiResizablePanel: css`
+      position: relative;
+    `,
+    collapsed: css`
+      overflow: hidden;
+    `,
+    paddingSizes: {
+      ...euiPaddingSizeCSS(euiThemeContext),
+    },
+  };
+};
+
+export const euiResizablePanelContentStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiResizablePanel__content: css`
+      ${logicalCSS('height', '100%')}
+    `,
+    scrollable: css`
+      ${euiScrollBarStyles(euiThemeContext)}
+      ${logicalCSSWithFallback('overflow-y', 'auto')}
+    `,
+    collapsedChildren: css`
+      * {
+        display: none;
+      }
+    `,
+    horizontal: {
+      collapsed: css`
+        ${logicalCSS('min-width', '0 !important')}
+      `,
+      hasCollapsibleButton: css`
+        ${logicalCSS('min-width', `${euiTheme.size.l} !important`)}
+      `,
+    },
+    vertical: {
+      collapsed: css`
+        ${logicalCSS('min-height', '0 !important')}
+      `,
+      hasCollapsibleButton: css`
+        ${logicalCSS('min-height', `${euiTheme.size.l} !important`)}
+      `,
+    },
+  };
+};
diff --git a/src/components/resizable_container/resizable_panel.test.tsx b/src/components/resizable_container/resizable_panel.test.tsx
index 5e9aaaeee78..f3c4fbde921 100644
--- a/src/components/resizable_container/resizable_panel.test.tsx
+++ b/src/components/resizable_container/resizable_panel.test.tsx
@@ -44,4 +44,18 @@ describe('EuiResizablePanel', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  describe('props', () => {
+    test('wrapperPadding', () => {
+      const { container } = render(
+        <EuiResizableContainerContextProvider registry={mockRegistry}>
+          <EuiResizablePanel {...requiredProps} wrapperPadding="l">
+            Content
+          </EuiResizablePanel>
+        </EuiResizableContainerContextProvider>
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
 });
diff --git a/src/components/resizable_container/resizable_panel.tsx b/src/components/resizable_container/resizable_panel.tsx
index bc4b8854436..e046ff933bb 100644
--- a/src/components/resizable_container/resizable_panel.tsx
+++ b/src/components/resizable_container/resizable_panel.tsx
@@ -17,9 +17,11 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
+import { useGeneratedHtmlId, useEuiTheme } from '../../services';
+import { logicalSizeStyle, euiPaddingSize } from '../../global_styling';
 import { CommonProps } from '../common';
+
 import { useEuiResizableContainerContext } from './context';
-import { useGeneratedHtmlId } from '../../services';
 import { EuiPanel } from '../panel';
 import { PanelPaddingSize, _EuiPanelProps } from '../panel/panel';
 import { useEuiI18n } from '../i18n';
@@ -30,15 +32,10 @@ import {
   PanelPosition,
 } from './types';
 import { EuiResizableCollapseButton } from './resizable_collapse_button';
-
-const panelPaddingValues = {
-  none: 0,
-  xs: 4,
-  s: 8,
-  m: 16,
-  l: 24,
-  xl: 32,
-};
+import {
+  euiResizablePanelStyles,
+  euiResizablePanelContentStyles,
+} from './resizable_panel.styles';
 
 export interface ToggleOptions {
   'data-test-subj'?: string;
@@ -85,12 +82,6 @@ export interface EuiResizablePanelControls {
   onToggleCollapsedInternal: ToggleCollapseCallback;
 }
 
-const paddingSizeToClassNameMap = {
-  none: null,
-  s: 'euiResizablePanel--paddingSmall',
-  m: 'euiResizablePanel--paddingMedium',
-  l: 'euiResizablePanel--paddingLarge',
-};
 export interface EuiResizablePanelProps
   extends _EuiPanelProps,
     CommonProps,
@@ -235,50 +226,37 @@ export const EuiResizablePanel: FunctionComponent<EuiResizablePanelProps> = ({
     return direction;
   }, [isCollapsed, isCollapsible, position, panels, panelId]);
 
-  const padding = useMemo(() => {
-    return `${panelPaddingValues[paddingSize] * 2}px`;
-  }, [paddingSize]);
-
-  const classes = classNames(
-    'euiResizablePanel',
-    // @ts-expect-error EuiPanel increased its available sizes
-    // When we convert this component to Emotion, we should also increase sizes to match EuiPanel and remove this comment.
-    paddingSizeToClassNameMap[wrapperPadding],
-    {
-      'euiResizablePanel--collapsible': isCollapsible,
-      'euiResizablePanel-isCollapsed': isCollapsed,
-    },
-    `euiResizablePanel--${position}`,
-    wrapperProps && wrapperProps.className
-  );
+  const axis = isHorizontal ? 'horizontal' : 'vertical';
 
-  const panelClasses = classNames(
-    'euiResizablePanel__content',
-    {
-      'euiResizablePanel__content--scrollable': scrollable,
-    },
-    className
-  );
+  const euiTheme = useEuiTheme();
 
-  let dimensions;
+  const styles = euiResizablePanelStyles(euiTheme);
+  const cssStyles = [
+    styles.euiResizablePanel,
+    isCollapsed && styles.collapsed,
+    styles.paddingSizes[wrapperPadding],
+  ];
+  const contentStyles = euiResizablePanelContentStyles(euiTheme);
+  const contentCssStyles = [
+    contentStyles.euiResizablePanel__content,
+    scrollable && contentStyles.scrollable,
+    isCollapsed && contentStyles.collapsedChildren,
+    isCollapsed && !isCollapsible && contentStyles[axis].collapsed,
+    isCollapsible && contentStyles[axis].hasCollapsibleButton,
+  ];
 
-  if (size) {
-    dimensions = {
-      width: isHorizontal ? `${size}%` : '100%',
-      height: isHorizontal ? 'auto' : `${size}%`,
-    };
-  } else {
-    dimensions = {
-      width: isHorizontal ? `${innerSize}%` : '100%',
-      height: isHorizontal ? 'auto' : `${innerSize}%`,
-    };
-  }
+  const classes = classNames('euiResizablePanel', wrapperProps?.className);
+  const panelClasses = classNames('euiResizablePanel__content', className);
 
-  const styles = {
+  const inlineStyles = {
     ...wrapperProps?.style,
-    ...dimensions,
+    ...(isHorizontal
+      ? logicalSizeStyle(`${size || innerSize}%`, 'auto')
+      : logicalSizeStyle('100%', `${size || innerSize}%`)),
   };
 
+  const padding = euiPaddingSize(euiTheme, paddingSize) || '0px';
+
   useEffect(() => {
     if (!registration) return;
     const initSize = size ?? (initialSize || 0);
@@ -356,7 +334,7 @@ export const EuiResizablePanel: FunctionComponent<EuiResizablePanelProps> = ({
     theToggle = (
       <EuiResizableCollapseButton
         externalPosition="before"
-        direction={isHorizontal ? 'horizontal' : 'vertical'}
+        direction={axis}
         isVisible={
           theResizer && (theResizer.isFocused || theResizer.isDisabled)
         }
@@ -372,7 +350,7 @@ export const EuiResizablePanel: FunctionComponent<EuiResizablePanelProps> = ({
     theToggle = (
       <EuiResizableCollapseButton
         externalPosition="after"
-        direction={isHorizontal ? 'horizontal' : 'vertical'}
+        direction={axis}
         isVisible={
           theResizer && (theResizer.isFocused || theResizer.isDisabled)
         }
@@ -387,15 +365,19 @@ export const EuiResizablePanel: FunctionComponent<EuiResizablePanelProps> = ({
 
   return (
     <div
+      css={cssStyles}
       {...wrapperProps}
       id={panelId}
       ref={divRef}
-      style={styles}
+      style={inlineStyles}
       className={classes}
+      data-collapsed={isCollapsed || undefined}
+      data-position={position}
     >
       {/* The toggle is displayed on either side for tab order */}
       {hasVisibleToggle && hasLeftToggle && theToggle}
       <EuiPanel
+        css={contentCssStyles}
         className={panelClasses}
         hasShadow={hasShadow}
         borderRadius={borderRadius}
diff --git a/src/global_styling/functions/logicals.ts b/src/global_styling/functions/logicals.ts
index 4b66f1abd25..df398d7de5e 100644
--- a/src/global_styling/functions/logicals.ts
+++ b/src/global_styling/functions/logicals.ts
@@ -94,8 +94,8 @@ export const logicalSizeCSS = (width: any, height: any) => {
  */
 export const logicalSizeStyle = (width: any, height: any) => {
   return {
-    [logicals.width]: width,
-    [logicals.height]: height,
+    ...logicalStyle('width', width),
+    ...logicalStyle('height', height),
   };
 };
 
diff --git a/src/global_styling/mixins/_padding.ts b/src/global_styling/mixins/_padding.ts
index da9a0228b52..ba3ccece9bd 100644
--- a/src/global_styling/mixins/_padding.ts
+++ b/src/global_styling/mixins/_padding.ts
@@ -27,30 +27,38 @@ export const euiPaddingSize = (
   }
 };
 
-export const useEuiPaddingSize = (size: EuiPaddingSize) => {
-  const euiTheme = useEuiTheme();
-  return euiPaddingSize(euiTheme, size);
-};
-
-export const useEuiPaddingCSS = (side?: LogicalSides) => {
+export const euiPaddingSizeCSS = (
+  euiThemeContext: UseEuiTheme,
+  side?: LogicalSides
+) => {
   const property = side ? `padding-${logicalSide[side]}` : 'padding';
 
   return {
     none: null,
     xs: css`
-      ${property}: ${useEuiPaddingSize('xs')};
+      ${property}: ${euiPaddingSize(euiThemeContext, 'xs')};
     `,
     s: css`
-      ${property}: ${useEuiPaddingSize('s')};
+      ${property}: ${euiPaddingSize(euiThemeContext, 's')};
     `,
     m: css`
-      ${property}: ${useEuiPaddingSize('m')};
+      ${property}: ${euiPaddingSize(euiThemeContext, 'm')};
     `,
     l: css`
-      ${property}: ${useEuiPaddingSize('l')};
+      ${property}: ${euiPaddingSize(euiThemeContext, 'l')};
     `,
     xl: css`
-      ${property}: ${useEuiPaddingSize('xl')};
+      ${property}: ${euiPaddingSize(euiThemeContext, 'xl')};
     `,
   };
 };
+
+export const useEuiPaddingSize = (size: EuiPaddingSize) => {
+  const euiTheme = useEuiTheme();
+  return euiPaddingSize(euiTheme, size);
+};
+
+export const useEuiPaddingCSS = (side?: LogicalSides) => {
+  const euiTheme = useEuiTheme();
+  return euiPaddingSizeCSS(euiTheme, side);
+};
diff --git a/upcoming_changelogs/6287.md b/upcoming_changelogs/6287.md
new file mode 100644
index 00000000000..e575f0b857b
--- /dev/null
+++ b/upcoming_changelogs/6287.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiResizableContainer` and `EuiResizablePanel` to Emotion