Related Pages: Message Popup, Dialog

Lead:  Liav Nadler ONGOING

Description

A popup is a window that forces the user to interact with it before they can go back to using the parent application

Types

Usage & Behaviour

General guidelines

Structure

• A popup window may contain these elements:
  • A colored header, including a title and a close button (X)
  • A content area, which may contain text, inputs and controls
  • A primary action button
  • A secondary action button, if relevant
  • Other action buttons, if relevant

• The popup header may contain a hard-coded text, a dynamic field or a combination of both
• The popup appears over a semi-transparent background
• The user cannot resize the width or height of a popup window

Positioning

• The popup is centered horizontally on the screen
• The popup appears at 3/4 height of the screen (TBD)
• The user will be able to move the popup across the screen

Interaction

• A popup window appears on users' action, usually clicking a button, icon or link
• The popup can be dismissed by either clicking the X button or by clicking the primary or secondary action button. Clicking outside the window?
• For interactions within dialog boxes see Dialogs

Validations and errors

• Message popups do not involve special validations.
• For validations and errors within dialog windows see Dialogs

Transitions

• The semi-transparent background will appear and disappear with a fade effect (TBD)
• The popup window itself will appear and disappear with a slide down / slide up effect (TBD)

Best practices

• A popup window should carry a limited amount of content. If the content you wish to display is too extensive consider using another pattern
• Avoid nested popups

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Code