[Alert] Add new component

[dimitropoulos]

relevant PR: #18702

I am happy to contribute this component. I am making this issue to determine interest and discuss the scope of the component.

This issue is to track the development in an Alert component. This component provides contextual feedback messages for typical user actions.

• I have searched the issues of this repository and believe that this is not a duplicate.
  • This is distinct from a snackbar as mentioned in Bootstrap style alerts #15513.

Summary 💡

This component provides contextual feedback messages when you need a persistent static container which is closable by user actions or when you need to show alert messages to users.

Examples 🌈

Many libraries have implementations of this:

• AntD's Alert Component
• Bootstrap's Alert
• reactstrap's Alert Component
• Evergreen's Alert Component
• PrimeReact's Alert Component
• Elemental UI's Alert Component
• react-bootstrap's Alert Component
• Weaveworks UI Components' Alert Component
• Zendesk Gardens' Alert Component
• Bootstrap View's Alert Component
• Orbit's Alert Component
• Element's Alert Component
• Smooth Code's Alert Component
• Sancho-UI's Alert Component
• Base Web's Notification Component
• RSuite JS's Message Component
• Shopify's Banner Component
• Salesforce's Alert Component

Motivation 🔦

As with the examples above, I have used such a component before in 3 of the above mentioned solutions and find it missing in material-ui.

[oliviertassinari]

@dimitropoulos This would be great! I have kept a small list of implementations I have seen over the last few months: https://trello.com/c/hMM2R1uh/1893-alert-component.

[dimitropoulos]

Great! Then I'll start scoping out the API and features we would want to target. Thankfully there's a good deal to draw on! Once we agree on the general approach for things I will get started on the code.

[oliviertassinari]

@dimitropoulos Great, I have searched a bit some for more benchmark sources:

• for the accessibility part, I would recommend having a look at https://www.w3.org/TR/wai-aria-practices/#alert and https://ui.reach.tech/alert if not enough.
• for the API part, I would recommend having a look at https://chakra-ui.com/alert, https://sancho-ui.com/components/alert/, https://auth0-cosmos.now.sh/docs/#/component/alert, https://react-bootstrap.github.io/components/alerts
• for the feature part, I would recommend having a look at https://ant.design/components/alert/, https://orbit.kiwi/components/alert-message/, https://evergreen.segment.com/components/alert
• for the UI part, I would recommend having a look at https://developers.google.com/web/tools/workbox/guides/using-bundlers, https://vuetifyjs.com/en/components/alerts#alerts, https://dribbble.com/shots/6472915-Flash-Message-Daily-UI-Challenge-011/attachments, https://dribbble.com/shots/7874860-Alerts-UI-design

[r3dm1ke]

Hi, I just wanted to ask if @dimitropoulos are you still working on it, or I could give it a go?

[oliviertassinari]

Note that the banner component in the Material Design specification is very close to this use case, I think that it's more important to have a solid Alert, but it could be interested to have some sort of an extended support for this component.

[dimitropoulos]

I have some work I did on it, but never pushed it up. @r3dm1ke would you like to work on it together? I'll push what I had now. It took me quite a long time to figure out just how to get the basic moving pieces into the codebase to have a place to start.

[r3dm1ke]

@dimitropoulos That would be awesome, I am just not sure how to work together on the same pull request at the same time. Perhaps we need to split it into two based on what you have already completed (like api/tests/docs etc.)? @oliviertassinari do you have any insights?

[dimitropoulos]

see: #18702

I basically did a lot of the gruntwork associated with just getting the minimal set of things included. I'd be more than happy for you to pick it up and do whatever you wish from here if you'd be alright with me chipping in a few commits as you go. It was much more work than I was anticipating to get the above commit just because of a lack of familiarity with the codebase. That said, I'd really like to get to a point where I can contribute valuable features (such as this) to this project, so if you could lead the way, it would give me a better idea of how development on this project works in practice.

Either way: I'm totally cool with whatever. :)