Provide useNotification hook

[tay1orjones]

We offer a variety of notification styles but unfortunately leave much of the animation and logic around display notifications to the end-user. We would like to codify this behavior/logic into a single hook, useNotification, that would encapsulate this behavior and make it easier for product teams to display/render notifications in their UI. This may look like:

function MyComponent() {
  const send = useNotification();

  function sendNotification() {
    send({ title: 'This is the notification title' });
  }

  return <button type="button" onClick={sendNotification}>Send test notification</button>;
}

Packages impacted

• @carbon/react

Acceptance Criteria

#8405 (comment)

[tay1orjones]

A few additional opportunities to look into with this:

1. Improve the "escape to close" functionality proposed in refactor(notification): improve accessibility #8560

   • Regarding multiple/stacked notifications, this hook could assist in keeping track of how many notifications have been rendered, and how to close them in order of appearance using esc.

2. Keyboard navigation improvements

   • It would also be beneficial if focus could be handled to move from one notifcation to the next and also when closed via esc or the close button. The hook could potentially inform tab order.

3. Notification Panel interop

   • Could this hook can assist with the development of the notification panel pattern by sending notification data to a central store when a notification is sent via the hook?

[johnbister]

Here’s a rough pass on how multiple inline notifications could stack and be dismissed. I kept it simple for now to make sure we like the overall mechanics.

@mjabbink @jeanservaas @tay1orjones Let me know if you have any feedback I should take into the next pass. Thanks!

notification-stack.mp4

[johnbister]

I’m hoping to get some design feedback before moving forward. Let me know if you have any thoughts @jeanservaas @kingtraceyj

We might want to limit how many notifications are visible in the stack at a time. We could accomplish this by some kind of gradient on the maximum oldest notification being displayed. As newer notifications are dismissed, older ones become visible.

STACK.HIDDEN.mp4

Also, for any notifications that timeout by default (might be more relevant to the toast notifications) we could show the user that this notification will dismiss automatically by using the thick stroke on the left as a timer.

NOTIFICATION.TIMEOUT.mp4

[mjabbink]

I mentioned before but I did not her a response. The toolbar and button above the accordion rows also be the same height as the accordion rows? That is at least what the primary intent should be.

[johnbister]

Thanks Mike. Yes, the data table should have the 48px toolbar. This was just from an example I found in sketch to help explore how multiple notifications interact. I can make the toolbar change if it's too distracting, but I'm focused on tackling the notification issue.

[mjabbink]

@johnbister

I like the updates you've done. I think the fade gradient can work and wonder what @jeanservaas thinks on the details of the gradient?

I like the addition of a taller notification in the stack to see what that looks like

I also think timeout bar is cool.

[abbeyhrt]

Just a quick update:

We removed closeOnEscape from InlineNotification and ToastNotification. The workaround that was added so that all notifications weren't closed on escape had to be removed due to accessibility concerns with the close button. Due to this, the below notes definitely need to be addressed in Toast and Inline so we can bring back the closeOnEscape prop!

1. Improve the "escape to close" functionality proposed in refactor(notification): improve accessibility #8560

   • Regarding multiple/stacked notifications, this hook could assist in keeping track of how many notifications have been rendered, and how to close them in order of appearance using esc.

2. Keyboard navigation improvements

   • It would also be beneficial if focus could be handled to move from one notifcation to the next and also when closed via esc or the close button. The hook could potentially inform tab order.

[tay1orjones]

An additional requirement for this is that it would ideally respect the user's prefers-reduced-motion setting. We might need to consider how the animations would or would not be different or there at all when a user prefers reduced motion.

[cgirani]

Component from MAS Core team presented using the spec from carbon

• Component storybook

ToastNotification.mov

Initial code implementation can be seen here

[dstran]

Any thoughts of when this will be available for use, even in a pre-release version? Note that I cannot see the code. Thank you for the amazing work!

[cgirani]

Hi @dstran I'm working on this, should have some initial code for carbon team to review soon