revert - fix(APP-2253): Remove scroll from modals and bottom sheet co…

…mponents (#16)
aragon · Jul 31, 2023 · d6a36d5 · d6a36d5
1 parent f4375ce
commit d6a36d5
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   Revert "remove scroll from modals and bottom sheet components" to fix scroll issues
+
 ## [0.2.8] - 2023-07-26
 
 ### Added

diff --git a/src/components/backdrop/backdrop.tsx b/src/components/backdrop/backdrop.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import styled, { type CSSProperties } from 'styled-components';
 
 export interface BackdropProps {
@@ -21,31 +21,6 @@ export interface BackdropProps {
  */
 export const Backdrop: React.FC<BackdropProps> = ({ visible = false, children, onClose, ...props }) => {
     // TODO:Implement Backdrop to use as wrapper
-
-    useEffect(() => {
-        const html = document.querySelector('html');
-        if (!html) {
-            return;
-        }
-        html.style.overflow = visible ? 'hidden' : 'auto';
-    }, [visible]);
-
-    useEffect(() => {
-        function lockScrollOnResize() {
-            const html = document.querySelector('html');
-            if (!visible || !html) {
-                return;
-            }
-            html.style.overflow = 'hidden';
-        }
-
-        window?.addEventListener?.('resize', lockScrollOnResize);
-
-        return () => {
-            window?.removeEventListener?.('resize', lockScrollOnResize);
-        };
-    }, [visible]);
-
     return (
         <StyledBackdrop data-testid="backdrop-container" visible={visible} onClick={onClose} {...props}>
             {children}
@@ -57,9 +32,9 @@ type StyledBackdropProps = {
     visible: boolean;
 };
 
-export const BackdropStyles = ({ visible }: StyledBackdropProps) => {
+const StyledBackdrop = styled.div.attrs(({ visible }: StyledBackdropProps) => {
     const className: string = visible ? 'visible opacity-100 z-20' : 'invisible opacity-0';
-    const css: CSSProperties = {
+    const style: CSSProperties = {
         position: 'fixed',
         top: 0,
         left: 0,
@@ -72,10 +47,5 @@ export const BackdropStyles = ({ visible }: StyledBackdropProps) => {
         marginTop: 0,
     };
 
-    return { className, css };
-};
-
-const StyledBackdrop = styled.div.attrs(({ visible }: StyledBackdropProps) => {
-    const { className, css } = BackdropStyles({ visible });
-    return { className, style: css };
+    return { className, style };
 })<StyledBackdropProps>``;
diff --git a/src/components/modal/modal.stories.tsx b/src/components/modal/modal.stories.tsx
@@ -10,13 +10,28 @@ export default {
 const Template: Story<ModalProps> = (args) => <Modal {...args} />;
 
 const TestContent: ReactNode = (
-    <div>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi
-        repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga
-        praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure
-        eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt
-        quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error
-        repudiandae fuga?
+    <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 32 }}>
+        <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi
+            repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto
+            fuga praesentium optio, eaque rerum!
+        </p>
+        <p>
+            Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias
+            architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
+            tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia.
+        </p>
+        <p>Quo neque error repudiandae fuga?</p>
+        <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi
+            repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto
+            fuga praesentium optio, eaque rerum!
+        </p>
+        <p>
+            Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias
+            architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
+            tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia.
+        </p>
     </div>
 );
 

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
@@ -1,7 +1,7 @@
-import { Close, Content, Overlay, Portal, Root, Title } from '@radix-ui/react-dialog';
+import { Close, Content, Portal, Root, Title } from '@radix-ui/react-dialog';
 import React, { type CSSProperties, type ReactNode } from 'react';
 import styled from 'styled-components';
-import { BackdropStyles } from '../backdrop';
+import { Backdrop } from '../backdrop';
 import { IconClose } from '../icons';
 
 export interface ModalProps {
@@ -52,7 +52,7 @@ export const Modal: React.FC<ModalProps> = ({
         <>
             <Root open={isOpen}>
                 <Portal>
-                    <ModalOverlay />
+                    <Backdrop visible={isOpen} />
                     <ModalContainer
                         data-testid="modal-content"
                         onInteractOutside={onInteractOutside}
@@ -123,8 +123,3 @@ const ModalSubtitle = styled.div.attrs({
 const ModalClose = styled(Close).attrs({
     className: 'flex-shrink-0 text-ui-500 w-4 h-4 rounded-lg bg-ui-50 outline:none',
 })``;
-
-const ModalOverlay = styled(Overlay).attrs(() => {
-    const { className, css } = BackdropStyles({ visible: true });
-    return { className, style: css };
-})``;