Skip to content

Commit 8d2b644

Browse files
Merge pull request #5456 from adrianjost:adrian/5297
PiperOrigin-RevId: 607080215
2 parents f2ff867 + 84a4477 commit 8d2b644

File tree

3 files changed

+33
-11
lines changed

3 files changed

+33
-11
lines changed

tabs/demo/stories.ts

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ export interface StoryKnobs {
2525

2626
const styles = css`
2727
[role='tabpanel']:not([hidden]) {
28-
font-family: Roboto, Material Sans, system-ui;
28+
font-family:
29+
Roboto,
30+
Material Sans,
31+
system-ui;
2932
}
3033
3134
[role='tabpanel']:not(.subtabs) {
@@ -56,7 +59,7 @@ const primary: MaterialStoryInit<StoryKnobs> = {
5659
return html`
5760
<md-tabs
5861
aria-label="Primary tabs"
59-
.activeTabIndex=${knobs.activeTabIndex}
62+
active-tab-index=${knobs.activeTabIndex}
6063
.autoActivate=${knobs.autoActivate}
6164
${setupTabPanels()}>
6265
<md-primary-tab
@@ -119,7 +122,7 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
119122
return html`
120123
<md-tabs
121124
aria-label="Secondary tabs"
122-
.activeTabIndex=${knobs.activeTabIndex}
125+
active-tab-index=${knobs.activeTabIndex}
123126
.autoActivate=${knobs.autoActivate}
124127
${setupTabPanels()}>
125128
<md-secondary-tab id="tab-one" aria-controls="panel-one">
@@ -160,7 +163,7 @@ const scrolling: MaterialStoryInit<StoryKnobs> = {
160163
return html` <md-tabs
161164
aria-label="A tab bar that scrolls"
162165
class="scrolling"
163-
.activeTabIndex=${knobs.activeTabIndex}
166+
active-tab-index=${knobs.activeTabIndex}
164167
.autoActivate=${knobs.autoActivate}>
165168
${new Array(10).fill(html`
166169
<md-primary-tab .inlineIcon=${inlineIcon}>
@@ -212,7 +215,7 @@ const custom: MaterialStoryInit<StoryKnobs> = {
212215
<md-tabs
213216
aria-label="A custom themed tab bar"
214217
class="custom"
215-
.activeTabIndex=${knobs.activeTabIndex}
218+
active-tab-index=${knobs.activeTabIndex}
216219
.autoActivate=${knobs.autoActivate}>
217220
<md-primary-tab id="tab-one" aria-controls="panel-one">
218221
${tabContent('flight', 'Travel')}
@@ -252,7 +255,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
252255
return html`
253256
<md-tabs
254257
aria-label="Primary tabs"
255-
.activeTabIndex=${knobs.activeTabIndex}
258+
active-tab-index=${knobs.activeTabIndex}
256259
.autoActivate=${knobs.autoActivate}
257260
${setupTabPanels()}>
258261
<md-primary-tab .inlineIcon=${inlineIcon} aria-controls="movies">
@@ -269,7 +272,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
269272
<div role="tabpanel" id="movies" class="subtabs" aria-label="Movies">
270273
<md-tabs
271274
aria-label="Secondary tabs for movies"
272-
.activeTabIndex=${knobs.activeTabIndex}
275+
active-tab-index=${knobs.activeTabIndex}
273276
.autoActivate=${knobs.autoActivate}
274277
${setupTabPanels()}>
275278
<md-secondary-tab aria-controls="star-wars"
@@ -298,7 +301,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
298301
hidden>
299302
<md-tabs
300303
aria-label="Secondary tabs for photos"
301-
.activeTabIndex=${knobs.activeTabIndex}
304+
active-tab-index=${knobs.activeTabIndex}
302305
.autoActivate=${knobs.autoActivate}>
303306
<md-secondary-tab aria-controls="yosemite">Yosemite</md-secondary-tab>
304307
<md-secondary-tab aria-controls="mona-lisa"
@@ -327,7 +330,7 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
327330
<div role="tabpanel" id="music" class="subtabs" aria-label="Music" hidden>
328331
<md-tabs
329332
aria-label="Secondary tabs for music"
330-
.activeTabIndex=${knobs.activeTabIndex}
333+
active-tab-index=${knobs.activeTabIndex}
331334
.autoActivate=${knobs.autoActivate}
332335
${setupTabPanels()}>
333336
<md-secondary-tab aria-controls="rock">Rock</md-secondary-tab>
@@ -413,7 +416,7 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
413416
</div>
414417
<md-tabs
415418
class="scrolling"
416-
.activeTabIndex=${knobs.activeTabIndex}
419+
active-tab-index=${knobs.activeTabIndex}
417420
.autoActivate=${knobs.autoActivate}>
418421
<md-primary-tab .inlineIcon=${inlineIcon}> Tab 1 </md-primary-tab>
419422
<md-primary-tab .inlineIcon=${inlineIcon}> Tab 2 </md-primary-tab>

tabs/internal/tabs.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export class Tabs extends LitElement {
6363
*
6464
* @export
6565
*/
66+
@property({type: Number, attribute: 'active-tab-index'})
6667
get activeTabIndex() {
6768
return this.tabs.findIndex((tab) => tab.active);
6869
}

tabs/tabs_test.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,25 @@ describe('<md-tabs>', () => {
129129
await env.waitForStability();
130130
const tabs = root.querySelector('md-tabs')!;
131131
expect(tabs.activeTabIndex).withContext('activeTabIndex').toBe(1);
132-
expect(tabs.activeTab?.textContent).withContext('activeTab').toBe('B');
132+
expect(tabs.activeTab?.textContent)
133+
.withContext('activeTab')
134+
.toBe('B');
135+
});
136+
137+
it('should allow setting active-tab-index as an attribute', async () => {
138+
const root = env.render(html`
139+
<md-tabs active-tab-index=${1}>
140+
<md-primary-tab>A</md-primary-tab>
141+
<md-primary-tab>B</md-primary-tab>
142+
</md-tabs>
143+
`);
144+
145+
await env.waitForStability();
146+
const tabs = root.querySelector('md-tabs')!;
147+
expect(tabs.activeTabIndex).withContext('activeTabIndex').toBe(1);
148+
expect(tabs.activeTab?.textContent)
149+
.withContext('activeTab')
150+
.toBe('B');
133151
});
134152
});
135153

0 commit comments

Comments
 (0)