fix(component): nested modal view-transition support (#8073)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/LakojjjzZNf6ogjOVwKE/b8033923-8f08-4c72-96b6-d790fc0ff703.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/LakojjjzZNf6ogjOVwKE/b8033923-8f08-4c72-96b6-d790fc0ff703.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/b8033923-8f08-4c72-96b6-d790fc0ff703.mp4">CleanShot 2024-09-03 at 18.36.17.mp4</video>

packages/frontend/component/src/ui/modal/modal.stories.tsx

@@ -139,3 +139,37 @@ export const Animations = () => {
     </div>
   );
 };
+
+export const Nested = () => {
+  const [openRoot, setOpenRoot] = useState(false);
+  const [openNested, setOpenNested] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpenRoot(true)}>Open Root Modal</Button>
+      <Modal
+        animation="slideBottom"
+        open={openRoot}
+        onOpenChange={setOpenRoot}
+        contentOptions={{
+          style: {
+            transition: 'all .3s ease 0.1s',
+            transform: openNested
+              ? `scale(0.95) translateY(-20px)`
+              : 'scale(1) translateY(0)',
+          },
+        }}
+      >
+        <Button onClick={() => setOpenNested(true)}>Open Nested Modal</Button>
+      </Modal>
+      <Modal
+        animation="slideBottom"
+        open={openNested}
+        onOpenChange={setOpenNested}
+        overlayOptions={{ style: { background: 'transparent' } }}
+      >
+        Nested Modal
+      </Modal>
+    </>
+  );
+};

packages/frontend/component/src/ui/modal/modal.tsx

@@ -89,6 +89,11 @@ class ModalTransitionContainer extends HTMLElement {
     this.animationFrame = requestAnimationFrame(() => {
       if (typeof document.startViewTransition === 'function') {
         const nodes = this.pendingTransitionNodes;
+        nodes.forEach(child => {
+          if (child instanceof HTMLElement) {
+            child.classList.add('vt-active');
+          }
+        });
         document.startViewTransition(() => {
           nodes.forEach(child => {
             // eslint-disable-next-line unicorn/prefer-dom-node-remove

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -92,14 +92,18 @@ export const modalContentWrapper = style({
     },
     '&.anim-fadeScaleTop': {
       animation: `${contentShowFadeScaleTop} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
-      viewTransitionName: modalContentViewTransitionNameFadeScaleTop,
       animationFillMode: 'forwards',
     },
+    '&.anim-fadeScaleTop.vt-active': {
+      viewTransitionName: modalContentViewTransitionNameFadeScaleTop,
+    },
     '&.anim-slideBottom': {
       animation: `${contentShowSlideBottom} 0.23s ease`,
-      viewTransitionName: modalContentViewTransitionNameSlideBottom,
       animationFillMode: 'forwards',
     },
+    '&.anim-slideBottom.vt-active': {
+      viewTransitionName: modalContentViewTransitionNameSlideBottom,
+    },
   },
 });
 globalStyle(