Skip to content

Commit 4138bc2

Browse files
thejacksheltonthejackshelton
authored
feat: dropdown beta (#886)
* minor fixes * get it working again not deprected * small fix prevent default * no more flicker * move tests to popover * change to data attribute instead of test id in examples * change defaultValue to value * setup styled * revert to 1.7.0
1 parent 6245ec2 commit 4138bc2

File tree

27 files changed

+467
-277
lines changed

27 files changed

+467
-277
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export const statusByComponent: ComponentKitsStatuses = {
2020
Card: ComponentStatus.Beta,
2121
Checkbox: ComponentStatus.Draft,
2222
Combobox: ComponentStatus.Draft,
23+
Dropdown: ComponentStatus.Draft,
2324
Input: ComponentStatus.Draft,
2425
Label: ComponentStatus.Beta,
2526
Modal: ComponentStatus.Draft,

‎apps/website/src/routes/docs/headless/dropdown/examples/hero.tsx

Lines changed: 34 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
2-
32
import { Dropdown } from '@qwik-ui/headless';
43
import { LuCheck } from '@qwikest/icons/lucide';
5-
import styles from '../snippets/dropdown.css?inline';
64

75
export default component$(() => {
86
useStyles$(styles);
@@ -18,51 +16,49 @@ export default component$(() => {
1816
const radioItems = ['main', 'develop'];
1917

2018
return (
21-
<Dropdown.Root data-testid="dropdown">
19+
<Dropdown.Root>
2220
<Dropdown.Trigger class="dropdown-trigger">Git Settings</Dropdown.Trigger>
23-
<Dropdown.Popover>
24-
<Dropdown.Arrow class="dropdown-arrow" />
25-
<Dropdown.Content class="dropdown-content">
26-
<Dropdown.Group class="dropdown-group">
27-
<Dropdown.GroupLabel class="dropdown-group-label">
28-
Actions
29-
</Dropdown.GroupLabel>
30-
{actions.map((action) => (
31-
<Dropdown.Item
32-
key={action.label}
33-
class="dropdown-item"
34-
disabled={action.disabled}
35-
>
36-
{action.label}
37-
</Dropdown.Item>
38-
))}
39-
</Dropdown.Group>
40-
<Dropdown.Separator />
41-
{checkboxItems.map((item) => {
21+
<Dropdown.Popover class="dropdown-popover" gutter={8}>
22+
<Dropdown.Group class="dropdown-group">
23+
<Dropdown.GroupLabel class="dropdown-group-label">Actions</Dropdown.GroupLabel>
24+
{actions.map((action) => (
25+
<Dropdown.Item
26+
key={action.label}
27+
class="dropdown-item"
28+
disabled={action.disabled}
29+
>
30+
{action.label}
31+
</Dropdown.Item>
32+
))}
33+
</Dropdown.Group>
34+
<Dropdown.Separator />
35+
{checkboxItems.map((item) => {
36+
return (
37+
<Dropdown.CheckboxItem key={item} class="dropdown-item">
38+
<Dropdown.ItemIndicator>
39+
<LuCheck />
40+
</Dropdown.ItemIndicator>
41+
{item}
42+
</Dropdown.CheckboxItem>
43+
);
44+
})}
45+
<Dropdown.Separator />
46+
<Dropdown.RadioGroup class="dropdown-group" value="main">
47+
{radioItems.map((item) => {
4248
return (
43-
<Dropdown.CheckboxItem key={item} class="dropdown-item">
49+
<Dropdown.RadioItem key={item} class="dropdown-item" value={item}>
4450
<Dropdown.ItemIndicator>
4551
<LuCheck />
4652
</Dropdown.ItemIndicator>
4753
{item}
48-
</Dropdown.CheckboxItem>
54+
</Dropdown.RadioItem>
4955
);
5056
})}
51-
<Dropdown.Separator />
52-
<Dropdown.RadioGroup class="dropdown-group" defaultValue="main">
53-
{radioItems.map((item) => {
54-
return (
55-
<Dropdown.RadioItem key={item} class="dropdown-item" value={item}>
56-
<Dropdown.ItemIndicator>
57-
<LuCheck />
58-
</Dropdown.ItemIndicator>
59-
{item}
60-
</Dropdown.RadioItem>
61-
);
62-
})}
63-
</Dropdown.RadioGroup>
64-
</Dropdown.Content>
57+
</Dropdown.RadioGroup>
6558
</Dropdown.Popover>
6659
</Dropdown.Root>
6760
);
6861
});
62+
63+
// internal
64+
import styles from '../snippets/dropdown.css?inline';

‎apps/website/src/routes/docs/headless/dropdown/examples/scrollable.tsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import { Dropdown } from '@qwik-ui/headless';
3+
import { LuCheck } from '@qwikest/icons/lucide';
4+
5+
export default component$(() => {
6+
useStyles$(styles);
7+
8+
const actions = [
9+
{ label: 'Commit ⌘+K', disabled: false },
10+
{ label: 'Push ⇧+⌘+K', disabled: false },
11+
{ label: 'Update Project ⌘+T', disabled: true },
12+
];
13+
14+
const checkboxItems = ['Show Git Log', 'Show History'];
15+
16+
const radioItems = ['main', 'develop'];
17+
18+
return (
19+
<Dropdown.Root>
20+
<Dropdown.Trigger class="dropdown-trigger">Git Settings</Dropdown.Trigger>
21+
<Dropdown.Popover>
22+
<Dropdown.Group class="dropdown-group">
23+
<Dropdown.GroupLabel class="dropdown-group-label">Actions</Dropdown.GroupLabel>
24+
{actions.map((action) => (
25+
<Dropdown.Item
26+
key={action.label}
27+
class="dropdown-item"
28+
disabled={action.disabled}
29+
>
30+
{action.label}
31+
</Dropdown.Item>
32+
))}
33+
</Dropdown.Group>
34+
<Dropdown.Separator />
35+
{checkboxItems.map((item) => {
36+
return (
37+
<Dropdown.CheckboxItem key={item} class="dropdown-item">
38+
<Dropdown.ItemIndicator>
39+
<LuCheck />
40+
</Dropdown.ItemIndicator>
41+
{item}
42+
</Dropdown.CheckboxItem>
43+
);
44+
})}
45+
<Dropdown.Separator />
46+
<Dropdown.RadioGroup class="dropdown-group" value="main">
47+
{radioItems.map((item) => {
48+
return (
49+
<Dropdown.RadioItem key={item} class="dropdown-item" value={item}>
50+
<Dropdown.ItemIndicator>
51+
<LuCheck />
52+
</Dropdown.ItemIndicator>
53+
{item}
54+
</Dropdown.RadioItem>
55+
);
56+
})}
57+
</Dropdown.RadioGroup>
58+
</Dropdown.Popover>
59+
</Dropdown.Root>
60+
);
61+
});
62+
63+
// internal
64+
import styles from '../snippets/dropdown.css?inline';

‎apps/website/src/routes/docs/headless/dropdown/examples/simple.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Dropdown } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
const actions = [
6+
{ label: 'Merge Branch ⌘+M', disabled: false },
7+
{ label: 'Rebase Branch ⌘+R', disabled: true },
8+
{ label: 'Stash Changes ⌘+S', disabled: false },
9+
{ label: 'Checkout Branch ⌘+B', disabled: false },
10+
{ label: 'Pull Changes ⌘+P', disabled: false },
11+
{ label: 'Create Tag ⌘+T', disabled: false },
12+
];
13+
14+
return (
15+
<Dropdown.Root>
16+
<Dropdown.Trigger>Git Settings</Dropdown.Trigger>
17+
<Dropdown.Popover gutter={8}>
18+
{actions.map((action) => (
19+
<Dropdown.Item key={action.label} disabled={action.disabled}>
20+
{action.label}
21+
</Dropdown.Item>
22+
))}
23+
</Dropdown.Popover>
24+
</Dropdown.Root>
25+
);
26+
});

‎apps/website/src/routes/docs/headless/dropdown/index.mdx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: Qwik UI | Dropdown
33
---
44

55
import { FeatureList } from '~/components/feature-list/feature-list';
6+
67
import { statusByComponent } from '~/_state/component-statuses';
78

89
<StatusBanner status={statusByComponent.headless.Dropdown} />
@@ -93,3 +94,5 @@ Customizable popover menu.
9394
},
9495
]}
9596
/>
97+
98+
<Showcase name="simple" />

‎apps/website/src/routes/docs/headless/dropdown/snippets/dropdown.css

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,12 @@
2929
outline-offset: 2px;
3030
}
3131

