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 = (
<>
{fake('{{lorem.paragraphs}}')}
@@ -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) => ({
...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({fake('{{lorem.paragraph}}')}
);
-}
-
export default () => {
const items = [
{
id: 1,
label: 'First item',
- text: texts[0],
+ text: {fake('{{lorem.paragraphs}}')}
,
active: true,
},
{
id: 2,
label: 'Second item',
- text: texts[1],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
{
id: 3,
label: 'Third item',
- text: texts[2],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
{
id: 4,
label: 'Forth item',
- text: texts[3],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
];
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(() => {});
- const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({});
+ const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState<
+ Record
+ >({});
- 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 (
<>
@@ -103,7 +108,7 @@ export default () => {
color="text"
aria-label={'Toggle panel 3'}
iconType="menuRight"
- onClick={() => onChange(3)}
+ onClick={() => onChange('3')}
/>
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({fake('{{lorem.paragraph}}')}
);
-}
-
export default () => {
const items = [
{
id: 1,
label: 'First item',
- text: texts[0],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
{
id: 2,
label: 'Second item',
- text: texts[1],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
{
id: 3,
label: 'Third item',
- text: texts[2],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
{
id: 4,
label: 'Forth item',
- text: texts[3],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
];
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({fake('{{lorem.paragraph}}')}
);
-}
-
export default () => {
const items = [
{
id: 1,
label: 'First item',
- text: texts[0],
+ text: {fake('{{lorem.paragraphs}}')}
,
active: true,
},
{
id: 2,
label: 'Second item',
- text: texts[1],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
{
id: 3,
label: 'Third item',
- text: texts[2],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
{
id: 4,
label: 'Forth item',
- text: texts[3],
+ text: {fake('{{lorem.paragraphs}}')}
,
},
];
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`] = `
Testing
@@ -25,12 +26,13 @@ exports[`EuiResizableContainer can adjust panel props 1`] = `
type="button"
/>
123
@@ -41,16 +43,17 @@ exports[`EuiResizableContainer can adjust panel props 1`] = `
exports[`EuiResizableContainer can be controlled externally 1`] = `
Testing
@@ -63,12 +66,13 @@ exports[`EuiResizableContainer can be controlled externally 1`] = `
type="button"
/>
123
@@ -79,16 +83,17 @@ exports[`EuiResizableContainer can be controlled externally 1`] = `
exports[`EuiResizableContainer can be vertical 1`] = `
Testing
@@ -101,12 +106,13 @@ exports[`EuiResizableContainer can be vertical 1`] = `
type="button"
/>
123
@@ -117,16 +123,17 @@ exports[`EuiResizableContainer can be vertical 1`] = `
exports[`EuiResizableContainer can have more than two panels 1`] = `
Testing
@@ -139,12 +146,13 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
type="button"
/>
123
@@ -157,12 +165,13 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
type="button"
/>
And again
@@ -173,16 +182,17 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
exports[`EuiResizableContainer can have scrollable panels 1`] = `
Testing
@@ -195,12 +205,13 @@ exports[`EuiResizableContainer can have scrollable panels 1`] = `
type="button"
/>
123
@@ -211,16 +222,17 @@ exports[`EuiResizableContainer can have scrollable panels 1`] = `
exports[`EuiResizableContainer can have toggleable panels 1`] = `
Sidebar
@@ -233,12 +245,13 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
type="button"
/>
Sidebar content
@@ -249,16 +262,17 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
exports[`EuiResizableContainer is rendered 1`] = `
Testing
@@ -271,12 +285,13 @@ exports[`EuiResizableContainer is rendered 1`] = `
type="button"
/>
123
@@ -287,16 +302,17 @@ exports[`EuiResizableContainer is rendered 1`] = `
exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
Sidebar
@@ -309,12 +325,13 @@ exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
type="button"
/>
Sidebar content
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`] = `
+
+`;
+
exports[`EuiResizablePanel renders 1`] = `
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(
+
+ {(EuiResizablePanel, EuiResizableButton) => (
+ <>
+ Testing
+
+ 123
+ >
+ )}
+
+ );
+
test('is rendered', () => {
const component = render(
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,
@@ -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 {
const containerRef = useRef(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
{
+ 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(
+
+
+ Content
+
+
+ );
+
+ 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
= ({
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 = ({
theToggle = (
= ({
theToggle = (
= ({
return (
{/* The toggle is displayed on either side for tab order */}
{hasVisibleToggle && hasLeftToggle && theToggle}
{
*/
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