[Emotion] Convert EuiResizableCollapseButton (#7091)

src/components/index.scss

@@ -16,7 +16,6 @@
 @import 'panel/index';
 @import 'page/index'; // Page needs to come after Panel for cascade specificity
 @import 'tree_view/index';
-@import 'resizable_container/index';
 @import 'side_nav/index';
 @import 'search_bar/index';
 @import 'selectable/index';

src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap

@@ -233,7 +233,7 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
   >
     <button
       aria-label="Press to toggle this panel"
-      class="euiButtonIcon euiResizableToggleButton euiResizableToggleButton--horizontal euiResizableToggleButton--before euiResizableToggleButton--middle emotion-euiButtonIcon-xs-base-text"
+      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-base-text-euiResizableCollapseButton-euiScreenReaderOnly-collapsible-before-middle"
       type="button"
     >
       <span
@@ -325,7 +325,7 @@ exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
   >
     <button
       aria-label="Press to toggle this panel"
-      class="euiButtonIcon euiResizableToggleButton euiResizableToggleButton--horizontal euiResizableToggleButton--before euiResizableToggleButton--top emotion-euiButtonIcon-xs-base-text"
+      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-base-text-euiResizableCollapseButton-euiScreenReaderOnly-collapsible-before-top"
       data-test-subj="panel-toggle"
       type="button"
     >

src/components/resizable_container/resizable_collapse_button.stories.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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 { EuiPanel } from '../panel';
+import { EuiResizableContainer } from './resizable_container';
+import {
+  EuiResizableCollapseButton,
+  EuiResizableCollapseButtonProps,
+} from './resizable_collapse_button';
+
+const meta: Meta<EuiResizableCollapseButtonProps> = {
+  title: 'EuiResizableCollapseButton',
+  component: EuiResizableCollapseButton,
+};
+
+export default meta;
+type Story = StoryObj<EuiResizableCollapseButtonProps>;
+
+export const Playground: Story = {
+  args: {
+    direction: 'horizontal',
+    externalPosition: 'before',
+    internalPosition: 'middle',
+    isVisible: true,
+    isCollapsed: false,
+  },
+  render: ({ isCollapsed, direction, ...args }) => (
+    <EuiPanel
+      paddingSize="none"
+      css={({ euiTheme: { size } }) => ({
+        position: 'relative',
+        inlineSize: isCollapsed && direction === 'horizontal' ? size.l : 200,
+        blockSize: isCollapsed && direction === 'vertical' ? size.l : 200,
+      })}
+    >
+      <EuiResizableCollapseButton
+        isCollapsed={isCollapsed}
+        direction={direction}
+        {...args}
+      />
+    </EuiPanel>
+  ),
+};
+
+export const ProductionUsage: Story = {
+  args: {
+    direction: 'horizontal',
+    internalPosition: 'middle',
+  },
+  argTypes: {
+    // Not testable via `EuiResizableContainer`, so hide these props from the controls
+    externalPosition: { table: { disable: true } },
+    isVisible: { table: { disable: true } },
+    isCollapsed: { table: { disable: true } },
+  },
+  render: ({ direction, internalPosition }) => (
+    <EuiResizableContainer direction={direction} css={{ blockSize: 500 }}>
+      {(EuiResizablePanel, EuiResizableButton) => (
+        <>
+          <EuiResizablePanel
+            mode={['collapsible', { position: internalPosition }]}
+            initialSize={20}
+            minSize="10%"
+          >
+            <span>Lorem ipsum dolor sit amet</span>
+          </EuiResizablePanel>
+
+          <EuiResizableButton />
+
+          <EuiResizablePanel mode="main" initialSize={60} minSize="100px">
+            <EuiPanel css={{ blockSize: '100%' }}>
+              Lorem ipsum dolor sit amet
+            </EuiPanel>
+          </EuiResizablePanel>
+
+          <EuiResizableButton />
+
+          <EuiResizablePanel
+            mode={['collapsible', { position: internalPosition }]}
+            initialSize={20}
+            minSize="10%"
+          >
+            <span>Lorem ipsum dolor sit amet</span>
+          </EuiResizablePanel>
+        </>
+      )}
+    </EuiResizableContainer>
+  ),
+};