[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

src-docs/src/views/resizable_container/resizable_container_basic.js → 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 = (

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 = (
   <>

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,
         },
       ],

src-docs/src/views/resizable_container/resizable_container_reset_values.js → src-docs/src/views/resizable_container/resizable_container_reset_values.tsx

@@ -1,17 +1,16 @@
 import React, { useCallback, useState } from 'react';
-
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
   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,
     }));

src-docs/src/views/resizable_container/resizable_container_vertical.js → 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 = (

src-docs/src/views/resizable_container/resizable_panel_collapsible.js → 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>,
     },
   ];
 

src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js → src-docs/src/views/resizable_container/resizable_panel_collapsible_external.tsx

@@ -23,19 +23,21 @@ 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],
     };
     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>

src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js → 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>,
     },
   ];
 

src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js → 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>,
     },
   ];