feat: reduce Ripple arguments and add class forwarding option

hperrin · hperrin · commit 550ac93cc6d4 · 2020-01-30T16:00:02.000-08:00
diff --git a/packages/button/Button.svelte b/packages/button/Button.svelte
@@ -1,9 +1,10 @@
 <svelte:component
   this={component}
-  use={[forwardEvents, [Ripple, [ripple, {unbounded: false}]], ...use]}
+  use={[[Ripple, {ripple, unbounded: false, classForward: classes => rippleClasses = classes}], forwardEvents, ...use]}
   class="
     mdc-button
     {className}
+    {rippleClasses.join(' ')}
     {variant === 'raised' ? 'mdc-button--raised' : ''}
     {variant === 'unelevated' ? 'mdc-button--unelevated' : ''}
     {variant === 'outlined' ? 'mdc-button--outlined' : ''}
@@ -48,6 +49,7 @@
   export let component = href == null ? Button : A;
 
   let context = getContext('SMUI:button:context');
+  let rippleClasses = [];
 
   $: dialogExcludes = (context === 'dialog:action') ? ['action', 'default'] : [];
 
diff --git a/packages/card/PrimaryAction.svelte b/packages/card/PrimaryAction.svelte
@@ -6,7 +6,7 @@
     {className}
     {padded ? 'smui-card__primary-action--padded' : ''}
   "
-  use:Ripple={[ripple, {unbounded: false, color}]}
+  use:Ripple={{ripple, unbounded: false, color}}
   {tabindex}
   {...exclude($$props, ['use', 'class', 'ripple', 'color', 'padded', 'tabindex'])}
 ><slot></slot></div>
diff --git a/packages/fab/Fab.svelte b/packages/fab/Fab.svelte
@@ -9,7 +9,7 @@
     {extended ? 'mdc-fab--extended' : ''}
     {color === 'primary' ? 'smui-fab--color-primary' : ''}
   "
-  use:Ripple={[ripple, {unbounded: false}]}
+  use:Ripple={{ripple, unbounded: false}}
   {...exclude($$props, ['use', 'class', 'ripple', 'color', 'mini', 'exited', 'extended'])}
 ><slot></slot></button>
 
diff --git a/packages/icon-button/IconButton.svelte b/packages/icon-button/IconButton.svelte
@@ -13,7 +13,7 @@
       {context === 'top-app-bar:action' ? 'mdc-top-app-bar__action-item' : ''}
       {context === 'snackbar' ? 'mdc-snackbar__dismiss' : ''}
     "
-    use:Ripple={[ripple && !toggle, {unbounded: true, color}]}
+    use:Ripple={{ripple: ripple && !toggle, unbounded: true, color}}
     aria-hidden="true"
     aria-pressed={pressed}
     {href}
@@ -35,7 +35,7 @@
       {context === 'top-app-bar:action' ? 'mdc-top-app-bar__action-item' : ''}
       {context === 'snackbar' ? 'mdc-snackbar__dismiss' : ''}
     "
-    use:Ripple={[ripple && !toggle, {unbounded: true, color}]}
+    use:Ripple={{ripple: ripple && !toggle, unbounded: true, color}}
     aria-hidden="true"
     aria-pressed={pressed}
     on:MDCIconButtonToggle:change={handleChange}
diff --git a/packages/list/Item.svelte b/packages/list/Item.svelte
@@ -10,7 +10,7 @@
       {selected ? 'mdc-list-item--selected' : ''}
       {disabled ? 'mdc-list-item--disabled' : ''}
     "
-    use:Ripple={[ripple, {unbounded: false, color}]}
+    use:Ripple={{ripple, unbounded: false, color}}
     {href}
     {...(activated ? {'aria-current': 'page'} : {})}
     {tabindex}
@@ -30,7 +30,7 @@
       {selected ? 'mdc-list-item--selected' : ''}
       {disabled ? 'mdc-list-item--disabled' : ''}
     "
-    use:Ripple={[ripple, {unbounded: false, color}]}
+    use:Ripple={{ripple, unbounded: false, color}}
     {...(activated ? {'aria-current': 'page'} : {})}
     {tabindex}
     on:click={action}
