fix: 🐛 Fix MD web pre10 breaking changes

maicol07 · Jun 6, 2023 · ceb2ccb · ceb2ccb
1 parent 67c1b14
commit ceb2ccb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 33 deletions.
diff --git a/card/lib/_card.scss b/card/lib/_card.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 
 @use '@material/web/elevation/lib/elevation';
-@use '@material/web/sass/theme';
+@use '@material/web/internal/sass/theme';
 @use '@material/web/tokens';
 @use "@material/elevation" as oldelevation;
 

diff --git a/card/lib/card.ts b/card/lib/card.ts
@@ -1,12 +1,10 @@
 import '@material/web/ripple/ripple.js';
 import '@material/web/focus/focus-ring.js';
 
-import {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';
-import {queryAssignedElements, queryAsync, state} from 'lit/decorators.js';
+import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
+import {queryAssignedElements} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
-import {MdRipple} from '@material/web/ripple/ripple.js';
 import {property} from 'lit/decorators/property.js';
-import {ripple} from '@material/web/ripple/directive.js';
 
 export abstract class Card extends LitElement {
     /** Allows the card to be clickable with a ripple effect. */
@@ -24,24 +22,11 @@ export abstract class Card extends LitElement {
      */
     @queryAssignedElements({slot: 'icon'}) protected icons!: HTMLElement[];
 
-    /**
-     * @internal
-     * @protected
-     */
-    @queryAsync('md-ripple') protected ripple!: Promise<MdRipple | null>;
-
-  /**
-   * @internal
-   * @protected
-   */
-  @state() protected showRipple = false;
-
     override render() {
         return html`
             <div class="${classMap(this.getRenderClasses())}">
                 ${this.renderPrimaryAction()}
                 ${this.renderActions()}
-                ${this.renderRipple()}
                 <md-elevation shadow></md-elevation>
             </div>`;
     }
@@ -84,22 +69,13 @@ export abstract class Card extends LitElement {
         super.update(_changedProperties);
     }
 
-  /**
-   * @internal
-   * @protected
-   */
-  protected getRipple = () => {
-    this.showRipple = true;
-    return this.ripple;
-  };
-
     protected renderPrimaryAction() {
         return html`
             <div id="primary-action"
                  class="${classMap(this.getPrimaryActionRenderClasses())}"
                  tabindex="0"
-                 aria-label="${this.ariaLabel}"
-                 ${ripple(this.getRipple)}>
+                 aria-label="${this.ariaLabel}">
+                 ${this.renderRipple()}
                 ${this.renderFocusRing()}
                 <slot></slot>
             </div>`;
@@ -136,8 +112,7 @@ export abstract class Card extends LitElement {
     }
 
     protected renderRipple() {
-        return this.showRipple ? html`
-            <md-ripple class="${classMap(this.getRippleRenderClasses())}" ?disabled=${this.disabled}></md-ripple>` : nothing;
+        return html`<md-ripple class="${classMap(this.getRippleRenderClasses())}" ?disabled=${this.disabled}></md-ripple>`;
     }
 
     protected wrapButtonSlot(buttonSlotTemplate: TemplateResult | string) {
@@ -167,7 +142,7 @@ export abstract class Card extends LitElement {
     if (this.icons.length > 0 || this.buttons.length > 0) {
         return html`
             <div class="${classMap(this.getRenderActionsClasses())}"
-                 ${ripple(this.getRipple)}>
+                ${this.renderRipple()}>
                 ${this.wrapButtonSlot(buttonSlotTemplate)}
                 ${this.wrapIconSlot(iconSlotTemplate)}
             </div>`;

diff --git a/data-table/lib/_data-table.scss b/data-table/lib/_data-table.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 
 @use "@material/data-table/data-table";
-@use '@material/web/sass/theme';
+@use '@material/web/internal/sass/theme';
 @use '@material/web/tokens';
 @use "@material/web/elevation/elevation";
 @use "@material/elevation" as oldelevation;