[Emotion] Convert EuiSplitPanel

src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`EuiCheckableCard is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard testClass1 testClass2 emotion-euiPanel-m-plain-hasBorder-euiCheckableCard-euiTestCss"
+  class="euiPanel euiPanel--plain euiSplitPanel euiCheckableCard testClass1 testClass2 emotion-euiPanel-m-plain-hasBorder-euiSplitPanelOuter-row-euiCheckableCard-euiTestCss"
 >
   <div
-    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
+    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable-euiSplitPanelInner"
   >
     <div
       aria-label="aria-label"
@@ -24,7 +24,7 @@ exports[`EuiCheckableCard is rendered 1`] = `
     </div>
   </div>
   <div
-    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
+    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent-euiSplitPanelInner"
   >
     <label
       class="euiCheckableCard__label emotion-euiCheckableCard__label"
@@ -38,10 +38,10 @@ exports[`EuiCheckableCard is rendered 1`] = `
 
 exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard testClass1 testClass2 emotion-euiPanel-m-plain-hasBorder-euiCheckableCard-euiTestCss"
+  class="euiPanel euiPanel--plain euiSplitPanel euiCheckableCard testClass1 testClass2 emotion-euiPanel-m-plain-hasBorder-euiSplitPanelOuter-row-euiCheckableCard-euiTestCss"
 >
   <div
-    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
+    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable-euiSplitPanelInner"
   >
     <div
       class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
@@ -59,7 +59,7 @@ exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
     </div>
   </div>
   <div
-    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
+    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent-euiSplitPanelInner"
   >
     <label
       class="euiCheckableCard__label emotion-euiCheckableCard__label"
@@ -73,10 +73,10 @@ exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
 
 exports[`EuiCheckableCard renders children 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard emotion-euiPanel-m-plain-hasBorder-euiCheckableCard"
+  class="euiPanel euiPanel--plain euiSplitPanel euiCheckableCard emotion-euiPanel-m-plain-hasBorder-euiSplitPanelOuter-row-euiCheckableCard"
 >
   <div
-    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
+    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable-euiSplitPanelInner"
   >
     <div
       class="euiRadio euiRadio--noLabel"