@@ -50,7 +50,7 @@
       {disabled ? 'mdc-list-item--disabled' : ''}
       {(role === 'menuitem' && selected) ? 'mdc-menu-item--selected' : ''}
     "
-    use:Ripple={[ripple, {unbounded: false, color}]}
+    use:Ripple={{ripple, unbounded: false, color}}
     {role}
     {...(role === 'option' ? {'aria-selected': (selected ? 'true' : 'false')} : {})}
     {...((role === 'radio' || role === 'checkbox') ? {'aria-checked': (checked ? 'true' : 'false')} : {})}
diff --git a/packages/ripple/README.md b/packages/ripple/README.md
@@ -19,7 +19,7 @@ npm install --save-dev @smui/ripple
   import Ripple from '@smui/ripple';
 </script>
 
-<p use:Ripple={[true, {color: 'surface'}]} tabindex="0">
+<p use:Ripple={{ripple: true, color: 'surface'}} tabindex="0">
   Here is an element with a ripple.
 </p>
 ```
@@ -40,5 +40,7 @@ A ripple Svelte action.
 
 The action accepts an array, with two entries. The first is a boolean, whether the ripple is enabled. The second is an object with the props:
 
+* `ripple` - Whether to enable the ripple.
 * `unbounded` - Whether the ripple is unbounded.
-* `color` - The ripple color. ('surface', 'primary', or 'secondary')
+* `color` - The ripple color. ('surface', 'primary', or 'secondary')
+* `classForward` - A function that receives an array of classes. This is used to work around Svelte removing ripple classes in certain scenarios.
diff --git a/packages/ripple/Ripple.js b/packages/ripple/Ripple.js
@@ -1,46 +1,83 @@
 import {MDCRipple} from '@material/ripple';
 import {getContext} from 'svelte';
 
-export default function Ripple(node, [ripple, props = {unbounded: false, color: null}]) {
+export default function Ripple(node, props = {ripple: false, unbounded: false, color: null, classForward: () => {}}) {
   let instance = null;
   let addLayoutListener = getContext('SMUI:addLayoutListener');
   let removeLayoutListener;
+  let classList = [];
 
-  function handleProps(ripple, props) {
-    if (ripple && !instance) {
+  function addClass(className) {
+    const idx = classList.indexOf(className);
+    if (idx === -1) {
+      node.classList.add(className);
+      classList.push(className);
+      if (props.classForward) {
+        props.classForward(classList);
+        console.log('addClass', className, classList);
+      }
+    }
+  }
+
+  function removeClass(className) {
+    const idx = classList.indexOf(className);
+    if (idx !== -1) {
+      node.classList.remove(className);
+      classList.splice(idx, 1);
+      if (props.classForward) {
+        props.classForward(classList);
+        console.log('removeClass', className, classList);
+      }
+    }
+  }
+
+  function handleProps() {
+    if (props.ripple && !instance) {
+      // Override the Ripple component's adapter, so that we can forward classes
+      // to Svelte components that overwrite Ripple's classes.
+      const _createAdapter = MDCRipple.createAdapter;
+      MDCRipple.createAdapter = function(...args) {
+        const adapter = _createAdapter.apply(this, args);
+        adapter.addClass = function(className) {
+          return addClass(className);
+        };
+        adapter.removeClass = function(className) {
+          return removeClass(className);
+        };
+        return adapter;
+      };
       instance = new MDCRipple(node);
-    } else if (instance && !ripple) {
+      MDCRipple.createAdapter = _createAdapter;
+    } else if (instance && !props.ripple) {
       instance.destroy();
       instance = null;
     }
-    if (ripple) {
+    if (props.ripple) {
       instance.unbounded = !!props.unbounded;
       switch (props.color) {
         case 'surface':
-          node.classList.add('mdc-ripple-surface');
-          node.classList.remove('mdc-ripple-surface--primary');
-          node.classList.remove('mdc-ripple-surface--accent');
+          addClass('mdc-ripple-surface');
+          removeClass('mdc-ripple-surface--primary');
+          removeClass('mdc-ripple-surface--accent');
           return;
         case 'primary':
-          node.classList.add('mdc-ripple-surface');
-          node.classList.add('mdc-ripple-surface--primary');
-          node.classList.remove('mdc-ripple-surface--accent');
+          addClass('mdc-ripple-surface');
+          addClass('mdc-ripple-surface--primary');
+          removeClass('mdc-ripple-surface--accent');
           return;
         case 'secondary':
-          node.classList.add('mdc-ripple-surface');
-          node.classList.remove('mdc-ripple-surface--primary');
-          node.classList.add('mdc-ripple-surface--accent');
+          addClass('mdc-ripple-surface');
+          removeClass('mdc-ripple-surface--primary');
+          addClass('mdc-ripple-surface--accent');
           return;
       }
     }
-    node.classList.remove('mdc-ripple-surface');
-    node.classList.remove('mdc-ripple-surface--primary');
-    node.classList.remove('mdc-ripple-surface--accent');
+    removeClass('mdc-ripple-surface');
+    removeClass('mdc-ripple-surface--primary');
+    removeClass('mdc-ripple-surface--accent');
   }
 
-  if (ripple) {
-    handleProps(ripple, props);
-  }
+  handleProps();
 
   if (addLayoutListener) {
     removeLayoutListener = addLayoutListener(layout);
@@ -53,17 +90,18 @@ export default function Ripple(node, [ripple, props = {unbounded: false, color:
   }
 
   return {
-    update([ripple, props = {unbounded: false, color: null}]) {
-      handleProps(ripple, props);
+    update(newProps = {ripple: false, unbounded: false, color: null, classForward: []}) {
+      props = newProps;
+      handleProps();
     },
 
     destroy() {
       if (instance) {
         instance.destroy();
         instance = null;
-        node.classList.remove('mdc-ripple-surface');
-        node.classList.remove('mdc-ripple-surface--primary');
-        node.classList.remove('mdc-ripple-surface--accent');
+        removeClass('mdc-ripple-surface');
+        removeClass('mdc-ripple-surface--primary');
+        removeClass('mdc-ripple-surface--accent');
       }
 
       if (removeLayoutListener) {
diff --git a/site/src/routes/demo/ripple.svelte b/site/src/routes/demo/ripple.svelte
@@ -5,23 +5,23 @@
 <section>
   <h2>Ripple</h2>
 
-  <p use:Ripple={[true, {color: 'surface'}]} tabindex="0">
+  <p use:Ripple={{ripple: true, color: 'surface'}} tabindex="0">
     SMUI ripples can be added to arbitrary elements, like this <code>p</code>
     element. Try clicking it to see the ripple.
   </p>
 
   <p>
     Unbounded:
-    <span use:Ripple={[true, {unbounded: true, color: 'surface'}]} tabindex="0" class="unbounded">
+    <span use:Ripple={{ripple: true, unbounded: true, color: 'surface'}} tabindex="0" class="unbounded">
       &copy;
     </span>
   </p>
 
-  <p use:Ripple={[true, {color: 'primary'}]} tabindex="0">
+  <p use:Ripple={{ripple: true, color: 'primary'}} tabindex="0">
     Primary color.
   </p>
 
-  <p use:Ripple={[true, {color: 'secondary'}]} tabindex="0">
+  <p use:Ripple={{ripple: true, color: 'secondary'}} tabindex="0">
     Secondary color.
   </p>
 </section>

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`{className}`
`7`	`7`	`{padded ? 'smui-card__primary-action--padded' : ''}`
`8`	`8`	`"`
`9`		`- use:Ripple={[ripple, {unbounded: false, color}]}`
	`9`	`+ use:Ripple={{ripple, unbounded: false, color}}`
`10`	`10`	`{tabindex}`
`11`	`11`	`{...exclude($$props, ['use', 'class', 'ripple', 'color', 'padded', 'tabindex'])}`
`12`	`12`	`><slot></slot></div>`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`{extended ? 'mdc-fab--extended' : ''}`
`10`	`10`	`{color === 'primary' ? 'smui-fab--color-primary' : ''}`
`11`	`11`	`"`
`12`		`- use:Ripple={[ripple, {unbounded: false}]}`
	`12`	`+ use:Ripple={{ripple, unbounded: false}}`
`13`	`13`	`{...exclude($$props, ['use', 'class', 'ripple', 'color', 'mini', 'exited', 'extended'])}`
`14`	`14`	`><slot></slot></button>`
`15`	`15`