feat: updated Snackbars and Kitchen for MDC v10

README.md

@@ -246,8 +246,8 @@ Update Progress Checklist:
 - [x] Menus
 - [x] Paper
 - [x] Ripples
-- [ ] Snackbars
-  - [ ] Kitchen
+- [x] Snackbars
+  - [x] Kitchen
 - [x] Tab
 - [x] Tab Bar
 - [x] Tab Indicator

packages/button/Button.svelte

@@ -29,7 +29,7 @@
     'mdc-dialog__button': context === 'dialog:action',
     'mdc-top-app-bar__navigation-icon': context === 'top-app-bar:navigation',
     'mdc-top-app-bar__action-item': context === 'top-app-bar:action',
-    'mdc-snackbar__action': context === 'snackbar',
+    'mdc-snackbar__action': context === 'snackbar:actions',
     ...internalClasses,
   })}
   {...actionProp}

packages/common/Label.svelte

@@ -10,7 +10,7 @@
     'mdc-image-list__label': context === 'image-list',
     'mdc-snackbar__label': context === 'snackbar',
   })}
-  {...context === 'snackbar' ? { role: 'status', 'aria-live': 'polite' } : {}}
+  {...context === 'snackbar' ? { 'aria-atomic': 'false' } : {}}
   {tabindex}
   {...exclude($$props, ['use', 'class'])}><slot /></span
 >

packages/icon-button/IconButton.svelte

@@ -25,7 +25,7 @@
     'mdc-card__action--icon': context === 'card:action',
     'mdc-top-app-bar__navigation-icon': context === 'top-app-bar:navigation',
     'mdc-top-app-bar__action-item': context === 'top-app-bar:action',
-    'mdc-snackbar__dismiss': context === 'snackbar',
+    'mdc-snackbar__dismiss': context === 'snackbar:actions',
     ...internalClasses,
   })}
   aria-hidden="true"

packages/snackbar/Actions.js

@@ -3,5 +3,11 @@ import Div from '@smui/common/Div.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-snackbar__actions',
+  props: { 'aria-atomic': 'true' },
+  contexts: {
+    'SMUI:button:context': 'snackbar:actions',
+    'SMUI:icon-button:context': 'snackbar:actions',
+    'SMUI:label:context': undefined,
+  },
   component: Div,
 });

packages/snackbar/Snackbar.svelte

@@ -7,17 +7,31 @@
     'mdc-snackbar': true,
     'mdc-snackbar--stacked': variant === 'stacked',
     'mdc-snackbar--leading': leading,
+    ...internalClasses,
   })}
   on:MDCSnackbar:closed={handleClosed}
-  {...exclude($$props, ['use', 'class', 'variant', 'leading', 'surface$'])}
+  on:keydown={(event) => instance && instance.handleKeyDown(event)}
+  {...exclude($$props, [
+    'use',
+    'class',
+    'variant',
+    'leading',
+    'timeoutMs',
+    'closeOnEscape',
+    'labelText',
+    'surface$',
+  ])}
 >
   <div
     use:useActions={surface$use}
     class={classMap({
       [surface$class]: true,
       'mdc-snackbar__surface': true,
     })}
-    {...prefixFilter($$props, 'surface$')}
+    on:click={handleSurfaceClick}
+    role="status"
+    aria-relevant="additions"
+    {...exclude(prefixFilter($$props, 'surface$'), ['use', 'class'])}
   >
     <slot />
   </div>
@@ -28,15 +42,17 @@
 </script>
 
 <script>
-  import { MDCSnackbar } from '@material/snackbar';
-  import { onMount, onDestroy, setContext } from 'svelte';
+  import { MDCSnackbarFoundation, util } from '@material/snackbar';
+  import { closest } from '@material/dom/ponyfill';
+  import { onMount, setContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
     classMap,
     exclude,
     prefixFilter,
     useActions,
+    dispatch,
   } from '@smui/common/internal.js';
 
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
@@ -60,68 +76,110 @@
   export let surface$use = [];
 
   let element;
-  let snackbar;
+  let instance;
+  let internalClasses = {};
   let closeResolve;
   let closePromise = new Promise((resolve) => (closeResolve = resolve));
 
-  setContext('SMUI:button:context', 'snackbar');
-  setContext('SMUI:icon-button:context', 'snackbar');
   setContext('SMUI:label:context', 'snackbar');
 
