Skip to content

Commit 90f9f3d

Browse files
shaireznaorpeledigalklebanov
committed
docs(headless/tabs): added vertical example
Co-authored-by: Naor Peled <[email protected]> Co-authored-by: Igal Klebanov <[email protected]>
1 parent 745c8bd commit 90f9f3d

File tree

6 files changed

+142
-36
lines changed

6 files changed

+142
-36
lines changed

‎apps/website/src/components/preview-code-example/preview-code-example.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
44
export const PreviewCodeExample = component$(() => {
55
return (
66
<Tabs class="mb-12">
7-
<TabList class="flex rounded-t-xl p-4 bg-blue-200 dark:bg-indigo-900">
8-
<Tab class="px-4 py-2 rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]">
7+
<TabList class="flex rounded-t-xl px-4 bg-blue-200 dark:bg-indigo-900">
8+
<Tab class="px-4 py-2 hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]">
99
Preview
1010
</Tab>
11-
<Tab class="px-4 py-2 rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]">
11+
<Tab class="px-4 py-2 hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]">
1212
Code
1313
</Tab>
1414
</TabList>
@@ -17,7 +17,7 @@ export const PreviewCodeExample = component$(() => {
1717
<Slot name="actualComponent" />
1818
</section>
1919
</TabPanel>
20-
<TabPanel class="rounded-b-xl p-12 bg-slate-900">
20+
<TabPanel class="rounded-b-xl p-12 bg-slate-900">
2121
<section class="overflow-auto">
2222
<Slot name="codeExample" />
2323
</section>

‎apps/website/src/routes/docs/headless/(components)/tabs/examples.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,38 @@ export const Example01 = component$(() => {
3939
</PreviewCodeExample>
4040
);
4141
});
42+
43+
export const VerticalTabsExample = component$(() => {
44+
return (
45+
<PreviewCodeExample>
46+
<div q:slot="actualComponent" class="tabs-example mr-auto">
47+
<Tabs vertical>
48+
<h3 id="tablist-1">Danish Composers</h3>
49+
<TabList class="flex flex-col w-fit">
50+
<Tab>Maria Ahlefeldt</Tab>
51+
<Tab>Carl Andersen</Tab>
52+
<Tab>Ida Henriette da Fonseca</Tab>
53+
</TabList>
54+
<TabPanel>
55+
<p>
56+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
57+
a ...
58+
</p>
59+
</TabPanel>
60+
<TabPanel>
61+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
62+
</TabPanel>
63+
<TabPanel>
64+
<p>
65+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
66+
</p>
67+
</TabPanel>
68+
</Tabs>
69+
</div>
70+
71+
<div q:slot="codeExample">
72+
<Slot />
73+
</div>
74+
</PreviewCodeExample>
75+
);
76+
});

‎apps/website/src/routes/docs/headless/(components)/tabs/index.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
.tabs-example [role='tab'] {
22
width: 250px;
3-
background: lightgreen;
3+
background: #333;
44
}
55

66
.tabs-example [role='tab'].selected {
7-
background: magenta;
7+
background: gray;
88
}
99

1010
.tabs-example [role='tablist'] {
1111
border: 1px solid;
12+
color: white;
13+
margin-bottom: 1rem;
1214
}

‎apps/website/src/routes/docs/headless/(components)/tabs/index.mdx

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Qwik UI | Tabs
33
---
44

55
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
6-
import { Example01 } from './examples';
6+
import { Example01, VerticalTabsExample } from './examples';
77
import { CodeExample } from '../../../../../components/code-example/code-example';
88
import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table';
99
import { APITable } from '../../../../../components/api-table/api-table';
@@ -80,6 +80,34 @@ import { APITable } from '../../../../../components/api-table/api-table';
8080

8181
</CodeExample>
8282

83+
## Vertical
84+
85+
by default, the tabs are horizontal, but you can adjust the underlying behavior to be vertical by setting the `vertical` prop to true.
86+
87+
<VerticalTabsExample>
88+
```tsx
89+
<Tabs vertical>
90+
<h3 id="tablist-1">Danish Composers</h3>
91+
<TabList>
92+
<Tab>Maria Ahlefeldt</Tab>
93+
<Tab>Carl Andersen</Tab>
94+
<Tab>Ida Henriette da Fonseca</Tab>
95+
</TabList>
96+
<TabPanel>
97+
<p>
98+
Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a ...
99+
</p>
100+
</TabPanel>
101+
<TabPanel>
102+
<p>Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a ...</p>
103+
</TabPanel>
104+
<TabPanel>
105+
<p>Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a ...</p>
106+
</TabPanel>
107+
</Tabs>
108+
```
109+
</VerticalTabsExample>
110+
83111
## Accessibility
84112

85113
### Keyboard interaction

‎packages/kit-headless/src/components/tabs/tabs.spec.tsx

Lines changed: 65 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -125,38 +125,9 @@ const DynamicTabsComponent = component$(
125125
}
126126
);
127127

128-
const TabsInsideOfTabs = component$(() => {
129-
return (
130-
<Tabs>
131-
<TabList>
132-
<Tab>Tab 1</Tab>
133-
<Tab>Tab 2</Tab>
134-
<Tab>Tab 3</Tab>
135-
</TabList>
136-
137-
<TabPanel>
138-
<Tabs>
139-
<TabList>
140-
<Tab>Tab 1</Tab>
141-
<Tab>Tab 2</Tab>
142-
<Tab>Tab 3</Tab>
143-
</TabList>
144-
145-
<TabPanel>Panel 1</TabPanel>
146-
<TabPanel>Child Panel 2</TabPanel>
147-
<TabPanel>Panel 3</TabPanel>
148-
</Tabs>
149-
</TabPanel>
150-
<TabPanel>Root Panel 2</TabPanel>
151-
<TabPanel>Panel 3</TabPanel>
152-
</Tabs>
153-
);
154-
});
155-
156128
describe('Tabs', () => {
157129
it('INIT', () => {
158130
cy.mount(<ThreeTabsComponent />);
159-
// cy.findByTestId('tabs').matchImage();
160131

161132
cy.checkA11yForComponent();
162133
});
@@ -193,6 +164,33 @@ describe('Tabs', () => {
193164
cy.findByTestId('selected-index-from-event').should('contain.text', 1);
194165
});
195166

167+
it(`GIVEN a tab with a custom onClick$ handler
168+
WHEN tab is clicked on
169+
THEN the handler should be called`, () => {
170+
const TabsWithCustomOnClick = component$(() => {
171+
const wasSelectedSig = useSignal(false);
172+
return (
173+
<Tabs>
174+
<TabList>
175+
<Tab onClick$={() => (wasSelectedSig.value = true)}>Tab 1</Tab>
176+
</TabList>
177+
<TabPanel>
178+
Custom onClick was called: {`${wasSelectedSig.value}`}
179+
</TabPanel>
180+
</Tabs>
181+
);
182+
});
183+
184+
cy.mount(<TabsWithCustomOnClick />);
185+
186+
cy.findByRole('tab', { name: /Tab 1/i }).click();
187+
188+
cy.findByRole('tabpanel').should(
189+
'contain',
190+
'Custom onClick was called: true'
191+
);
192+
});
193+
196194
describe('Dynamic Tabs', () => {
197195
it(`GIVEN 3 tabs,
198196
WHEN removing the last one dynamically
@@ -258,6 +256,34 @@ describe('Tabs', () => {
258256

259257
cy.findAllByRole('tabpanel').eq(1).should('contain', 'Child Panel 2');
260258
});
259+
260+
const TabsInsideOfTabs = component$(() => {
261+
return (
262+
<Tabs>
263+
<TabList>
264+
<Tab>Tab 1</Tab>
265+
<Tab>Tab 2</Tab>
266+
<Tab>Tab 3</Tab>
267+
</TabList>
268+
269+
<TabPanel>
270+
<Tabs>
271+
<TabList>
272+
<Tab>Tab 1</Tab>
273+
<Tab>Tab 2</Tab>
274+
<Tab>Tab 3</Tab>
275+
</TabList>
276+
277+
<TabPanel>Panel 1</TabPanel>
278+
<TabPanel>Child Panel 2</TabPanel>
279+
<TabPanel>Panel 3</TabPanel>
280+
</Tabs>
281+
</TabPanel>
282+
<TabPanel>Root Panel 2</TabPanel>
283+
<TabPanel>Panel 3</TabPanel>
284+
</Tabs>
285+
);
286+
});
261287
});
262288

263289
describe('Orientation: Horizontal', () => {
@@ -338,6 +364,16 @@ describe('Tabs', () => {
338364
cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus');
339365
});
340366
});
367+
368+
it.only(`GIVEN 3 tabs
369+
WHEN clicking the first one and triggering the right arrow key
370+
THEN render the middle panel`, () => {
371+
cy.mount(<ThreeTabsComponent />);
372+
373+
cy.findByRole('tab', { name: /Tab 1/i }).click();
374+
375+
cy.findByRole('tabpanel').should('contain', 'Panel 2');
376+
});
341377
});
342378

343379
describe('Orientation: Vertical', () => {

‎packages/kit-headless/src/components/tabs/tabs.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ import { KeyCode } from '../../utils/key-code.type';
1818
/**
1919
* TABS TODOs
2020
*
21+
* Add "enter" or "space" keys when in manual behavior
22+
*
23+
* Missing tests for:
24+
* automatic and manual behavior
25+
*
2126
* Add a test for custom onClick$
2227
* Add examples for:
2328
* - Vertical

0 commit comments

Comments
 (0)