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

salute-developers · Nov 10, 2023 · 5900137 · 5900137
1 parent 68bf296
commit 5900137
Show file tree

Hide file tree

Showing 15 changed files with 83 additions and 23 deletions.
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -150,6 +150,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';
@@ -623,12 +624,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 { 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,14 +1,30 @@
+import React, { ForwardRefExoticComponent, RefAttributes, forwardRef } from 'react';
 import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
 import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
+import { createGlobalStyle } from 'styled-components';
 
 import { config } from './Modal.config';
 
+// linaria не поддерживает динамический global style
+const NoScroll = createGlobalStyle`
+    body {
+        overflow-y: hidden;
+    }
+`;
+
 const mergedConfig = mergeConfig(modalConfig, config);
-const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
-    ModalProps & React.RefAttributes<HTMLDivElement>
+const ModalBaseComponent = component(mergedConfig) as ForwardRefExoticComponent<
+    ModalProps & RefAttributes<HTMLDivElement>
 >;
 
 /**
  * Модальное окно.
  */
-export const ModalBase = ModalBaseComponent;
+export const ModalBase = forwardRef<HTMLDivElement, ModalProps>(({ children, ...rest }) => {
+    return (
+        <ModalBaseComponent {...rest}>
+            <NoScroll />
+            {children}
+        </ModalBaseComponent>
+    );
+});
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-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/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_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
@@ -150,6 +150,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';
@@ -623,12 +624,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,14 +1,30 @@
+import React, { ForwardRefExoticComponent, RefAttributes, forwardRef } from 'react';
 import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
 import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
+import { createGlobalStyle } from 'styled-components';
 
 import { config } from './Modal.config';
 
+// linaria не поддерживает динамический global style
+const NoScroll = createGlobalStyle`
+    body {
+        overflow-y: hidden;
+    }
+`;
+
 const mergedConfig = mergeConfig(modalConfig, config);
-const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
-    ModalProps & React.RefAttributes<HTMLDivElement>
+const ModalBaseComponent = component(mergedConfig) as ForwardRefExoticComponent<
+    ModalProps & RefAttributes<HTMLDivElement>
 >;
 
 /**
  * Модальное окно.
  */
-export const ModalBase = ModalBaseComponent;
+export const ModalBase = forwardRef<HTMLDivElement, ModalProps>(({ children, ...rest }) => {
+    return (
+        <ModalBaseComponent {...rest}>
+            <NoScroll />
+            {children}
+        </ModalBaseComponent>
+    );
+});
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';