-  $: if (snackbar && snackbar.timeoutMs !== timeoutMs) {
-    snackbar.timeoutMs = timeoutMs;
+  $: if (instance && instance.getTimeoutMs() !== timeoutMs) {
+    instance.setTimeoutMs(timeoutMs);
   }
 
-  $: if (snackbar && snackbar.closeOnEscape !== closeOnEscape) {
-    snackbar.closeOnEscape = closeOnEscape;
+  $: if (instance && instance.getCloseOnEscape() !== closeOnEscape) {
+    instance.setCloseOnEscape(closeOnEscape);
   }
 
   $: if (
-    snackbar &&
+    instance &&
     labelText !== uninitializedValue &&
-    snackbar.labelText !== labelText
+    getLabelElement().textContent !== labelText
   ) {
-    snackbar.labelText = labelText;
+    getLabelElement().textContent = labelText;
   }
 
   $: if (
-    snackbar &&
+    instance &&
     actionButtonText !== uninitializedValue &&
-    snackbar.actionButtonText !== actionButtonText
+    getActionButtonElement().textContent !== actionButtonText
   ) {
-    snackbar.actionButtonText = actionButtonText;
+    getActionButtonElement().textContent = actionButtonText;
   }
 
   onMount(() => {
-    snackbar = new MDCSnackbar(element);
-  });
+    instance = new MDCSnackbarFoundation({
+      addClass,
+      announce: () => util.announce(getLabelElement()),
+      notifyClosed: (reason) =>
+        dispatch(getElement(), 'MDCSnackbar:closed', reason ? { reason } : {}),
+      notifyClosing: (reason) =>
+        dispatch(getElement(), 'MDCSnackbar:closing', reason ? { reason } : {}),
+      notifyOpened: () => dispatch(getElement(), 'MDCSnackbar:opened'),
+      notifyOpening: () => dispatch(getElement(), 'MDCSnackbar:opening'),
+      removeClass,
+    });
 
-  onDestroy(() => {
-    snackbar && snackbar.destroy();
+    instance.init();
+
+    return () => {
+      instance.destroy();
+    };
   });
 
+  function addClass(className) {
+    if (!internalClasses[className]) {
+      internalClasses[className] = true;
+    }
+  }
+
+  function removeClass(className) {
+    if (!(className in internalClasses) || internalClasses[className]) {
+      internalClasses[className] = false;
+    }
+  }
+
+  function handleSurfaceClick(event) {
+    const target = event.target;
+    if (instance) {
+      if (closest(target, '.mdc-snackbar__action')) {
+        instance.handleActionButtonClick(event);
+      } else if (closest(target, '.mdc-snackbar__dismiss')) {
+        instance.handleActionIconClick(event);
+      }
+    }
+  }
+
   function handleClosed() {
     closeResolve();
     closePromise = new Promise((resolve) => (closeResolve = resolve));
   }
 
-  export function open(...args) {
+  export function open() {
     waiting = waiting.then(() => {
-      snackbar.open(...args);
+      instance.open();
       return closePromise;
     });
   }
 
-  export function forceOpen(...args) {
-    return snackbar.open(...args);
+  export function forceOpen() {
+    return instance.open();
   }
 
-  export function close(...args) {
-    return snackbar.close(...args);
+  export function close(reason = '') {
+    return instance.close(reason);
   }
 
   export function isOpen() {
-    return snackbar.isOpen;
+    return instance.isOpen();
+  }
+
+  export function getLabelElement() {
+    return getElement().querySelector('.mdc-snackbar__label');
+  }
+
+  export function getActionButtonElement() {
+    return getElement().querySelector('.mdc-snackbar__action');
   }
 
   export function getElement() {

packages/snackbar/_index.scss

@@ -1,2 +1,2 @@
-@import "smui-theme";
-@import "./style";
+@use 'smui-theme';
+@use './style';

packages/snackbar/_mixins.scss

@@ -1,8 +1,10 @@
-@import "@material/feature-targeting/functions";
+@use '@material/icon-button';
+@use '@material/snackbar';
+@use '@material/feature-targeting';
 
-@mixin smui-snackbar-core-styles($query: mdc-feature-all()) {
-  // Fix icon color.
-  .mdc-snackbar__dismiss.mdc-snackbar__dismiss {
-    @include mdc-icon-button-ink-color($mdc-snackbar-dismiss-ink-color, $query: $query);
+@mixin core-styles($query: feature-targeting.all()) {
+  // Increase specificity.
+  .mdc-icon-button.mdc-snackbar__dismiss {
+    @include icon-button.ink-color(snackbar.$dismiss-ink-color, $query: $query);
   }
-}
+}

packages/snackbar/_style.scss

@@ -1,4 +1,4 @@
-@import "@material/snackbar/mdc-snackbar";
-@import "./mixins";
+@use '@material/snackbar/mdc-snackbar';
+@use './mixins';
 
-@include smui-snackbar-core-styles;
+@include mixins.core-styles;

packages/snackbar/kitchen/_index.scss

@@ -1,2 +1,2 @@
-@import "smui-theme";
-@import "./style";
+@use 'smui-theme';
+@use './style';

packages/snackbar/kitchen/_style.scss

@@ -1,3 +1,3 @@
-@import "../_style.scss";
-@import "@smui/button/style";
-@import "@smui/icon-button/style";
+@use '../_style.scss';
+@use '@smui/button/style' as button-style;
+@use '@smui/icon-button/style' as icon-button-style;