feat(PopoutWrapper): add prop strategy and deprecate prop fixed (#…

…8217) * feat(PopoutWrapper): add prop `strategy` and deprecate prop `fixed` * fix: add todo * fix: add default value to strategy JSDoc
VKCOM · Feb 3, 2025 · 0e4317a · 0e4317a
1 parent 47c2543
commit 0e4317a
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 8 deletions.
diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.tsx
@@ -149,7 +149,7 @@ export const ActionSheet = ({
         className={className}
         style={style}
         onClick={onCloseWithOther}
-        fixed
+        strategy="fixed"
       >
         {actionSheet}
       </PopoutWrapper>

diff --git a/packages/vkui/src/components/Alert/Alert.tsx b/packages/vkui/src/components/Alert/Alert.tsx
@@ -178,6 +178,7 @@ export const Alert = ({
         style={style}
         onClick={close}
         getRootRef={getRootRef}
+        strategy="fixed"
       >
         <FocusTrap
           {...animationHandlers}

diff --git a/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.module.css b/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.module.css
@@ -19,6 +19,10 @@
   position: fixed;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .overlay {
   position: fixed;
   inset-inline-start: 0;
@@ -42,7 +46,8 @@
   background: var(--vkui--color_overlay_primary);
 }
 
-.fixed .overlay {
+.fixed .overlay,
+.absolute .overlay {
   position: absolute;
 }
 

diff --git a/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.stories.tsx b/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.stories.tsx
@@ -16,7 +16,11 @@ export default story;
 type Story = StoryObj<PopoutWrapperProps>;
 
 export const Playground: Story = {
-  render: (args) => <PopoutWrapper {...args} />,
+  render: (args) => (
+    <div style={{ width: 500, height: 500, position: 'relative' }}>
+      <PopoutWrapper {...args} />
+    </div>
+  ),
   args: {
     children: 'Some content',
   },

diff --git a/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.test.tsx b/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.test.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { baselineComponent, fakeTimers } from '../../testing/utils';
-import { PopoutWrapper } from './PopoutWrapper';
+import { PopoutWrapper, type PopoutWrapperProps } from './PopoutWrapper';
 import styles from './PopoutWrapper.module.css';
 
 describe(PopoutWrapper, () => {
@@ -19,8 +19,46 @@ describe(PopoutWrapper, () => {
     it('should be closed if closing={true}', () => {
       const result = render(<PopoutWrapper closing={true} data-testid="popout-wrapper" />);
       const locator = result.getByTestId('popout-wrapper');
-      expect(locator).not.toHaveClass(styles.opening);
+      expect(locator).not.toHaveClass(styles.opened);
       expect(locator).toHaveClass(styles.closing);
     });
+
+    const strategyClassNames = [styles.fixed, styles.absolute];
+    it.each<{ strategy?: PopoutWrapperProps['strategy']; fixed?: boolean; className: string }>([
+      {
+        strategy: 'none',
+        className: '',
+      },
+      {
+        strategy: 'fixed',
+        className: styles.fixed,
+      },
+      {
+        strategy: 'absolute',
+        className: styles.absolute,
+      },
+      {
+        fixed: false,
+        className: '',
+      },
+      {
+        fixed: true,
+        className: styles.fixed,
+      },
+      {
+        className: styles.fixed,
+      },
+    ])(
+      'should have className $className when use strategy $strategy, fixed $fixed',
+      ({ strategy, fixed, className }) => {
+        const result = render(
+          <PopoutWrapper strategy={strategy} fixed={fixed} data-testid="popout-wrapper" />,
+        );
+        const locator = result.getByTestId('popout-wrapper');
+        className && expect(locator).toHaveClass(className);
+        const filteredClassNames = strategyClassNames.filter((cn) => cn !== className).join(' ');
+        expect(locator).not.toHaveClass(filteredClassNames);
+      },
+    );
   });
 });
diff --git a/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.tsx b/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.tsx
@@ -18,17 +18,36 @@ const stylesAlignY = {
   bottom: styles.alignYBottom,
 };
 
+const stylesStrategy = {
+  fixed: styles.fixed,
+  absolute: styles.absolute,
+  none: undefined,
+};
+
 export interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Позволяет сделать прозрачную подложку
    */
   noBackground?: boolean;
   /**
+   * @deprecated будет удалён в **VKUI v8**
+   * Используйте `strategy` вместо этого свойства.
+   *
    * Включает фиксированное позиционирование.
    *
-   * По умолчанию у компонента не задан никакой `position`.
+   * При значении `false` у компонента не задан никакой `position`.
    */
   fixed?: boolean;
+  /**
+   * Стратегия позиционирования:
+   *
+   * - `fixed`: у контейнера выставлен `position: fixed`
+   * - `absolute`: у контейнера выставлен `position: absolute`
+   * - `none`: у контейнера не выставлен `position`
+   *
+   * @default 'fixed'
+   */
+  strategy?: 'fixed' | 'absolute' | 'none';
   /**
    * Выравнивает контент по горизонтали.
    */
@@ -55,12 +74,16 @@ export const PopoutWrapper = ({
   alignX = 'center',
   closing = false,
   noBackground = false,
+  strategy: strategyProp,
+  // TODO [>=8]: удалить свойство
   fixed = true,
   children,
   onClick,
   zIndex = 'var(--vkui--z_index_popout)',
   ...restProps
 }: PopoutWrapperProps): React.ReactNode => {
+  const strategy = strategyProp || (fixed ? 'fixed' : 'none');
+
   return (
     <RootComponent
       {...restProps}
@@ -69,7 +92,7 @@ export const PopoutWrapper = ({
         stylesAlignY[alignY],
         stylesAlignX[alignX],
         closing ? styles.closing : styles.opened,
-        fixed && styles.fixed,
+        strategy && stylesStrategy[strategy],
         !noBackground && styles.masked,
       )}
       baseStyle={{ zIndex }}

diff --git a/packages/vkui/src/components/ScreenSpinner/ScreenSpinner.tsx b/packages/vkui/src/components/ScreenSpinner/ScreenSpinner.tsx
@@ -34,7 +34,7 @@ export const ScreenSpinner: React.FC<ScreenSpinnerProps> & {
 
   return (
     <AppRootPortal usePortal={usePortal}>
-      <PopoutWrapper className={className} style={style} noBackground>
+      <PopoutWrapper className={className} style={style} noBackground strategy="fixed">
         <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>
           <ScreenSpinnerLoader {...restProps} />
           <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />