Skip to content

Add standard component for notifications (BBBToast) #72

Description

@Arthurk12

Is your feature request related to a problem? Please describe.
bigbluebutton-html5 has its own hand-rolled toast notification implementation (imports/ui/services/notification + imports/ui/components/common/toast, on top of react-toastify) that isn't part of this shared component library. It's used in 44+ files across the client (errors, status changes, chat push alerts, recording/breakout/screenshare notices, plugin-triggered notifications, etc.), so it's a core, high-reuse UI primitive that belongs here instead of being duplicated/reimplemented per consuming app.

Describe the solution you'd like
A BBBToast component (the presentational notification card) with a props surface derived from every current call site in bigbluebutton-html5:

Property Type Default Description
message React.ReactNode — Primary text/title of the notification.
type 'default' | 'info' | 'success' | 'warning' | 'error' 'default' Visual variant; drives the default icon and color.
icon React.ReactNode | string | false icon matched to type Custom icon, or false to hide it entirely.
content React.ReactNode — Optional secondary content (description, links, action buttons) shown below a separator.
showSeparator boolean true Shows/hides the divider between message and content.
small boolean false Compact variant for space-constrained placements.
disablePointer boolean true Whether the toast shows a pointer cursor (i.e. reads as clickable).
onClick () => void — Click handler for the whole toast (e.g. open a related chat/panel).
actionLabel string — Label for an optional secondary action button rendered in the toast.
onActionClick () => void — Handler for the action button (current impl only supports opening a URL via helpLink/helpLabel; generalizing to a callback is recommended).
autoClose number | false 5000 Auto-dismiss delay in ms, or false to persist until manually dismissed.
closeButton boolean true Shows/hides the close (X) button.
onRequestClose () => void — Callback fired when the toast is dismissed.
id string auto-generated Custom id, for de-duplication or programmatically updating/dismissing a specific toast.

Describe alternatives you've considered
Keeping the toast logic duplicated in each consuming app (current state) — leads to visual drift between BBB's own client and other apps built on this component library.

Affected component(s)
New component: BBBToast.
Proposed API / Usage Example

import { BBBToast } from '@bigbluebutton/bbb-ui-components-react';

<BBBToast
  type="warning"
  message="You are muted"
  content="Click to unmute"
  autoClose={5000}
  onClick={() => unmute()}
/>

Screenshots or mockups

Image

Additional context

  • Current implementation reference: bigbluebutton-html5/imports/ui/services/notification/index.js and bigbluebutton-html5/imports/ui/components/common/toast/component.jsx.
  • The BBB plugin SDK already exposes an equivalent, stable public contract for third-party plugins (bigbluebutton-html-plugin-sdk's SendNotificationCommandArguments: message, icon, type, options: { helpLabel, helpLink, autoClose }, content, small), which is a good cross-check for the prop set above.
  • bigbluebutton-html5 currently depends on react-toastify for stacking/positioning/auto-dismiss; worth deciding whether BBBToast should stay presentation-only (consumer wires up their own toast engine, like BBBModal does with open/onRequestClose) or whether the library should also ship a toast-engine/container.

Activity

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

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions