Lead: Liav NadlerONGOING

Description

A toast is a small message box that appears in response to a user's action. It contains a simple feedback about the action, while any current activity remains visible and interactive.

A toast may be closed by the user or disappear automatically after few seconds (see below).

Format

A toast may contain the following elements:

A relevant icon (optional), e.g. confirmation, warning etc.
A loader, in case of a continuous action (optional)
Text, e.g. Item deleted
Action button (optional), e.g. Undo
Close button (optional, see below)

Types

Type	Usage	Position	Behaviour	Leading Color	Disappears Automatically
Standard	General information about the action	Bottom of the screen, centered	Appearing from the bottom	Blue	After 5 seconds
Confirmation	Success message after completing an action	Top of the screen, centered	Appearing from the top	Green	After 5 seconds
Warning	Failure to complete the action	Top of the screen, centered	Appearing from the top	Red	Requires user action

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

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

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

While the toast is shown any current activity remains visible and interactive

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

Toast