fix(button)!: remove icon property from Button, require slotted icons

BREAKING CHANGE: Remove icon property from Button, require slotted icons PiperOrigin-RevId: 500770988
material-components · Jan 9, 2023 · d3b517a · d3b517a
1 parent ea33cb8
commit d3b517a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 42 deletions.
diff --git a/button/lib/_icon.scss b/button/lib/_icon.scss
@@ -13,8 +13,7 @@
   .md3-button__icon-slot-container {
     display: inline-flex;
 
-    ::slotted([slot='icon']),
-    .md3-button__icon {
+    ::slotted([slot='icon']) {
       display: inline-flex;
       position: relative;
       writing-mode: horizontal-tb;
@@ -41,17 +40,11 @@
     }
   }
 
-  .md3-button__icon--leading {
-    ::slotted([slot='icon']),
-    .md3-button__icon {
-      margin-inline-end: 8px;
-    }
+  .md3-button__icon--leading ::slotted([slot='icon']) {
+    margin-inline-end: 8px;
   }
 
-  .md3-button__icon--trailing {
-    ::slotted([slot='icon']),
-    .md3-button__icon {
-      margin-inline-start: 8px;
-    }
+  .md3-button__icon--trailing ::slotted([slot='icon']) {
+    margin-inline-start: 8px;
   }
 }
diff --git a/button/lib/button.ts b/button/lib/button.ts
@@ -9,16 +9,13 @@
 // This is required for @ariaProperty
 // tslint:disable:no-new-decorators
 
-import '../../icon/icon.js';
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 
-import {html, LitElement, TemplateResult} from 'lit';
+import {html, LitElement, nothing, TemplateResult} from 'lit';
 import {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
-import {ifDefined} from 'lit/directives/if-defined.js';
 import {when} from 'lit/directives/when.js';
-import {html as staticHtml, literal} from 'lit/static-html.js';
 
 import {dispatchActivationClick, isActivationClick} from '../../controller/events.js';
 import {ariaProperty} from '../../decorators/aria-property.js';
@@ -34,8 +31,6 @@ export abstract class Button extends LitElement implements ButtonState {
   static override shadowRootOptions:
       ShadowRootInit = {mode: 'open', delegatesFocus: true};
 
-  protected readonly iconTag = literal`md-icon`;
-
   @property({type: String, attribute: 'data-aria-has-popup', noAccessor: true})
   @ariaProperty
   override ariaHasPopup!: ARIAHasPopup;
@@ -57,13 +52,6 @@ export abstract class Button extends LitElement implements ButtonState {
    */
   @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;
 
-  /**
-   * The label of the icon to render.
-   *
-   * See md-icon's documentation for usage.
-   */
-  @property({type: String}) icon = '';
-
   /**
    * The button's visible label.
    */
@@ -90,7 +78,7 @@ export abstract class Button extends LitElement implements ButtonState {
   @state() protected showRipple = false;
 
   @queryAssignedElements({slot: 'icon', flatten: true})
-  protected iconElement!: HTMLElement[]|null;
+  protected assignedIcons!: HTMLElement[];
 
   constructor() {
     super();
@@ -124,8 +112,8 @@ export abstract class Button extends LitElement implements ButtonState {
       <button
           class="md3-button ${classMap(this.getRenderClasses())}"
           ?disabled="${this.disabled}"
-          aria-label="${ifDefined(this.ariaLabel || undefined)}"
-          aria-haspopup="${ifDefined(this.ariaHasPopup || undefined)}"
+          aria-label="${this.ariaLabel || nothing}"
+          aria-haspopup="${this.ariaHasPopup || nothing}"
           @pointerdown="${this.handlePointerDown}"
           @focus="${this.handleFocus}"
           @blur="${this.handleBlur}"
@@ -196,23 +184,10 @@ export abstract class Button extends LitElement implements ButtonState {
     return html`<span class="md3-button__icon-slot-container ${
         classMap(this.getIconContainerClasses())}">
                   <slot name="icon" @slotchange="${this.handleSlotChange}">
-                    ${this.icon ? this.renderFontIcon() : ''}
                   </slot>
                 </span>`;
   }
 
-  protected renderFontIcon(): TemplateResult {
-    return staticHtml`
-    <${this.iconTag} class="md3-button__icon">
-      ${this.icon}
-    </${this.iconTag}>`;
-  }
-
-  override update(changedProperties: Map<string, string>) {
-    super.update(changedProperties);
-    this.hasIcon = !!this.iconElement && this.iconElement.length > 0;
-  }
-
   protected handlePointerDown(e: PointerEvent) {
     pointerPress();
     this.showFocusRing = shouldShowStrongFocus();
@@ -233,6 +208,6 @@ export abstract class Button extends LitElement implements ButtonState {
   }
 
   protected handleSlotChange() {
-    this.requestUpdate();
+    this.hasIcon = this.assignedIcons.length > 0;
   }
 }