@@ -93,7 +93,7 @@ exports[`EuiCheckableCard renders children 1`] = `
     </div>
   </div>
   <div
-    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
+    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent-euiSplitPanelInner"
   >
     <label
       aria-describedby="id-details"
@@ -114,10 +114,10 @@ exports[`EuiCheckableCard renders children 1`] = `
 
 exports[`EuiCheckableCard renders disabled 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard emotion-euiPanel-m-plain-hasBorder-euiCheckableCard"
+  class="euiPanel euiPanel--plain euiSplitPanel euiCheckableCard emotion-euiPanel-m-plain-hasBorder-euiSplitPanelOuter-row-euiCheckableCard"
 >
   <div
-    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued"
+    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-euiSplitPanelInner"
   >
     <div
       class="euiRadio euiRadio--noLabel"
@@ -135,7 +135,7 @@ exports[`EuiCheckableCard renders disabled 1`] = `
     </div>
   </div>
   <div
-    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
+    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent-euiSplitPanelInner"
   >
     <label
       class="euiCheckableCard__label emotion-euiCheckableCard__label-isDisabled"
@@ -149,10 +149,10 @@ exports[`EuiCheckableCard renders disabled 1`] = `
 
 exports[`EuiCheckableCard renders panel props 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard emotion-euiPanel-m-plain-hasShadow-euiCheckableCard"
+  class="euiPanel euiPanel--plain euiSplitPanel euiCheckableCard emotion-euiPanel-m-plain-hasShadow-euiSplitPanelOuter-row-euiCheckableCard"
 >
   <div
-    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
+    class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable-euiSplitPanelInner"
   >
     <div
       class="euiRadio euiRadio--noLabel"
@@ -169,7 +169,7 @@ exports[`EuiCheckableCard renders panel props 1`] = `
     </div>
   </div>
   <div
-    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
+    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent-euiSplitPanelInner"
   >
     <label
       class="euiCheckableCard__label emotion-euiCheckableCard__label"

src/components/index.scss

@@ -11,7 +11,6 @@
 @import 'form/index';
 @import 'markdown_editor/index';
 @import 'notification/index';
-@import 'panel/index';
 @import 'page/index'; // Page needs to come after Panel for cascade specificity
 @import 'tree_view/index';
 @import 'side_nav/index';

src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap

@@ -2,54 +2,54 @@
 
 exports[`EuiSplitPanel accepts panel props 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiSplitPanel emotion-euiPanel-m-primary"
+  class="euiPanel euiPanel--primary euiSplitPanel emotion-euiPanel-m-primary-euiSplitPanelOuter-column"
 >
   <div
     aria-label="aria-label"
-    class="euiPanel euiPanel--success euiPanel--paddingMedium euiSplitPanel__inner testClass1 testClass2 emotion-euiPanel-grow-none-m-success-euiTestCss"
+    class="euiPanel euiPanel--success euiPanel--paddingMedium euiSplitPanel__inner testClass1 testClass2 emotion-euiPanel-grow-none-m-success-euiSplitPanelInner-euiTestCss"
     data-test-subj="test subject string"
   />
 </div>
 `;
 
 exports[`EuiSplitPanel inner children are rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel emotion-euiPanel-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiSplitPanel emotion-euiPanel-m-plain-hasShadow-euiSplitPanelOuter-column"
 >
   <div
-    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
+    class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent-euiSplitPanelInner"
   />
 </div>
 `;
 
 exports[`EuiSplitPanel is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPanel euiPanel--plain euiSplitPanel testClass1 testClass2 emotion-euiPanel-m-plain-hasShadow-euiTestCss"
+  class="euiPanel euiPanel--plain euiSplitPanel testClass1 testClass2 emotion-euiPanel-m-plain-hasShadow-euiSplitPanelOuter-column-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiSplitPanel renders as row 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row emotion-euiPanel-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiSplitPanel emotion-euiPanel-m-plain-hasShadow-euiSplitPanelOuter-row"
 />
 `;
 
 exports[`EuiSplitPanel responsive can be changed to different breakpoints 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel-isResponsive emotion-euiPanel-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiSplitPanel emotion-euiPanel-m-plain-hasShadow-euiSplitPanelOuter-column"
 />
 `;
 
 exports[`EuiSplitPanel responsive can be false 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel emotion-euiPanel-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiSplitPanel emotion-euiPanel-m-plain-hasShadow-euiSplitPanelOuter-column"
 />
 `;
 
 exports[`EuiSplitPanel responsive is rendered at small screens 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel-isResponsive emotion-euiPanel-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiSplitPanel emotion-euiPanel-m-plain-hasShadow-euiSplitPanelOuter-column"
 />
 `;

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;
+  `,
+};

src/components/panel/split_panel/split_panel.test.tsx

@@ -8,18 +8,23 @@
 
 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(<EuiSplitPanel.Outer />);
+
   test('is rendered', () => {
     const { container } = render(<EuiSplitPanel.Outer {...requiredProps} />);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('inner children', () => {
+    shouldRenderCustomStyles(<EuiSplitPanel.Inner />);
+
     test('are rendered', () => {
       const { container } = render(
         <EuiSplitPanel.Outer>

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<HTMLDivElement> &
   Omit<_EuiPanelProps, 'hasShadow' | 'hasBorder' | 'borderRadius'>;
 
@@ -37,6 +43,7 @@ export const _EuiSplitPanelInner: FunctionComponent<
     <EuiPanel
       element="div"
       className={classes}
+      css={euiSplitPanelInnerStyles.euiSplitPanelInner}
       {...panelProps}
       {...(rest as _EuiPanelProps)}
     >
@@ -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 (
     <EuiPanel
       paddingSize="none"
       grow={false}
       className={classes}
+      css={cssStyles}
       {...(rest as _EuiPanelProps)}
     >
       {children}

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 }) => (
+    <EuiSplitPanel.Outer css={{ blockSize: '100vh' }}>
+      <EuiSplitPanel.Inner {...args}>Top panel</EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner {...args} color="subdued" grow>
+        Middle panel (with uncontrollable color and grow for contrast)
+      </EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner {...args}>
+        Controllable bottom panel
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+  ),
+};