feat(snackbar): Add option for indefinite timeout (material-components#4998)

Author: cdonovan

packages/mdc-snackbar/README.md

@@ -166,7 +166,7 @@ Mixin | Description
 Property | Value Type | Description
 --- | --- | ---
 `isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.
-`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).
+`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).
 `closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the <kbd>ESC</kbd> key. Defaults to `true`.
 `labelText` | `string` | Gets/sets the `textContent` of the label element.
 `actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.

packages/mdc-snackbar/constants.ts

@@ -43,6 +43,7 @@ const strings = {
 
 const numbers = {
   DEFAULT_AUTO_DISMISS_TIMEOUT_MS: 5000,
+  INDETERMINATE: -1,
   MAX_AUTO_DISMISS_TIMEOUT_MS: 10000,
   MIN_AUTO_DISMISS_TIMEOUT_MS: 4000,
 

packages/mdc-snackbar/foundation.ts

@@ -88,12 +88,15 @@ export class MDCSnackbarFoundation extends MDCFoundation<MDCSnackbarAdapter> {
       this.adapter_.addClass(OPEN);
 
       this.animationTimer_ = setTimeout(() => {
+        const timeoutMs = this.getTimeoutMs();
         this.handleAnimationTimerEnd_();
         this.adapter_.notifyOpened();
-        this.autoDismissTimer_ = setTimeout(() => {
-          this.close(REASON_DISMISS);
-        }, this.getTimeoutMs());
-      }, numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);
+        if (timeoutMs !== numbers.INDETERMINATE) {
+          this.autoDismissTimer_ = setTimeout(() => {
+            this.close(REASON_DISMISS);
+          }, timeoutMs);
+        }
+              }, numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);
     });
   }
 
@@ -137,11 +140,14 @@ export class MDCSnackbarFoundation extends MDCFoundation<MDCSnackbarAdapter> {
     // Use shorter variable names to make the code more readable
     const minValue = numbers.MIN_AUTO_DISMISS_TIMEOUT_MS;
     const maxValue = numbers.MAX_AUTO_DISMISS_TIMEOUT_MS;
+    const indeterminateValue = numbers.INDETERMINATE;
 
-    if (timeoutMs <= maxValue && timeoutMs >= minValue) {
+    if (timeoutMs === numbers.INDETERMINATE || (timeoutMs <= maxValue && timeoutMs >= minValue)) {
       this.autoDismissTimeoutMs_ = timeoutMs;
     } else {
-      throw new Error(`timeoutMs must be an integer in the range ${minValue}–${maxValue}, but got '${timeoutMs}'`);
+      throw new Error(`
+        timeoutMs must be an integer in the range ${minValue}–${maxValue}
+        (or ${indeterminateValue} to disable), but got '${timeoutMs}'`);
     }
   }
 

test/unit/mdc-snackbar/foundation.test.js

@@ -234,6 +234,25 @@ test('#open automatically dismisses snackbar after timeout', () => {
   td.verify(foundation.close(strings.REASON_DISMISS), {times: 1});
 });
 
+test('#snackbar remains open for indefinite timeout', () => {
+  const {foundation} = setupTest();
+  const clock = installClock();
+  foundation.close = td.func('close');
+  foundation.setTimeoutMs(-1);
+
+  foundation.open();
+
+  // Note: #open uses a combination of rAF and setTimeout due to Firefox behavior, so we need to wait 2 ticks
+  clock.runToFrame();
+  clock.runToFrame();
+
+  // Wait for max timeout and ensure that close has not been called
+  clock.tick(numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);
+  clock.tick(numbers.MAX_AUTO_DISMISS_TIMEOUT_MS);
+
+  td.verify(foundation.close(strings.REASON_DISMISS), {times: 0});
+});
+
 test('#isOpen returns false when the snackbar has never been opened', () => {
   const {foundation} = setupTest();
   assert.isFalse(foundation.isOpen());