From cc55754f69043cae1f6707274177fdb20b6e2588 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 8 Sep 2023 12:32:55 -0700
Subject: [PATCH 1/6] Convert `EuiSplitPanel` Sass to Emotion

- styles are fairly basic, so converting them all in one go + no theme needed

+ remove `flex-direction` overrides in favor of two keys with JS logic

+ reorder imports

+ remove modifier classes
---
 .../checkable_card.test.tsx.snap              | 30 +++++++--------
 .../__snapshots__/split_panel.test.tsx.snap   | 18 ++++-----
 .../panel/split_panel/_split_panel.scss       | 21 -----------
 .../panel/split_panel/split_panel.styles.ts   | 37 +++++++++++++++++++
 .../panel/split_panel/split_panel.tsx         | 25 ++++++++-----
 5 files changed, 77 insertions(+), 54 deletions(-)
 create mode 100644 src/components/panel/split_panel/split_panel.styles.ts

diff --git a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap b/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
index 007b4b9d438..f9b4bb334f2 100644
--- a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
+++ b/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"
diff --git a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
index 9ceb2745cbf..248f2dd80fa 100644
--- a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
+++ b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
@@ -2,11 +2,11 @@
 
 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>
@@ -14,10 +14,10 @@ exports[`EuiSplitPanel accepts panel props 1`] = `
 
 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>
 `;
@@ -25,31 +25,31 @@ exports[`EuiSplitPanel inner children are rendered 1`] = `
 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"
 />
 `;
diff --git a/src/components/panel/split_panel/_split_panel.scss b/src/components/panel/split_panel/_split_panel.scss
index 6b805cc029c..e69de29bb2d 100644
--- a/src/components/panel/split_panel/_split_panel.scss
+++ b/src/components/panel/split_panel/_split_panel.scss
@@ -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.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<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}

From 927e3e3275137259de0899fc80b321fb33fe8d8b Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 8 Sep 2023 12:53:47 -0700
Subject: [PATCH 2/6] Remove Sass files

---
 src/components/index.scss                          | 1 -
 src/components/panel/_index.scss                   | 1 -
 src/components/panel/split_panel/_index.scss       | 1 -
 src/components/panel/split_panel/_split_panel.scss | 0
 4 files changed, 3 deletions(-)
 delete mode 100644 src/components/panel/_index.scss
 delete mode 100644 src/components/panel/split_panel/_index.scss
 delete mode 100644 src/components/panel/split_panel/_split_panel.scss

diff --git a/src/components/index.scss b/src/components/index.scss
index d4845a62015..a381f8cdea8 100644
--- a/src/components/index.scss
+++ b/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';
diff --git a/src/components/panel/_index.scss b/src/components/panel/_index.scss
deleted file mode 100644
index b57dcdfe254..00000000000
--- a/src/components/panel/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './split_panel/index'
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 e69de29bb2d..00000000000

From 0a9384d8ea7764e5aef2f332a1e03131b0021a72 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 8 Sep 2023 13:20:48 -0700
Subject: [PATCH 3/6] Tests

---
 src/components/panel/split_panel/split_panel.test.tsx | 5 +++++
 1 file changed, 5 insertions(+)

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

From f7a5a3508ccc5520ec548ec77262bc689c6159fd Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 8 Sep 2023 12:52:31 -0700
Subject: [PATCH 4/6] Add storybooks for QA testing

---
 .../split_panel/split_panel_inner.stories.tsx | 45 +++++++++++++++++++
 .../split_panel/split_panel_outer.stories.tsx | 36 +++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 src/components/panel/split_panel/split_panel_inner.stories.tsx
 create mode 100644 src/components/panel/split_panel/split_panel_outer.stories.tsx

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 }) => (
+    <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>
+  ),
+};
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 }) => (
+    <EuiSplitPanel.Outer {...args}>
+      <EuiSplitPanel.Inner>Top or left panel</EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner color="subdued">
+        Bottom or right panel
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+  ),
+};

From b094674887b21695938f3fe64508f46020738930 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 8 Sep 2023 13:20:55 -0700
Subject: [PATCH 5/6] changelog

---
 upcoming_changelogs/7172.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 upcoming_changelogs/7172.md

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

From 103fadd83fc078fdbcbbd3b89cbe7e1a0205573d Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 8 Sep 2023 12:14:28 -0700
Subject: [PATCH 6/6] Remove unused `panel` SCSS file

- wasn't being imported anywhere, so wasn't being used
---
 src/components/panel/_panel.scss | 9 ---------
 1 file changed, 9 deletions(-)
 delete mode 100644 src/components/panel/_panel.scss

diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss
deleted file mode 100644
index 4f767c10575..00000000000
--- a/src/components/panel/_panel.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Export basic class & modifiers
-@include euiPanel($selector: '.euiPanel');
-
-// Padding
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPanel--#{$modifier} {
-    padding: $amount;
-  }
-}