Skip to content

Commit 114f38b

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #621 from thejackshelton/feat/select
Feat/select
2 parents 182f62e + b2c8404 commit 114f38b

File tree

18 files changed

+901
-83
lines changed

18 files changed

+901
-83
lines changed

‎.github/actions/test/action.yml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ runs:
6363
# - name: Codecov upload
6464
# uses: codecov/codecov-action@v2
6565

66-
- name: Lint PR
67-
if: github.event_name == 'pull_request'
68-
shell: bash
69-
run: pnpm danger ci --use-github-checks --failOnErrors -d .dangerfile.ts
70-
env:
71-
DANGER_GITHUB_API_TOKEN: ${{ inputs.github_token }}
66+
# - name: Lint PR
67+
# if: github.event_name == 'pull_request'
68+
# shell: bash
69+
# run: pnpm danger ci --use-github-checks --failOnErrors -d .dangerfile.ts
70+
# env:
71+
# DANGER_GITHUB_API_TOKEN: ${{ inputs.github_token }}

‎apps/website/src/routes/docs/headless/select/examples/disabled.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
9+
10+
export default component$(() => {
11+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
12+
13+
return (
14+
<Select class="relative min-w-40">
15+
<p>This one is the disabled</p>
16+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
17+
<SelectValue placeholder="Select an option" />
18+
</SelectTrigger>
19+
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
20+
{usersSig.value.map((user, index) => (
21+
<SelectOption
22+
class="border-dashed border-blue-400 data-[highlighted]:border-2 data-[disabled]:bg-slate-600 data-[disabled]:opacity-30"
23+
key={user}
24+
disabled={index === 0 || index === usersSig.value.length - 1 ? true : false}
25+
>
26+
{user}
27+
</SelectOption>
28+
))}
29+
</SelectListbox>
30+
</Select>
31+
);
32+
});

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
import { component$, useSignal } from '@builder.io/qwik';
2-
import { Select, SelectListbox, SelectOption, SelectTrigger } from '@qwik-ui/headless';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
39

410
export default component$(() => {
511
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
612

713
return (
814
<Select class="relative min-w-40">
9-
<SelectTrigger class="w-full border-2 border-dashed border-red-400" />
15+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
16+
<SelectValue placeholder="Select an option" />
17+
</SelectTrigger>
1018
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
11-
<SelectOption class="border-2 border-dashed border-blue-400">
12-
first option!
13-
</SelectOption>
1419
{usersSig.value.map((user) => (
15-
<SelectOption key={user}>{user}</SelectOption>
20+
<SelectOption
21+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
22+
key={user}
23+
>
24+
{user}
25+
</SelectOption>
1626
))}
1727
</SelectListbox>
1828
</Select>

‎apps/website/src/routes/docs/headless/select/examples/uncontrolled.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
9+
10+
export default component$(() => {
11+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
12+
13+
return (
14+
<Select value="Jessie" class="relative min-w-40">
15+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
16+
<SelectValue placeholder="Select an option" />
17+
</SelectTrigger>
18+
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
19+
{usersSig.value.map((user) => (
20+
<SelectOption
21+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
22+
key={user}
23+
>
24+
{user}
25+
</SelectOption>
26+
))}
27+
</SelectListbox>
28+
</Select>
29+
);
30+
});

‎apps/website/src/routes/docs/headless/select/examples/wrong-value.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
9+
10+
export default component$(() => {
11+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
12+
13+
return (
14+
<>
15+
<Select value="Jessi" class="relative min-w-40">
16+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
17+
<SelectValue placeholder="wrong value placeholder" />
18+
</SelectTrigger>
19+
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
20+
{usersSig.value.map((user) => (
21+
<SelectOption
22+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
23+
key={user}
24+
>
25+
{user}
26+
</SelectOption>
27+
))}
28+
</SelectListbox>
29+
</Select>
30+
</>
31+
);
32+
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,30 @@ import { statusByComponent } from '~/_state/component-statuses';
1010

1111
This element is used to create a drop-down list, it's often used in a form, to collect user input.
1212

13+
## Hero
14+
1315
<div data-testid="select-hero-test">
1416
<Showcase name="hero" />
1517
</div>
1618

19+
## Disabled
20+
21+
<div data-testid="select-disabled-test">
22+
<Showcase name="disabled" />
23+
</div>
24+
25+
## Uncontrolled
26+
27+
<div data-testid="select-uncontrolled-test">
28+
<Showcase name="uncontrolled" />
29+
</div>
30+
31+
## Wrong Value
32+
33+
<div data-testid="select-wrong-value-test">
34+
<Showcase name="wrong-value" />
35+
</div>
36+
1737
## Building blocks
1838

1939
<CodeSnippet name="building-blocks" />

‎apps/website/src/routes/docs/headless/select/select.driver.ts

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,52 @@
1-
import { Locator, Page } from '@playwright/test';
2-
1+
import { Locator, Page, expect } from '@playwright/test';
2+
import { type OpenKeys } from '@qwik-ui/headless';
33
export type DriverLocator = Locator | Page;
44

5-
export function selectTestDriver<T extends DriverLocator>(locator: T) {
5+
export function createTestDriver<T extends DriverLocator>(locator: T) {
66
const getRoot = () => {
77
return locator.getByRole('combobox');
88
};
99

10+
const getTrigger = () => {
11+
return getRoot().getByRole('button');
12+
};
13+
14+
const getListbox = () => {
15+
return getRoot().getByRole('listbox');
16+
};
17+
18+
const getOptions = () => {
19+
return getRoot().getByRole('option', { includeHidden: true }).all();
20+
};
21+
22+
const getValue = async () => {
23+
// annoyingly, it seems we need to check if the listbox is hidden in playwright, or else the value does not update
24+
await expect(getListbox()).toBeHidden();
25+
26+
return await getTrigger().locator('[data-value]').textContent();
27+
};
28+
29+
const openListbox = async (key: OpenKeys | 'click') => {
30+
await getTrigger().focus();
31+
32+
if (key !== 'click') {
33+
await getTrigger().press(key);
34+
} else {
35+
await getTrigger().click();
36+
}
37+
38+
// should be open initially
39+
await expect(getListbox()).toBeVisible();
40+
};
41+
1042
return {
1143
...locator,
1244
locator,
1345
getRoot,
14-
getListbox() {
15-
return getRoot().getByRole('listbox');
16-
},
17-
getTrigger() {
18-
return getRoot().getByRole('button');
19-
},
20-
// get all options
21-
getOptions() {
22-
return getRoot().getByRole('option').all();
23-
},
46+
getTrigger,
47+
getListbox,
48+
getOptions,
49+
getValue,
50+
openListbox,
2451
};
2552
}

0 commit comments

Comments
 (0)