Inline notification

Inline notification in Storybook

note

The @jutro/router dependency and its peer dependencies like history and react-router-dom are now optional for component packages. However, the InlineNotification component requires the dependency to be added to your app dependencies in order to be used.

Examples

Check out the Usage section for details about how to design an inline notification properly, and the different configuration options we provide.

Basic Example

This is a simple example showing an inline notification message that runs a function when you dismiss the notification.

<InlineNotification
  message="Message"
  messageProps={{
    success: 'Hello',
  }}
  onClosed={function () {
    console.log('Closed');
  }}
  isDismissable={false}
  type="success"
/>

Include a link

By using the linkProp property, it is possible to add a specific link at the end of the notification text.

<InlineNotification
  message="Message"
  messageProps={{
    warning: 'Hello',
  }}
  linkProps={{
    children: 'More Details',
    to: '/inline-notification',
  }}
  isDismissable={false}
  type="warning"
/>

Bundle Notification

InlineNotification component provides a mechanism to display a bundle with multiple messages. The type of object received by the message prop is used to decide the display option: single message or bundle.

In bundle module, the notification style will be decided by message with the type with the highest severity: error, warning, success and info. The bundle displays all the messages received by the component, grouping them by type.

<InlineNotification
  message={{
    error: {
      MyField: [
        {
          fieldId: 'MyField1',
          message: 'This is a required field',
          type: 'error',
        },
      ],
      AnotherField: [
        {
          fieldId: 'MyField2',
          message: 'Value is below minimum allowed',
          type: 'error',
        },
      ],
    },
    info: {
      'Process due date': [
        { message: 'The process due date is on 7 days', type: 'info' },
      ],
    },
    success: {
      'Claim data loaded': [
        {
          message: 'Claim information successfully retrieved',
          type: 'success',
        },
      ],
      'Personal details are correct': [
        {
          message: 'Personal information successfully validated',
          type: 'success',
        },
      ],
    },
    warning: {
      'Address not found': [
        {
          message:
            'Please review the address details and confim it is correct.',
          type: 'warning',
        },
      ],
      'Validate starting date': [
        {
          message: 'Please confirm that the starting date is correct',
          type: 'warning',
        },
      ],
      'Unable to validate financial details': [
        { message: 'No financial record found', type: 'warning' },
      ],
    },
  }}
  isBundleOpenByDefault={true}
  isDismissable={false}
/>

Usage

Overview

An inline notification gives feedback that is specific to a form, process or a section level action performed by the user. It appears only one at a time, placed near the relevant area of the UI and has the same width as the container. The height of inline messages can grow with content.

These notifications exist until dismissed by the user, until issue(s) resolution, or when the user navigates away from the current page.

Anatomy

Inline notifications are based on the severity of the message.

1. Success messages: indicate a successful operation.

2. Warning messages: indicate potential issues with a task.

3. Error messages: indicate that an operation has encountered errors that prevent the user from progressing to the next stage of a task.

4. General/Neutral Messages: provide helpful information that may aid in task completion or note next steps.

   

Inline notifications consist of the following elements:

1. Icon: provides a visual indication of the message severity.

2. Title: a short text definition of the notification.

3. Description (optional): an optional description of the message. It can contain up to 2 lines of wrapped text.

4. Close button: dismisses the message.

5. Link (optional): enables users to view further details. Can be part of the title text, description text or can be a distinct entity.

Best practices

• Use inline notifications when the feedback is from the current page in view.

• Use inline notifications for instant feedback on a process confirmation (Submit, etc.)

• Never use inline notifications for system level notifications. Use Toasts instead.

• Never stack inline notifications in a way that causes content to be pushed down from view. Use the bundled messages pattern instead, as defined further below in the doc.

Interactions

The inline notifications component has the following accommodations for various usage patterns

1. Bundling alerts of the same severity: when multiple messages of the same severity arise in the app, the messages may be bundled together so that it is easier to scan and act on the messages.

   • Title: gives the number of the alerts and an optional title message.

   • Hide/show control: expands to view messages or collapses from view.

   • Alert position navigation link: indicates where the alert has occurred and gives users the ability to navigate to the trigger.

   • Description: provides contextual information about the message.

2. Bundling alerts of different severities: when multiple messages of different severities arise in the app, the messages may be bundled together so that it is easier to scan and act on the messages.

   • Title: Gives the number of alerts in order of highest priority. For example, if there are 5 errors and 5 warnings, the title should communicate the number of errors found and may include an optional title message.

   • Message toggle: Enables the user to toggle between alert groups. Each toggle contains an icon, which indicates the category of the alert, and the number of messages.

   • Navigation link: indicates where the alert has occurred and gives users the ability to navigate to the trigger.

   • Description: provides contextual information about the message.

Navigation

There are two ways to navigate via inline notifications:

1. Inline links: enable users to navigate to a help document or view further details.

2. Navigation links on messages: give users the ability to navigate to the part of the UI that triggered the message.

UX writing considerations

Inline notification title

• Titles should be short, descriptive, and communicate essential information.

Inline notification description

• In one or two short sentences, explain what actions the user can take to address the issue and provide a path forward.

• The description can include a link that directs users to next steps or enables them to view further details.

note

The @jutro/router dependency and its peer dependencies like history and react-router-dom are now optional for component packages. However, the InlineNotification component requires the dependency to be added to your app dependencies in order to be used.

Code

<InlineNotification
  message="Message"
  messageProps={{
    success: 'Hello',
  }}
  onClosed={function () {
    console.log('Closed');
  }}
  type="success"
/>

Import statement

import { InlineNotification } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

className

Type

string

Description

CSS class passed to root element of the component

isBundleOpenByDefault

Type

bool

Default value

false

Description

If true, the bundled messages card will be open

isDismissable

Type

bool

Default value

true

Description

If true, the dismiss button appears with this component

isEmbeddedNotification

Type

bool

Description

If true, attributes 'aria-hidden' and 'role' will be added

isTooltipEnabled

Type

bool

Description

Enables the tooltip to show a full message

linkProps

Type

Link

Description

Link prop used to navigate the user to an internal or external link. See Link component props for reference.

message

Type

intlMessageShape, bundledMessagesShape

Description

Message or set of messages to be displayed in the case of bundled notifiations.

messageProps

Type

{success: intlMessageShape, warning: intlMessageShape, info: intlMessageShape, error: intlMessageShape, dismiss: intlMessageShape}

Description

Message props (error message/aria-label)

onClosed

Type

func

Description

Function called when the notification disappears

type

Type

'success', 'warning', 'error', 'info'

Description

Defines the severity of the notification. It is used to set the color and appearance of the notification.

iddeprecated

Type

string

Description

Component unique identifier.

Hooks

No hooks are available for InlineNotification.

Translation keys

There are no translations for InlineNotification.

For information on how to manage translations, see our section about Internationalization.

Escape Hatches

For more information, see our documentation about escape hatches.

Changelog

10.1.0

• id prop was deprecated