material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 01:20:23 +03:00
Code Issues Projects Releases Wiki Activity

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

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

PiperOrigin-RevId: 563583658
This commit is contained in:
Andrew Jakubowicz 2023-09-07 16:54:02 -07:00 committed by Copybara-Service
parent f019ac37fe
commit 059dad5d44
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
select/demo/demo.ts
View File

@ -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));

14
select/demo/stories.ts
View File

@ -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;

6
select/internal/select.ts
View File

@ -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>