[SnackBar] Port Component

[stunaz]

• Component
• Tests (at least unit tests)
• Demo
• Docs
• accessibility, useful link [Snackbar] Add describedby and role to snackbar to support assistive technologies #6651 #

First attempts that are closed form beeing finished:

• [Snackbar] Port to next #6356
• [Snackbar] Port to next #6356 (comment)

[oliviertassinari]

@stunaz Thanks for opening this issue. @Shahrukh-Zindani plan to start with this one.
This is how I would move forward with the migration. Any feedback is welcomed. We should be able to close all the issues related to that component with not too much pain 😄 .

API

• [Snackbar] Make composable #2835: I would split the component into two composable components with different responsibilities.
• [Proposal] Stateless Material-UI #2784: The first component would be the simplest one, a stateless component with only pure functions. The API will contain at least:

/**
 * Fired when the `SnackBar` is requested to be closed by a click outside it.
 */
onRequestClose: PropTypes.func,
/**
 * Controls whether the SnackBar is opened or not.
 */
open: PropTypes.bool.isRequired,

• [Snackbar] Delay from closing if hovered #5218, [Snackbar] Reopens when message prop is an element #3186: The second one would be optional and here to implement some stateful logic. For instance, handling how much time a message can be displayed and how the component behave when the message property change. The logic we have on the master branch is quite good.
  [Snackbar] Reopens when message prop is an element #3186 would be addressed by the split between the two concerns and [Snackbar] Delay from closing if hovered #5218 is an awesome feature. It saves my life many times with Google Keep.

Implementation

• I think that we should keep using the <ClickAwayListener /> helper. Even gaearon tweeted about it. It's a nice helper.
• I would be using a media query over the withWidth Higher-order Component.
• [Snackbar] Add multiline support #3860, [Snackbar] Action disappears if message is too long #2826: I wouldn't hard code the height but rather use the bottom: -50% trick for positioning the SnackBar.

[justinmasse]

Any news on the progress of porting this to the next branch? Need something like it for a current project and just trying to figure out if I should code a quick solution for it in the meantime.

[mbrookes]

@justinmasse There were two good starts made (see the initial issue comment), so if you'd like to take the best of both, a PR would be very welcome!