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

driskull · 2024-08-09T17:37:53Z

Related Issue: #8705 #8316

Summary

add queue property to order an open alert immediate, next or last (default).
- When a queue="immediate" alert is opened it is displayed immediately.
- When a queue="next" alert is opened it will be displayed after the currently opened one is closed.
- By default, alerts are queued to be last when opened.
- When an alert is set to queue="immediate" after already being opened it will be presented first.
  - Done by unregistering and registering the alert again
  - All open alerts not at the top of the stack will be queued and auto close timeout reset
- All other alerts remain in their place.
cleanup private var names
add simple story
add queue story
add e2e test

driskull · 2024-08-09T18:12:23Z

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

  openTransitionProp = "opacity";

  transitionEl: HTMLDivElement;

-  mouseFocus: boolean;


No such thing as a 🐭 focus.

Detective Pikachu steps into the chat

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

driskull · 2024-08-10T00:06:23Z

We could also go with selected instead of urgent if we wanted to since only one would be displayed at one time anyway. It could better align with other components.

macandcheese

🎸

jcfranco

❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗
❗⚠️❗❗❗⚠️❗❗⚠️⚠️❗❗⚠️⚠️⚠️❗❗⚠️⚠️⚠️❗⚠️⚠️⚠️⚠️❗⚠️❗
❗⚠️⚠️❗❗⚠️❗⚠️❗❗⚠️❗❗⚠️❗❗⚠️❗❗❗❗⚠️❗❗❗❗⚠️❗
❗⚠️❗⚠️❗⚠️❗⚠️❗❗⚠️❗❗⚠️❗❗⚠️❗❗❗❗⚠️⚠️⚠️❗❗⚠️❗
❗⚠️❗❗⚠️⚠️❗⚠️❗❗⚠️❗❗⚠️❗❗⚠️❗❗❗❗⚠️❗❗❗❗❗❗
❗⚠️❗❗❗⚠️❗❗⚠️⚠️❗❗⚠️⚠️⚠️❗❗⚠️⚠️⚠️❗⚠️⚠️⚠️⚠️❗⚠️❗
❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗

jcfranco · 2024-08-16T20:24:10Z

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

  openTransitionProp = "opacity";

  transitionEl: HTMLDivElement;

-  mouseFocus: boolean;


Detective Pikachu steps into the chat

jcfranco · 2024-08-16T20:25:10Z

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

@@ -23,6 +82,29 @@ const wrapperStyles = html`
  </style>
 `;

+export const simple = (args: AlertStoryArgs): string => html`


jcfranco · 2024-08-16T20:40:33Z

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

@@ -460,24 +468,47 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen

  private lastMouseOverBegin: number;

-  private queueTimeout: number;
+  private queueTimeoutId: number = null;


jcfranco · 2024-08-16T20:45:10Z

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

  //--------------------------------------------------------------------------
  //
  //  Private Methods
  //
  //--------------------------------------------------------------------------

+  private clearAutoCloseTimeout = (): void => {


Is it necessary to assign bound-functions here? It looks like the call sites for these functions have this bound properly, so you could declare them as methods instead.

macandcheese

🏆

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

jcfranco

🎉🌮🦖

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

jcfranco · 2024-08-16T23:27:50Z

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

+    await page.waitForChanges();
+    alert3.setProperty("open", true);
+    await page.waitForChanges();
+    await page.waitForTimeout(animationDurationInMs);


Can you check if this is needed? #9958 fixed some issues that prevented alert (among other components) from honoring --calcite-duration-factor (used by skipAnimations). If you still need to wait for the alert to be open, you could listen for the open event instead.

Yeah this is still needed because the queue uses a setTimeout to wait for the animation to end.

calcite-design-system/packages/calcite-components/src/components/alert/alert.tsx

Lines 528 to 531 in 089cecf

private openAlert(): void {

window.clearTimeout(this.queueTimeout);

this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);

}

I think that above would need to change to pull from the CSS var --calcite-internal-animation-timing-slow and convert the string MS value to an integer.

Maybe a good follow up issue?

Follow-up issue sounds good. Thanks for checking!

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

🤖 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/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (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/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (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/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (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/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (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/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (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/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (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/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (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/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (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 2 commits August 8, 2024 16:43

WIP

042e866

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

12009f5

github-actions bot assigned driskull Aug 9, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Aug 9, 2024

driskull added 2 commits August 9, 2024 10:55

cleanup

a6e416d

cleanup

4479751

driskull commented Aug 9, 2024

View reviewed changes

driskull added 2 commits August 9, 2024 13:13

stories

ea1f450

cleanup story

82669cc

driskull commented Aug 9, 2024

View reviewed changes

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

remove comments

78ab672

driskull marked this pull request as ready for review August 9, 2024 21:15

driskull requested review from benelan and jcfranco as code owners August 9, 2024 21:15

driskull requested a review from macandcheese August 9, 2024 21:15

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 9, 2024

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

macandcheese approved these changes Aug 15, 2024

View reviewed changes

jcfranco approved these changes Aug 16, 2024

View reviewed changes

review fixes

1ea9c1c

driskull changed the title ~~feat(alert): add 'urgent' property to prioritize alert queue~~ feat(alert): add 'queue' property to order alerts by priority Aug 16, 2024

driskull changed the title ~~feat(alert): add 'queue' property to order alerts by priority~~ feat(alert): add 'queue' property to prioritize and order alerts when opened Aug 16, 2024

review fixes

207e7cf

driskull changed the title ~~feat(alert): add 'queue' property to prioritize and order alerts when opened~~ feat(alert): add 'queue' property to prioritize the ordering of alerts when opened Aug 16, 2024

doc update

3ad4857

macandcheese approved these changes Aug 16, 2024

View reviewed changes

macandcheese reviewed Aug 16, 2024

View reviewed changes

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

moar tests

24e1a28

jcfranco approved these changes Aug 16, 2024

View reviewed changes

review fixes

3020339

driskull mentioned this pull request Aug 16, 2024

Alert: refactor queue timeout to get timeout value from the CSS var --calcite-internal-animation-timing-slow #10098

Open

5 tasks

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 16, 2024

driskull merged commit 3aa47a4 into dev Aug 17, 2024
18 checks passed

driskull deleted the dris0000/urgent-alert branch August 17, 2024 00:06

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

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

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

driskull commented Aug 9, 2024 •

edited

Loading

driskull Aug 9, 2024

jcfranco Aug 16, 2024

driskull commented Aug 10, 2024 •

edited

Loading

macandcheese left a comment

jcfranco left a comment

jcfranco Aug 16, 2024

jcfranco Aug 16, 2024

jcfranco Aug 16, 2024

jcfranco Aug 16, 2024

macandcheese left a comment

jcfranco left a comment

jcfranco Aug 16, 2024

driskull Aug 16, 2024 •

edited

Loading

jcfranco Aug 16, 2024

driskull Aug 16, 2024

	private openAlert(): void {
	window.clearTimeout(this.queueTimeout);
	this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
	}

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

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

Conversation

driskull commented Aug 9, 2024 • edited Loading

Summary

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull commented Aug 10, 2024 • edited Loading

macandcheese left a comment

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

macandcheese left a comment

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull Aug 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull commented Aug 9, 2024 •

edited

Loading

driskull commented Aug 10, 2024 •

edited

Loading

driskull Aug 16, 2024 •

edited

Loading