[Button]: Separate classMap into a separate method

PiperOrigin-RevId: 332943262

Author: dfreedm

CHANGELOG.md

@@ -28,6 +28,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - `fab`
   - **BREAKING:VISUAL** default touch target increased on mini fab by 8px.
+- `button`
+  - Separate classMap into its own method
 
 ### Fixed
 

packages/button/mwc-button-base.ts

@@ -48,7 +48,7 @@ export class ButtonBase extends LitElement {
 
   @internalProperty() protected shouldRenderRipple = false;
 
-  protected rippleHandlers: RippleHandlers = new RippleHandlers(() => {
+  protected rippleHandlers = new RippleHandlers(() => {
     this.shouldRenderRipple = true;
     return this.ripple;
   });
@@ -83,18 +83,21 @@ export class ButtonBase extends LitElement {
   }
 
   /** @soyCompatible */
-  protected render() {
-    /** @classMap */
-    const classes = {
+  protected getRenderClasses() {
+    return classMap({
       'mdc-button--raised': this.raised,
       'mdc-button--unelevated': this.unelevated,
       'mdc-button--outlined': this.outlined,
       'mdc-button--dense': this.dense,
-    };
+    });
+  }
+
+  /** @soyCompatible */
+  protected render() {
     return html`
       <button
           id="button"
-          class="mdc-button ${classMap(classes)}"
+          class="mdc-button ${this.getRenderClasses()}"
           ?disabled="${this.disabled}"
           aria-label="${this.label || this.icon}"
           @focus="${this.handleRippleFocus}"