refactor(iconbutton)!: remove icon properties, use slots instead

PiperOrigin-RevId: 501403118
material-components · Jan 12, 2023 · 36f1a1a · 36f1a1a
1 parent 7c377e9
commit 36f1a1a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 47 deletions.
diff --git a/iconbutton/icon-button_test.ts b/iconbutton/icon-button_test.ts
@@ -16,16 +16,19 @@ import {IconButtonHarness} from './harness.js';
 import {MdStandardIconButtonToggle} from './standard-icon-button-toggle.js';
 
 const ICON_BUTTON_TEMPLATE = html`
-  <md-standard-icon-button .icon="${'star'}" aria-label="Star">
+  <md-standard-icon-button aria-label="Star">
+    star
   </md-standard-icon-button>
 `;
 const LINK_ICON_BUTTON_TEMPLATE = html`
-  <md-standard-link-icon-button .icon="${'star'}" aria-label="Star">
+  <md-standard-link-icon-button aria-label="Star">
+    star
   </md-standard-link-icon-button>
 `;
 const ICON_BUTTON_TOGGLE_TEMPLATE = html`
-  <md-standard-icon-button-toggle .onIcon="${'star'}"
-      .offIcon="${'star_border'}" aria-label="Star">
+  <md-standard-icon-button-toggle aria-label="Star">
+      <md-icon slot="onIcon">star</md-icon>
+      <md-icon slot="offIcon">star_border</md-icon>
   </md-standard-icon-button-toggle>
 `;
 
@@ -163,8 +166,8 @@ describe('icon button tests', () => {
     it('if `flipsIconInRtl=true`, flips icon in an RTL context', async () => {
       const template = html`
           <div dir="rtl">
-            <md-standard-icon-button .icon="${'star'}" aria-label="Star"
-                .flipIconInRtl="${true}">
+            <md-standard-icon-button aria-label="Star" .flipIconInRtl="${true}">
+                star
             </md-standard-icon-button>
           </div>`;
       const element =
@@ -178,8 +181,9 @@ describe('icon button tests', () => {
        async () => {
          const template = html`
             <div dir="ltr">
-              <md-standard-icon-button .icon="${'star'}" aria-label="Star"
-                  .flipIconInRtl="${true}">
+              <md-standard-icon-button aria-label="Star" .flipIconInRtl="${
+             true}">
+                  star
               </md-standard-icon-button>
             </div>`;
          const element =

diff --git a/iconbutton/lib/icon-button-toggle.ts b/iconbutton/lib/icon-button-toggle.ts
@@ -11,10 +11,9 @@ import '../../focus/focus-ring.js';
 import '../../icon/icon.js';
 import '../../ripple/ripple.js';
 
-import {html, LitElement, TemplateResult} from 'lit';
+import {html, LitElement, nothing, TemplateResult} from 'lit';
 import {property, 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 {ariaProperty} from '../../decorators/aria-property.js';
@@ -36,20 +35,6 @@ export class IconButtonToggle extends LitElement {
    */
   @property({type: Boolean, reflect: true}) disabled = false;
 
-  /**
-   * The glyph of the icon to display from the applied icon font when toggle
-   * button is selected or "on". See the associated typography tokens for more
-   * info.
-   */
-  @property({type: String}) onIcon = '';
-
-  /**
-   * The glyph of the icon to display from the applied icon font when toggle
-   * button is not selected or "off". See the associated typography tokens for
-   * more info.
-   */
-  @property({type: String}) offIcon = '';
-
   /**
    * The `aria-label` of the button when the toggle button is selected or "on".
    */
@@ -85,14 +70,14 @@ export class IconButtonToggle extends LitElement {
 
   protected override render(): TemplateResult {
     const hasToggledAriaLabel = this.ariaLabelOn && this.ariaLabelOff;
-    const ariaPressedValue = hasToggledAriaLabel ? undefined : this.selected;
+    const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;
     const ariaLabelValue = hasToggledAriaLabel ?
         (this.selected ? this.ariaLabelOn : this.ariaLabelOff) :
         this.ariaLabel;
     return html`<button
           class="md3-icon-button ${classMap(this.getRenderClasses())}"
-          aria-pressed="${ifDefined(ariaPressedValue)}"
-          aria-label="${ifDefined(ariaLabelValue)}"
+          aria-pressed="${ariaPressedValue}"
+          aria-label="${ariaLabelValue || nothing}"
           ?disabled="${this.disabled}"
           @focus="${this.handleFocus}"
           @blur="${this.handleBlur}"
@@ -102,12 +87,12 @@ export class IconButtonToggle extends LitElement {
         ${this.renderFocusRing()}
         ${when(this.showRipple, this.renderRipple)}
         ${this.renderTouchTarget()}
-        <span class="md3-icon-button__icon">
-          <slot name="offIcon">${this.renderIcon(this.offIcon)}</slot>
-        </span>
-        <span class="md3-icon-button__icon md3-icon-button__icon--on">
-          <slot name="onIcon">${this.renderIcon(this.onIcon)}</slot>
-        </span>
+        <md-icon class="md3-icon-button__icon">
+          <slot name="offIcon"></slot>
+        </md-icon>
+        <md-icon class="md3-icon-button__icon md3-icon-button__icon--on">
+          <slot name="onIcon"></slot>
+        </md-icon>
       </button>`;
   }
 
@@ -117,15 +102,11 @@ export class IconButtonToggle extends LitElement {
     };
   }
 
-  protected renderIcon(icon: string): TemplateResult|string {
-    return icon ? html`<md-icon>${icon}</md-icon>` : '';
-  }
-
-  protected renderTouchTarget(): TemplateResult {
+  protected renderTouchTarget() {
     return html`<span class="md3-icon-button__touch"></span>`;
   }
 
-  protected renderFocusRing(): TemplateResult {
+  protected renderFocusRing() {
     return html`<md-focus-ring .visible="${
         this.showFocusRing}"></md-focus-ring>`;
   }

diff --git a/iconbutton/lib/icon-button.ts b/iconbutton/lib/icon-button.ts
@@ -28,12 +28,6 @@ import {ARIAHasPopup} from '../../types/aria.js';
 export class IconButton extends LitElement {
   @property({type: Boolean, reflect: true}) disabled = false;
 
-  /**
-   * The glyph of the icon to display from the applied icon font. See the
-   * associated typography tokens for more info.
-   */
-  @property({type: String}) icon = '';
-
   /**
    * Flips the icon if it is in an RTL context at startup.
    */
@@ -92,8 +86,7 @@ export class IconButton extends LitElement {
   protected renderIcon(): TemplateResult {
     // Note, it's important not to render the icon property as a slot fallback
     // to avoid any whitespace from overridding it.
-    return html`<span class="md3-icon-button__icon"><md-icon>${
-        this.icon ? this.icon : html`<slot></slot>`}</md-icon></span>`;
+    return html`<md-icon class="md3-icon-button__icon"><slot></slot></md-icon>`;
   }
 
   protected renderTouchTarget(): TemplateResult {