Enhancement: calcite-alert - options for seeing queued messages without dismissing them

[hccampos]

Description

We are using the <calcite-alert> in order to display errors, warnings or success messages. However, it has been reported that collapsing all the messages into a single one (with the indicator showing how many messages are present) is not ideal since it forces users to close messages in order to see what other messages may be available.

It would be interesting to have a way of looking at other messages without dismissing them. Two main possibilities to explore:

• Allow expand a queue to view all currently queued alerts.
• Prop to decide on whether to stack or queue alerts, style guardrails to prevent 20 alerts from taking over an entire page.

CC @yannikmesserli

_SVCH

Calcite Design Solution

Figma specs

Figma prototype

[jcfranco]

Please add your planning poker estimate with ZenHub @macandcheese

[macandcheese]

Needs design - in progress.

[macandcheese]

@hccampos here is an initial comp - spacing, interaction, display not finalized - would this more or less solve (obviously lots to question around .. max number displayed, scrolling when "too many alerts", do you display the chip count while expanded, etc.):

@jcfranco would this necessitate the creation of an "alert-wrapper" component to handle positioning and "added UI" to handle multiple (related - #3033)?

[hccampos]

IMHO, that looks nice @macandcheese, but I'll defer to @janett-baresel and @yannikmesserli on this one.

[janett-baresel]

Looks very good to me. Thanks!

[macandcheese]

Thanks all. Will continue to work and iterate on this and ping this thread when more final designs are ready for testing / feedback.

[macandcheese]

@jcfranco - I think you mentioned you had an idea for this that wouldn't require a wrapping calcite-alerts / calcite-alert-group.

Could you expand on that (alert queue pun alert 🚨 )? Multiple items may need to be positioned in a single fixed container along with "extra UI elements", I am not sure the best way to achieve that without some kind of wrapping parent to control placement and manage expand / close and associated animations.

[ashetland]

Surfacing designs for this since GitHub was hiding them in the thread. Could be coupled with #8316.