@@ -14,10 +14,10 @@ exports[`EuiSplitPanel accepts panel props 1`] = `
exports[`EuiSplitPanel inner children are rendered 1`] = `
`;
@@ -25,31 +25,31 @@ exports[`EuiSplitPanel inner children are rendered 1`] = `
exports[`EuiSplitPanel is rendered 1`] = `
`;
exports[`EuiSplitPanel renders as row 1`] = `
`;
exports[`EuiSplitPanel responsive can be changed to different breakpoints 1`] = `
`;
exports[`EuiSplitPanel responsive can be false 1`] = `
`;
exports[`EuiSplitPanel responsive is rendered at small screens 1`] = `
`;
diff --git a/src/components/panel/split_panel/_index.scss b/src/components/panel/split_panel/_index.scss
deleted file mode 100644
index 830296e4932..00000000000
--- a/src/components/panel/split_panel/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'split_panel';
diff --git a/src/components/panel/split_panel/_split_panel.scss b/src/components/panel/split_panel/_split_panel.scss
deleted file mode 100644
index 6b805cc029c..00000000000
--- a/src/components/panel/split_panel/_split_panel.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.euiSplitPanel {
- display: flex;
- flex-direction: column;
- min-width: 0;
- overflow: hidden;
-
- .euiSplitPanel__inner {
- flex-basis: 0%; // Make sure they're evenly split
- // Ensure no movement if they have click handlers
- transform: none !important; // stylelint-disable-line declaration-no-important
- box-shadow: none !important; // stylelint-disable-line declaration-no-important
- }
-}
-
-.euiSplitPanel--row {
- flex-direction: row;
-
- &.euiSplitPanel-isResponsive {
- flex-direction: column;
- }
-}
diff --git a/src/components/panel/split_panel/split_panel.styles.ts b/src/components/panel/split_panel/split_panel.styles.ts
new file mode 100644
index 00000000000..7e6b3bb8948
--- /dev/null
+++ b/src/components/panel/split_panel/split_panel.styles.ts
@@ -0,0 +1,37 @@
+/*
+ * 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 euiSplitPanelOuterStyles = {
+ euiSplitPanelOuter: css`
+ display: flex;
+ ${logicalCSS('min-width', 0)}
+ overflow: hidden;
+ `,
+ column: css`
+ flex-direction: column;
+ `,
+ row: css`
+ flex-direction: row;
+ `,
+};
+
+export const euiSplitPanelInnerStyles = {
+ euiSplitPanelInner: css`
+ /* Make sure they're evenly split */
+ flex-basis: 0%;
+
+ /* Ensure no movement if they have click handlers */
+ /* stylelint-disable declaration-no-important */
+ transform: none !important;
+ box-shadow: none !important;
+ `,
+};
diff --git a/src/components/panel/split_panel/split_panel.test.tsx b/src/components/panel/split_panel/split_panel.test.tsx
index c3eb1989cf6..a711afa033b 100644
--- a/src/components/panel/split_panel/split_panel.test.tsx
+++ b/src/components/panel/split_panel/split_panel.test.tsx
@@ -8,11 +8,14 @@
import React from 'react';
import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
import { render } from '../../../test/rtl';
import { EuiSplitPanel } from './split_panel';
describe('EuiSplitPanel', () => {
+ shouldRenderCustomStyles(
);
+
test('is rendered', () => {
const { container } = render(
);
@@ -20,6 +23,8 @@ describe('EuiSplitPanel', () => {
});
describe('inner children', () => {
+ shouldRenderCustomStyles(
);
+
test('are rendered', () => {
const { container } = render(
diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
index 86eacd59ce3..0de7ec8c659 100644
--- a/src/components/panel/split_panel/split_panel.tsx
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -8,12 +8,18 @@
import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
import classNames from 'classnames';
-import { EuiPanel, _EuiPanelProps } from '../panel';
+
import {
EuiBreakpointSize,
useIsWithinBreakpoints,
} from '../../../services/breakpoint';
+import { EuiPanel, _EuiPanelProps } from '../panel';
+import {
+ euiSplitPanelOuterStyles,
+ euiSplitPanelInnerStyles,
+} from './split_panel.styles';
+
export type _EuiSplitPanelInnerProps = HTMLAttributes &
Omit<_EuiPanelProps, 'hasShadow' | 'hasBorder' | 'borderRadius'>;
@@ -37,6 +43,7 @@ export const _EuiSplitPanelInner: FunctionComponent<
@@ -79,20 +86,20 @@ export const _EuiSplitPanelOuter: FunctionComponent<
!!responsive
);
- const classes = classNames(
- 'euiSplitPanel',
- {
- 'euiSplitPanel--row': direction === 'row',
- 'euiSplitPanel-isResponsive': isResponsive,
- },
- className
- );
+ const styles = euiSplitPanelOuterStyles;
+ const cssStyles = [
+ styles.euiSplitPanelOuter,
+ direction === 'row' && !isResponsive ? styles.row : styles.column,
+ ];
+
+ const classes = classNames('euiSplitPanel', className);
return (
{children}
diff --git a/src/components/panel/split_panel/split_panel_inner.stories.tsx b/src/components/panel/split_panel/split_panel_inner.stories.tsx
new file mode 100644
index 00000000000..5d5fcd13181
--- /dev/null
+++ b/src/components/panel/split_panel/split_panel_inner.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { COLORS } from '../panel';
+import { EuiSplitPanel, _EuiSplitPanelInnerProps } from './split_panel';
+
+const meta: Meta<_EuiSplitPanelInnerProps> = {
+ title: 'EuiSplitPanel',
+ component: EuiSplitPanel.Inner,
+ argTypes: {
+ color: { control: 'select', options: COLORS },
+ panelRef: { control: false },
+ },
+};
+
+export default meta;
+type Story = StoryObj<_EuiSplitPanelInnerProps>;
+
+export const SplitPanelInner: Story = {
+ args: {
+ // Default props
+ color: 'transparent',
+ paddingSize: 'm',
+ grow: true,
+ },
+ render: ({ ...args }) => (
+
+ Top panel
+
+ Middle panel (with uncontrollable color and grow for contrast)
+
+
+ Controllable bottom panel
+
+
+ ),
+};
diff --git a/src/components/panel/split_panel/split_panel_outer.stories.tsx b/src/components/panel/split_panel/split_panel_outer.stories.tsx
new file mode 100644
index 00000000000..b612dfc8c3c
--- /dev/null
+++ b/src/components/panel/split_panel/split_panel_outer.stories.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiSplitPanel, _EuiSplitPanelOuterProps } from './split_panel';
+
+const meta: Meta<_EuiSplitPanelOuterProps> = {
+ title: 'EuiSplitPanel',
+ component: EuiSplitPanel.Outer,
+};
+
+export default meta;
+type Story = StoryObj<_EuiSplitPanelOuterProps>;
+
+export const SplitPanelOuter: Story = {
+ args: {
+ // Default props
+ direction: 'column',
+ responsive: ['xs', 's'],
+ },
+ render: ({ ...args }) => (
+
+ Top or left panel
+
+ Bottom or right panel
+
+
+ ),
+};
diff --git a/upcoming_changelogs/7172.md b/upcoming_changelogs/7172.md
new file mode 100644
index 00000000000..c2da6d432f1
--- /dev/null
+++ b/upcoming_changelogs/7172.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiSplitPanel` to Emotion