Skip to content

✨ Add Toast notification component#14

Merged
damienlagae merged 1 commit into
mainfrom
feat/toast-component
Apr 27, 2026
Merged

✨ Add Toast notification component#14
damienlagae merged 1 commit into
mainfrom
feat/toast-component

Conversation

@damienlagae
Copy link
Copy Markdown
Member

Summary

Adds a new Enabel:Ux:Toast Twig component wrapping Bootstrap 5's toast pattern, designed for non-intrusive notifications (flash messages, status updates, async operation results).

Why

The existing Enabel:Ux:Alert component renders an inline alert in the document flow, which is fine for inline forms feedback but not ideal for transient notifications: it pushes content around, doesn't auto-dismiss, doesn't stack natively, and isn't tuned for screen reader politeness levels.

The Toast component renders Bootstrap's native toast markup with the right ARIA attributes and configurable behaviors, so consumers can drop it into a .toast-container and forget about the boilerplate.

API

{{ component('Enabel:Ux:Toast', {
    text: 'Saved successfully',
    type: 'success',
    autohide: true,
    delay: 5000,
    dismissible: true,
    politeness: 'polite',
}) }}
Parameter Type Default
text ?string null
type string 'info'
dismissible bool true
autohide bool true
delay int 5000
politeness string 'polite'

Accessibility

  • role=\"alert\" + aria-live=\"{politeness}\" + aria-atomic=\"true\" on the toast root
  • politeness: 'polite' for non-urgent messages (default), assertive for errors / urgent feedback
  • btn-close-white applied automatically except on warning and light backgrounds (dark text on light fill)

Initialization

Like the native Bootstrap toast, the component renders the markup but does not display it. Bootstrap's JS must be invoked to show it. The doc includes a one-method Stimulus controller covering all toasts inside a container:

import { Controller } from '@hotwired/stimulus';
import { Toast } from 'bootstrap';

export default class extends Controller {
    connect() {
        this.element.querySelectorAll('.toast').forEach(el => {
            Toast.getOrCreateInstance(el).show();
        });
    }
}

Test plan

  • PHPUnit (full suite green: 195 tests, 547 assertions — 10 new tests for Toast)
  • PHPStan level 8 — no errors
  • PHP-CS-Fixer (`@Symfony` + `:risky`) — no violations
  • Visual smoke test in a consumer project (success/danger/warning/info, auto-hide, dismiss button color, multiple toasts stacking, content block override)

Notes

  • New component, no breaking change.
  • Documentation added at `docs/Toast/toast.md` and linked from `docs/index.md`.
  • A follow-up could ship a Stimulus controller in the bundle (similar to Modal's `assets/dist/modal.js`) so consumers don't have to write the show/init themselves. Kept out of this PR to keep it focused on the Twig component.

Introduce a Bootstrap 5 toast component for non-intrusive notifications
(flash messages, status updates).

Features:
- Bootstrap color types: primary, secondary, success, danger, warning,
  info, light, dark (mapped via `text-bg-*`)
- Optional dismiss button, with `btn-close-white` applied automatically
  except on light backgrounds (warning, light)
- Configurable auto-hide via Bootstrap's `data-bs-autohide` and
  `data-bs-delay` (default 5s)
- Configurable `politeness` (`polite` or `assertive`) mapped to
  `aria-live` so consumers can pick the appropriate level for
  non-urgent confirmations vs urgent errors
- Renders the markup only — Bootstrap's toast must be initialized
  client-side, exactly like the native Bootstrap toast. Documentation
  includes a Stimulus snippet covering all toasts inside a container
@damienlagae damienlagae merged commit 52c3ce6 into main Apr 27, 2026
7 checks passed
@damienlagae damienlagae deleted the feat/toast-component branch April 27, 2026 19:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant