fix(textfield): change slot names to kebab-case

BREAKING CHANGE: replace slot names `leadingicon` and `trailingicon` with `leading-icon` and `trailing-icon` PiperOrigin-RevId: 563605216
material-components · Sep 8, 2023 · 82e9e92 · 82e9e92
1 parent 059dad5
commit 82e9e92
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/docs/components/text-field.md b/docs/components/text-field.md
@@ -170,18 +170,18 @@ icon), or to express errors.
 
 ```html
 <md-outlined-text-field placeholder="Search for messages">
-  <md-icon slot="leadingicon">search</md-icon>
+  <md-icon slot="leading-icon">search</md-icon>
 </md-outlined-text-field>
 
 <md-outlined-text-field label="Password" type="password">
-  <md-icon-button toggle slot="trailingicon">
+  <md-icon-button toggle slot="trailing-icon">
     <md-icon>visibility</md-icon>
     <md-icon slot="selected">visibility_off</md-icon>
   </md-icon-button>
 </md-outlined-text-field>
 
 <md-outlined-text-field label="Username" error error-text="Username not available">
-  <md-icon slot="trailingicon">error</md-icon>
+  <md-icon slot="trailing-icon">error</md-icon>
 </md-outlined-text-field>
 ```
 

diff --git a/textfield/demo/stories.ts b/textfield/demo/stories.ts
@@ -99,9 +99,9 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
   }
 };
 
-const LEADING_ICON = html`<md-icon slot="leadingicon">search</md-icon>`;
+const LEADING_ICON = html`<md-icon slot="leading-icon">search</md-icon>`;
 const TRAILING_ICON =
-    html`<md-icon-button slot="trailingicon"><md-icon>event</md-icon></md-icon-button>`;
+    html`<md-icon-button slot="trailing-icon"><md-icon>event</md-icon></md-icon-button>`;
 function reportValidity(event: Event) {
   (event.target as MdFilledTextField).reportValidity();
 }

diff --git a/textfield/internal/text-field.ts b/textfield/internal/text-field.ts
@@ -335,9 +335,9 @@ export abstract class TextField extends LitElement {
   @query('.input')
   private readonly inputOrTextarea?: HTMLInputElement|HTMLTextAreaElement|null;
   @query('.field') private readonly field?: Field|null;
-  @queryAssignedElements({slot: 'leadingicon'})
+  @queryAssignedElements({slot: 'leading-icon'})
   private readonly leadingIcons!: Element[];
-  @queryAssignedElements({slot: 'trailingicon'})
+  @queryAssignedElements({slot: 'trailing-icon'})
   private readonly trailingIcons!: Element[];
   private readonly internals =
       (this as HTMLElement /* needed for closure */).attachInternals();
@@ -593,15 +593,15 @@ export abstract class TextField extends LitElement {
   private renderLeadingIcon() {
     return html`
        <span class="icon leading" slot="start">
-         <slot name="leadingicon" @slotchange=${this.handleIconChange}></slot>
+         <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
        </span>
      `;
   }
 
   private renderTrailingIcon() {
     return html`
        <span class="icon trailing" slot="end">
-         <slot name="trailingicon" @slotchange=${this.handleIconChange}></slot>
+         <slot name="trailing-icon" @slotchange=${this.handleIconChange}></slot>
        </span>
      `;
   }

diff --git a/textfield/internal/text-field_test.ts b/textfield/internal/text-field_test.ts
@@ -77,7 +77,7 @@ describe('TextField', () => {
        async () => {
          const {harness, input} = await setupTest();
          // Add a trailing icon button to click on
-         render(html`<button slot="trailingicon">X</button>`, harness.element);
+         render(html`<button slot="trailing-icon">X</button>`, harness.element);
          const button = harness.element.querySelector('button');
 
          expect(button).toBeDefined();