material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-05 17:48:16 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5456 from adrianjost:adrian/5297

Browse Source 
PiperOrigin-RevId: 607080215
This commit is contained in:
Copybara-Service 2024-02-14 13:05:38 -08:00
commit 8d2b6447e4
3 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
tabs/demo/stories.ts
View File

@ -25,7 +25,10 @@ export interface StoryKnobs {
const styles = css`
[role='tabpanel']:not([hidden]) {
font-family: Roboto, Material Sans, system-ui;
font-family:
Roboto,
Material Sans,
system-ui;
}
[role='tabpanel']:not(.subtabs) {
@ -56,7 +59,7 @@ const primary: MaterialStoryInit<StoryKnobs> = {
return html`
<md-tabs
aria-label="Primary tabs"
.activeTabIndex=${knobs.activeTabIndex}
active-tab-index=${knobs.activeTabIndex}
.autoActivate=${knobs.autoActivate}
${setupTabPanels()}>
<md-primary-tab
@ -119,7 +122,7 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
return html`
<md-tabs
aria-label="Secondary tabs"
.activeTabIndex=${knobs.activeTabIndex}
active-tab-index=${knobs.activeTabIndex}
.autoActivate=${knobs.autoActivate}
${setupTabPanels()}>
<md-secondary-tab id="tab-one" aria-controls="panel-one">
@ -160,7 +163,7 @@ const scrolling: MaterialStoryInit<StoryKnobs> = {
return html` <md-tabs
aria-label="A tab bar that scrolls"
class="scrolling"
.activeTabIndex=${knobs.activeTabIndex}
active-tab-index=${knobs.activeTabIndex}
.autoActivate=${knobs.autoActivate}>
${new Array(10).fill(html`
<md-primary-tab .inlineIcon=${inlineIcon}>
@ -212,7 +215,7 @@ const custom: MaterialStoryInit<StoryKnobs> = {
<md-tabs
aria-label="A custom themed tab bar"
class="custom"
.activeTabIndex=${knobs.activeTabIndex}
active-tab-index=${knobs.activeTabIndex}
.autoActivate=${knobs.autoActivate}>
<md-primary-tab id="tab-one" aria-controls="panel-one">
${tabContent('flight', 'Travel')}
@ -252,7 +255,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
return html`
<md-tabs
aria-label="Primary tabs"
.activeTabIndex=${knobs.activeTabIndex}
active-tab-index=${knobs.activeTabIndex}
.autoActivate=${knobs.autoActivate}
${setupTabPanels()}>
<md-primary-tab .inlineIcon=${inlineIcon} aria-controls="movies">
@ -269,7 +272,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
<div role="tabpanel" id="movies" class="subtabs" aria-label="Movies">
<md-tabs
aria-label="Secondary tabs for movies"
.activeTabIndex=${knobs.activeTabIndex}
active-tab-index=${knobs.activeTabIndex}
.autoActivate=${knobs.autoActivate}
${setupTabPanels()}>
<md-secondary-tab aria-controls="star-wars"
@ -298,7 +301,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
hidden>
<md-tabs
aria-label="Secondary tabs for photos"
.activeTabIndex=${knobs.activeTabIndex}
active-tab-index=${knobs.activeTabIndex}
.autoActivate=${knobs.autoActivate}>
<md-secondary-tab aria-controls="yosemite">Yosemite</md-secondary-tab>
<md-secondary-tab aria-controls="mona-lisa"
@ -327,7 +330,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
<div role="tabpanel" id="music" class="subtabs" aria-label="Music" hidden>
<md-tabs
aria-label="Secondary tabs for music"
.activeTabIndex=${knobs.activeTabIndex}
active-tab-index=${knobs.activeTabIndex}
.autoActivate=${knobs.autoActivate}
${setupTabPanels()}>
<md-secondary-tab aria-controls="rock">Rock</md-secondary-tab>
@ -413,7 +416,7 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
</div>
<md-tabs
class="scrolling"
.activeTabIndex=${knobs.activeTabIndex}
active-tab-index=${knobs.activeTabIndex}
.autoActivate=${knobs.autoActivate}>
<md-primary-tab .inlineIcon=${inlineIcon}> Tab 1 </md-primary-tab>
<md-primary-tab .inlineIcon=${inlineIcon}> Tab 2 </md-primary-tab>

1
tabs/internal/tabs.ts
View File

@ -63,6 +63,7 @@ export class Tabs extends LitElement {
*
* @export
*/
@property({type: Number, attribute: 'active-tab-index'})
get activeTabIndex() {
return this.tabs.findIndex((tab) => tab.active);
}

20
tabs/tabs_test.ts
View File

@ -129,7 +129,25 @@ describe('<md-tabs>', () => {
await env.waitForStability();
const tabs = root.querySelector('md-tabs')!;
expect(tabs.activeTabIndex).withContext('activeTabIndex').toBe(1);
expect(tabs.activeTab?.textContent).withContext('activeTab').toBe('B');
expect(tabs.activeTab?.textContent)
.withContext('activeTab')
.toBe('B');
});
it('should allow setting active-tab-index as an attribute', async () => {
const root = env.render(html`
<md-tabs active-tab-index=${1}>
<md-primary-tab>A</md-primary-tab>
<md-primary-tab>B</md-primary-tab>
</md-tabs>
`);
await env.waitForStability();
const tabs = root.querySelector('md-tabs')!;
expect(tabs.activeTabIndex).withContext('activeTabIndex').toBe(1);
expect(tabs.activeTab?.textContent)
.withContext('activeTab')
.toBe('B');
});
});