[joy-ui] Add Snackbar component

[ZeeshanTamboli]

• I have followed (at least) the PR section of the contributing guide.

Closes #36603

Preview - https://deploy-preview-38801--material-ui.netlify.app/joy-ui/react-snackbar/

---

TODO:

• Add tests.

[mui-bot]

Netlify deploy preview

• docs/data/joy/components/snackbar/snackbar.md

@mui/joy: parsed: +1.93% , gzip: +1.75%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 42f0ebb

[siriwatknp]

👍 Thanks @ZeeshanTamboli

[mnajdova]

The component looks great. Few points for improving the demos:

• The solid variant on the playground does not look good without setting the invariant color prop. Should we have default true for it? How do we teach people that this is the recommendation? cc @siriwatknp

  

• The colors demo is too distracting. I would show the default variant only, we have the playground for the combination of the props. Once we have the stacking as a feature we can show them all stacked.

• On the hide duration, I would decrease the counter by a bigger step

[siriwatknp]

The component looks great. Few points for improving the demos:

• The solid variant on the playground does not look good without setting the invariant color prop. Should we have default true for it? How do we teach people that this is the recommendation? cc @siriwatknp
  
• The colors demo is too distracting. I would show the default variant only, we have the playground for the combination of the props. Once we have the stacking as a feature we can show them all stacked.
• On the hide duration, I would decrease the counter by a bigger step

I would leave the first point as is because applying color inversion by default could be too magical for some people and it is not efficient with zero-runtime in the future. We should let developers compose this feature by themselves.

Agree with the rest!

[zanivan]

I would leave the first point as is because applying color inversion by default could be too magical for some people and it is not efficient with zero-runtime in the future. We should let developers compose this feature by themselves.

Then, IMO it's important to make this explicit in the docs—maybe on the inverted colors' demo. Otherwise, it'll look off, and might be mistaken for a bug.

[mnajdova]

Then, IMO it's important to make this explicit in the docs—maybe on the inverted colors' demo. Otherwise, it'll look off, and might be mistaken for a bug.

+1, if we don't plan to fix this (which I disagree with), we should remove this solid variant from the playground. It doesn't make sense to show a broken demo regardless of what are the technical limitations.

[siriwatknp]

@mnajdova @zanivan I removed the inverted colors from the playground and updated the content to look good in all variants. Also, make bottom-right as the default position of the snackbar.

Ready for the last review.

[ZeeshanTamboli]

I made the open prop required after noticing the upvote in #38801 (comment).

---

On the hide duration, I would decrease the counter by a bigger step

Agreed. Decremented the duration counter by 100ms instead of 16ms.

Ready for review!

[zanivan]

Design-wise looks great! 🚀

[mnajdova]

Great contributon @ZeeshanTamboli! Thank you 🙏

[oliviertassinari]

It's great to see one more component in Joy UI.

One thing I noticed from a design perspective that feels off is the distance to the edge of the screen. Feedback added to https://www.notion.so/mui-org/Olivier-design-review-on-Joy-Design-3ada9a7bcfa44b9fab1fe5032dfb33bb?pvs=4#559b0978badf4daba4af9aa712bb1fea.

(Eventually, I think we should move all of this document to GitHub issues, there might be ~100 design GitHub issues to create, if we want to go very granular 😁)

[zanivan]

One thing I noticed from a design perspective that feels off is the distance to the edge of the screen

Agreed! I'll take a look on it!

(Eventually, I think we should move all of this document to GitHub issues, there might be ~100 design GitHub issues to create, if we want to go very granular 😁)

I'll revisit the file and double check those items. We've already dealt with or thrown away many of those, but there's definitely a lot of feedback that we could turn into issues! For instance, this feedback about tabs fits perfectly with what we're trying to do on #39363 😁