From 7ff833945105ac28a1c4cb8bd852aba9690b4545 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Thu, 17 Aug 2023 15:11:49 -0700
Subject: [PATCH] [Emotion] Convert `EuiResizableCollapseButton` (#7091)

---
 src/components/index.scss                     |   1 -
 .../resizable_container.test.tsx.snap         |   4 +-
 .../resizable_container/_index.scss           |   1 -
 .../_resizable_collapse_button.scss           | 145 ------------------
 .../resizable_collapse_button.stories.tsx     |  97 ++++++++++++
 .../resizable_collapse_button.styles.ts       | 145 ++++++++++++++++++
 .../resizable_collapse_button.tsx             |  52 ++++---
 .../amsterdam/global_styling/mixins/shadow.ts |   1 -
 upcoming_changelogs/7091.md                   |   3 +
 9 files changed, 280 insertions(+), 169 deletions(-)
 delete mode 100644 src/components/resizable_container/_index.scss
 delete mode 100644 src/components/resizable_container/_resizable_collapse_button.scss
 create mode 100644 src/components/resizable_container/resizable_collapse_button.stories.tsx
 create mode 100644 src/components/resizable_container/resizable_collapse_button.styles.ts
 create mode 100644 upcoming_changelogs/7091.md

diff --git a/src/components/index.scss b/src/components/index.scss
index 30610b4f918..dd37d2afded 100644
--- a/src/components/index.scss
+++ b/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';
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 5869e0e9a48..9b95ee197e1 100644
--- a/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
+++ b/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"
     >
diff --git a/src/components/resizable_container/_index.scss b/src/components/resizable_container/_index.scss
deleted file mode 100644
index 43286a22948..00000000000
--- a/src/components/resizable_container/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'resizable_collapse_button';
diff --git a/src/components/resizable_container/_resizable_collapse_button.scss b/src/components/resizable_container/_resizable_collapse_button.scss
deleted file mode 100644
index 4196451b797..00000000000
--- a/src/components/resizable_container/_resizable_collapse_button.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-// This file has lots of modifiers and is somewhat nesty by nature because of positioning
-// stylelint-disable max-nesting-depth
-
-/**
- * 1. The default position of the button should always be `middle`, so
- *    those position styles aren't restricted to a class
- * 2. When collpsed, the button itself is the full collapsed area and we use
- *    flex to align the icon within
- */
-
-.euiResizableToggleButton {
-  @include euiSlightShadow;
-  position: absolute;
-  z-index: 2;
-  // Remove animations from EuiButtonIcon because of the custom transforms
-  animation: none !important; // stylelint-disable-line declaration-no-important
-  // Remove transition from EuiButtonIcon because of the custom transforms
-  transition-property: background, box-shadow;
-  background: $euiColorEmptyShade;
-
-  &:focus {
-    @include euiSlightShadowHover;
-  }
-
-  &-isCollapsed {
-    box-shadow: none;
-    background: transparent;
-    border-radius: 0;
-  }
-
-  &:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) {
-    @include euiScreenReaderOnly;
-  }
-}
-
-.euiResizableToggleButton--horizontal {
-  &.euiResizableToggleButton { // Extra layer of nesting to override EuiButtonIcon transforms on hover
-    &.euiResizableToggleButton--after {
-      right: 0;
-      top: 50%; /* 1 */
-      transform: translate(50%, -50%); /* 1 */
-
-      &.euiResizableToggleButton--top {
-        top: 0;
-        transform: translate(50%, $euiSize);
-      }
-
-      &.euiResizableToggleButton--bottom {
-        top: auto;
-        bottom: 0;
-        transform: translate(50%, -$euiSize);
-      }
-    }
-
-    &.euiResizableToggleButton--before {
-      left: 0;
-      top: 50%; /* 1 */
-      transform: translate(-50%, -50%); /* 1 */
-
-      &.euiResizableToggleButton--top {
-        top: 0;
-        transform: translate(-50%, $euiSize);
-      }
-
-      &.euiResizableToggleButton--bottom {
-        top: auto;
-        bottom: 0;
-        transform: translate(-50%, -$euiSize);
-      }
-    }
-
-    &.euiResizableToggleButton-isCollapsed {
-      top: 0 !important; // stylelint-disable-line declaration-no-important
-      bottom: 0 !important; // stylelint-disable-line declaration-no-important
-      transform: none !important; // stylelint-disable-line declaration-no-important
-      height: 100%;
-
-      &.euiResizableToggleButton--top {
-        padding-top: $euiSize;
-        align-items: flex-start;  /* 2 */
-      }
-
-      &.euiResizableToggleButton--bottom {
-        padding-bottom: $euiSize;
-        align-items: flex-end;  /* 2 */
-      }
-    }
-  }
-}
-
-.euiResizableToggleButton--vertical {
-  &.euiResizableToggleButton { // Extra layer of nesting to override EuiButtonIcon transforms on hover
-    &.euiResizableToggleButton--after {
-      top: 100%;
-      left: 50%; /* 1 */
-      transform: translate(-50%, -50%); /* 1 */
-
-      &.euiResizableToggleButton--left {
-        left: 0;
-        transform: translate($euiSize, -50%);
-      }
-
-      &.euiResizableToggleButton--right {
-        left: auto;
-        right: 0;
-        transform: translate(-$euiSize, -50%);
-      }
-    }
-
-    &.euiResizableToggleButton--before {
-      bottom: 100%;
-      left: 50%; /* 1 */
-      transform: translate(-50%, 50%); /* 1 */
-
-      &.euiResizableToggleButton--left {
-        left: 0;
-        transform: translate($euiSize, 50%);
-      }
-
-      &.euiResizableToggleButton--right {
-        left: auto;
-        right: 0;
-        transform: translate(-$euiSize, 50%);
-      }
-    }
-
-    &.euiResizableToggleButton-isCollapsed {
-      top: 0 !important; // stylelint-disable-line declaration-no-important
-      bottom: 0 !important; // stylelint-disable-line declaration-no-important
-      left: 0 !important; // stylelint-disable-line declaration-no-important
-      transform: none !important; // stylelint-disable-line declaration-no-important
-      width: 100%;
-
-      &.euiResizableToggleButton--left {
-        padding-left: $euiSize;
-        justify-content: flex-start; /* 2 */
-      }
-
-      &.euiResizableToggleButton--right {
-        padding-right: $euiSize;
-        justify-content: flex-end; /* 2 */
-      }
-    }
-  }
-}
diff --git a/src/components/resizable_container/resizable_collapse_button.stories.tsx b/src/components/resizable_container/resizable_collapse_button.stories.tsx
new file mode 100644
index 00000000000..9b318e4291c
--- /dev/null
+++ b/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>
+  ),
+};
diff --git a/src/components/resizable_container/resizable_collapse_button.styles.ts b/src/components/resizable_container/resizable_collapse_button.styles.ts
new file mode 100644
index 00000000000..4e13c65e6bf
--- /dev/null
+++ b/src/components/resizable_container/resizable_collapse_button.styles.ts
@@ -0,0 +1,145 @@
+/*
+ * 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 { UseEuiTheme } from '../../services';
+import { logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiShadowXSmall, euiSlightShadowHover } from '../../themes/amsterdam';
+
+export const euiResizableCollapseButtonStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  const { euiTheme } = euiThemeContext;
+
+  const buttonSize = euiTheme.size.l;
+  const centeringOffset = mathWithUnits(buttonSize, (x) => x / -2); // Use negative margins instead of transforms to avoid having to override EuiButtonIcon's CSS
+  const buttonOffset = euiTheme.size.base;
+
+  return {
+    euiResizableCollapseButton: css`
+      z-index: 2; /* 1 higher than EuiResizableButton */
+      position: absolute;
+
+      /* Remove animation inherited from EuiButtonIcon */
+      &:focus {
+        animation: none;
+      }
+    `,
+    collapsible: {
+      collapsible: css`
+        background: ${euiTheme.colors.emptyShade};
+        ${euiShadowXSmall(euiThemeContext)}
+
+        &:focus {
+          ${euiSlightShadowHover(euiThemeContext)}
+        }
+      `,
+      horizontal: {
+        after: css`
+          ${logicalCSS('right', 0)}
+          ${logicalCSS('margin-right', centeringOffset)}
+        `,
+        before: css`
+          ${logicalCSS('left', 0)}
+          ${logicalCSS('margin-left', centeringOffset)}
+        `,
+        middle: css`
+          ${logicalCSS('top', '50%')}
+          ${logicalCSS('margin-top', centeringOffset)}
+        `,
+        top: css`
+          ${logicalCSS('top', 0)}
+          ${logicalCSS('margin-top', buttonOffset)}
+        `,
+        bottom: css`
+          ${logicalCSS('bottom', 0)}
+          ${logicalCSS('margin-bottom', buttonOffset)}
+        `,
+        // `left/right` aren't valid positions for the horizontal direction,
+        // so we're using getters to fall back to the `middle` CSS
+        get left() {
+          return this.middle;
+        },
+        get right() {
+          return this.middle;
+        },
+      },
+      vertical: {
+        after: css`
+          ${logicalCSS('top', '100%')}
+          ${logicalCSS('margin-top', centeringOffset)}
+        `,
+        before: css`
+          ${logicalCSS('bottom', '100%')}
+          ${logicalCSS('margin-bottom', centeringOffset)}
+        `,
+        middle: css`
+          ${logicalCSS('left', '50%')}
+          ${logicalCSS('margin-left', centeringOffset)}
+        `,
+        left: css`
+          ${logicalCSS('left', 0)}
+          ${logicalCSS('margin-left', buttonOffset)}
+        `,
+        right: css`
+          ${logicalCSS('right', 0)}
+          ${logicalCSS('margin-right', buttonOffset)}
+        `,
+        // `top/bottom` aren't valid positions for the horizontal direction,
+        // so we're using getters to fall back to the `middle` CSS
+        get top() {
+          return this.middle;
+        },
+        get bottom() {
+          return this.middle;
+        },
+      },
+    },
+    collapsed: {
+      // When collapsed, the button itself is the full collapsed area
+      // and we use flex to align the icon within
+      collapsed: css`
+        border-radius: 0;
+        ${logicalCSS('top', 0)}
+      `,
+      horizontal: css`
+        ${logicalCSS('height', '100%')}
+      `,
+      vertical: css`
+        ${logicalCSS('width', '100%')}
+      `,
+      horizontalPositions: {
+        top: css`
+          ${logicalCSS('padding-top', buttonOffset)}
+          align-items: flex-start;
+        `,
+        bottom: css`
+          ${logicalCSS('padding-bottom', buttonOffset)}
+          align-items: flex-end;
+        `,
+        middle: css``,
+        left: css``,
+        right: css``,
+      },
+      verticalPositions: {
+        left: css`
+          ${logicalCSS('padding-left', buttonOffset)}
+          justify-content: flex-start;
+        `,
+        right: css`
+          ${logicalCSS('padding-right', buttonOffset)}
+          justify-content: flex-end;
+        `,
+        middle: css``,
+        top: css``,
+        bottom: css``,
+      },
+    },
+  };
+};
diff --git a/src/components/resizable_container/resizable_collapse_button.tsx b/src/components/resizable_container/resizable_collapse_button.tsx
index 700111adcf7..d84f5c68d7e 100644
--- a/src/components/resizable_container/resizable_collapse_button.tsx
+++ b/src/components/resizable_container/resizable_collapse_button.tsx
@@ -9,9 +9,13 @@
 import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
+import { useEuiTheme } from '../../services';
 import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../button';
+import { euiScreenReaderOnlyStyles } from '../accessibility/screen_reader_only/screen_reader_only.styles';
+
 import { ToggleOptions } from './resizable_panel';
 import { EuiResizableContainerProps } from './resizable_container';
+import { euiResizableCollapseButtonStyles } from './resizable_collapse_button.styles';
 
 export type EuiResizableCollapseButtonProps = Omit<
   EuiButtonIconPropsForButton,
@@ -31,9 +35,6 @@ export type EuiResizableCollapseButtonProps = Omit<
    * Same direction derived from EuiResizableContainer
    */
   direction?: EuiResizableContainerProps['direction'];
-  /**
-   *
-   */
   isVisible?: boolean;
   isCollapsed?: boolean;
 };
@@ -42,7 +43,7 @@ export const EuiResizableCollapseButton: FunctionComponent<
   EuiResizableCollapseButtonProps
 > = ({
   className,
-  externalPosition,
+  externalPosition = 'before',
   internalPosition = 'middle',
   direction = 'horizontal',
   isVisible,
@@ -51,21 +52,31 @@ export const EuiResizableCollapseButton: FunctionComponent<
 }) => {
   const isHorizontal = direction === 'horizontal';
 
-  const classes = classNames(
-    'euiResizableToggleButton',
-    `euiResizableToggleButton--${direction}`,
-    `euiResizableToggleButton--${externalPosition}`,
-    `euiResizableToggleButton--${internalPosition}`,
-    {
-      'euiResizableToggleButton-isVisible': isVisible,
-      'euiResizableToggleButton-isCollapsed': isCollapsed,
-    },
-    className
-  );
+  const showOnFocus = !isCollapsed && !isVisible;
+  const screenReaderOnlyStyles =
+    euiScreenReaderOnlyStyles(showOnFocus).euiScreenReaderOnly;
+
+  const euiTheme = useEuiTheme();
+  const styles = euiResizableCollapseButtonStyles(euiTheme);
 
-  // Default to simiple grab icon in case there is no externalPosition specified
-  let COLLAPSED_ICON = isHorizontal ? 'grab' : 'grabHorizontal';
-  let NOT_COLLAPSED_ICON = isHorizontal ? 'grab' : 'grabHorizontal';
+  const collapsedStyles = [
+    styles.collapsed.collapsed,
+    styles.collapsed[direction],
+    styles.collapsed[`${direction}Positions`][internalPosition],
+  ];
+  const collapsibleStyles = [
+    styles.collapsible.collapsible,
+    styles.collapsible[direction][externalPosition],
+    styles.collapsible[direction][internalPosition],
+  ];
+  const cssStyles = [
+    styles.euiResizableCollapseButton,
+    showOnFocus && screenReaderOnlyStyles,
+    ...(isCollapsed ? collapsedStyles : collapsibleStyles),
+  ];
+
+  let COLLAPSED_ICON = '';
+  let NOT_COLLAPSED_ICON = '';
 
   switch (externalPosition) {
     case 'before':
@@ -78,12 +89,15 @@ export const EuiResizableCollapseButton: FunctionComponent<
       break;
   }
 
+  const classes = classNames('euiResizableCollapseButton', className);
+
   return (
     <EuiButtonIcon
       display={isCollapsed ? 'empty' : 'base'}
       color="text"
-      {...rest}
       className={classes}
+      css={cssStyles}
+      {...rest}
       iconType={isCollapsed ? COLLAPSED_ICON : NOT_COLLAPSED_ICON}
     />
   );
diff --git a/src/themes/amsterdam/global_styling/mixins/shadow.ts b/src/themes/amsterdam/global_styling/mixins/shadow.ts
index 21032646b66..21a2360c96e 100644
--- a/src/themes/amsterdam/global_styling/mixins/shadow.ts
+++ b/src/themes/amsterdam/global_styling/mixins/shadow.ts
@@ -111,7 +111,6 @@ box-shadow:
 
 /**
  * slightShadowHover
- * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
  */
 export const euiSlightShadowHover = (
   { euiTheme, colorMode }: UseEuiTheme,
diff --git a/upcoming_changelogs/7091.md b/upcoming_changelogs/7091.md
new file mode 100644
index 00000000000..19c67d9890e
--- /dev/null
+++ b/upcoming_changelogs/7091.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiResizableCollapseButton` to Emotion