feat: updated Floating Actio Button for MDC v10

Author: hperrin

README.md

@@ -204,7 +204,7 @@ I've started working on migrating SMUI to use the latest upstream version of [Ma
 Update Progress Checklist:
 
 - [x] Buttons
-  - [ ] Floating Action Buttons
+  - [x] Floating Action Buttons
   - [x] Icon Buttons
 - [ ] Cards
 - [ ] Chips

packages/button/Button.svelte

@@ -46,9 +46,8 @@
     'component',
     ...dialogExcludes,
   ])}
-  >{#if ripple}<div class="mdc-button__ripple" />{/if}<slot />{#if touch}<div
-      class="mdc-button__touch"
-    />{/if}</svelte:component
+  ><div class="mdc-button__ripple" />
+  <slot />{#if touch}<div class="mdc-button__touch" />{/if}</svelte:component
 >
 
 <script>

packages/drawer/Drawer.svelte

@@ -6,10 +6,12 @@
     .filter((className) => internalClasses[className])
     .join(' ')} {variant === 'dismissible'
     ? 'mdc-drawer--dismissible'
-    : ''} {variant === 'modal' ? 'mdc-drawer--modal' : ''}"
+    : ''} {variant === 'modal' ? 'mdc-drawer--modal' : ''} {fixed
+    ? ''
+    : 'smui-drawer__static'}"
   on:keydown={(event) => instance && instance.handleKeydown(event)}
   on:transitionend={(event) => instance && instance.handleTransitionEnd(event)}
-  {...exclude($$props, ['use', 'class', 'variant', 'open'])}
+  {...exclude($$props, ['use', 'class', 'variant', 'open', 'fixed'])}
 >
   <slot />
 </aside>
@@ -39,6 +41,7 @@
   export { className as class };
   export let variant = null;
   export let open = false;
+  export let fixed = true;
 
   let element;
   let instance;

packages/drawer/_style.scss

@@ -4,6 +4,10 @@
 @include drawer.dismissible-core-styles;
 @include drawer.modal-core-styles;
 
+.mdc-drawer.smui-drawer__static {
+  position: static;
+}
+
 .mdc-drawer-scrim.smui-drawer-scrim__absolute {
   position: absolute;
 }

packages/fab/Fab.svelte

@@ -7,18 +7,22 @@
       {
         ripple,
         unbounded: false,
+        color,
         disabled: !!$$props.disabled,
-        classForward: (classes) => (rippleClasses = classes),
+        addClass,
+        removeClass,
       },
     ],
     forwardEvents,
     ...use,
   ]}
-  class="mdc-fab {className} {rippleClasses.join(' ')} {mini
+  class="mdc-fab {className} {Object.keys(internalClasses).join(' ')} {mini
     ? 'mdc-fab--mini'
     : ''} {exited ? 'mdc-fab--exited' : ''} {extended
     ? 'mdc-fab--extended'
-    : ''} {color === 'primary' ? 'smui-fab--color-primary' : ''}"
+    : ''} {color === 'primary' ? 'smui-fab--color-primary' : ''} {touch
+    ? 'mdc-fab--touch'
+    : ''}"
   {...exclude($$props, [
     'use',
     'class',
@@ -27,9 +31,11 @@
     'mini',
     'exited',
     'extended',
+    'touch',
     'component',
   ])}
-  >{#if ripple}<div class="mdc-fab__ripple" />{/if}<slot /></svelte:component
+  ><div class="mdc-fab__ripple" />
+  <slot />{#if touch}<div class="mdc-fab__touch" />{/if}</svelte:component
 >
 
 <script>
@@ -50,17 +56,33 @@
   export let mini = false;
   export let exited = false;
   export let extended = false;
+  export let touch = false;
   // Purposely left out of props exclude.
   export let href = null;
 
   let element;
-  let rippleClasses = [];
+  let internalClasses = {};
 
   export let component = href == null ? Button : A;
 
   setContext('SMUI:label:context', 'fab');
   setContext('SMUI:icon:context', 'fab');
 
+  function addClass(className) {
+    // Doesn't need hasClass.
+    if (!internalClasses[className]) {
+      internalClasses[className] = true;
+    }
+  }
+
+  function removeClass(className) {
+    // Doesn't need hasClass.
+    if (internalClasses[className]) {
+      delete internalClasses[className];
+      internalClasses = internalClasses;
+    }
+  }
+
   export function getElement() {
     return element.getElement();
   }

packages/fab/_index.scss

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

packages/fab/_mixins.scss

@@ -1,19 +1,25 @@
-@import "@material/feature-targeting/functions";
+@use '@material/feature-targeting';
+@use '@material/ripple';
+@use '@material/fab';
 
-@mixin smui-fab-core-styles($query: mdc-feature-all()) {
-  @include smui-fab-without-ripple($query);
-  @include smui-fab-ripple($query);
+@mixin core-styles($query: feature-targeting.all()) {
+  @include without-ripple($query);
+  @include ripple($query);
 }
 
-@mixin smui-fab-without-ripple($query: mdc-feature-all()) {
+@mixin without-ripple($query: feature-targeting.all()) {
   .smui-fab--color-primary {
-    @include mdc-fab-container-color(primary, $query: $query);
-    @include mdc-fab-ink-color(on-primary, $query: $query);
+    @include fab.container-color(primary, $query: $query);
+    @include fab.ink-color(on-primary, $query: $query);
   }
 }
 
-@mixin smui-fab-ripple($query: mdc-feature-all()) {
+@mixin ripple($query: feature-targeting.all()) {
   .smui-fab--color-primary {
-    @include mdc-states(on-primary, $query: $query);
+    @include ripple.states(
+      on-primary,
+      $query: $query,
+      $ripple-target: fab.$ripple-target
+    );
   }
-}
+}

packages/fab/_style.scss

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