Refactor SideNavigation

packages/circuit-ui/components/DateInput/DateInput.tsx

@@ -345,8 +345,10 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
       setIsClosing(true);
     }, []);
 
-    const outAnimation = isMobile ? sharedClasses.animationSlideOut : undefined;
-    const inAnimation = isMobile ? sharedClasses.animationSlideIn : undefined;
+    const outAnimation = isMobile
+      ? sharedClasses.animationSlideUpOut
+      : undefined;
+    const inAnimation = isMobile ? sharedClasses.animationSlideUpIn : undefined;
 
     return (
       <FieldWrapper disabled={disabled} className={className} style={style}>

packages/circuit-ui/components/Dialog/Dialog.tsx

@@ -55,7 +55,7 @@ export interface DialogProps
    */
   isModal?: boolean;
   /**
-   * Callback when the modal dialog is closed.
+   * Callback function invoked when the dialog closes.
    */
   onCloseEnd?: () => void;
   /**

packages/circuit-ui/components/Dialog/dialog.module.css

@@ -37,7 +37,7 @@
 }
 
 /* Close button */
-.base .close {
+.close {
   position: absolute;
   z-index: var(--cui-z-index-absolute);
 }
@@ -62,7 +62,7 @@
     height: var(--cui-spacings-giga);
   }
 
-  .base .close {
+  .close {
     top: var(--cui-spacings-byte);
     right: var(--cui-spacings-byte);
   }
@@ -73,7 +73,7 @@
     height: var(--cui-spacings-mega);
   }
 
-  .base .close {
+  .close {
     top: var(--cui-spacings-bit);
     right: var(--cui-spacings-bit);
   }

packages/circuit-ui/components/Modal/Modal.tsx

@@ -40,7 +40,7 @@ export interface ModalProps
    * */
   variant?: 'contextual' | 'immersive';
   /**
-   * Callback when the modal dialog is closed.
+   * Callback function invoked when the modal closes.
    */
   onClose?: DialogProps['onCloseEnd'];
   /**
@@ -83,10 +83,10 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>((props, ref) => {
   const isMobile = useMedia('(max-width: 479px)');
 
   const outAnimation = isMobile
-    ? sharedClasses.animationSlideOut
+    ? sharedClasses.animationSlideUpOut
     : sharedClasses.animationFadeOut;
   const inAnimation = isMobile
-    ? sharedClasses.animationSlideIn
+    ? sharedClasses.animationSlideUpIn
     : sharedClasses.animationFadeIn;
 
   return (

packages/circuit-ui/components/Popover/Popover.tsx

@@ -301,8 +301,10 @@ export const Popover = forwardRef<HTMLDialogElement, PopoverProps>(
       setClosing(true);
     }, []);
 
-    const outAnimation = isMobile ? sharedClasses.animationSlideOut : undefined;
-    const inAnimation = isMobile ? sharedClasses.animationSlideIn : undefined;
+    const outAnimation = isMobile
+      ? sharedClasses.animationSlideUpOut
+      : undefined;
+    const inAnimation = isMobile ? sharedClasses.animationSlideUpIn : undefined;
 
     return (
       <Fragment>

packages/circuit-ui/components/SideNavigation/SideNavigation.spec.tsx

@@ -24,7 +24,6 @@ import {
   screen,
   type RenderFn,
 } from '../../util/test-utils.js';
-import { ModalProvider } from '../ModalContext/index.js';
 
 import { SideNavigation, type SideNavigationProps } from './SideNavigation.js';
 
@@ -49,11 +48,7 @@ describe('SideNavigation', () => {
     renderFn: RenderFn<T>,
     props: SideNavigationProps,
   ) {
-    return renderFn(
-      <ModalProvider>
-        <SideNavigation {...props} />
-      </ModalProvider>,
-    );
+    return renderFn(<SideNavigation {...props} />);
   }
 
   const baseProps = {
@@ -110,7 +105,12 @@ describe('SideNavigation', () => {
         expect(screen.queryByRole('dialog')).toBeVisible();
       });
     });
+  });
 
+  describe('on desktop', () => {
+    beforeAll(() => {
+      setMediaMatches(false);
+    });
     it('should render a skip navigation link', () => {
       renderSideNavigation(render, {
         ...defaultProps,
@@ -120,21 +120,11 @@ describe('SideNavigation', () => {
       const skipLink = screen.getByRole('link', { name: 'Skip navigation' });
       expect(skipLink).toBeInTheDocument();
     });
-  });
 
-  it('should render a skip navigation link', () => {
-    renderSideNavigation(render, {
-      ...defaultProps,
-      skipNavigationHref: '#main-content',
-      skipNavigationLabel: 'Skip navigation',
+    it('should have no accessibility violations', async () => {
+      const { container } = renderSideNavigation(render, defaultProps);
+      const actual = await axe(container);
+      expect(actual).toHaveNoViolations();
     });
-    const skipLink = screen.getByRole('link', { name: 'Skip navigation' });
-    expect(skipLink).toBeInTheDocument();
-  });
-
-  it('should have no accessibility violations', async () => {
-    const { container } = renderSideNavigation(render, defaultProps);
-    const actual = await axe(container);
-    expect(actual).toHaveNoViolations();
   });
 });

packages/circuit-ui/components/SideNavigation/SideNavigation.stories.tsx

@@ -15,9 +15,9 @@
 
 import { action } from '@storybook/addon-actions';
 import { Like, Home, LiveChat, Package, Shop } from '@sumup-oss/icons';
+import { useState } from 'react';
 
 import { modes } from '../../../../.storybook/modes.js';
-import { ModalProvider } from '../ModalContext/index.js';
 import { Headline } from '../Headline/index.js';
 import { Body } from '../Body/index.js';
 
@@ -141,15 +141,24 @@ const placeHolderContent = (
   </main>
 );
 
-export const Base = (args: SideNavigationProps) => (
-  <ModalProvider>
+export const Base = (args: SideNavigationProps) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const onSideNavigationClose = () => {
+    setIsOpen(false);
+  };
+  return (
     <div style={{ width: '100%', height: '100vh' }}>
       <div style={{ display: 'flex' }}>
-        <SideNavigation {...args} />
+        <SideNavigation
+          {...args}
+          isOpen={isOpen}
+          onClose={onSideNavigationClose}
+        />
         {placeHolderContent}
       </div>
     </div>
-  </ModalProvider>
-);
+  );
+};
 
 Base.args = baseArgs;

packages/circuit-ui/components/SideNavigation/SideNavigation.tsx

@@ -15,8 +15,6 @@
 
 'use client';
 
-import { useEffect } from 'react';
-
 import { useMedia } from '../../hooks/useMedia/index.js';
 import {
   AccessibilityError,
@@ -26,15 +24,19 @@ import { usePrevious } from '../../hooks/usePrevious/index.js';
 
 import { DesktopNavigation } from './components/DesktopNavigation/index.js';
 import type { DesktopNavigationProps } from './components/DesktopNavigation/DesktopNavigation.js';
-import {
-  useMobileNavigation,
-  type MobileNavigationProps,
-} from './components/MobileNavigation/index.js';
+import type { MobileNavigationProps } from './components/MobileNavigation/index.js';
+import { MobileNavigation } from './components/MobileNavigation/MobileNavigation.js';
 
 export interface SideNavigationProps
-  extends MobileNavigationProps,
+  extends Omit<MobileNavigationProps, 'open'>,
     DesktopNavigationProps {
+  /**
+   * Whether the modal navigation is open.
+   */
   isOpen: boolean;
+  /**
+   * Callback function invoked when the modal closes.
+   */
   onClose: () => void;
 }
 
@@ -49,17 +51,12 @@ export function SideNavigation({
   UNSAFE_components,
   skipNavigationLabel,
   skipNavigationHref,
+  ...rest
 }: SideNavigationProps) {
   if (
     process.env.NODE_ENV !== 'production' &&
     process.env.NODE_ENV !== 'test'
   ) {
-    if (!isSufficientlyLabelled(closeButtonLabel)) {
-      throw new AccessibilityError(
-        'SideNavigation',
-        'The `closeButtonLabel` prop is missing or invalid.',
-      );
-    }
     if (!isSufficientlyLabelled(primaryNavigationLabel)) {
       throw new AccessibilityError(
         'SideNavigation',
@@ -76,44 +73,19 @@ export function SideNavigation({
 
   const isMobile = useMedia('(max-width: 1279px)', true);
 
-  const { setModal, removeModal } = useMobileNavigation();
-
   const prevOpen = usePrevious(isOpen);
 
-  useEffect(() => {
-    if (!prevOpen && isOpen && isMobile) {
-      setModal({
-        onClose,
-        primaryLinks,
-        closeButtonLabel,
-        primaryNavigationLabel,
-        UNSAFE_components,
-        skipNavigationLabel,
-        skipNavigationHref,
-      });
-    }
-  }, [
-    prevOpen,
-    isOpen,
-    isMobile,
-    setModal,
-    primaryLinks,
-    onClose,
-    closeButtonLabel,
-    primaryNavigationLabel,
-    UNSAFE_components,
-    skipNavigationLabel,
-    skipNavigationHref,
-  ]);
-
-  // Close the modal when the user resizes the window.
-  useEffect(() => {
-    if (!isMobile) {
-      removeModal();
-    }
-  }, [isMobile, removeModal]);
-
-  return (
+  return isMobile ? (
+    <MobileNavigation
+      UNSAFE_components={UNSAFE_components}
+      primaryLinks={primaryLinks}
+      closeButtonLabel={closeButtonLabel}
+      primaryNavigationLabel={primaryNavigationLabel}
+      onCloseEnd={onClose}
+      open={!prevOpen && isOpen}
+      {...rest}
+    />
+  ) : (
     <DesktopNavigation
       isLoading={isLoading}
       primaryLinks={primaryLinks}

packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css

@@ -1,67 +1,24 @@
 .base {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   overflow: hidden;
-  background-color: var(--cui-bg-normal);
-  outline: none;
-  opacity: 0;
-  transition:
-    opacity var(--cui-transitions-default),
-    transform var(--cui-transitions-default);
-  transform: translateY(-25%);
 }
 
 .base::after {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: block;
   height: var(--cui-spacings-mega);
-  content: "";
-  background: linear-gradient(
-    color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent),
-    color-mix(in sRGB, var(--cui-bg-normal) 66%, transparent),
-    color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent)
-  );
-}
-
-.open {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.closed {
-  opacity: 0;
-  transform: translateY(-25%);
 }
 
-.overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--cui-z-index-modal);
-  background: var(--cui-bg-overlay);
-  opacity: 0;
-  transition: opacity var(--cui-transitions-default);
+.base.backdrop {
+  display: none;
 }
 
-.overlay-open {
-  opacity: 1;
-}
-
-.overlay-closed {
-  opacity: 0;
+.content,
+.base {
+  width: 100vw;
+  min-width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
 }
 
-.content {
+.navigation {
   max-width: 480px;
   height: 100%;
   padding-top: 56px;
@@ -71,21 +28,6 @@
   -webkit-overflow-scrolling: touch;
 }
 
-.header {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: var(--cui-z-index-absolute);
-  width: 100%;
-  padding: var(--cui-spacings-bit);
-  background: linear-gradient(
-    color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent),
-    color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent) 66%,
-    color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent)
-  );
-}
-
 .list {
   padding: 0;
   margin: 0;