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
material-components · Sep 7, 2023 · 059dad5 · 059dad5
1 parent f019ac3
commit 059dad5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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,15 +229,15 @@ 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>
      `;
   }
 
   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>