...
...
...
...
...
...
...
...
...
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>>
...
...
Usage & Behaviour
<<use a visual for each sub-section>>
General guidelines
<<describes the component, use sub-section when they are relevant to the components>>
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
...
Types
Type | Usage | Example | Color |
|---|---|---|---|
| Info | General information about the action |
| Blue |
| Success | Action completed successfully |
| Green |
| Warning | Action caused or may cause a problem |
| Orange |
| Failure | Action not allowed or failed to complete |
| Red |
| Continuous Action | An action that takes more than 3 seconds (exact duration TBD) |
| Blue |
Usage & Behaviour
General guidelines
Interaction
- The user can dismiss the popup in one of three ways:
- Clicking the X icon on the upper-right corner
- Clicking the Ok button
- Clicking anywhere outside the popup
Validations and errors
N/A
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>>