Feature Description

The Welcome modal will be updated for mobile viewports to show the background overlay, rather than being full-screen.

Additionally, the modal will not show its graphic for very short viewports where the presence of the graphic would prevent the modal’s title and description from being visible without scrolling.

For reference, see the Welcome modal section in the design doc, the Figma design, and this Asana task raised in the Phase 2 bug bash.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• On mobile viewports, the Welcome modal shows the background overlay behind it, rather than being full-screen.
• On very short viewports where the graphic would prevent the modal's title and description from being visible without scrolling, the graphic is hidden.
• These changes are gated by the setupFlowRefresh feature flag.
• The modal matches the Figma design.

Implementation Brief

Note: The changes can be seen in this diff, this branch can be used as a reference for implementation.

• In assets/js/components/WelcomeModal.tsx

  • Add a new class name googlesitekit-dialog--with-mobile-margins to Dialog component which can be reused to style modals for mobile and tablet viewport.

• In assets/sass/components/global/_googlesitekit-dialog.scss

  • This class will include mobile only behaviour.
  • Align items to center using align-items for mobile viewports (width < $bp-tablet).
  • For .mdc-dialog__container, use the $grid-gap-phone margins side wide and it's height should be set to auto with max-height set to slightly less than 100vh so that modal is completely visible in viewport.
  • For .mdc-dialog__surface, add border radius $br-md.

• In assets/sass/components/dashboard/_googlesitekit-welcome-modal.scss

  • For very short viewport height hide the graphic (.googlesitekit-welcome-modal__graphic), set it to display: none
  • Add appropriate spacing for title and CTAs as can be seen in diff, adjust it so that it matches the Figma design.

Test Coverage

• Fix any failing stories.

QA Brief

1. Enable setupFlowRefresh feature flag and complete the setup flow. Ensure that the site has data available so that welcome modal shows.

2. When setup flow is completed and welcome modal appears.

3. Check the welcome modal on smaller viewports (mobile and tablet), the background overlay should be visible and modal should be placed at the center of the viewport.

4. For smaller devices where height is less than 520px, the welcome modal graphic should not be visible and only title and description should be visible.

5. Make sure the modal matches the Figma design provided in AC.

Changelog entry

• Update the dashboard's Welcome modal for mobile viewports.