Alert > Add option for full width/sticky

Purpose

The design specs for alerts include an error variant that has the same visual properties as danger, but has unique behavior. The following capabilities need to be added:

• The error alert should be positioned below the navigation and above breadcrumbs and sticky on scroll.
• The error alert should be the full width of the parent container, but the content within centered after max-width is reached to have a comfortable line-length.

---

Original issue notes

• Original alert issue: #454 (closed)
• Epic: Pajamas component: &994 (closed)
• Component's specifications: https://design.gitlab.com/components/alert/
• Sketch measurements: https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/alerts-spec-previews/

Note

• The error banner is the only variant that is sticky; it can appear at the top of the viewport at any stage in the app
• border-radius: 4px
• box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25)
• Implemented into gitlab.com gitlab!14797 (merged)