Versions Compared

Version Old Version 4 New Version 5
Changes made by

Liav Nadler

Liav Nadler

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Related Pages: Popups, Message Popup


Lead:  Liav Nadler 

Status
colourYellow
titleongoing

Table of Contents

Description

  • A dialog is a popup window, allowing the user to enter information or make decisions
  • In addition to the basic elements of a popup window, a dialog may contain:Form contains any set of form components, such as radio buttons, checkboxes, dropdown menus etc.
  • A help icon (question mark) may appear next to the closing icon on the dialog's header, allowing the user to get help about the current popup. How does it open?

Usage & Behaviour

General guidelines

  • For basic popup usage and behaviour see popup
Expand
titleExample 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 basic popup interaction see Popups
  • popups
  • Dialogs may come in different widths and height. The width of a dialog is always fixed. In some cases the height of a dialog depends on values the user enters or error messages (see field validation)

Interaction

Validations and errors

Best practices

...

  • Keep the dialog content as short as possible. A dialog may include several tabs, search component or drag and drop capabilities but you should avoid scrolling for the entire dialog

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>>

...