Related Pages: Message Popups, DialogsLead:  Related Pages: Message Popups, Dialogs

Lead:  Liav Nadler 

Description

A popup is a window that which appears over the main displayprimary screen. It usually appears on user's action (e.g. clicking help icon) and as a result of a user action, such as clicking a help icon. A popup must be dismissed by the user before returning to the parent applicationprimary screen.

Types

Type	Usage	Example
Message Popups	Display To display warnings, error messages and important information.
Dialogs	Collect To collect information from users or allowing the user, or to allow them to make decisions.

Usage &

...

Behavior

General guidelines

Structure

A popup window may contain

...

:

• A colored header, including:

  • a title and .

  • a close button (X).

• A content area, which may contain text, inputs and controls

  A

  .

• Buttons, including:

  • a primary action button.

  • A a secondary action button, if relevant.

  • Other other action buttons, if relevant.

The popup appears over a semi-transparent background.

Placement and Positioning

...

• The popup is centered horizontally on the screen.

• The popup appears at 2/3 height of the screen.

• The user will be able to move the popup across around the screen.

• The user cannot change the width or height of a popup window.

...

Content

• The popup header may contain a hard-coded text, a dynamic field, or a combination of both

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

• 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

...

• .

Interaction

• A popup window usually appears as a results of a user action, such as clicking a button, icon, or link.

• The popup can be dismissed by either clicking the close (X) button, or by clicking the primary or secondary action buttons.

• For interactions within dialog boxes see Dialogs.

Validations and errors

• Message popups do not require special validations.

• See Dialogs for information on validations and errors for dialog popups.

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

• Do not use a large amount of content, and keep text concise. Where a lot of content is needed, consider using another pattern.

• Avoid nested popups.

Accessibility compliance

Follow the Accessibility guidelines, especially:

• Keyboard & Focus Management Guidelines

• Screen Reader Guidelines

• Contrast + Font Size Guidelines

Design

...