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(navigationtab)!: change slot names activeIcon and inactiveIcon to active-icon and inactive-icon

Browse Source 
PiperOrigin-RevId: 563583060
This commit is contained in:
Andrew Jakubowicz 2023-09-07 16:51:24 -07:00 committed by Copybara-Service
parent 8e79da6f41
commit f019ac37fe
3 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
labs/navigationbar/demo/stories.ts
View File

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

4
labs/navigationtab/internal/navigation-tab.ts
View File

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

36
labs/navigationtab/md-navigation-tab_test.ts
View File

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