[Alert] Multiple open Alerts present in DOM at initialization should form a queue

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

If multiple Alert with the open property are present in the DOM as the components initialize, they will not form a queue, and appear stacked on top of one another.

Subsequently added Alert will "fix the queue" and properly stack Alert, but this doesn't happen at load.

Acceptance Criteria

If there are multiple Alert with the open property present in the DOM as the components initialize, they should form a queue. As there currently isn't a way to manage order, we might just use "last one wins" like we do in other components that have multiple sibling components that can load simultaneously.

Relevant Info

Further improvements may occur in #8705, but it would be nice to solve this with our current set up... might require the addition of an Alert Group to manage?

Which Component

Alert

Example Use Case

Codepen:

https://codepen.io/mac_and_cheese/pen/xxNGjVe?editors=1000

Note that on load the two Alert are stacked on top of one another, each unaware of the other's existence. If you "Add an Alert" - it will correctly create a queue with 3 Alerts.

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)