From 059dad5d44ed43f4c84e754ce73f10b24bbbd1ae Mon Sep 17 00:00:00 2001
From: Andrew Jakubowicz <ajakubowicz@google.com>
Date: Thu, 7 Sep 2023 16:54:02 -0700
Subject: [PATCH] fix(select): change slot names to kebab-case

BREAKING CHANGE: replace `leadingicon` and `trailingicon` slot names with `leading-icon` and `trailing-icon`

PiperOrigin-RevId: 563583658
---
 select/demo/demo.ts       |  4 ++--
 select/demo/stories.ts    | 14 +++++++-------
 select/internal/select.ts |  6 +++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/select/demo/demo.ts b/select/demo/demo.ts
index ba55c0059..ddd2fe34d 100644
--- a/select/demo/demo.ts
+++ b/select/demo/demo.ts
@@ -26,8 +26,8 @@ const collection =
       new Knob('menuFixed', {ui: boolInput(), defaultValue: false}),
 
       new Knob('md-select Slots', {ui: title()}),
-      new Knob('slot=leadingicon', {ui: textInput(), defaultValue: ''}),
-      new Knob('slot=trailingicon', {ui: textInput(), defaultValue: ''}),
+      new Knob('slot=leading-icon', {ui: textInput(), defaultValue: ''}),
+      new Knob('slot=trailing-icon', {ui: textInput(), defaultValue: ''}),
     ]);
 
 collection.addStories(...materialInitsToStoryInits(stories));
diff --git a/select/demo/stories.ts b/select/demo/stories.ts
index fa57ea9a0..875174409 100644
--- a/select/demo/stories.ts
+++ b/select/demo/stories.ts
@@ -26,8 +26,8 @@ export interface StoryKnobs {
   menuFixed: boolean;
 
   'md-select Slots': void;
-  'slot=leadingicon': string;
-  'slot=trailingicon': string;
+  'slot=leading-icon': string;
+  'slot=trailing-icon': string;
 }
 
 const outlined: MaterialStoryInit<StoryKnobs> = {
@@ -44,8 +44,8 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
           .menuFixed=${knobs.menuFixed}
           .typeaheadDelay=${knobs.typeaheadDelay}
           .error=${knobs.error}>
-        ${renderIcon(knobs['slot=leadingicon'], 'leadingicon')}
-        ${renderIcon(knobs['slot=trailingicon'], 'trailingicon')}
+        ${renderIcon(knobs['slot=leading-icon'], 'leading-icon')}
+        ${renderIcon(knobs['slot=trailing-icon'], 'trailing-icon')}
         ${renderItems()}
       </md-outlined-select>
     `;
@@ -66,15 +66,15 @@ const filled: MaterialStoryInit<StoryKnobs> = {
           .menuFixed=${knobs.menuFixed}
           .typeaheadDelay=${knobs.typeaheadDelay}
           .error=${knobs.error}>
-        ${renderIcon(knobs['slot=leadingicon'], 'leadingicon')}
-        ${renderIcon(knobs['slot=trailingicon'], 'trailingicon')}
+        ${renderIcon(knobs['slot=leading-icon'], 'leading-icon')}
+        ${renderIcon(knobs['slot=trailing-icon'], 'trailing-icon')}
         ${renderItems()}
       </md-filled-select>
     `;
   }
 };
 
-function renderIcon(iconName: string, slot: 'leadingicon'|'trailingicon') {
+function renderIcon(iconName: string, slot: 'leading-icon'|'trailing-icon') {
   return iconName ?
       html`<md-icon slot=${slot}><span>${iconName}</span></md-icon>` :
       nothing;
diff --git a/select/internal/select.ts b/select/internal/select.ts
index ee4585936..8fe703b52 100644
--- a/select/internal/select.ts
+++ b/select/internal/select.ts
@@ -95,7 +95,7 @@ export abstract class Select extends LitElement {
   @state() private open = false;
   @query('md-menu') private readonly menu!: Menu|null;
   @query('#label') private readonly labelEl!: HTMLElement;
-  @queryAssignedElements({slot: 'leadingicon', flatten: true})
+  @queryAssignedElements({slot: 'leading-icon', flatten: true})
   private readonly leadingIcons!: Element[];
 
   /**
@@ -229,7 +229,7 @@ export abstract class Select 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>
      `;
   }
@@ -237,7 +237,7 @@ export abstract class Select extends LitElement {
   private renderTrailingIcon() {
     return html`
       <span class="icon trailing" slot="end">
-        <slot name="trailingicon" @slotchange=${this.handleIconChange}>
+        <slot name="trailing-icon" @slotchange=${this.handleIconChange}>
           <svg height="5" viewBox="7 10 10 5" focusable="false">
             <polygon class="down" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
             <polygon class="up" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>