Fix side panel exit animation

.changeset/beige-tips-swim.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Fix minor issue in the side panel exit animation, preventing the contents from vanishing abruptly.

cypress/support/utils.js

@@ -153,6 +153,9 @@ export const assertCodePaneLineCount = (lines) => {
   getCodeEditor().within(() =>
     cy.get('.CodeMirror-line').should('have.length', lines)
   );
+
+  // Wait after check to ensure original focus is restored
+  cy.wait(500); // eslint-disable-line @finsit/cypress/no-unnecessary-waiting
 };
 
 export const assertFramesMatch = (matches) =>

package.json

@@ -98,6 +98,7 @@
     "re-resizable": "^6.9.9",
     "react-docgen-typescript": "^2.2.2",
     "react-helmet": "^6.1.0",
+    "react-transition-group": "^4.4.5",
     "react-use": "^17.4.0",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
@@ -114,6 +115,7 @@
     "@octokit/rest": "^19.0.5",
     "@types/jest": "^29.2.4",
     "@types/react-helmet": "^6.1.6",
+    "@types/react-transition-group": "^4.4.10",
     "concurrently": "^7.6.0",
     "cypress": "^13.6.6",
     "eslint": "^8.44.0",

src/Playroom/Toolbar/Toolbar.css.ts

@@ -92,24 +92,52 @@ export const panel = style([
     position: 'relative',
     display: 'flex',
     overflow: 'auto',
-    transition: 'slow',
     pointerEvents: 'auto',
   }),
   {
     width: toolbarOpenSize,
     backgroundColor: colorPaletteVars.background.surface,
     borderLeft: `${toolbarBorderThickness} solid ${colorPaletteVars.border.standard}`,
-    selectors: {
-      [`${root}:not(${isOpen}) &`]: {
-        transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`,
-        opacity: 0,
-        pointerEvents: 'none',
-      },
-    },
   },
 ]);
 
 export const preference = sprinkles({
   position: 'absolute',
   inset: 0,
 });
+
+export const transitionStyles = {
+  enter: style({
+    opacity: 0,
+    transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`,
+  }),
+  enterActive: style([
+    sprinkles({
+      transition: 'slow',
+    }),
+    {
+      opacity: 1,
+      transform: `translateX(0)`,
+    },
+  ]),
+  enterDone: style({
+    opacity: 1,
+    transform: `translateX(0)`,
+  }),
+  exit: style({
+    opacity: 1,
+  }),
+  exitActive: style([
+    sprinkles({
+      transition: 'slow',
+    }),
+    {
+      opacity: 0,
+      transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`,
+    },
+  ]),
+  exitDone: style({
+    opacity: 0,
+    transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`,
+  }),
+};

src/Playroom/Toolbar/Toolbar.tsx

@@ -17,13 +17,16 @@ import SettingsPanel from '../SettingsPanel/SettingsPanel';
 import SettingsIcon from '../icons/SettingsIcon';
 import { isMac } from '../../utils/formatting';
 
+import { CSSTransition } from 'react-transition-group';
+
 interface Props {
   themes: PlayroomProps['themes'];
   widths: PlayroomProps['widths'];
   snippets: PlayroomProps['snippets'];
 }
 
 export const toolbarItemCount = 5;
+const ANIMATION_TIMEOUT = 300;
 
 export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
   const [
@@ -58,6 +61,9 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
   const isSettingsOpen = activeToolbarPanel === 'settings';
   const isPreviewOpen = activeToolbarPanel === 'preview';
 
+  const [lastActivePanel, setLastActivePanel] =
+    useState<typeof activeToolbarPanel>(undefined);
+
   const hasSnippets = snippets && snippets.length > 0;
   const hasFilteredFrames =
     visibleThemes.length > 0 || visibleWidths.length > 0;
@@ -148,58 +154,65 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
             </ToolbarItem>
           </div>
         </div>
-
-        <div className={styles.panel}>
-          {isSnippetsOpen && (
-            <div
-              hidden={isSnippetsOpen ? undefined : true}
-              className={styles.preference}
-            >
-              <Snippets
-                snippets={snippets}
-                onHighlight={(snippet) => {
-                  dispatch({
-                    type: 'previewSnippet',
-                    payload: { snippet },
-                  });
-                }}
-                onClose={(snippet) => {
-                  if (snippet) {
+        <CSSTransition
+          in={isOpen}
+          timeout={ANIMATION_TIMEOUT}
+          classNames={styles.transitionStyles}
+          mountOnEnter
+          unmountOnExit
+          onEnter={() => setLastActivePanel(activeToolbarPanel)}
+          onExited={() => setLastActivePanel(undefined)}
+        >
+          <div className={styles.panel} id="custom-id">
+            {lastActivePanel === 'snippets' && (
+              <div className={styles.preference}>
+                <Snippets
+                  snippets={snippets}
+                  onHighlight={(snippet) => {
                     dispatch({
-                      type: 'persistSnippet',
+                      type: 'previewSnippet',
                       payload: { snippet },
                     });
-                  } else {
-                    dispatch({ type: 'closeToolbar' });
-                  }
-                }}
-              />
-            </div>
-          )}
-          <div
-            hidden={isFramesOpen ? undefined : true}
-            className={styles.preference}
-          >
-            <FramesPanel
-              availableWidths={allWidths}
-              availableThemes={allThemes}
-            />
-          </div>
+                  }}
+                  onClose={(snippet) => {
+                    if (snippet) {
+                      dispatch({
+                        type: 'persistSnippet',
+                        payload: { snippet },
+                      });
+                    } else {
+                      dispatch({ type: 'closeToolbar' });
+                    }
+                  }}
+                />
+              </div>
+            )}
 
-          <div
-            hidden={isPreviewOpen ? undefined : true}
-            className={styles.preference}
-          >
-            <PreviewPanel themes={allThemes} visibleThemes={visibleThemes} />
-          </div>
+            {lastActivePanel === 'frames' && (
+              <div className={styles.preference}>
+                <FramesPanel
+                  availableWidths={allWidths}
+                  availableThemes={allThemes}
+                />
+              </div>
+            )}
 
-          <div
-            hidden={isSettingsOpen ? undefined : true}
-            className={styles.preference}
-          >
-            <SettingsPanel />
+            {lastActivePanel === 'preview' && (
+              <div className={styles.preference}>
+                <PreviewPanel
+                  themes={allThemes}
+                  visibleThemes={visibleThemes}
+                />
+              </div>
+            )}
+
+            {lastActivePanel === 'settings' && (
+              <div className={styles.preference}>
+                <SettingsPanel />
+              </div>
+            )}
           </div>
-        </div>
+        </CSSTransition>
       </div>
     </div>
   );