Return ClassInfo instead of a DirectiveResult from mwc-button's getRenderClasses() method.

1. It allows subclasses to augment the classes.
2. It avoids an issue relating to relying on the implied type of Directive results, due to a bug in tsc (see #2715 and microsoft/TypeScript#45946)

PiperOrigin-RevId: 397790019

Author: aomarks

packages/button/mwc-button-base.ts

@@ -14,7 +14,7 @@ import {AriaHasPopup, ariaProperty} from '@material/mwc-base/aria-property';
 import {Ripple} from '@material/mwc-ripple/mwc-ripple';
 import {RippleHandlers} from '@material/mwc-ripple/ripple-handlers';
 import {eventOptions, html, LitElement, property, query, queryAsync, state, TemplateResult} from 'lit-element';
-import {classMap} from 'lit-html/directives/class-map.js';
+import {classMap, ClassInfo} from 'lit-html/directives/class-map.js';
 import {ifDefined} from 'lit-html/directives/if-defined.js';
 
 /** @soyCompatible */
@@ -88,14 +88,14 @@ export class ButtonBase extends LitElement {
     }
   }
 
-  /** @soyTemplate classMap */
-  protected getRenderClasses() {
-    return classMap({
+  /** @soyTemplate */
+  protected getRenderClasses(): ClassInfo {
+    return {
       'mdc-button--raised': this.raised,
       'mdc-button--unelevated': this.unelevated,
       'mdc-button--outlined': this.outlined,
       'mdc-button--dense': this.dense,
-    });
+    };
   }
 
   /**
@@ -107,7 +107,7 @@ export class ButtonBase extends LitElement {
     return html`
       <button
           id="button"
-          class="mdc-button ${this.getRenderClasses()}"
+          class="mdc-button ${classMap(this.getRenderClasses())}"
           ?disabled="${this.disabled}"
           aria-label="${this.label || this.icon}"
           aria-haspopup="${ifDefined(this.ariaHasPopup)}"