Background/Goal

ProcessDialog needs to be added in Codex in order to cover some real use cases:

1. Edit and publish your changes in MediaWiki

2. "Add a link" onboarding

T329037: Refactor the "Add a link" on-boarding dialog to Vue
T332767: OnboardingDialog: Add OnboardingDialog component pattern to Codex

Design spec

Anatomy

Process Dialog will be built with the Dialog component created in T284838 and it could include:

• An optional header that can contain:
  • Title
  • Close button (optional)
  • Back button
  • Loading
• Dialog body (with content that may vary)
  • It may be scrollable
  • Dividers could be used to separate the header, body and footer.
• An optional footer that can contain up to 3 buttons (one of these buttons will be primary)
• It becomes fullscreen on mobile

Style

The initial component will present the same styles from the Dialog component:

• Size: the dialog width can vary according to the need of each case and the body content within the dialog.
• Dialog frame will have a box-shadow to emphasize its placement over other content
• Below the frame, a background blur effect will be created over the rest of the UI with a semi-transparent white background-color
• Action buttons can either be horizontal and aligned to the end of the dialog, or stacked and 100% width

Interaction

The Process Dialog will follow the same interactions specified in the Dialog component:

• The dialog can be closed via the close button, a "safe" action, the esc button, or clicking on the background below the frame
  • Transitions should be applied to the Dialog on open and close
• Focus will be placed on the first focusable element in the Dialog when it's opened, then back to the previous location when it's closed
• Users can tab through focusable elements of the Dialog in a loop
• Body content will have overflow-y hidden via scroll when the max-height is exceeded
• Content behind the open dialog cannot scroll

Considerations

• Optionally include any other information important to clarifying the scope, other related tasks that should be created, etc.

Documentation

• Structure: For now, the Dialog will have its own top-level page on the docs site
• Content:
  • A configurable demo where the controls live inside the Dialog so that changes can be seen immediately
  • A basic example
  • An example of a component with different content (eg. body + selects) placed inside a dialog
  • An example with a lot of content to demonstrate the scroll behavior
  • Header:
    • An example with close button
    • An example with back button
    • An example with loading
  • Footer:
    • An example with footer
    • An example without footer (since the footer is optional)
    • An example with 2 or 3 buttons
    • An example with stacked action buttons

---

Acceptance criteria

This task will pass from the designer to the developer once the Figma spec is created.

• A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's version has been added to this task's description.
• The component is implemented in Codex.