32-
.dropdown-content {
32+
.dropdown-popover {
3333
min-width: var(--dropdown-width);
34-
border: 2px dotted black;
35-
margin-top: 1rem;
3634
flex-direction: column;
37-
display: flex;
3835
row-gap: 0.25rem;
3936
padding: 1rem 1rem 1rem 1.5rem;
37+
border: 2px dotted hsl(var(--foreground));
4038
}
4139

4240
.dropdown-item {
@@ -73,35 +71,7 @@
7371
background: hsl(var(--foreground) / 0.05);
7472
}
7573

76-
.dropdown-arrow {
77-
width: 100%;
78-
}
79-
80-
.dropdown-arrow:after {
81-
content: '';
82-
position: absolute;
83-
border-style: solid;
84-
border-width: 0 10px 10px;
85-
border-color: #ffffff transparent;
86-
display: block;
87-
top: 8px;
88-
right: 50%;
89-
left: 50%;
90-
transform: translate(-50%, -50%);
91-
width: 0;
92-
z-index: 1;
93-
}
94-
95-
.dropdown-arrow:before {
96-
content: '';
97-
position: absolute;
98-
border-style: dotted;
99-
border-width: 0 15px 15px;
100-
border-color: #000 transparent;
101-
display: block;
102-
top: 8px;
103-
right: 50%;
104-
left: 50%;
105-
transform: translate(-50%, -50%);
106-
z-index: 0;
74+
.dropdown-max-height {
75+
max-height: 12rem;
76+
overflow-y: auto;
10777
}

‎apps/website/src/routes/docs/styled/dropdown/examples/hero.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Dropdown } from '@qwik-ui/styled';
3+
4+
export default component$(() => {
5+
const actions = [
6+
{ label: 'Merge Branch ⌘+M', disabled: false },
7+
{ label: 'Rebase Branch ⌘+R', disabled: true },
8+
{ label: 'Stash Changes ⌘+S', disabled: false },
9+
{ label: 'Checkout Branch ⌘+B', disabled: false },
10+
{ label: 'Pull Changes ⌘+P', disabled: false },
11+
{ label: 'Create Tag ⌘+T', disabled: false },
12+
];
13+
14+
return (
15+
<Dropdown.Root>
16+
<Dropdown.Trigger>Git Settings</Dropdown.Trigger>
17+
<Dropdown.Popover gutter={8}>
18+
{actions.map((action) => (
19+
<Dropdown.Item key={action.label} disabled={action.disabled}>
20+
{action.label}
21+
</Dropdown.Item>
22+
))}
23+
</Dropdown.Popover>
24+
</Dropdown.Root>
25+
);
26+
});

‎apps/website/src/routes/docs/styled/dropdown/index.mdx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Qwik UI | Styled Dropdown Component
3+
---
4+
5+
import { statusByComponent } from '~/_state/component-statuses';
6+
7+
<StatusBanner status={statusByComponent.styled.Dropdown} />
8+
9+
# Dropdown
10+
11+
A vertically stacked set of interactive headings that each reveal a section of content.
12+
13+
<Showcase name="hero" />

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
- [Card](/docs/styled/card)
2424
- [Checkbox](/docs/styled/checkbox)
2525
- [Combobox](/docs/styled/combobox)
26+
- [Dropdown](/docs/styled/dropdown)
2627
- [Input](/docs/styled/input)
2728
- [Label](/docs/styled/label)
2829
- [Modal](/docs/styled/modal)

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@
4141
"packageManager": "[email protected]",
4242
"devDependencies": {
4343
"@axe-core/playwright": "^4.9.1",
44-
"@builder.io/qwik": "^1.7.1",
45-
"@builder.io/qwik-city": "^1.7.1",
44+
"@builder.io/qwik": "1.7.0",
45+
"@builder.io/qwik-city": "1.7.0",
4646
"@changesets/cli": "^2.27.3",
4747
"@changesets/get-github-info": "^0.6.0",
4848
"@changesets/types": "^6.0.0",

0 commit comments

Comments
 (0)