Toast and Growl Notifications with Oracle JET

My colleague Paul Thaden just posted Creating a Popup Message Box for Oracle JET Forms which uses Oracle JET's Offcanvas functionality. While not exactly "toast," that was my first thought when I saw it. I really like the toast/growl notification concept and have been wondering how to add this type of notification to an Oracle JET project. Let's take Paul's work and convert it into a growl-like (or toast) notification complete with timeout. We will start with this modified version of Paul's jsFiddle. This fiddle displays a notification message when you change the selected browser.

Paul already explained the whole inner-wrapper/outer-wrapper thing so I won't repeat it here. Mainly I want to focus on styling the oj-offcanvas-top element (named toast) so that it floats on the right side of the page and then disappears after a specified period of time. Here is the only CSS we need:

#toast {
  /* Make the message look pretty */
  border: 1px solid #0572ce;
  box-shadow: 0 1px 3px #777;
 
  /* set the location of the toast message */
  left: auto;
  right: 10px;
  width: 200px;

  /* z-index required to overlay oj form controls */
  z-index: 1;
}

Next we refactor the ojSelect optionChange event handler from the prior jsFiddle to close the notification message after a specified interval:

var closeToast = function() {
  return oj.OffcanvasUtils.close(toastOptions);
};

self.browserChangedHandler = function (event, data) {
  if (data.option == "value") {
    oj.OffcanvasUtils.open(toastOptions);
    window.setTimeout(closeToast, 5*1000);
  }
};

Here is the jsFiddle example. Select a browser and watch the message appear and then disappear.

That is nice for a "Transaction saved" type of message, but let's get dramatic and make this look like a real growl notification. With a little bit of CSS, we can turn that Offcanvas notification into something like this:

And here is the jsFiddle: