Toast Alerts

[joepavitt]

Dependent upon: FlowFuse/forge-ui-components#24

first half of #515 (see this issue for a screen recording demo)

[joepavitt]

Expecting build to fail at the moment (PR still in draft state) as I'm still referencing my local forge-ui-components in the package json

[joepavitt]

@knolleary this seems like a big PR, but it's mostly just the injection of alerts.emit() in relevant places.

The guts of the architecture can be found in:

• frontend/src/layouts/Platform.vue - where I'm subscribing to any event emits and showing the toast notifications accordingly.
• frontend/src/stylesheets/layouts.scss - where I'm defining the CSS to position and animate the alerts
• frontend/src/services/alerts.js - which contains a simple sub/pub controller

[knolleary]

The basic mechanism looks good. Not 100% on the appearance yet - but we can refine later.

Would be good to capture some docs on how to use it and guidelines on when to use it. I know there are a bunch of actions being added in my various PRs that'll merge over the coming days before 0.7 that will need updating to incorporate it.

[joepavitt]

Thanks @knolleary - actually agree on the appearance. I went for the generic toast appearance just to get something in, but it does feel out of place with the rest of the UI which I find a lot cleaner/slicker. Will happily iterate.

All available in Figma if you did want to play yourself too.

[joepavitt]

RE: Docs - I have been thinking quite a bit about this, and in particular, where that should live. I feel like a natural home is actually the handbook under a "Design Language" section? Doesn't quite feel right in forge-ui-components as it's about more than just the raw Vue components.