Implement Alert according to Pajamas
- Epic: Pajamas component: Alerts - Build
- 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/
Preview
Key points
- The dismiss button (
x
) is optional - At a later stage, we might add additional actions next to the
x
, ie: gitlab-design#626 (closed) (no need to worry about this for now but let's keep it in mind while building the component) - The alert should always contain an icon representing its type
- Error: https://gitlab-org.gitlab.io/gitlab-svgs/?q=~error
- Warning: https://gitlab-org.gitlab.io/gitlab-svgs/?q=~warning
- Information: https://gitlab-org.gitlab.io/gitlab-svgs/?q=~information-o
- Success: https://gitlab-org.gitlab.io/gitlab-svgs/?q=~status_success
- Tip: https://gitlab-org.gitlab.io/gitlab-svgs/?q=~bulb
- Alert icon: Always center-aligned (vertically) with the first line in the alert, paragraph or title.
/cc @andyvolpe
Edited by Paul Gascou-Vaillancourt