Skip to content

Commit 18f6543

Browse files
steffanekthejackshelton
steffanek
and
thejackshelton
authored
Add toggle and togglegroup headless and styled components (#957)
* feat: toggle * feat: toggle fix * feat: toggle examples and more tests * feat: toggle group * feat: add toggle & toggle group to menu * fix: toggle item correctly updates based on each individual toggle * chore: clean toggle-group-item * chore: clean toggle and togglegroup * add changeset * refactor: toggle-group, remove defaultValue and update docs for toggle and toggle-group * docs: remove default from styled toggle * chore: rename onValueChange to onChange --------- Co-authored-by: thejackshelton <[email protected]>
1 parent 26c1788 commit 18f6543

File tree

79 files changed

+4514
-75
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+4514
-75
lines changed

‎.changeset/cuddly-snakes-smell.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@qwik-ui/headless': minor
3+
'@qwik-ui/styled': minor
4+
---
5+
6+
feat: toggle and togglegroup headless and styled components

‎apps/website/src/_state/component-statuses.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export const statusByComponent: ComponentKitsStatuses = {
3232
Separator: ComponentStatus.Beta,
3333
Skeleton: ComponentStatus.Beta,
3434
Tabs: ComponentStatus.Beta,
35+
Toggle: ComponentStatus.Draft,
36+
ToggleGroup: ComponentStatus.Draft,
3537
Textarea: ComponentStatus.Draft,
3638
},
3739
headless: {
@@ -49,6 +51,8 @@ export const statusByComponent: ComponentKitsStatuses = {
4951
Select: ComponentStatus.Beta,
5052
Separator: ComponentStatus.Beta,
5153
Tabs: ComponentStatus.Beta,
54+
Toggle: ComponentStatus.Draft,
55+
ToggleGroup: ComponentStatus.Draft,
5256
Tooltip: ComponentStatus.Beta,
5357
},
5458
};

‎apps/website/src/routes/docs/contributing/index.mdx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,8 @@ import { Collapsible } from '@qwik-ui/headless';
161161
export default component$(() => {
162162
return (
163163
<Collapsible.Root>
164-
<Collapsible.Trigger>
165-
Trigger
166-
</Collapsible.Trigger>
167-
<Collapsible.Content>
168-
Content
169-
</Collapsible.Content>
164+
<Collapsible.Trigger>Trigger</Collapsible.Trigger>
165+
<Collapsible.Content>Content</Collapsible.Content>
170166
</Collapsible.Root>
171167
);
172168
});
@@ -230,7 +226,7 @@ async function setup(page: Page, exampleName: string) {
230226
}
231227

232228
test.describe('Mouse Behavior', () => {
233-
test(`GIVEN a collapsible
229+
test(`GIVEN a collapsible
234230
WHEN clicking on the trigger
235231
THEN the content should be visible`, async ({ page }) => {
236232
const { driver: d } = await setup(page, 'hero');

‎apps/website/src/routes/docs/headless/menu.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,5 @@
2929
- [Separator](/docs/headless/separator)
3030
- [Tabs](/docs/headless/tabs)
3131
- [Tooltip](/docs/headless/tooltip)
32+
- [Toggle](/docs/headless/toggle)
33+
- [ToggleGroup](/docs/headless/toggle-group)

‎apps/website/src/routes/docs/headless/toggle-group/examples/disabled.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import styles from '../snippets/toggle.css?inline';
3+
4+
import { ToggleGroup } from '@qwik-ui/headless';
5+
6+
export default component$(() => {
7+
useStyles$(styles);
8+
return (
9+
<div class="toggle-container">
10+
<ToggleGroup.Root disabled>
11+
<ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
12+
Left
13+
</ToggleGroup.Item>
14+
<ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
15+
Center
16+
</ToggleGroup.Item>
17+
<ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
18+
Right
19+
</ToggleGroup.Item>
20+
</ToggleGroup.Root>
21+
</div>
22+
);
23+
});

‎apps/website/src/routes/docs/headless/toggle-group/examples/hero.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import styles from '../snippets/toggle.css?inline';
3+
import { ToggleGroup } from '@qwik-ui/headless';
4+
5+
export default component$(() => {
6+
useStyles$(styles);
7+
return (
8+
<div class="toggle-container">
9+
<ToggleGroup.Root>
10+
<ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
11+
Left
12+
</ToggleGroup.Item>
13+
<ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
14+
Center
15+
</ToggleGroup.Item>
16+
<ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
17+
Right
18+
</ToggleGroup.Item>
19+
</ToggleGroup.Root>
20+
</div>
21+
);
22+
});

‎apps/website/src/routes/docs/headless/toggle-group/examples/horizontal-rtl.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import styles from '../snippets/toggle.css?inline';
3+
4+
import { ToggleGroup } from '@qwik-ui/headless';
5+
6+
export default component$(() => {
7+
useStyles$(styles);
8+
return (
9+
<div class="toggle-container">
10+
<ToggleGroup.Root orientation={'horizontal'} direction={'rtl'}>
11+
<ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
12+
Left
13+
</ToggleGroup.Item>
14+
<ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
15+
Center
16+
</ToggleGroup.Item>
17+
<ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
18+
Right
19+
</ToggleGroup.Item>
20+
</ToggleGroup.Root>
21+
</div>
22+
);
23+
});

‎apps/website/src/routes/docs/headless/toggle-group/examples/initialValue.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import styles from '../snippets/toggle.css?inline';
3+
4+
import { ToggleGroup } from '@qwik-ui/headless';
5+
6+
export default component$(() => {
7+
useStyles$(styles);
8+
return (
9+
<div class="toggle-container">
10+
<ToggleGroup.Root value={'left'}>
11+
<ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
12+
Left
13+
</ToggleGroup.Item>
14+
<ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
15+
Center
16+
</ToggleGroup.Item>
17+
<ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
18+
Right
19+
</ToggleGroup.Item>
20+
</ToggleGroup.Root>
21+
</div>
22+
);
23+
});

‎apps/website/src/routes/docs/headless/toggle-group/examples/item-disabled-center.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import styles from '../snippets/toggle.css?inline';
3+
4+
import { ToggleGroup } from '@qwik-ui/headless';
5+
6+
export default component$(() => {
7+
useStyles$(styles);
8+
return (
9+
<div class="toggle-container">
10+
<ToggleGroup.Root>
11+
<ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
12+
Left
13+
</ToggleGroup.Item>
14+
<ToggleGroup.Item
15+
disabled
16+
value="center"
17+
aria-label="Center aligned"
18+
class="toggle"
19+
>
20+
Center
21+
</ToggleGroup.Item>
22+
<ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
23+
Right
24+
</ToggleGroup.Item>
25+
</ToggleGroup.Root>
26+
</div>
27+
);
28+
});

‎apps/website/src/routes/docs/headless/toggle-group/examples/loop-item-disabled.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import styles from '../snippets/toggle.css?inline';
3+
4+
import { ToggleGroup } from '@qwik-ui/headless';
5+
6+
export default component$(() => {
7+
useStyles$(styles);
8+
return (
9+
<div class="toggle-container">
10+
<ToggleGroup.Root loop>
11+
<ToggleGroup.Item disabled value="left" aria-label="Left aligned" class="toggle">
12+
Left
13+
</ToggleGroup.Item>
14+
<ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
15+
Center
16+
</ToggleGroup.Item>
17+
<ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
18+
Right
19+
</ToggleGroup.Item>
20+
</ToggleGroup.Root>
21+
</div>
22+
);
23+
});

0 commit comments

Comments
 (0)