Merge branch 'mobile-updates' into close-icon-mobile

code/ui/manager/src/components/mobile/MobileLayoutProvider.tsx

@@ -2,26 +2,38 @@ import type { FC } from 'react';
 import React, { createContext, useContext, useState } from 'react';
 
 type MobileLayoutContextType = {
+  isMobileMenuOpen: boolean;
+  setMobileMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isMobileAboutOpen: boolean;
   setMobileAboutOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isMobilePanelOpen: boolean;
   setMobilePanelOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const MobileLayoutContext = createContext<MobileLayoutContextType>({
+  isMobileMenuOpen: false,
+  setMobileMenuOpen: () => {},
   isMobileAboutOpen: false,
   setMobileAboutOpen: () => {},
   isMobilePanelOpen: false,
   setMobilePanelOpen: () => {},
 });
 
 export const MobileLayoutProvider: FC = ({ children }) => {
+  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [isMobileAboutOpen, setMobileAboutOpen] = useState(false);
   const [isMobilePanelOpen, setMobilePanelOpen] = useState(false);
 
   return (
     <MobileLayoutContext.Provider
-      value={{ isMobileAboutOpen, setMobileAboutOpen, isMobilePanelOpen, setMobilePanelOpen }}
+      value={{
+        isMobileMenuOpen,
+        setMobileMenuOpen,
+        isMobileAboutOpen,
+        setMobileAboutOpen,
+        isMobilePanelOpen,
+        setMobilePanelOpen,
+      }}
     >
       {children}
     </MobileLayoutContext.Provider>

code/ui/manager/src/components/mobile/about/MobileAbout.tsx

@@ -72,7 +72,7 @@ const Container = styled.div<{ state: TransitionStatus; transitionDuration: numb
     zIndex: 11,
     transition: `all ${transitionDuration}ms ease-in-out`,
     overflow: 'scroll',
-    padding: '20px',
+    padding: '25px 10px 10px',
     color: theme.color.defaultText,
     background: theme.background.content,
     opacity: `${(() => {

code/ui/manager/src/components/mobile/navigation/MobileMenuDrawer.tsx

@@ -5,39 +5,36 @@ import { Transition } from 'react-transition-group';
 import type { TransitionStatus } from 'react-transition-group/Transition';
 import { MobileAbout } from '../about/MobileAbout';
 import { MOBILE_TRANSITION_DURATION } from '../../../constants';
+import { useMobileLayoutContext } from '../MobileLayoutProvider';
 
 interface MobileMenuDrawerProps {
-  isMenuOpen: boolean;
-  isAboutOpen: boolean;
-  setAboutOpen: (open: boolean) => void;
-  closeMenu: () => void;
   children?: React.ReactNode;
 }
 
-export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({
-  isMenuOpen,
-  isAboutOpen,
-  setAboutOpen,
-  closeMenu,
-  children,
-}) => {
+export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({ children }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const sidebarRef = useRef<HTMLDivElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
+  const { isMobileMenuOpen, setMobileMenuOpen, isMobileAboutOpen, setMobileAboutOpen } =
+    useMobileLayoutContext();
 
   return (
     <>
       <Transition
         nodeRef={containerRef}
-        in={isMenuOpen}
+        in={isMobileMenuOpen}
         timeout={MOBILE_TRANSITION_DURATION}
         mountOnEnter
         unmountOnExit
-        onExited={() => setAboutOpen(false)}
+        onExited={() => setMobileAboutOpen(false)}
       >
         {(state) => (
           <Container ref={containerRef} state={state}>
-            <Transition nodeRef={sidebarRef} in={!isAboutOpen} timeout={MOBILE_TRANSITION_DURATION}>
+            <Transition
+              nodeRef={sidebarRef}
+              in={!isMobileAboutOpen}
+              timeout={MOBILE_TRANSITION_DURATION}
+            >
               {(sidebarState) => (
                 <SidebarContainer ref={sidebarRef} state={sidebarState}>
                   {children}
@@ -50,7 +47,7 @@ export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({
       </Transition>
       <Transition
         nodeRef={overlayRef}
-        in={isMenuOpen}
+        in={isMobileMenuOpen}
         timeout={MOBILE_TRANSITION_DURATION}
         mountOnEnter
         unmountOnExit
@@ -59,7 +56,7 @@ export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({
           <Overlay
             ref={overlayRef}
             state={state}
-            onClick={closeMenu}
+            onClick={() => setMobileMenuOpen(false)}
             aria-label="Close navigation menu"
           />
         )}

code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { useState } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
 import { IconButton, Icons } from '@storybook/components';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
@@ -35,22 +35,14 @@ const useFullStoryName = () => {
 };
 
 export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showPanel }) => {
-  const [isMenuOpen, setMenuOpen] = useState(false);
-  const { isMobileAboutOpen, setMobileAboutOpen, setMobilePanelOpen } = useMobileLayoutContext();
+  const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useMobileLayoutContext();
   const fullStoryName = useFullStoryName();
 
   return (
     <Container>
-      <MobileMenuDrawer
-        isMenuOpen={isMenuOpen}
-        isAboutOpen={isMobileAboutOpen}
-        setAboutOpen={setMobileAboutOpen}
-        closeMenu={() => setMenuOpen(false)}
-      >
-        {menu}
-      </MobileMenuDrawer>
+      <MobileMenuDrawer>{menu}</MobileMenuDrawer>
       <MobileAddonsDrawer>{panel}</MobileAddonsDrawer>
-      <Button onClick={() => setMenuOpen(!isMenuOpen)} title="Open navigation menu">
+      <Button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} title="Open navigation menu">
         <Icons icon="menu" />
         {fullStoryName}
       </Button>

code/ui/manager/src/components/sidebar/Sidebar.tsx

@@ -20,26 +20,27 @@ import { Search } from './Search';
 import { SearchResults } from './SearchResults';
 import type { Refs, CombinedDataset, Selection } from './types';
 import { useLastViewed } from './useLastViewed';
+import { BREAKPOINT_MIN_600 } from '../../constants';
 
 export const DEFAULT_REF_ID = 'storybook_internal';
 
-const Container = styled.nav(
-  {
-    position: 'absolute',
-    zIndex: 1,
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0,
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  ({ theme }) => ({
+const Container = styled.nav(({ theme }) => ({
+  position: 'absolute',
+  zIndex: 1,
+  left: 0,
+  top: 0,
+  bottom: 0,
+  right: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  background: theme.background.content,
+
+  [`@media ${BREAKPOINT_MIN_600}`]: {
     background: theme.background.app,
-  })
-);
+  },
+}));
 
 const Top = styled(Spaced)({
   padding: 20,

code/ui/manager/src/components/sidebar/Tree.tsx

@@ -36,6 +36,9 @@ import {
   getLink,
 } from '../../utils/tree';
 import { statusMapping, getHighestStatus, getGroupStatus } from '../../utils/status';
+import { useMediaQuery } from '../hooks/useMedia';
+import { BREAKPOINT_MIN_600 } from '../../constants';
+import { useMobileLayoutContext } from '../mobile/MobileLayoutProvider';
 
 export const Action = styled.button<{ height?: number; width?: number }>(
   ({ theme, height, width }) => ({
@@ -201,6 +204,9 @@ const Node = React.memo<NodeProps>(function Node({
   onSelectStoryId,
   api,
 }) {
+  const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
+  const { setMobileMenuOpen } = useMobileLayoutContext();
+
   if (!isDisplayed) {
     return null;
   }
@@ -231,6 +237,7 @@ const Node = React.memo<NodeProps>(function Node({
           onClick={(event) => {
             event.preventDefault();
             onSelectStoryId(item.id);
+            if (!isDesktop) setMobileMenuOpen(false);
           }}
           {...(item.type === 'docs' && { docsMode })}
         >
@@ -329,7 +336,7 @@ const Node = React.memo<NodeProps>(function Node({
         onClick={(event) => {
           event.preventDefault();
           setExpanded({ ids: [item.id], value: !isExpanded });
-          if (item.type === 'component' && !isExpanded) onSelectStoryId(item.id);
+          if (item.type === 'component' && !isExpanded && isDesktop) onSelectStoryId(item.id);
         }}
         onMouseEnter={() => {
           if (item.isComponent) {

code/ui/manager/src/components/upgrade/UpgradeBlock.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { styled } from '@storybook/theming';
 import { useStorybookApi } from '@storybook/manager-api';
 import { Link } from '@storybook/components';
+import { BREAKPOINT_MIN_600 } from '../../constants';
 
 interface UpgradeBlockProps {
   onNavigateToWhatsNew?: () => void;
@@ -40,10 +41,13 @@ const Container = styled.div(({ theme }) => ({
   borderRadius: 5,
   padding: 20,
   marginTop: 0,
-  maxWidth: 400,
   borderColor: theme.appBorderColor,
   fontSize: theme.typography.size.s2,
   width: '100%',
+
+  [`@media ${BREAKPOINT_MIN_600}`]: {
+    maxWidth: 400,
+  },
 }));
 
 const Tabs = styled.div({