Skip to content

Commit 29bb39a

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #632 from thejackshelton/feat/select
docs(improve readability of docs examples, changes with theme): selec…
2 parents c793f61 + 15acaae commit 29bb39a

File tree

14 files changed

+135
-109
lines changed

14 files changed

+135
-109
lines changed

‎apps/website/src/routes/docs/headless/select/examples/add-users.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal, $ } from '@builder.io/qwik';
1+
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -8,28 +9,25 @@ import {
89
} from '@qwik-ui/headless';
910

1011
export default component$(() => {
12+
useStyles$(styles);
1113
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
1214
const hasAddedUsersSig = useSignal<boolean>(false);
1315

1416
return (
1517
<>
16-
<Select class="relative mb-2 min-w-40">
17-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
18+
<Select class="select">
19+
<SelectTrigger class="select-trigger">
1820
<SelectValue placeholder="Select an option" />
1921
</SelectTrigger>
20-
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
22+
<SelectListbox class="select-listbox">
2123
{usersSig.value.map((user) => (
22-
<SelectOption
23-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
24-
key={user}
25-
>
24+
<SelectOption class="select-option" key={user}>
2625
{user}
2726
</SelectOption>
2827
))}
2928
</SelectListbox>
3029
</Select>
3130
<button
32-
class="bg-background border-2 border-dashed border-red-400"
3331
onClick$={$(() => {
3432
if (!hasAddedUsersSig.value) {
3533
usersSig.value = [...usersSig.value, 'John', 'Jane', 'Bob'];

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal, $ } from '@builder.io/qwik';
1+
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -7,6 +8,7 @@ import {
78
SelectValue,
89
} from '@qwik-ui/headless';
910
export default component$(() => {
11+
useStyles$(styles);
1012
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
1113
const counterSig = useSignal(0);
1214

@@ -16,16 +18,13 @@ export default component$(() => {
1618

1719
return (
1820
<>
19-
<Select onChange$={handleChange$} class="relative min-w-40">
20-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
21+
<Select onChange$={handleChange$} class="select">
22+
<SelectTrigger class="select-trigger">
2123
<SelectValue placeholder="Select an option" />
2224
</SelectTrigger>
23-
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
25+
<SelectListbox class="select-listbox">
2426
{usersSig.value.map((user) => (
25-
<SelectOption
26-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
27-
key={user}
28-
>
27+
<SelectOption class="select-option" key={user}>
2928
{user}
3029
</SelectOption>
3130
))}

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal, $ } from '@builder.io/qwik';
1+
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -7,21 +8,19 @@ import {
78
SelectValue,
89
} from '@qwik-ui/headless';
910
export default component$(() => {
11+
useStyles$(styles);
1012
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
1113
const selectedVal = useSignal<string>('Ryan');
1214

1315
return (
1416
<>
15-
<Select bind:value={selectedVal} class="relative min-w-40">
16-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
17+
<Select bind:value={selectedVal} class="select">
18+
<SelectTrigger class="select-trigger">
1719
<SelectValue placeholder="Select an option" />
1820
</SelectTrigger>
19-
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
21+
<SelectListbox class="select-listbox">
2022
{usersSig.value.map((user) => (
21-
<SelectOption
22-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
23-
key={user}
24-
>
23+
<SelectOption class="select-option" key={user}>
2524
{user}
2625
</SelectOption>
2726
))}

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -8,6 +9,7 @@ import {
89
} from '@qwik-ui/headless';
910

1011
export default component$(() => {
12+
useStyles$(styles);
1113
const usersSig = useSignal<string[]>([
1214
'Tim',
1315
'Ryan',
@@ -19,15 +21,15 @@ export default component$(() => {
1921
]);
2022

2123
return (
22-
<Select class="relative min-w-40">
24+
<Select class="select">
2325
<p>This one is the disabled</p>
24-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
26+
<SelectTrigger class="select-trigger">
2527
<SelectValue placeholder="Select an option" />
2628
</SelectTrigger>
27-
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
29+
<SelectListbox class="select-listbox">
2830
{usersSig.value.map((user, index) => (
2931
<SelectOption
30-
class="border-dashed border-blue-400 data-[highlighted]:border-2 data-[disabled]:bg-slate-600 data-[disabled]:opacity-30"
32+
class="select-option"
3133
key={user}
3234
disabled={
3335
index === 0 || index === 2 || index === usersSig.value.length - 1

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -10,33 +11,28 @@ import {
1011
} from '@qwik-ui/headless';
1112

1213
export default component$(() => {
14+
useStyles$(styles);
1315
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Abby']);
1416
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird']);
1517

1618
return (
17-
<Select class="relative min-w-40">
18-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
19+
<Select class="select">
20+
<SelectTrigger class="select-trigger">
1921
<SelectValue placeholder="Select an option" />
2022
</SelectTrigger>
21-
<SelectListbox class="absolute z-10 w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
23+
<SelectListbox class="select-listbox">
2224
<SelectGroup>
23-
<SelectLabel class="text-sm text-slate-400">People</SelectLabel>
25+
<SelectLabel class="select-label">People</SelectLabel>
2426
{usersSig.value.map((user) => (
25-
<SelectOption
26-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
27-
key={user}
28-
>
27+
<SelectOption class="select-option" key={user}>
2928
{user}
3029
</SelectOption>
3130
))}
3231
</SelectGroup>
3332
<SelectGroup>
34-
<SelectLabel class="text-sm text-slate-400">Animals</SelectLabel>
33+
<SelectLabel class="select-label">Animals</SelectLabel>
3534
{animalsSig.value.map((animal) => (
36-
<SelectOption
37-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
38-
key={animal}
39-
>
35+
<SelectOption class="select-option" key={animal}>
4036
{animal}
4137
</SelectOption>
4238
))}

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -8,19 +9,17 @@ import {
89
} from '@qwik-ui/headless';
910

1011
export default component$(() => {
12+
useStyles$(styles);
1113
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
1214

1315
return (
14-
<Select class="relative min-w-40">
15-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
16+
<Select class="select">
17+
<SelectTrigger class="select-trigger">
1618
<SelectValue placeholder="Select an option" />
1719
</SelectTrigger>
18-
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
20+
<SelectListbox class="select-listbox">
1921
{usersSig.value.map((user) => (
20-
<SelectOption
21-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
22-
key={user}
23-
>
22+
<SelectOption class="select-option" key={user}>
2423
{user}
2524
</SelectOption>
2625
))}

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -8,19 +9,17 @@ import {
89
} from '@qwik-ui/headless';
910

1011
export default component$(() => {
12+
useStyles$(styles);
1113
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
1214

1315
return (
14-
<Select loop={true} class="relative min-w-40">
15-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
16+
<Select loop={true} class="select">
17+
<SelectTrigger class="select-trigger">
1618
<SelectValue placeholder="Select an option" />
1719
</SelectTrigger>
18-
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
20+
<SelectListbox class="select-listbox">
1921
{usersSig.value.map((user) => (
20-
<SelectOption
21-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
22-
key={user}
23-
>
22+
<SelectOption class="select-option" key={user}>
2423
{user}
2524
</SelectOption>
2625
))}

‎apps/website/src/routes/docs/headless/select/examples/open-change.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal, $ } from '@builder.io/qwik';
1+
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -7,6 +8,7 @@ import {
78
SelectValue,
89
} from '@qwik-ui/headless';
910
export default component$(() => {
11+
useStyles$(styles);
1012
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
1113
const openChangeSig = useSignal(0);
1214

@@ -16,16 +18,13 @@ export default component$(() => {
1618

1719
return (
1820
<>
19-
<Select onOpenChange$={handleOpenChange$} class="relative min-w-40">
20-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
21+
<Select onOpenChange$={handleOpenChange$} class="select">
22+
<SelectTrigger class="select-trigger">
2123
<SelectValue placeholder="Select an option" />
2224
</SelectTrigger>
23-
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
25+
<SelectListbox class="select-listbox">
2426
{usersSig.value.map((user) => (
25-
<SelectOption
26-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
27-
key={user}
28-
>
27+
<SelectOption class="select-option" key={user}>
2928
{user}
3029
</SelectOption>
3130
))}

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -10,33 +11,28 @@ import {
1011
} from '@qwik-ui/headless';
1112

1213
export default component$(() => {
14+
useStyles$(styles);
1315
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
1416
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird', 'Fish', 'Snake']);
1517

1618
return (
17-
<Select class="relative min-w-40">
18-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
19+
<Select class="select">
20+
<SelectTrigger class="select-trigger">
1921
<SelectValue placeholder="Select an option" />
2022
</SelectTrigger>
21-
<SelectListbox class="absolute z-10 max-h-60 w-full overflow-y-auto border-2 border-dashed border-green-400 bg-slate-900 p-2">
23+
<SelectListbox class="select-listbox select-max-height">
2224
<SelectGroup>
23-
<SelectLabel class="text-sm text-slate-400">People</SelectLabel>
25+
<SelectLabel class="select-label">People</SelectLabel>
2426
{usersSig.value.map((user) => (
25-
<SelectOption
26-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
27-
key={user}
28-
>
27+
<SelectOption class="select-option" key={user}>
2928
{user}
3029
</SelectOption>
3130
))}
3231
</SelectGroup>
3332
<SelectGroup>
34-
<SelectLabel class="text-sm text-slate-400">Animals</SelectLabel>
33+
<SelectLabel class="select-label">Animals</SelectLabel>
3534
{animalsSig.value.map((animal) => (
36-
<SelectOption
37-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
38-
key={animal}
39-
>
35+
<SelectOption class="select-option" key={animal}>
4036
{animal}
4137
</SelectOption>
4238
))}

‎apps/website/src/routes/docs/headless/select/examples/select.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.select {
2+
position: relative;
3+
min-width: 10rem;
4+
}
5+
6+
.select-trigger {
7+
width: 100%;
8+
border: 2px dashed hsla(var(--primary) / 1);
9+
border-radius: calc(var(--border-radius) / 2);
10+
}
11+
12+
.select-listbox {
13+
position: absolute;
14+
width: 100%;
15+
background-color: hsl(var(--background));
16+
padding: 0.5rem;
17+
border: 2px dashed hsla(var(--foreground) / 0.6);
18+
border-radius: calc(var(--border-radius) / 2);
19+
z-index: 9999;
20+
}
21+
22+
.select-label {
23+
font-size: 0.875rem;
24+
line-height: 1.25rem;
25+
color: hsla(var(--foreground) / 0.8);
26+
padding-top: 0.5rem;
27+
}
28+
29+
.select-max-height {
30+
max-height: 15rem;
31+
overflow-y: auto;
32+
}
33+
34+
[data-highlighted] {
35+
outline: 2px dashed hsla(var(--primary) / 1);
36+
border-radius: calc(var(--border-radius) / 2);
37+
}
38+
39+
[data-disabled] {
40+
opacity: 0.6;
41+
background: hsl(var(--foreground) / 0.05);
42+
}

0 commit comments

Comments
 (0)