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

salute-developers · Nov 14, 2023 · 33d7ac5 · 33d7ac5
1 parent 03b304e
commit 33d7ac5
Show file tree

Hide file tree

Showing 22 changed files with 81 additions and 48 deletions.
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -145,6 +145,7 @@ import { MediaQueryFunction } from '@salutejs/plasma-hope';
 import { Modal } from '@salutejs/plasma-hope';
 import { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
+import { modalTokens as modalBaseTokens } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps } from '@salutejs/plasma-hope';
 import { ModalsProvider } from '@salutejs/plasma-hope';
 import { ModalView } from '@salutejs/plasma-hope';
@@ -596,12 +597,14 @@ export { MediaQueryFunction }
 export { Modal }
 
 // @public
-export const ModalBase: ForwardRefExoticComponent<ModalBaseProps & RefAttributes<HTMLDivElement>>;
+export const ModalBase: React_2.ForwardRefExoticComponent<ModalBaseProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export { modalBaseClasses }
 
 export { ModalBaseProps }
 
+export { modalBaseTokens }
+
 export { ModalProps }
 
 export { ModalsProvider }

diff --git a/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts
@@ -1,14 +1,16 @@
 import { css } from '@salutejs/plasma-new-hope/styled-components';
 
+import { modalBaseTokens } from '.';
+
 export const config = {
     defaults: {
         view: 'default',
     },
     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);
+                ${modalBaseTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
+                ${modalBaseTokens.modalOverlayColor}: rgba(8, 8, 8, 0.56);
             `,
         },
     },

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 { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
-import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
 
 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/ModalBase/index.ts b/packages/plasma-b2c/src/components/ModalBase/index.ts
@@ -1,4 +1,7 @@
 export { ModalBase } from './ModalBase';
-export { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
+export {
+    modalClasses as modalBaseClasses,
+    modalTokens as modalBaseTokens,
+} from '@salutejs/plasma-new-hope/styled-components';
 
 export type { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
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 { 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/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
@@ -4,3 +4,8 @@ export const classes = {
      */
     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.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/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/index.ts b/packages/plasma-new-hope/src/components/Modal/index.ts
@@ -1,2 +1,2 @@
 export { modalConfig, modalRoot } from './Modal/Modal';
-export { classes as modalClasses } from './Modal/Modal.tokens';
+export { classes as modalClasses, tokens as modalTokens } from './Modal/Modal.tokens';
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,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { styled } from '@linaria/react';
 import { Story, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';

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);
             `,
         },
     },

diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/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-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md
@@ -145,6 +145,7 @@ import { MediaQueryFunction } from '@salutejs/plasma-hope';
 import { Modal } from '@salutejs/plasma-hope';
 import { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
+import { modalTokens as modalBaseTokens } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps } from '@salutejs/plasma-hope';
 import { ModalsProvider } from '@salutejs/plasma-hope';
 import { ModalView } from '@salutejs/plasma-hope';
@@ -596,12 +597,14 @@ export { MediaQueryFunction }
 export { Modal }
 
 // @public
-export const ModalBase: ForwardRefExoticComponent<ModalBaseProps & RefAttributes<HTMLDivElement>>;
+export const ModalBase: React_2.ForwardRefExoticComponent<ModalBaseProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export { modalBaseClasses }
 
 export { ModalBaseProps }
 
+export { modalBaseTokens }
+
 export { ModalProps }
 
 export { ModalsProvider }

diff --git a/packages/plasma-web/src/components/ModalBase/Modal.config.ts b/packages/plasma-web/src/components/ModalBase/Modal.config.ts
@@ -1,14 +1,16 @@
 import { css } from '@salutejs/plasma-new-hope/styled-components';
 
+import { modalBaseTokens } from '.';
+
 export const config = {
     defaults: {
         view: 'default',
     },
     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);
+                ${modalBaseTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
+                ${modalBaseTokens.modalOverlayColor}: rgba(8, 8, 8, 0.56);
             `,
         },
     },

diff --git a/packages/plasma-web/src/components/ModalBase/ModalBase.tsx b/packages/plasma-web/src/components/ModalBase/ModalBase.tsx
@@ -1,11 +1,13 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
-import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
 
 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-web/src/components/ModalBase/index.ts b/packages/plasma-web/src/components/ModalBase/index.ts
@@ -1,4 +1,7 @@
 export { ModalBase } from './ModalBase';
-export { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
+export {
+    modalClasses as modalBaseClasses,
+    modalTokens as modalBaseTokens,
+} from '@salutejs/plasma-new-hope/styled-components';
 
 export type { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
diff --git a/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx b/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { Story, Meta } from '@storybook/react';
 import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 

diff --git a/packages/plasma-web/src/components/PopupBase/PopupBase.tsx b/packages/plasma-web/src/components/PopupBase/PopupBase.tsx
@@ -1,8 +1,13 @@
 import { popupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { 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>
+>;