Unify Alert, Broadcast message and error-banner styles and structure
Problem
Today we have 3 unique designs for alerts, broadcast messages, and error-banners. We should unify these components in how they look and how they can be constructed. By doing this we can reduce the pattern and code management of these components and provide a consistent aesthetic and experience to our users when we need to notify them.
Note: Toasts have been left out for the time being.
They could adopt this style but I wanted to focus the conversation on these components for now. Solution
Variants
Proposed structure
- Icon: always present and representational of the type of notification being shown to user
- Title: (Optional) may serve as a header to a formatted message in the container
- Message: (Required)
- Quick action- dismiss: Present when we want to allow the user to dismiss the notification
- Quick action- remind me later: gitlab-org/gitlab-services/design.gitlab.com#406 (closed) (open discussion)
- Primary & secondary action (optional): a way to provide a button to interact with if required.
Goals:
- Reduce management of 3 components by treating them like styles for one component
- Addresses: gitlab-org/gitlab-services/design.gitlab.com#406 (closed) (Remind later function) by adding a quick action area that can expand
Open questions:
- Is this a desirable approach?
- Do we foresee any conflicts?
- Are the proposed designs the aesthetic direction we want to take?
Decisions:
Dismiss action:
- Should remain as the x icon to account for internationalization. See comment
Ordering guidelines and definition
- Needed. Will create an issue to discuss further once the conversation matures. See thread
Primary & secondary action styling:
- Needed. [Issue]-(link) to discuss a default primary and secondary button style to use in alerts. See comment
Edited by Andy Volpe