Toast alert

[kptdobe]

(following up toast discussion in #2291)

The doc site has an spAlert implementation leveraging the sp-toast component, visible for example on the button doc page (click the button to see the alert).

As a consumer of the library, I initially thought the alert is part of the library but I could only find the toast component and I had to debug the doc code to realise spAlert is a doc site specific implementation. I would then need to re-implement my own version of it.

from @Westbrook (#2291 (comment)):

spAlert is interesting because it is very application bound, and while the library could "vend it as is" it would likely not serve many users and would be API surface we couldn't remove later. I'd love a more vibrant conversation around an API here.

A simple argument in favour of making the toast behave like an alert would be... continue to implement the spec: https://spectrum.adobe.com/page/toast/

Implementing the placement part would already be a first simple step with potentially no break changing.

The multiple toasts is a bigger change but implementing it would then close the alert discussion.

[Westbrook]

Thanks @kptdobe for stating this thread! This is definitely some functionality that would be good to find a way to add to the library. Some quick thoughts below...

Placement

This looks like it's been updated since the last time I reviewed in depth. I think a position that accepted something like top center | top end | bottom center | bottom end or similar could be a good addition here. In fact, it seems like something that Spectrum CSS should ship upstream for us! @pfulton, what do you think?

Having it be an opt-in attribute so as to continue to power existing consumption, and any future work on the priority queue should prevent this from bothering any current usage.

Multiple

Spectrum specifically states NOT to show multiple Toasts, as you've liked above. You see we kind of hack that in the SWC docs site implementation of spAlert. What sort of API would benefit ALL (or a good number) of applications that we could ship in this area from the SWC level?

• doing something with the overlay system might be interesting, but as we've worked to NOT manage multiple overlay roots there may be some consternation as to where things end up in page
• a <sp-toast-queue> or similar element might be able to handle some of the things in the Priority queue, it looks like we could maybe extract the "priority" from existing settings to allow for it to manage Toast messages in that way, then the consuming application could worry about getting the queue element to the right part of their app
• a form of Context API and populate a queue fully in JS space that then application could do what they want with
• what other paths might make sense here?

Insertion

If we hand wave the queue management question, do we need something that held role="region" and handle inserting the resulting <sp-toast> elements into the DOM?

[pfulton]

Hi @kptdobe & @Westbrook! Thanks for your patience on my delayed response.

I think a position that accepted something like top center | top end | bottom center | bottom end or similar could be a good addition here. In fact, it seems like something that Spectrum CSS should ship upstream for us! @pfulton, what do you think?

Perhaps. Correct me if I'm wrong, though: isn't positioning handled by the implementation?

@Westbrook Let's put this on the agenda to discuss in our next sync. I want to be sure I'm understanding the need and request here.

Thanks!