Implementation guidelines for Alerts (Positioning, Fullwidth & Sticky)
Context: This is from a newly created account (via Google Social Sign-on) that does not have an account password set and no SSH Key.
Problem
Whilst testing I noticed that alerts were in some cases slightly inconsistent. I also don't think we have any implementation guidelines regarding Alerts which covesrs where they should be placed and if they should be fullwidth. Also, whether or not they are above or below breadcrumbs on pages that incorporate them.
My understanding is that Only Flash notifications are currently sticky and we could also define this in Pajamas. I'm wondering if we have Flash notifications defined anywhere?
P.s. Anchors in Alerts is almost ready for merging
Proposal
Here are some of my initial thoughts:
-
Where they should be placed:
-
Global alerts
(i.e. password, 2FA etc): Positioned above any page breadcrumb and full-width. -
Section / Page alerts
: Positioned below any page breadcrumbs and not full-width (within page container).
-
-
When they should be sticky:
- All Flash notifications should be sticky, below any breadcrumbs and not full-width.
Designs
I've reworked the above scenario into 3 versions using our current Alert spec based on my proposal above.
Feedback
Would love to get your opinions and thoughts on the proposal. My hope is that this discussion leads to the updating of the Alerts component docs for better understanding.
cc @gitlab-com/gitlab-ux @andyvolpe @tauriedavis @jeldergl