diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.tsx index 1c9795adae..bdbb1a7451 100644 --- 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} diff --git a/packages/vkui/src/components/Alert/Alert.tsx b/packages/vkui/src/components/Alert/Alert.tsx index 8d1fd0f3e2..aae2ae15fc 100644 --- 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" > ; export const Playground: Story = { - render: (args) => , + render: (args) => ( +
+ +
+ ), args: { children: 'Some content', }, diff --git a/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.test.tsx b/packages/vkui/src/components/PopoutWrapper/PopoutWrapper.test.tsx index 46120e1a41..c0c40ea718 100644 --- 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(); 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( + , + ); + 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 index a23619d06d..d05ffd7d25 100644 --- 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 { /** * Позволяет сделать прозрачную подложку */ 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 ( & { return ( - +