mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
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
This commit is contained in:
parent
059dad5d44
commit
82e9e92a19
@ -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>
|
||||
```
|
||||
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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,7 +593,7 @@ 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>
|
||||
`;
|
||||
}
|
||||
@ -601,7 +601,7 @@ export abstract class TextField extends LitElement {
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user