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(textfield): change slot names to kebab-case

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

PiperOrigin-RevId: 563605216
This commit is contained in:
Andrew Jakubowicz 2023-09-07 18:40:48 -07:00 committed by Copybara-Service
parent 059dad5d44
commit 82e9e92a19
4 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/components/text-field.md
View File

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

4
textfield/demo/stories.ts
View File

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

8
textfield/internal/text-field.ts
View File

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

2
textfield/internal/text-field_test.ts
View File

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