feat(fab): Update to extend actionElement and use md-ripple

PiperOrigin-RevId: 448336088

Author: EstebanG23

components/fab/fab-extended.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2018 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -14,7 +14,7 @@ import {styles as sharedStyles} from './lib/fab-shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'm3-fab-extended': MdFabExtended;
+    'md-fab-extended': MdFabExtended;
   }
 }
 
@@ -23,7 +23,7 @@ declare global {
  * @final
  * @suppress {visibility}
  */
-@customElement('m3-fab-extended')
+@customElement('md-fab-extended')
 export class MdFabExtended extends FabExtended {
   static override styles = [overlayStyles, sharedStyles, extendedStyles];
 }

components/fab/fab.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2018 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -14,7 +14,7 @@ import {styles as fabStyles} from './lib/fab-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'm3-fab': MdFab;
+    'md-fab': MdFab;
   }
 }
 
@@ -23,7 +23,7 @@ declare global {
  * @final
  * @suppress {visibility}
  */
-@customElement('m3-fab')
+@customElement('md-fab')
 export class MdFab extends Fab {
   static override styles = [overlayStyles, sharedStyles, fabStyles];
 }

components/fab/lib/fab-extended.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2021 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -10,14 +10,13 @@ import {ClassInfo} from 'lit/directives/class-map.js';
 import {FabShared} from './fab-shared.js';
 
 /**
- * Fab Extended Base class logic and template definition
  * @soyCompatible
  */
 export class FabExtended extends FabShared {
   /** @soyTemplate */
-  protected override getRootClasses(): ClassInfo {
+  protected override getRenderClasses(): ClassInfo {
     return {
-      ...super.getRootClasses(),
+      ...super.getRenderClasses(),
       'md3-fab--extended': true,
     };
   }

components/fab/lib/fab-shared.ts

@@ -1,27 +1,25 @@
 /**
  * @license
- * Copyright 2021 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/mwc-ripple/mwc-ripple.js';
+import '../../ripple/ripple.js';
 
-import {Ripple} from '@material/mwc-ripple/mwc-ripple.js';
-import {RippleHandlers} from '@material/mwc-ripple/ripple-handlers.js';
-import {html, LitElement, TemplateResult} from 'lit';
-import {eventOptions, property, queryAsync, state} from 'lit/decorators.js';
+import {html, TemplateResult} from 'lit';
+import {property, query} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
+import {ActionElement, BeginPressConfig, EndPressConfig} from '../../action-element/action-element.js';
+import {MdRipple} from '../../ripple/ripple.js';
+
 /**
- * Fab Base class logic and template definition
  * @soyCompatible
  */
-export class FabShared extends LitElement {
+export class FabShared extends ActionElement {
   static override shadowRootOptions:
       ShadowRootInit = {mode: 'open', delegatesFocus: true};
 
-  @queryAsync('mwc-ripple') ripple!: Promise<Ripple|null>;
-
   @property({type: Boolean}) disabled = false;
 
   @property() icon = '';
@@ -32,12 +30,7 @@ export class FabShared extends LitElement {
 
   @property({type: Boolean}) reducedTouchTarget = false;
 
-  @state() protected shouldRenderRipple = false;
-
-  protected rippleHandlers = new RippleHandlers(() => {
-    this.shouldRenderRipple = true;
-    return this.ripple;
-  });
+  @query('md-ripple') ripple!: MdRipple;
 
   /**
    * @soyTemplate
@@ -46,35 +39,29 @@ export class FabShared extends LitElement {
   protected override render(): TemplateResult {
     const ariaLabel = this.label ? this.label : this.icon;
 
-    /*
-     * Some internal styling is sensitive to whitespace in this template, take
-     * care when modifying it.
-     */
     return html`
       <button
-          class="md3-fab md3-surface ${classMap(this.getRootClasses())}"
-          ?disabled="${this.disabled}"
-          aria-label="${ariaLabel}"
-          @mouseenter=${this.handleRippleMouseEnter}
-          @mouseleave=${this.handleRippleMouseLeave}
-          @focus=${this.handleRippleFocus}
-          @blur=${this.handleRippleBlur}
-          @mousedown=${this.handleRippleActivate}
-          @touchstart=${this.handleRippleStartPress}
-          @touchend=${this.handleRippleDeactivate}
-          @touchcancel=${this.handleRippleDeactivate}><!--
-        -->${this.renderElevationOverlay()}<!--
-        -->${this.renderRipple()}<!--
-        --><span class="material-icons md3-fab__icon"><!--
-          --><slot name="icon">${this.icon}</slot><!--
-        --></span><!--
-        -->${this.renderLabel()}<!--
-        -->${this.renderTouchTarget()}<!--
+        class="md3-fab md3-surface ${classMap(this.getRenderClasses())}"
+        ?disabled="${this.disabled}"
+        aria-label="${ariaLabel}"
+        @pointerdown="${this.handlePointerDown}"
+        @pointerup="${this.handlePointerUp}"
+        @pointercancel="${this.handlePointerCancel}"
+        @pointerleave="${this.handlePointerLeave}"
+        @pointerenter="${this.handlePointerEnter}"
+        @click="${this.handleClick}"
+        @clickmod="${this.handleClick}"
+        @contextmenu="${this.handleContextMenu}"
+      >${this.renderElevationOverlay()}${this.renderRipple()}
+        <span class="material-icons md3-fab__icon">
+          <slot name="icon">${this.icon}</slot>
+        </span>
+        ${this.renderLabel()}${this.renderTouchTarget()}
       </button>`;
   }
 
   /** @soyTemplate */
-  protected getRootClasses(): ClassInfo {
+  protected getRenderClasses(): ClassInfo {
     return {'md3-fab--lowered': this.lowered};
   }
 
@@ -91,8 +78,8 @@ export class FabShared extends LitElement {
   }
 
   /** @soyTemplate */
-  protected renderLabel(): TemplateResult {
-    return html``;
+  protected renderLabel(): TemplateResult|string {
+    return '';
   }
 
   /** @soyTemplate */
@@ -102,47 +89,33 @@ export class FabShared extends LitElement {
 
   /** @soyTemplate */
   protected renderRipple(): TemplateResult {
-    return this.shouldRenderRipple ? html`
-      <mwc-ripple
-          class="md3-fab__ripple"
-          internalUseStateLayerCustomProperties>
-      </mwc-ripple>` :
-                                     html``;
-  }
-
-  protected handleRippleActivate(event?: Event) {
-    const onUp = () => {
-      window.removeEventListener('mouseup', onUp);
-
-      this.handleRippleDeactivate();
-    };
-
-    window.addEventListener('mouseup', onUp);
-    this.handleRippleStartPress(event);
+    return html`<md-ripple class="md3-fab__ripple" .disabled="${
+        this.disabled}"></md-ripple>`;
   }
 
-  @eventOptions({passive: true})
-  protected handleRippleStartPress(event?: Event) {
-    this.rippleHandlers.startPress(event);
+  override beginPress({positionEvent}: BeginPressConfig) {
+    this.ripple.beginPress(positionEvent);
   }
 
-  protected handleRippleDeactivate() {
-    this.rippleHandlers.endPress();
+  override endPress(options: EndPressConfig) {
+    this.ripple.endPress();
+    super.endPress(options);
   }
 
-  protected handleRippleMouseEnter() {
-    this.rippleHandlers.startHover();
+  override handlePointerDown(e: PointerEvent) {
+    super.handlePointerDown(e);
   }
 
-  protected handleRippleMouseLeave() {
-    this.rippleHandlers.endHover();
+  override handlePointerUp(e: PointerEvent) {
+    super.handlePointerUp(e);
   }
 
-  protected handleRippleFocus() {
-    this.rippleHandlers.startFocus();
+  protected handlePointerEnter(e: PointerEvent) {
+    this.ripple.beginHover(e);
   }
 
-  protected handleRippleBlur() {
-    this.rippleHandlers.endFocus();
+  override handlePointerLeave(e: PointerEvent) {
+    super.handlePointerLeave(e);
+    this.ripple.endHover();
   }
 }

components/fab/lib/fab.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2021 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -9,14 +9,13 @@ import {ClassInfo} from 'lit/directives/class-map.js';
 import {FabShared} from './fab-shared.js';
 
 /**
- * Fab Extended Base class logic and template definition
  * @soyCompatible
  */
 export class Fab extends FabShared {
   /** @soyTemplate */
-  protected override getRootClasses(): ClassInfo {
+  protected override getRenderClasses(): ClassInfo {
     return {
-      ...super.getRootClasses(),
+      ...super.getRenderClasses(),
       'md3-fab--regular': true,
     };
   }