Enhance existing Notification (toast message)

[uxkai]

For the in-app review designs in Shopify, we've designed a more advanced toast message notification with action buttons. These buttons should be aligned completely to the right (following our UI patterns in Yoast SEO), below the close icon.

Additionally, for all our current notifications in the UI library, we want to include a 4px margin below the notification title. (based on Tailwind UI notifications)

[igorschoester]

The buttons on the bottom extending all the way to the edge makes it so we have to offer a place outside of the grid container. The inverse of control is needed here to make it flexible enough for these needs. I'm thinking:

• the Notification is then only the Transition
• Notification.Grid, Notification.Grid.Shrink, Notification.Grid.Grow for the grid structure? Tricky one.
• The current components:
  • Notification.ValidationIcon
  • Notification.Title
  • Notification.Description
  • Notication.DismissButton -- or whatever name is more fitting 😅