fix(alert): properly form a queue of alerts #10032

driskull · 2024-08-09T23:07:02Z

Related Issue: #9340

Summary

add AlertManager class for handling registration of alerts.
refactor Alert to no longer emit internal events. Instead, alert communication is handled via the AlertManager
- added two internal props to alert to whether an alert is active and how many alerts are opened.
- instead of multiple alerts being queued, only one alert is active. All other open alerts are assumed to be queued.
add spec test

driskull · 2024-08-12T22:55:08Z

packages/calcite-components/src/components/alert/AlertManager.ts

+  //
+  // --------------------------------------------------------------------------
+
+  private registeredElements: HTMLCalciteAlertElement[] = [];


In the future, this could be a map

private registeredElementsMap: Map<string, HTMLCalciteAlertElement[]> = new Map([ ["default", []], ]);

This would allow us to have alert groups by adding a group property to Alert. Then only certain alerts would be grouped with other ones.

# Conflicts: # packages/calcite-components/src/components.d.ts # packages/calcite-components/src/components/alert/alert.tsx # packages/calcite-components/src/components/alert/interfaces.ts

# Conflicts: # packages/calcite-components/src/components.d.ts # packages/calcite-components/src/components/alert/alert.e2e.ts # packages/calcite-components/src/components/alert/alert.tsx # packages/calcite-components/src/components/alert/interfaces.ts

jcfranco

This is awesome, @driskull! 🚀

packages/calcite-components/src/components/alert/alert.e2e.ts

macandcheese

Great refactor 🎈 !

packages/calcite-components/src/components/alert/alert.scss

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> **Related Issue:** # ## Summary Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

driskull added 9 commits August 8, 2024 16:43

WIP

042e866

feat(alert): add urgent property to prioritize alert queue. #8705

12009f5

cleanup

a6e416d

cleanup

4479751

stories

ea1f450

cleanup story

82669cc

remove comments

78ab672

fix(alert): properly form a queue of alerts. #9340

6f74d0b

cleanup

1b75efe

driskull mentioned this pull request Aug 9, 2024

feat(alert): add 'queue' property to prioritize the ordering of alerts when opened #10029

Merged

driskull added 3 commits August 12, 2024 09:27

spec test

6a8956a

cleanup

f213cbc

cleanup

68a0e06

driskull commented Aug 12, 2024

View reviewed changes

driskull added this to the 2024-08-27 - Aug Release milestone Aug 12, 2024

driskull added 7 commits August 15, 2024 11:14

cleanup

f75a4ae

review fixes

1ea9c1c

review fixes

207e7cf

doc update

3ad4857

Merge branch 'dris0000/urgent-alert' into dris0000/alert-manager

fc673c6

# Conflicts: # packages/calcite-components/src/components.d.ts # packages/calcite-components/src/components/alert/alert.tsx # packages/calcite-components/src/components/alert/interfaces.ts

moar tests

24e1a28

Merge branch 'dris0000/urgent-alert' into dris0000/alert-manager

b9e7826

Base automatically changed from dris0000/urgent-alert to dev August 17, 2024 00:06

github-actions bot assigned driskull Aug 19, 2024

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Aug 19, 2024

driskull marked this pull request as ready for review August 19, 2024 15:43

driskull requested review from jcfranco, benelan and macandcheese August 19, 2024 15:43

jcfranco approved these changes Aug 19, 2024

View reviewed changes

packages/calcite-components/src/components/alert/alert.e2e.ts Outdated Show resolved Hide resolved

macandcheese approved these changes Aug 19, 2024

View reviewed changes

packages/calcite-components/src/components/alert/alert.scss Show resolved Hide resolved

review fixes; clean up tests.

9cb2a2e

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 19, 2024

driskull merged commit b24d6ac into dev Aug 19, 2024
14 checks passed

driskull deleted the dris0000/alert-manager branch August 19, 2024 19:00

benelan mentioned this pull request Aug 28, 2024

chore: release main #10171

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10172

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10173

Closed

calcite-admin mentioned this pull request Sep 30, 2024

chore: release main #10457

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(alert): properly form a queue of alerts #10032

fix(alert): properly form a queue of alerts #10032

driskull commented Aug 9, 2024 •

edited

Loading

driskull Aug 12, 2024

jcfranco left a comment

macandcheese left a comment

fix(alert): properly form a queue of alerts #10032

fix(alert): properly form a queue of alerts #10032

Conversation

driskull commented Aug 9, 2024 • edited Loading

Summary

driskull Aug 12, 2024

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

macandcheese left a comment

Choose a reason for hiding this comment

driskull commented Aug 9, 2024 •

edited

Loading