Description

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

A popup window can be used to either display important messages, collect information or allow users to make decisions

Types

Type	Usage	For more information
Popup messages	Display warnings, error messages and important information	See Popup Messages
Dialogs	Collect information from users or allowing them to make decisions	See Dialogs

Usage & Behaviour

A popup window appears on users' action, usually clicking a button, icon or link
The popup appears over a semi-transparent background
The popup is centered horizontally and vertically on the screen
The user cannot move the popup across the screen
The popup can be dismissed by either clicking the X button or by clicking the primary or secondary action button
The semi-transparent background appears and disappears with a fade effect (TBD)
The popup window itself appears and disappears with a slide down / slide up effect (TBD)

General guidelines

<<describes the component, use sub-section when they are relevant to the components>>

Example for heading in general

<<use heading 3>>

Text (Headings, labels, microcopty, help text Etc..) ( how to write microcopy for that component. For example, in lists the list items must be grammatically parallel and don’t mix active and passive voice etc)
Format / structure (describe the objects the component is made of and are optional e.g. search bar in a table) (for search component include - variations, results)(for tabs - Number of tabs)
Content (for example, in dropdowns and lists)
Length (e.g. length of list)
Order (e.g. order of drop down menu)
Placement or Positioning (when this is important, e.g. toast message)
Internal Logic (when explaining how to use different components inside the current component. For example, when to use radio buttons, checkboxes, and fields in a form)
Default section or Default values

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Best practices

<<e.g. Slider should display a .label its on>>

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

Zeplin link	Screen thumbnail
<<Zeplin Link>>	<<Screen with 200 width>>

Code

<<a box containing the code - discuss with Femi>>

Popups