fix(plasma-web, plasma-b2c): fix NoScroll behavior in ModalBase

salute-developers · Nov 15, 2023 · 7652350 · 7652350
1 parent d2d5391
commit 7652350
Show file tree

Hide file tree

Showing 25 changed files with 253 additions and 118 deletions.
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -176,7 +176,6 @@ import { PopupProps as PopupBaseProps } from '@salutejs/plasma-new-hope/styled-c
 import { PopupProvider as PopupBaseProvider } from '@salutejs/plasma-new-hope/styled-components';
 import { PopupInfo } from '@salutejs/plasma-new-hope/styled-components';
 import { PopupProps } from '@salutejs/plasma-hope';
-import { PopupProps as PopupProps_2 } from '@salutejs/plasma-new-hope';
 import { PreviewGallery } from '@salutejs/plasma-hope';
 import { PreviewGalleryItemProps } from '@salutejs/plasma-hope';
 import { PreviewGalleryProps } from '@salutejs/plasma-hope';
@@ -656,7 +655,7 @@ export { PopoverTrigger }
 export { Popup }
 
 // @public
-export const PopupBase: FunctionComponent<PropsType<Record<string, Variant>> & PopupProps_2 & RefAttributes<HTMLDivElement>>;
+export const PopupBase: ForwardRefExoticComponent<PopupBaseProps & RefAttributes<HTMLDivElement>>;
 
 export { popupBaseClasses }
 

diff --git a/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts
@@ -1,4 +1,4 @@
-import { css } from '@salutejs/plasma-new-hope/styled-components';
+import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components';
 
 export const config = {
     defaults: {
@@ -7,8 +7,8 @@ export const config = {
     variations: {
         view: {
             default: css`
-                --plasma-modal-overlay-with-blur-color: rgba(35, 35, 35, 0.2);
-                --plasma-modal-overlay-color: rgba(8, 8, 8, 0.56);
+                ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
+                ${modalTokens.modalOverlayColor}: var(--overlay-soft);
             `,
         },
     },

diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Story, Meta } from '@storybook/react';
-import { surfaceSolid02 } from '@salutejs/plasma-tokens-web';
+import type { Meta, StoryObj } from '@storybook/react';
+import { surfaceSolid02 } from '@salutejs/plasma-tokens-b2c';
 import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { SSRProvider } from '../SSRProvider';

diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx
@@ -1,11 +1,13 @@
 import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
-import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 import { config } from './Modal.config';
 
+import { ModalBaseProps } from '.';
+
 const mergedConfig = mergeConfig(modalConfig, config);
-const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
-    ModalProps & React.RefAttributes<HTMLDivElement>
+const ModalBaseComponent = component(mergedConfig) as ForwardRefExoticComponent<
+    ModalBaseProps & RefAttributes<HTMLDivElement>
 >;
 
 /**

diff --git a/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx b/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx
@@ -1,8 +1,13 @@
 import { popupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+import { PopupBaseProps } from '.';
 
 const mergedConfig = mergeConfig(popupConfig);
 
 /**
  * Базовый компонент PopupBase.
  */
-export const PopupBase = component(mergedConfig);
+export const PopupBase = component(mergedConfig) as ForwardRefExoticComponent<
+    PopupBaseProps & RefAttributes<HTMLDivElement>
+>;
diff --git a/packages/plasma-new-hope/src/components/Modal/Modal.tokens.ts b/packages/plasma-new-hope/src/components/Modal/Modal.tokens.ts
@@ -0,0 +1,11 @@
+export const classes = {
+    /*
+     * Класс компонента ModalOverlay
+     */
+    overlay: 'modal-overlay',
+};
+
+export const tokens = {
+    modalOverlayWithBlurColor: '--plasma-modal-overlay-with-blur-color',
+    modalOverlayColor: '--plasma-modal-overlay-color',
+};
diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.styles.ts b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.styles.ts
diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tokens.ts b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tokens.ts
diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tsx b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tsx
@@ -8,11 +8,6 @@ import { ModalOverlay } from '../ModalOverlay/ModalOverlay';
 import { ModalProps } from './Modal.types';
 import { useModal } from './hooks';
 import { base as viewCSS } from './variations/_view/base';
-import { noScroll } from './Modal.styles';
-
-export const NoScroll = () => {
-    return <div className={noScroll} />;
-};
 
 // issue #823
 const Popup = component(popupConfig);
@@ -75,7 +70,6 @@ export const modalRoot = (Root: RootProps<HTMLInputElement, ModalProps>) =>
                     }
                     {...rest}
                 >
-                    <NoScroll />
                     {children}
                 </Popup>
             );

diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/hooks/useModal.ts b/packages/plasma-new-hope/src/components/Modal/Modal/hooks/useModal.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { ModalInfo, getIdLastModal, hasModals } from '../ModalContext';
 import { ModalHookArgs } from '../Modal.types';
@@ -8,6 +8,7 @@ const ESCAPE_KEYCODE = 27;
 
 export const useModal = ({ id, isOpen, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: ModalHookArgs) => {
     const popupController = usePopupContext();
+    const overflow = useRef<string>(document.body.style.overflowY);
 
     // При ESC закрывает текущее окно, если это возможно
     const onKeyDown = useCallback(
@@ -39,11 +40,16 @@ export const useModal = ({ id, isOpen, popupInfo, onEscKeyDown, onClose, closeOn
     // linaria не поддерживает динамический global
     useEffect(() => {
         if (isOpen) {
-            document.body.classList.add('disable-scroll');
-        } else if (!hasModals(popupController.items)) {
-            document.body.classList.remove('disable-scroll');
+            overflow.current = document.body.style.overflowY;
+            document.body.style.overflowY = 'hidden';
         }
-    }, [isOpen, popupController.items]);
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (!isOpen && !hasModals(popupController.items)) {
+            document.body.style.overflowY = overflow.current;
+        }
+    }, [isOpen, overflow.current, popupController.items]);
 
     const modalInfo: ModalInfo = {
         id,

diff --git a/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.styles.ts b/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.styles.ts
@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 
 import { DEFAULT_Z_INDEX } from '../../Popup/utils';
+import { tokens } from '../Modal.tokens';
 
 // TODO: новый отдельный оверлей #778
 export const Overlay = styled.div<{
@@ -20,7 +21,7 @@ export const Overlay = styled.div<{
     z-index: ${({ zIndex }) => zIndex || DEFAULT_Z_INDEX};
 
     --plasma_private-overlay-background-color: ${({ $withBlur }) =>
-        $withBlur ? 'var(--plasma-modal-overlay-with-blur-color)' : 'var(--plasma-modal-overlay-color)'};
+        $withBlur ? `var(${tokens.modalOverlayWithBlurColor})` : `var(${tokens.modalOverlayColor})`};
 
     --plasma_private-overlay-backdrop-filter: ${({ $withBlur }) => ($withBlur ? 'blur(1rem)' : 'none')};
 

diff --git a/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.tsx b/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.tsx
@@ -3,7 +3,7 @@ import React, { FC, useCallback, useMemo } from 'react';
 import { usePopupContext } from '../../Popup';
 import { getIdLastModal } from '../Modal/ModalContext';
 import { ModalOverlayProps } from '../Modal/Modal.types';
-import { classes } from '../Modal/Modal.tokens';
+import { classes } from '../Modal.tokens';
 
 import { Overlay } from './ModalOverlay.styles';
 

diff --git a/packages/plasma-new-hope/src/components/Modal/index.ts b/packages/plasma-new-hope/src/components/Modal/index.ts
@@ -1,2 +1,3 @@
 export { modalConfig, modalRoot } from './Modal/Modal';
-export { classes as modalClasses } from './Modal/Modal.tokens';
+export { classes as modalClasses, tokens as modalTokens } from './Modal.tokens';
+export type { ModalProps, ModalOverlayProps } from './Modal/Modal.types';
diff --git a/packages/plasma-new-hope/src/components/Popup/index.ts b/packages/plasma-new-hope/src/components/Popup/index.ts
@@ -2,3 +2,4 @@ export { PopupProvider, usePopupContext } from './PopupContext';
 export { popupRoot, popupConfig } from './Popup';
 export { usePopup } from './hooks';
 export { classes as popupClasses } from './Popup.tokens';
+export type { PopupPlacement, PopupInfo, PopupProps } from './Popup.types';
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.config.ts
@@ -1,14 +1,16 @@
 import { css } from '@linaria/core';
 
+import { modalTokens } from '../../../../components/Modal';
+
 export const config = {
     defaults: {
         view: 'default',
     },
     variations: {
         view: {
             default: css`
-                --plasma-modal-overlay-with-blur-color: var(--overlay-blur);
-                --plasma-modal-overlay-color: var(--overlay-soft);
+                ${modalTokens.modalOverlayWithBlurColor}: var(--overlay-blur);
+                ${modalTokens.modalOverlayColor}: var(--overlay-soft);
             `,
         },
     },

diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { styled } from '@linaria/react';
-import { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
@@ -28,11 +29,42 @@ export default {
             control: {
                 type: 'select',
             },
+            table: { defaultValue: { summary: 'center' } },
+        },
+        offsetX: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        offsetY: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        closeOnEsc: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closeOnOverlayClick: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
         },
     },
 } as Meta;
 
-type ModalStoryProps = {
+type StoryModalProps = ComponentProps<typeof Modal> & {
     placement: string;
     offsetX: number;
     offsetY: number;
@@ -55,6 +87,11 @@ const Content = styled.div`
     padding: 1rem;
 `;
 
+const ButtonWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
 const StyledModal = styled(Modal)`
     && .${popupClasses.root}, .${modalClasses.overlay} {
         animation: fadeIn 1s forwards;
@@ -89,18 +126,18 @@ const StyledModal = styled(Modal)`
     }
 `;
 
-export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY, ...rest }) => {
-    const [isOpenA, setIsOpenA] = React.useState(false);
-    const [isOpenB, setIsOpenB] = React.useState(false);
-    const [isOpenC, setIsOpenC] = React.useState(false);
+const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+    const [isOpenC, setIsOpenC] = useState(false);
 
     return (
         <SSRProvider>
             <StyledWrapper>
                 <PopupProvider>
-                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                    <ButtonWrapper>
                         <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
-                    </div>
+                    </ButtonWrapper>
                     <StyledModal
                         id="modalA"
                         frame="theme-root"
@@ -113,9 +150,9 @@ export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY,
                     >
                         <Content>
                             <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <ButtonWrapper>
                                 <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
-                            </div>
+                            </ButtonWrapper>
                             <Modal
                                 id="modalB"
                                 frame="theme-root"
@@ -129,9 +166,9 @@ export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY,
                                     <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
                                         Close
                                     </Button>
-                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                    <ButtonWrapper>
                                         <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
-                                    </div>
+                                    </ButtonWrapper>
                                     <Modal
                                         id="modalC"
                                         frame="theme-root"
@@ -158,11 +195,14 @@ export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY,
     );
 };
 
-ModalDemo.args = {
-    placement: 'center',
-    withBlur: false,
-    closeOnEsc: true,
-    closeOnOverlayClick: true,
-    offsetX: 0,
-    offsetY: 0,
+export const ModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalDemo {...args} />,
 };
diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.config.ts
@@ -1,14 +1,16 @@
 import { css } from '@linaria/core';
 
+import { modalTokens } from '../../../../components/Modal';
+
 export const config = {
     defaults: {
         view: 'default',
     },
     variations: {
         view: {
             default: css`
-                --plasma-modal-overlay-with-blur-color: var(--overlay-blur);
-                --plasma-modal-overlay-color: var(--overlay-soft);
+                ${modalTokens.modalOverlayWithBlurColor}: var(--overlay-blur);
+                ${modalTokens.modalOverlayColor}: var(--overlay-soft);
             `,
         },
     },