Skip to content

Commit a94c5ec

Browse files
thejacksheltonthejackshelton
committed
docs(docs enhancements for autocomplete & select): docs autocomplete + select
1 parent 899a56d commit a94c5ec

File tree

4 files changed

+37
-30
lines changed

4 files changed

+37
-30
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const Example01 = component$(() => {
2727
return (
2828
<PreviewCodeExample>
2929
<div q:slot="actualComponent">
30-
<AutocompleteRoot style="width: fit-content">
30+
<AutocompleteRoot class="relative">
3131
<AutocompleteLabel>Personal Trainers ⚡</AutocompleteLabel>
3232
<AutocompleteTrigger>
3333
<AutocompleteInput />
@@ -46,7 +46,7 @@ export const Example01 = component$(() => {
4646
</svg>
4747
</AutocompleteButton>
4848
</AutocompleteTrigger>
49-
<AutocompleteListbox class="listboxStyle">
49+
<AutocompleteListbox class="w-full bg-black">
5050
{trainers.map((trainer, index) => (
5151
<AutocompleteOption optionValue={trainer} key={index}>
5252
{trainer}

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

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,35 +9,38 @@ import {
99
SelectOption,
1010
SelectGroup,
1111
} from '@qwik-ui/headless';
12-
import { PreviewCodeExample } from 'apps/website/src/components/preview-code-example/preview-code-example';
12+
import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';
1313

1414
export const Example01 = component$(() => {
1515
return (
1616
<PreviewCodeExample>
1717
<div q:slot="actualComponent">
18-
<SelectRoot>
19-
<SelectLabel class="text-black dark:text-white">
20-
Lorem ipsum dolor sit amet
18+
<SelectRoot class="dark:bg-gray-700">
19+
<SelectLabel class="text-white font-semibold ml-2">
20+
Qwik Fruits
2121
</SelectLabel>
22-
<SelectTrigger class="flex justify-between items-center border-slate-200 dark:border-gray-600 border-[1px] p-4">
23-
<SelectValue placeholder="Select an option! ⚡" />
22+
<SelectTrigger class="flex justify-between items-center px-8 bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px] rounded-md p-4 group peer">
23+
<SelectValue
24+
placeholder="Select a fruit! 🍹"
25+
class="text-gray-700 dark:text-white"
26+
/>
2427
<SelectMarker class="w-6 h-6">
2528
<svg
2629
xmlns="http://www.w3.org/2000/svg"
2730
viewBox="0 0 24 24"
2831
fill="none"
29-
stroke="currentColor"
3032
stroke-width="2"
33+
class="stroke-gray-700 dark:stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
3134
stroke-linecap="round"
3235
stroke-linejoin="round"
3336
>
3437
<polyline points="6 9 12 15 18 9"></polyline>
3538
</svg>
3639
</SelectMarker>
3740
</SelectTrigger>
38-
<SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px]">
41+
<SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 mt-2 border-[1px] rounded-md">
3942
<SelectOption value="🚀 Qwik" class="p-4" />
40-
<SelectGroup class="p-4">
43+
<SelectGroup class="p-4 ">
4144
<SelectLabel class="p-4">Fruits</SelectLabel>
4245
{[
4346
{ value: '🍎 Apple', disabled: false },
@@ -50,7 +53,7 @@ export const Example01 = component$(() => {
5053
key={option.value}
5154
value={option.value}
5255
disabled={option.disabled}
53-
class="aria-disabled:text-red-500 aria-disabled:cursor-not-allowed hover:bg-slate-300 dark:hover:bg-gray-600 p-4"
56+
class="aria-disabled:text-red-500 aria-disabled:cursor-not-allowed hover:bg-slate-200 rounded-sm dark:hover:bg-gray-600 p-4"
5457
/>
5558
);
5659
})}
@@ -71,14 +74,17 @@ export const Example02 = component$(() => {
7174
<PreviewCodeExample>
7275
<div q:slot="actualComponent">
7376
<SelectRoot>
74-
<SelectTrigger class="flex justify-between items-center border-slate-200 dark:border-gray-600 border-[1px] p-4">
75-
<SelectValue placeholder="Home" />
77+
<SelectTrigger class="flex justify-between items-center bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px] p-4">
78+
<SelectValue
79+
placeholder="Home"
80+
class="text-gray-700 dark:text-white"
81+
/>
7682
<SelectMarker class="w-6 h-6">
7783
<svg
7884
xmlns="http://www.w3.org/2000/svg"
7985
viewBox="0 0 24 24"
8086
fill="none"
81-
stroke="currentColor"
87+
class="stroke-gray-700 dark:stroke-white"
8288
stroke-width="2"
8389
stroke-linecap="round"
8490
stroke-linejoin="round"

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,30 @@ import { APITable } from '../../../../../components/api-table/api-table';
1515

1616
<Example01>
1717
```tsx
18-
<SelectRoot>
19-
<SelectLabel class="text-black dark:text-white">
20-
Lorem ipsum dolor sit amet
21-
</SelectLabel>
22-
<SelectTrigger class="flex justify-between items-center border-slate-200 dark:border-gray-600 border-[1px] p-4">
23-
<SelectValue placeholder="Select an option! ⚡" />
18+
<SelectRoot class="dark:bg-gray-700">
19+
<SelectLabel class="text-white font-semibold ml-2">Qwik Fruits</SelectLabel>
20+
<SelectTrigger class="flex justify-between items-center px-8 bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px] rounded-md p-4 group peer">
21+
<SelectValue
22+
placeholder="Select a fruit! 🍹"
23+
class="text-gray-700 dark:text-white"
24+
/>
2425
<SelectMarker class="w-6 h-6">
2526
<svg
2627
xmlns="http://www.w3.org/2000/svg"
2728
viewBox="0 0 24 24"
2829
fill="none"
29-
stroke="currentColor"
3030
stroke-width="2"
31+
class="stroke-gray-700 dark:stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
3132
stroke-linecap="round"
3233
stroke-linejoin="round"
3334
>
3435
<polyline points="6 9 12 15 18 9"></polyline>
3536
</svg>
3637
</SelectMarker>
3738
</SelectTrigger>
38-
<SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px]">
39+
<SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 mt-2 border-[1px] rounded-md">
3940
<SelectOption value="🚀 Qwik" class="p-4" />
40-
<SelectGroup class="p-4">
41+
<SelectGroup class="p-4 ">
4142
<SelectLabel class="p-4">Fruits</SelectLabel>
4243
{[
4344
{ value: '🍎 Apple', disabled: false },
@@ -50,7 +51,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
5051
key={option.value}
5152
value={option.value}
5253
disabled={option.disabled}
53-
class="aria-disabled:text-red-500 aria-disabled:cursor-not-allowed hover:bg-slate-300 dark:hover:bg-gray-600 p-4"
54+
class="aria-disabled:text-red-500 aria-disabled:cursor-not-allowed hover:bg-slate-200 rounded-sm dark:hover:bg-gray-600 p-4"
5455
/>
5556
);
5657
})}
@@ -199,7 +200,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
199200
{
200201
name: 'disabled',
201202
type: 'boolean',
202-
description: 'Use this property to disabled the `SelectTrigger` element.',
203+
description: 'Use this property to disable the `SelectTrigger` element.',
203204
},
204205
]}
205206
/>
@@ -281,7 +282,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
281282
{
282283
name: 'disabled',
283284
type: 'boolean',
284-
description: 'Use this property to disabled the `SelectGroup` element.',
285+
description: 'Use this property to disable the `SelectGroup` element.',
285286
},
286287
]}
287288
/>
@@ -322,7 +323,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
322323
{
323324
name: 'disabled',
324325
type: 'boolean',
325-
description: 'Use this property to disabled the `SelectOption` element.',
326+
description: 'Use this property to disable the `SelectOption` element.',
326327
},
327328
{
328329
name: 'value',

‎packages/kit-headless/src/components/Autocomplete/autocomplete.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ import { computePosition, flip } from '@floating-ui/dom';
7777
- Maybe: selected value context for the combobox?
7878
7979
80-
APG Type:
80+
APG Type:
8181
List autocomplete with manual selection
8282
8383
Refer to Combobox Pattern for General Changes & Listbox Pattern for Listbox Changes
@@ -279,7 +279,7 @@ export const AutocompleteInput = component$((props: InputProps) => {
279279
280280
*/
281281

282-
useVisibleTask$(({ track }) => {
282+
useTask$(({ track }) => {
283283
track(() => contextService.inputValue.value);
284284

285285
contextService.filteredOptions = contextService.options.filter(

0 commit comments

Comments
 (0)