feat(Portal): take in consideration parent theme

gravity-ui · Apr 11, 2024 · 41d7c20 · 41d7c20
1 parent 89a2bac
commit 41d7c20
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 64 deletions.
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -102,34 +102,32 @@ export function Modal({
     });
 
     return (
-        <Portal container={container}>
-            <CSSTransition
-                nodeRef={containerRef}
-                in={open}
-                addEndListener={(done) =>
-                    containerRef.current?.addEventListener('animationend', done)
-                }
-                classNames={getCSSTransitionClassNames(b)}
-                mountOnEnter={!keepMounted}
-                unmountOnExit={!keepMounted}
-                appear={true}
-                onEnter={() => {
-                    setInTransition(true);
-                    onTransitionEnter?.();
-                }}
-                onExit={() => {
-                    setInTransition(true);
-                    onTransitionExit?.();
-                }}
-                onEntered={() => {
-                    setInTransition(false);
-                    onTransitionEntered?.();
-                }}
-                onExited={() => {
-                    setInTransition(false);
-                    onTransitionExited?.();
-                }}
-            >
+        <CSSTransition
+            nodeRef={containerRef}
+            in={open}
+            addEndListener={(done) => containerRef.current?.addEventListener('animationend', done)}
+            classNames={getCSSTransitionClassNames(b)}
+            mountOnEnter={!keepMounted}
+            unmountOnExit={!keepMounted}
+            appear={true}
+            onEnter={() => {
+                setInTransition(true);
+                onTransitionEnter?.();
+            }}
+            onExit={() => {
+                setInTransition(true);
+                onTransitionExit?.();
+            }}
+            onEntered={() => {
+                setInTransition(false);
+                onTransitionEntered?.();
+            }}
+            onExited={() => {
+                setInTransition(false);
+                onTransitionExited?.();
+            }}
+        >
+            <Portal container={container}>
                 <div ref={containerRef} style={style} className={b({open}, className)} data-qa={qa}>
                     <div className={b('content-aligner')}>
                         <div className={b('content-wrapper')}>
@@ -157,7 +155,7 @@ export function Modal({
                         </div>
                     </div>
                 </div>
-            </CSSTransition>
-        </Portal>
+            </Portal>
+        </CSSTransition>
     );
 }
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
@@ -151,30 +151,28 @@ export function Popup({
     });
 
     return (
-        <Portal container={container} disablePortal={disablePortal}>
-            <CSSTransition
-                nodeRef={containerRef}
-                in={open}
-                addEndListener={(done) =>
-                    containerRef.current?.addEventListener('animationend', done)
-                }
-                classNames={getCSSTransitionClassNames(b)}
-                mountOnEnter={!keepMounted}
-                unmountOnExit={!keepMounted}
-                appear={true}
-                onEnter={() => {
-                    onTransitionEnter?.();
-                }}
-                onEntered={() => {
-                    onTransitionEntered?.();
-                }}
-                onExit={() => {
-                    onTransitionExit?.();
-                }}
-                onExited={() => {
-                    onTransitionExited?.();
-                }}
-            >
+        <CSSTransition
+            nodeRef={containerRef}
+            in={open}
+            addEndListener={(done) => containerRef.current?.addEventListener('animationend', done)}
+            classNames={getCSSTransitionClassNames(b)}
+            mountOnEnter={!keepMounted}
+            unmountOnExit={!keepMounted}
+            appear={true}
+            onEnter={() => {
+                onTransitionEnter?.();
+            }}
+            onEntered={() => {
+                onTransitionEntered?.();
+            }}
+            onExit={() => {
+                onTransitionExit?.();
+            }}
+            onExited={() => {
+                onTransitionExited?.();
+            }}
+        >
+            <Portal container={container} disablePortal={disablePortal}>
                 <div
                     ref={handleRef}
                     style={styles.popper}
@@ -211,7 +209,7 @@ export function Popup({
                         </div>
                     </FocusTrap>
                 </div>
-            </CSSTransition>
-        </Portal>
+            </Portal>
+        </CSSTransition>
     );
 }
diff --git a/src/components/Portal/Portal.scss b/src/components/Portal/Portal.scss
@@ -0,0 +1,9 @@
+@use '../variables';
+
+$block: '.#{variables.$ns}portal';
+
+#{$block} {
+    &__theme-wrapper {
+        display: contents;
+    }
+}
diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
@@ -3,6 +3,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {usePortalContainer} from '../../hooks';
+import {ThemeProvider} from '../theme';
+import {block} from '../utils/cn';
+
+import './Portal.scss';
+
+const b = block('portal');
 
 export interface PortalProps {
     container?: HTMLElement;
@@ -19,5 +25,12 @@ export function Portal({container, children, disablePortal}: PortalProps) {
         return <React.Fragment>{children}</React.Fragment>;
     }
 
-    return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
+    return containerNode
+        ? ReactDOM.createPortal(
+              <ThemeProvider rootClassName={b('theme-wrapper')} scoped>
+                  {children}
+              </ThemeProvider>,
+              containerNode,
+          )
+        : null;
 }
diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx
@@ -97,11 +97,7 @@ export function ThemeProvider({
                             },
                             rootClassName,
                         )}
-                        dir={
-                            hasParentProvider && direction === parentDirection
-                                ? undefined
-                                : direction
-                        }
+                        dir={direction}
                     >
                         {children}
                     </div>

diff --git a/src/components/theme/__stories__/Theme.stories.tsx b/src/components/theme/__stories__/Theme.stories.tsx
@@ -3,7 +3,9 @@ import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {Button} from '../../Button';
+import {Dialog} from '../../Dialog';
 import {Text} from '../../Text';
+import {Tooltip} from '../../Tooltip';
 import {ThemeProvider} from '../ThemeProvider';
 import {useDirection} from '../useDirection';
 
@@ -38,9 +40,20 @@ export default meta;
 type Story = StoryObj<typeof ThemeProvider>;
 
 function ScopedComponent() {
+    const [open, setOpen] = React.useState(false);
     return (
-        <div style={{transform: 'scaleX(var(--g-flow-direction))'}}>
-            <Button>{`current direction: ${useDirection()}`}</Button>
+        <div>
+            <Tooltip content="tooltip">
+                <Button
+                    onClick={() => {
+                        setOpen(!open);
+                    }}
+                >{`current direction: ${useDirection()}`}</Button>
+            </Tooltip>
+            <Dialog open={open} onClose={() => setOpen(false)}>
+                <Dialog.Header caption="Dialog.Header" />
+                <Dialog.Body>Dialog.Body</Dialog.Body>
+            </Dialog>
         </div>
     );
 }