Allow notifications to accept a title, body, and CTA

Proposal

I’m proposing a change to the Notification component to allow rendering a title, body, and a CTA.

Approaches

Currently, the Notification component is called like so:

Notification.success('Text content of notification (string)', {
  duration: 6000 (int)
  canClose: true (boolean)
})

I can think of two approaches to achieve this:

1. Change the text to accept any node

Example usage:

const message = (
  <React.Fragment>
    <Heading>Notification title</Heading>
    <Paragraph>Some notification body copy</Paragraph>
    <TextLink href="#">Some CTA</TextLink>
  </React.Fragment>
);

Notification.success(message, {
  duration: 6000 (int)
  canClose: true (boolean)
})

Pros:

• Minimal changes required
• Uses exactly the same API to render content as before

Cons:

• Could end up with many different variations
• Need to refer to an example to know how to best construct message (could create NotificationTitle/NotificationBody/NotificationCta components though)

2. Add explicit props

Example usage:

const message = (
Notification.success('Body text content of notification (string)', {
  title: 'Message title' (string),
  cta: {
    label: 'CTA title (string)',
    action: '() => {blah} (function)'
  }
  duration: 6000 (int)
  canClose: true (boolean)
})

Pros:

• Complete control over how component renders
• TypeScript will show API usage hints

Cons:

• Slightly confusing API (mix of strinng for body and settings object for title and CTA)
• Slightly more involved changes needed

[suevalov]

FYI, all notifications methods are exposed to UI Extension SDK so we shouldn’t do breaking changes.

What about the following:

Notification.success('Hello world!', {
  render: ({ message, onClose }) => (
     <div><h1>{message}</h1><button onClick={onClick}>CLOSE ME!</button></div>
  )
})

[m10l]

@burakukula Thanks for taking a look, I’m leaning towards option 2 too as it’s a bit more foolproof

@gui-santos This would be a lot nicer, but, if we broke the current API where you pass a string and an options object it would be a breaking change. Could possibly add it as an option in the options object too though