mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
fix(navigationtab)!: change slot names activeIcon and inactiveIcon to active-icon and inactive-icon
PiperOrigin-RevId: 563583060
This commit is contained in:
parent
8e79da6f41
commit
f019ac37fe
@ -39,32 +39,32 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
.label=${label}
|
||||
.showBadge=${showBadge}
|
||||
.badgeValue=${badgeValue}>
|
||||
<md-icon slot="activeIcon">${knobs['active icon']}</md-icon>
|
||||
<md-icon slot="inactiveIcon">${knobs['inactive icon']}</md-icon>
|
||||
<md-icon slot="active-icon">${knobs['active icon']}</md-icon>
|
||||
<md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
|
||||
</md-navigation-tab>
|
||||
|
||||
<md-navigation-tab
|
||||
.label=${label}
|
||||
.showBadge=${showBadge}
|
||||
.badgeValue=${badgeValue}>
|
||||
<md-icon slot="activeIcon">${knobs['active icon']}</md-icon>
|
||||
<md-icon slot="inactiveIcon">${knobs['inactive icon']}</md-icon>
|
||||
<md-icon slot="active-icon">${knobs['active icon']}</md-icon>
|
||||
<md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
|
||||
</md-navigation-tab>
|
||||
|
||||
<md-navigation-tab
|
||||
.label=${label}
|
||||
.showBadge=${showBadge}
|
||||
.badgeValue=${badgeValue}>
|
||||
<md-icon slot="activeIcon">${knobs['active icon']}</md-icon>
|
||||
<md-icon slot="inactiveIcon">${knobs['inactive icon']}</md-icon>
|
||||
<md-icon slot="active-icon">${knobs['active icon']}</md-icon>
|
||||
<md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
|
||||
</md-navigation-tab>
|
||||
|
||||
<md-navigation-tab
|
||||
.label=${label}
|
||||
.showBadge=${showBadge}
|
||||
.badgeValue=${badgeValue}>
|
||||
<md-icon slot="activeIcon">${knobs['active icon']}</md-icon>
|
||||
<md-icon slot="inactiveIcon">${knobs['inactive icon']}</md-icon>
|
||||
<md-icon slot="active-icon">${knobs['active icon']}</md-icon>
|
||||
<md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
|
||||
</md-navigation-tab>
|
||||
</md-navigation-bar>
|
||||
</div>`;
|
||||
|
@ -53,10 +53,10 @@ export class NavigationTab extends LitElement implements NavigationTabState {
|
||||
<span aria-hidden="true" class="md3-navigation-tab__icon-content"
|
||||
><span class="md3-navigation-tab__active-indicator"
|
||||
></span><span class="md3-navigation-tab__icon"
|
||||
><slot name="inactiveIcon"></slot
|
||||
><slot name="inactive-icon"></slot
|
||||
></span>
|
||||
<span class="md3-navigation-tab__icon md3-navigation-tab__icon--active"
|
||||
><slot name="activeIcon"></slot
|
||||
><slot name="active-icon"></slot
|
||||
></span>${this.renderBadge()}</span
|
||||
>${this.renderLabel()}
|
||||
</button>`;
|
||||
|
@ -191,31 +191,31 @@ describe('mwc-navigation-tab', () => {
|
||||
});
|
||||
|
||||
describe('icons', () => {
|
||||
it('nodes with `slot=activeIcon` will serve as the active icon',
|
||||
it('nodes with `slot=active-icon` will serve as the active icon',
|
||||
async () => {
|
||||
const {harness} = await setupTest();
|
||||
const icons = html`
|
||||
<i slot="activeIcon" class="material-icons">star</i>
|
||||
<i slot="inactiveIcon" class="material-icons">star_border</i>
|
||||
`;
|
||||
render(icons, harness.element);
|
||||
|
||||
const icon =
|
||||
harness.element.querySelector<HTMLElement>('[slot="activeIcon"]')!;
|
||||
expect(icon.textContent!.trim()).toEqual('star');
|
||||
});
|
||||
|
||||
it('nodes with `slot=inactiveIcon` will serve as the inactive icon',
|
||||
async () => {
|
||||
const {harness} = await setupTest();
|
||||
const icons = html`
|
||||
<i slot="activeIcon" class="material-icons">star</i>
|
||||
<i slot="inactiveIcon" class="material-icons">star_border</i>
|
||||
<i slot="active-icon" class="material-icons">star</i>
|
||||
<i slot="inactive-icon" class="material-icons">star_border</i>
|
||||
`;
|
||||
render(icons, harness.element);
|
||||
|
||||
const icon = harness.element.querySelector<HTMLElement>(
|
||||
'[slot="inactiveIcon"]')!;
|
||||
'[slot="active-icon"]')!;
|
||||
expect(icon.textContent!.trim()).toEqual('star');
|
||||
});
|
||||
|
||||
it('nodes with `slot=inactive-icon` will serve as the inactive icon',
|
||||
async () => {
|
||||
const {harness} = await setupTest();
|
||||
const icons = html`
|
||||
<i slot="active-icon" class="material-icons">star</i>
|
||||
<i slot="inactive-icon" class="material-icons">star_border</i>
|
||||
`;
|
||||
render(icons, harness.element);
|
||||
|
||||
const icon = harness.element.querySelector<HTMLElement>(
|
||||
'[slot="inactive-icon"]')!;
|
||||
expect(icon.textContent!.trim()).toEqual('star_border');
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user