mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
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
This commit is contained in:
parent
f019ac37fe
commit
059dad5d44
@ -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));
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user