Design Pattern Library - Error alerts
Problem
Our error banners are currently at the top of the page, so if an error occurs while a user is halfway down the page, they cannot see the banner
Solution
Create a fixed
banner that will appear at the top of the viewport when an error occurs, rather than the top of the page
Example(s)
Gmail | Google docs |
---|---|
Usage
- Error banners should appear when an error occurs
- Error may or may not be derived by a user's action
- Should contain a dismiss button
- Should be fixed to the top of the page
- Shouldn't disappear unless the user dismisses it or refreshes the page (the banner will simply reappear on the page if the error persists)
Dos and dont's
(Use this table to add images and text describing what’s ok and not ok.)
|
|
---|---|
Use errors when an error occurred | Use an error banner when it should be an alert |
Make sure the banner is fixed to the top of the page |
Let it appear anywhere other than in the current viewport |
Related patterns
Alerts- #164 (closed)
Links / references
https://gitlab.com/gitlab-org/gitlab-ce/issues/36765
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that text is created using text styles. When applicable used shared styles for colors. -
QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file) -
Added to gitlab-elements.sketch -
Add to the UX Guide and/or add to the GitLab Design Library -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)
/cc @cperessini @dimitrieh @hazelyang @pedroms @sarrahvesselov @sarahod @tauriedavis