fix: list item ripples and menus

hperrin · Mar 30, 2021 · 4010556 · 4010556
1 parent d405de5
commit 4010556
Show file tree

Hide file tree

Showing 18 changed files with 297 additions and 101 deletions.
diff --git a/packages/button/Button.svelte b/packages/button/Button.svelte
@@ -114,5 +114,6 @@
 
   function removeClass(className) {
     delete internalClasses[className];
+    internalClasses = internalClasses;
   }
 </script>
diff --git a/packages/checkbox/Checkbox.svelte b/packages/checkbox/Checkbox.svelte
@@ -165,7 +165,7 @@
     addChangeHandler(handleChange);
   }
 
-  onMount(async () => {
+  onMount(() => {
     if (instantiate !== false) {
       checkbox = new MDCCheckbox(element);
     } else {

diff --git a/packages/data-table/DataTable.svelte b/packages/data-table/DataTable.svelte
@@ -72,7 +72,7 @@
     removeLayoutListener = addLayoutListener(layout);
   }
 
-  onMount(async () => {
+  onMount(() => {
     dataTable = new MDCDataTable(element);
     checkBoxHeaderPromiseResolve(dataTable.headerRowCheckbox_);
     checkBoxListPromiseResolve(dataTable.rowCheckboxList_);

diff --git a/packages/drawer/Drawer.svelte b/packages/drawer/Drawer.svelte
@@ -152,6 +152,7 @@
 
   function removeClass(className) {
     delete internalClasses[className];
+    internalClasses = internalClasses;
   }
 
   function handleScrimClick() {

diff --git a/packages/icon-button/IconButton.svelte b/packages/icon-button/IconButton.svelte
@@ -148,6 +148,7 @@
 
   function removeClass(className) {
     delete internalClasses[className];
+    internalClasses = internalClasses;
   }
 
   function addAttr(name, value) {

diff --git a/packages/list/Item.svelte b/packages/list/Item.svelte
@@ -176,6 +176,7 @@
 
   function removeClass(className) {
     delete internalClasses[className];
+    internalClasses = internalClasses;
   }
 
   function addAttr(name, value) {
@@ -184,6 +185,7 @@
 
   function removeAttr(name) {
     delete internalAttrs[name];
+    internalAttrs = internalAttrs;
   }
 
   function getPrimaryText() {

diff --git a/packages/list/List.svelte b/packages/list/List.svelte
@@ -166,7 +166,7 @@
     removeLayoutListener = addLayoutListener(layout);
   }
 
-  onMount(async () => {
+  onMount(() => {
     instance = new MDCListFoundation({
       addClassForElementIndex,
       focusItemAtIndex,
@@ -235,9 +235,11 @@
         );
       },
     });
+
     if (singleSelection || radiolist || checklist) {
       selectedIndex = getSelectedIndex();
     }
+
     dispatch(element, 'SMUI:list:mount', {
       get element() {
         return getElement();
@@ -252,6 +254,7 @@
       setAttributeForElementIndex,
       removeAttributeForElementIndex,
     });
+
     instance.init();
 
     return () => {

diff --git a/packages/menu-surface/MenuSurface.svelte b/packages/menu-surface/MenuSurface.svelte
@@ -135,7 +135,7 @@
     instance.setAnchorMargin(anchorMargin);
   }
 
-  onMount(async () => {
+  onMount(() => {
     instance = new MDCMenuSurfaceFoundation({
       addClass,
       removeClass,
@@ -173,10 +173,12 @@
         previousFocus = document.activeElement;
       },
       restoreFocus: () => {
-        if (element.contains(document.activeElement)) {
-          if (previousFocus && previousFocus.focus) {
-            previousFocus.focus();
-          }
+        if (
+          element.contains(document.activeElement) &&
+          previousFocus &&
+          previousFocus.focus
+        ) {
+          previousFocus.focus();
         }
       },
 
@@ -211,6 +213,7 @@
         internalStyles.maxHeight = height;
       },
     });
+
     dispatch(element, 'SMUI:menu-surface:mount', {
       get open() {
         return open;
@@ -220,11 +223,12 @@
       },
       closeProgrammatic,
     });
+
     instance.init();
 
     return () => {
       const isHoisted = instance.isHoistedElement;
-      menuSurface.destroy();
+      instance.destroy();
       if (isHoisted) {
         element.parentNode.removeChild(element);
       }
@@ -244,6 +248,7 @@
 
   function removeClass(className) {
     delete internalClasses[className];
+    internalClasses = internalClasses;
   }
 
   export function isOpen() {

diff --git a/packages/menu/Menu.svelte b/packages/menu/Menu.svelte
@@ -43,7 +43,7 @@
   let menuSurfaceAccessor;
   let listAccessor;
 
-  onMount(async () => {
+  onMount(() => {
     instance = new MDCMenuFoundation({
       addClassToElementAtIndex: (index, className) => {
         listAccessor.addClassForElementIndex(index, className);

diff --git a/packages/ripple/Ripple.js b/packages/ripple/Ripple.js
@@ -20,9 +20,30 @@ export default function Ripple(
   let removeLayoutListener;
 
   function handleProps() {
+    if (ripple) {
+      switch (color) {
+        case 'surface':
+          addClass('mdc-ripple-surface');
+          removeClass('mdc-ripple-surface--primary');
+          removeClass('mdc-ripple-surface--accent');
+          return;
+        case 'primary':
+          addClass('mdc-ripple-surface');
+          addClass('mdc-ripple-surface--primary');
+          removeClass('mdc-ripple-surface--accent');
+          return;
+        case 'secondary':
+          addClass('mdc-ripple-surface');
+          removeClass('mdc-ripple-surface--primary');
+          addClass('mdc-ripple-surface--accent');
+          return;
+      }
+    }
+    removeClass('mdc-ripple-surface');
+    removeClass('mdc-ripple-surface--primary');
+    removeClass('mdc-ripple-surface--accent');
+
     if (ripple && !instance) {
-      // Override the Ripple component's adapter, so that we can forward classes
-      // to Svelte components that overwrite Ripple's classes.
       instance = new MDCRippleFoundation({
         addClass,
         browserSupportsCssVars: () => util.supportsCssVariables(window),
@@ -64,28 +85,6 @@ export default function Ripple(
       instance.destroy();
       instance = null;
     }
-    if (ripple) {
-      switch (color) {
-        case 'surface':
-          addClass('mdc-ripple-surface');
-          removeClass('mdc-ripple-surface--primary');
-          removeClass('mdc-ripple-surface--accent');
-          return;
-        case 'primary':
-          addClass('mdc-ripple-surface');
-          addClass('mdc-ripple-surface--primary');
-          removeClass('mdc-ripple-surface--accent');
-          return;
-        case 'secondary':
-          addClass('mdc-ripple-surface');
-          removeClass('mdc-ripple-surface--primary');
-          addClass('mdc-ripple-surface--accent');
-          return;
-      }
-    }
-    removeClass('mdc-ripple-surface');
-    removeClass('mdc-ripple-surface--primary');
-    removeClass('mdc-ripple-surface--accent');
   }
 
   handleProps();

diff --git a/packages/select/Select.svelte b/packages/select/Select.svelte
@@ -224,7 +224,7 @@
     removeLayoutListener = addLayoutListener(layout);
   }
 
-  onMount(async () => {
+  onMount(() => {
     select = new MDCSelect(element);
 
     menuPromiseResolve(select.menu_);
@@ -252,6 +252,7 @@
 
   function removeClass(className) {
     delete internalClasses[className];
+    internalClasses = internalClasses;
   }
 
   function getMenuInstancePromise() {

diff --git a/packages/tab-indicator/TabIndicator.svelte b/packages/tab-indicator/TabIndicator.svelte
@@ -65,7 +65,7 @@
   let instantiate = getContext('SMUI:tab-indicator:instantiate');
   let getInstance = getContext('SMUI:tab-indicator:getInstance');
 
-  onMount(async () => {
+  onMount(() => {
     if (instantiate !== false) {
       tabIndicator = new MDCTabIndicator(element);
     } else {

diff --git a/packages/tab-scroller/TabScroller.svelte b/packages/tab-scroller/TabScroller.svelte
@@ -46,7 +46,7 @@
   let instantiate = getContext('SMUI:tab-scroller:instantiate');
   let getInstance = getContext('SMUI:tab-scroller:getInstance');
 
-  onMount(async () => {
+  onMount(() => {
     if (instantiate !== false) {
       tabScroller = new MDCTabScroller(element);
     } else {

diff --git a/packages/tab/Tab.svelte b/packages/tab/Tab.svelte
@@ -122,7 +122,7 @@
     tab.focusOnActivate = focusOnActivate;
   }
 
-  onMount(async () => {
+  onMount(() => {
     if (instantiate !== false) {
       tab = new MDCTab(element);
     } else {

diff --git a/packages/textfield/Input.svelte b/packages/textfield/Input.svelte
@@ -49,6 +49,7 @@
 
   $: if (type === 'file') {
     delete valueProp.value;
+    valueProp = valueProp;
   } else {
     valueProp.value = value === undefined ? '' : value;
   }

diff --git a/packages/top-app-bar/TopAppBar.svelte b/packages/top-app-bar/TopAppBar.svelte
@@ -173,6 +173,7 @@
 
   function removeClass(className) {
     delete internalClasses[className];
+    internalClasses = internalClasses;
   }
 
   function addStyle(name, value) {

diff --git a/site/src/routes/demo/button.scss b/site/src/routes/demo/button.scss
@@ -1,5 +1,5 @@
-@import "@material/button/mixins";
-@import "@material/shape/variables";
+@import '@material/button/mixins';
+@import '@material/shape/variables';
 
 .button-shaped-round {
   @include mdc-button-shape-radius(999px);
@@ -9,6 +9,24 @@
   --notchSize: #{$mdc-shape-small-component-radius * 2};
 
   // source: https://css-tricks.com/notched-boxes/
-  -webkit-clip-path: polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)));
-  clip-path: polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)));
-}
+  -webkit-clip-path: polygon(
+    0% var(--notchSize),
+    var(--notchSize) 0%,
+    calc(100% - var(--notchSize)) 0%,
+    100% var(--notchSize),
+    100% calc(100% - var(--notchSize)),
+    calc(100% - var(--notchSize)) 100%,
+    var(--notchSize) 100%,
+    0% calc(100% - var(--notchSize))
+  );
+  clip-path: polygon(
+    0% var(--notchSize),
+    var(--notchSize) 0%,
+    calc(100% - var(--notchSize)) 0%,
+    100% var(--notchSize),
+    100% calc(100% - var(--notchSize)),
+    calc(100% - var(--notchSize)) 100%,
+    var(--notchSize) 100%,
+    0% calc(100% - var(--notchSize))
+  );
+}