Skip to content

Commit

Permalink
fix(ld-tabs): show tabpanel according to preselected tab
Browse files Browse the repository at this point in the history 
Resolves #179
  • Loading branch information
@borisdiakur @renet
borisdiakur authored and renet committed Dec 9, 2021
1 parent 2aab4e1 commit 1428d3d
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 3 deletions.
7 changes: 5 additions & 2 deletions src/liquid/components/ld-tabs/ld-tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export class LdTabs {
)
}

;((newActiveTab as unknown) as LdTab).select()
;(newActiveTab as unknown as LdTab).select()
}

componentDidRender() {
Expand All @@ -90,7 +90,10 @@ export class LdTabs {
let selectedIndex
this.el.querySelectorAll('ld-tab').forEach((tab, index) => {
tab.id = `${this.idDescriber}-tab-${index}`
if (tab.hasAttribute('selected')) {
if (
tab.hasAttribute('selected') &&
tab.getAttribute('selected') !== 'false'
) {
selectedIndex = index
}
})
Expand Down
110 changes: 110 additions & 0 deletions src/liquid/components/ld-tabs/test/__snapshots__/ld-tabs.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,113 @@ exports[`ld-tabs renders 1`] = `
</ld-tabpanellist>
</ld-tabs>
`;

exports[`ld-tabs shows tabpanel according to the preselected tab 1`] = `
<ld-tabs class="ld-tabs">
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
<ld-tablist role="tablist">
<mock:shadow-root>
<div class="ld-tablist" part="wrapper">
<button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--left" hidden="" part="arrow arrow-left" tabindex="-1">
<svg fill="none" height="16" part="arrow-icon arrow-icon-left" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<title>
Scroll left
</title>
<path d="M10 13L6 8L10 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
<div class="ld-tablist__scroll-container" part="scroll-container">
<slot></slot>
</div>
<button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--right" hidden="" part="arrow arrow-right" tabindex="-1">
<svg fill="none" height="16" part="arrow-icon arrow-icon-right" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<title>
Scroll right
</title>
<path d="M6 13L10 8L6 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
</div>
</mock:shadow-root>
<ld-tab id="ld-tabs-1-tab-0">
<mock:shadow-root>
<button class="ld-tab" part="button focusable" role="tab" tabindex="-1">
<span class="ld-tab__spacer" part="spacer spacer-left"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer spacer-right"></span>
</button>
</mock:shadow-root>
Fruits
</ld-tab>
<ld-tab id="ld-tabs-1-tab-1" selected="">
<mock:shadow-root>
<button aria-selected="true" class="ld-tab" part="button focusable" role="tab">
<span class="ld-tab__spacer" part="spacer spacer-left"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer spacer-right"></span>
</button>
</mock:shadow-root>
Vegetables
</ld-tab>
<ld-tab id="ld-tabs-1-tab-2" selected="false">
<mock:shadow-root>
<button class="ld-tab" part="button focusable" role="tab" tabindex="-1">
<span class="ld-tab__spacer" part="spacer spacer-left"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer spacer-right"></span>
</button>
</mock:shadow-root>
Nuts
</ld-tab>
<ld-tab disabled="" id="ld-tabs-1-tab-3">
<mock:shadow-root>
<button aria-disabled="true" class="ld-tab" part="button focusable" role="tab" tabindex="-1">
<span class="ld-tab__spacer" part="spacer spacer-left"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer spacer-right"></span>
</button>
</mock:shadow-root>
Grain
</ld-tab>
</ld-tablist>
<ld-tabpanellist class="ld-tabpanellist">
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
<ld-tabpanel aria-labelledby="ld-tabs-1-tab-0" class="ld-tabpanel" hidden="true" role="tabpanel" tabindex="-1">
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
Apple, orange, banana
</ld-tabpanel>
<ld-tabpanel aria-labelledby="ld-tabs-1-tab-1" class="ld-tabpanel" role="tabpanel" tabindex="-1">
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
Potato, cucumber, tomato
</ld-tabpanel>
<ld-tabpanel aria-labelledby="ld-tabs-1-tab-2" class="ld-tabpanel" hidden="true" role="tabpanel" tabindex="-1">
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
Walnut, chestnut, strawberry
</ld-tabpanel>
<ld-tabpanel aria-labelledby="ld-tabs-1-tab-3" class="ld-tabpanel" hidden="true" role="tabpanel" tabindex="-1">
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
Maize, rice, soybeans, wheat
</ld-tabpanel>
</ld-tabpanellist>
</ld-tabs>
`;
25 changes: 24 additions & 1 deletion src/liquid/components/ld-tabs/test/ld-tabs.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { LdTabpanel } from '../ld-tabpanel/ld-tabpanel'

class FocusManager {
focus(el) {
const doc = (document as unknown) as { activeElement: Element }
const doc = document as unknown as { activeElement: Element }
doc.activeElement = el
}
}
Expand Down Expand Up @@ -39,6 +39,29 @@ describe('ld-tabs', () => {
expect(page.root).toMatchSnapshot()
})

it('shows tabpanel according to the preselected tab', async () => {
const page = await newSpecPage({
components,
html: `
<ld-tabs>
<ld-tablist>
<ld-tab>Fruits</ld-tab>
<ld-tab selected>Vegetables</ld-tab>
<ld-tab selected="false">Nuts</ld-tab>
<ld-tab disabled>Grain</ld-tab>
</ld-tablist>
<ld-tabpanellist>
<ld-tabpanel>Apple, orange, banana</ld-tabpanel>
<ld-tabpanel>Potato, cucumber, tomato</ld-tabpanel>
<ld-tabpanel>Walnut, chestnut, strawberry</ld-tabpanel>
<ld-tabpanel>Maize, rice, soybeans, wheat</ld-tabpanel>
</ld-tabpanellist>
</ld-tabs>
`,
})
expect(page.root).toMatchSnapshot()
})

describe('mouse interactions', () => {
it('changes tab via click with preselected tab', async () => {
const page = await newSpecPage({
Expand Down

0 comments on commit 1428d3d

Please sign in to comment.