ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(tabs): allow nested tabs

Browse source
This commit is contained in:
qa46hx 2020-09-30 13:55:19 +02:00 committed by Thomas Allmer
parent 0ed995ad06
commit bef7d961a7
3 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/five-tips-camp.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/tabs': patch
---
Only look for tabs and panels as direct children, this allows to have nested tabs.

12
packages/tabs/src/LionTabs.js
View file

@ -184,12 +184,12 @@ export class LionTabs extends LitElement {
__setupStore() {
/** @type {StoreEntry[]} */
this.__store = [];
const buttons = /** @type {HTMLElement[]} */ (Array.from(
this.querySelectorAll('[slot="tab"]'),
));
const panels = /** @type {HTMLElement[]} */ (Array.from(
this.querySelectorAll('[slot="panel"]'),
));
const buttons = /** @type {HTMLElement[]} */ (Array.from(this.children)).filter(
child => child.slot === 'tab',
);
const panels = /** @type {HTMLElement[]} */ (Array.from(this.children)).filter(
child => child.slot === 'panel',
);
if (buttons.length !== panels.length) {
// eslint-disable-next-line no-console
console.warn(

19
packages/tabs/test/lion-tabs.test.js
View file

@ -80,6 +80,25 @@ describe('<lion-tabs>', () => {
);
stub.restore();
});
it('only takes direct children into account', async () => {
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">
<button slot="tab">nested tab</button>
<div slot="panel">nested panel</div>
</div>
<button slot="tab">tab 2</button>
<div slot="panel">panel 2</div>
</lion-tabs>
`));
el.selectedIndex = 1;
const selectedTab = /** @type {Element} */ (Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
));
expect(selectedTab.textContent).to.equal('tab 2');
});
});
describe('Tabs ([slot=tab])', () => {