Skip to end of banner
Go to start of banner

Message Popups

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

Version 1 Next »

Lead:  Liav Nadler  ONGOING


Description

A message popup is a small modal window containing a warning, error message or any other important information

It appears on user action and must be dismissed by the user before he can go back to using the parent application

Types 

<<use this section only if the component has several types that each requires its own page e.g. table, collapsable table>>

<<If you are using this section, then Usage & Behaviour should be used only for the Common functionalities in the page>>

Type
Usage




Usage & Behaviour

<<use a visual for each sub-section>>

General guidelines

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

 Example for heading in general


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

<<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 Keyboard & Focus Management Guidelines >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design

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


Code

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

  • No labels