Skip to content

Change Proposal: Snackbar notification system #332

Description

@zoharma

What is being proposed?

Introduce a snackbar notification system for stacking and queueing multiple notifications (e.g. notistack or an equivalent MUI-compatible library), plus written guidance on when and how to use it.

(was raised by several issues in i15-1/Atlas project)

Why is this needed?

Today the DS only themes MUI's bare Snackbar/Alert (see MuiSnackbar/MuiSnackbarContent/MuiAlert overrides in DiamondDSTheme.ts and the Snackbar story). Each consumer wires its own open state and there's no way to stack or queue multiple notifications, and no guidance on when a snackbar is appropriate versus an inline Alert.

MUI/Material's own guidance recommends showing only one snackbar at a time, but our platform needs to support multiple concurrent, stacked notifications, as seen in systems such as IBM Carbon's notification component.

What will change?

  • Behaviour: adds a SnackbarProvider (or similar) enabling stacking/queueing of multiple notifications
  • Component props or usage: consumers trigger notifications imperatively instead of managing open state themselves
  • New dependency: notistack (or equivalent), themed to match existing MuiAlert/MuiSnackbarContent styling
  • Documentation: usage guidance covering when to use a snackbar vs. inline Alert, severity/variant mapping, duration and placement conventions

Interface changes (if any)

const { enqueueSnackbar } = useSnackbar();
enqueueSnackbar("Saved", { variant: "success" });

Breaking change?

  • No

Next steps

A maintainer will review this issue.
If accepted, it will be marked as accepted and a PR may then be opened.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs-triageThis issue needs to be categorised. E.g. accepted, duplicate, wont-do

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions