Skip to content

Commit 634541c

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #343 from thejackshelton/add-headless-autocomplete
Critical UX fixes for autocomplete, docs changes, & TW docs style fix.
2 parents 76f8853 + caa95c2 commit 634541c

File tree

7 files changed

+122
-86
lines changed

7 files changed

+122
-86
lines changed

‎apps/website/.eslintrc.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
"sourceType": "module",
1313
"ecmaFeatures": {
1414
"jsx": true
15-
}
15+
},
16+
"parser": "@typescript-eslint/parser",
17+
"tsconfigRootDir": "__dirname"
1618
},
1719
"plugins": ["@typescript-eslint"],
1820
"ignorePatterns": ["!**/*"],

‎apps/website/src/routes/docs.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,21 @@
1717
.docs h4 {
1818
@apply text-lg mb-6;
1919
}
20+
21+
/* Styles Jack has added / will change */
22+
.docs a {
23+
@apply border-b-2 border-[#00B9FC] font-bold;
24+
}
25+
26+
/* adds sufficient padding to the table items */
27+
.docs td article {
28+
@apply pt-4 pb-4 mb-0;
29+
}
30+
31+
.docs p {
32+
@apply mb-4;
33+
}
34+
35+
.docs td p {
36+
@apply mb-0;
37+
}

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,33 @@ export const Example01 = component$(() => {
2727
return (
2828
<PreviewCodeExample>
2929
<div q:slot="actualComponent">
30-
<AutocompleteRoot class="relative">
31-
<AutocompleteLabel>Personal Trainers ⚡</AutocompleteLabel>
32-
<AutocompleteTrigger>
33-
<AutocompleteInput />
34-
<AutocompleteButton>
30+
<AutocompleteRoot class="relative text-white">
31+
<AutocompleteLabel class="text-inherit font-semibold">
32+
Personal Trainers ⚡
33+
</AutocompleteLabel>
34+
<AutocompleteTrigger class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
35+
<AutocompleteInput class="w-44 bg-inherit px-2 pr-6" />
36+
<AutocompleteButton class="w-6 h-6 group absolute right-0">
3537
<svg
3638
xmlns="http://www.w3.org/2000/svg"
3739
viewBox="0 0 24 24"
3840
fill="none"
39-
stroke="currentColor"
4041
stroke-width="2"
42+
class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
4143
stroke-linecap="round"
4244
stroke-linejoin="round"
43-
style="width: 20px; height: 20px;"
4445
>
4546
<polyline points="6 9 12 15 18 9"></polyline>
4647
</svg>
4748
</AutocompleteButton>
4849
</AutocompleteTrigger>
49-
<AutocompleteListbox class="w-full bg-black">
50+
<AutocompleteListbox class="w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
5051
{trainers.map((trainer, index) => (
51-
<AutocompleteOption optionValue={trainer} key={index}>
52+
<AutocompleteOption
53+
optionValue={trainer}
54+
key={index}
55+
class="rounded-sm px-2 hover:bg-[#496080] focus:bg-[#496080]"
56+
>
5257
{trainer}
5358
</AutocompleteOption>
5459
))}

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

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,28 +25,33 @@ import { APITable } from '../../../../../components/api-table/api-table';
2525

2626
<Example01>
2727
```tsx
28-
<AutocompleteRoot class="relative">
29-
<AutocompleteLabel>Personal Trainers ⚡</AutocompleteLabel>
30-
<AutocompleteTrigger>
31-
<AutocompleteInput />
32-
<AutocompleteButton>
28+
<AutocompleteRoot class="relative text-white">
29+
<AutocompleteLabel class="text-inherit font-semibold">
30+
Personal Trainers ⚡
31+
</AutocompleteLabel>
32+
<AutocompleteTrigger class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
33+
<AutocompleteInput class="w-44 bg-inherit px-2 pr-6" />
34+
<AutocompleteButton class="w-6 h-6 group absolute right-0">
3335
<svg
3436
xmlns="http://www.w3.org/2000/svg"
3537
viewBox="0 0 24 24"
3638
fill="none"
37-
stroke="currentColor"
3839
stroke-width="2"
40+
class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
3941
stroke-linecap="round"
4042
stroke-linejoin="round"
41-
style="width: 20px; height: 20px;"
4243
>
4344
<polyline points="6 9 12 15 18 9"></polyline>
4445
</svg>
4546
</AutocompleteButton>
4647
</AutocompleteTrigger>
47-
<AutocompleteListbox class="w-full bg-black">
48+
<AutocompleteListbox class="w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
4849
{trainers.map((trainer, index) => (
49-
<AutocompleteOption optionValue={trainer} key={index}>
50+
<AutocompleteOption
51+
optionValue={trainer}
52+
key={index}
53+
class="rounded-sm px-2 hover:bg-[#496080] focus:bg-[#496080]"
54+
>
5055
{trainer}
5156
</AutocompleteOption>
5257
))}
@@ -93,48 +98,64 @@ import { APITable } from '../../../../../components/api-table/api-table';
9398
<KeyboardInteractionTable keyDescriptors={
9499
[
95100
{
96-
keyTitle: 'Space',
97-
description: 'Expand or collapse the `AccordionItem`.',
101+
keyTitle: 'Tab',
102+
description: 'Moves focus to the next focusable element or option.',
98103
},
99104
{
100-
keyTitle: 'Enter',
101-
description: 'Expand or collapse the `AccordionItem`.',
105+
keyTitle: 'Shift + Tab',
106+
description: 'Moves focus to the previous focusable element or option.',
102107
},
103108
{
104-
keyTitle: 'Tab',
105-
description: 'Moves focus to the next focusable element.',
109+
keyTitle: 'DownArrow',
110+
description: "Opens the listbox and moves focus to the first option. When focus is on an option, moves focus to the next option. If there isn't one, it will go back to the first option.",
106111
},
107112
{
108-
keyTitle: 'Shift + Tab',
109-
description: 'Moves focus to the previous focusable element.',
113+
keyTitle: 'UpArrow',
114+
description: "When focus is on an option, moves focus to the previous option. If there isn't one, it will go back to the last option.",
115+
},
116+
{
117+
keyTitle: 'Enter / Space',
118+
description: `Selects the option when focused. The listbox will close and the selected option becomes the input's value.`,
119+
},
120+
{
121+
keyTitle: 'Escape',
122+
description: 'Closes the listbox.',
110123
},
111124
{
112125
keyTitle: 'Home',
113-
description: 'When on `AccordionItem`, Moves focus to the first `AccordionItem`.',
126+
description: 'When the input is focused, the cursor moves to the start of the input value. When focused on any listbox option, focus is moved to the first option.',
114127
},
115128
{
116129
keyTitle: 'End',
117-
description: 'When on `AccordionItem`, Moves focus to the last `AccordionItem`.',
130+
description: 'When the input is focused, the cursor moves to the end of the input value. When focused on any listbox option, focus is moved to the last option.',
131+
},
132+
{
133+
keyTitle: 'Delete',
134+
description: 'When text is selected in the input, deletes the selected text.',
118135
},
119136

120137
]
121138
}/>
122139

140+
Adheres to the [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) WAI-ARIA design pattern. See the W3C Editable Combobox With List Autocomplete Example for more information.
141+
123142
## API
124143

125-
### AccordionItem
144+
By default, the API holds available attributes of both native DOM elements and custom Qwik elements. This is thanks to **QwikIntrinsicElements**. Here are some of the notable API's for this component.
145+
146+
### AutocompleteRoot
126147

127148
<APITable
128149
propDescriptors={[
129150
{
130151
name: 'class',
131152
type: 'string',
132-
description: 'CSS classes to apply to the accordion container.',
153+
description: 'CSS classes to apply to the autocomplete container.',
133154
},
134155
{
135156
name: 'style',
136157
type: 'string',
137-
description: 'CSS styles to apply to the accordion container.',
158+
description: 'inline CSS styles to apply to the autocomplete container.',
138159
},
139160
{
140161
name: 'label',

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,28 @@ export const Example01 = component$(() => {
1919
<SelectLabel class="text-white font-semibold ml-2">
2020
Qwik Fruits
2121
</SelectLabel>
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-
/>
22+
<SelectTrigger class="flex justify-between items-center px-8 bg-[#1f2532] border-[#7d95b3] border-[1px] rounded-md p-4 group peer">
23+
<SelectValue placeholder="Select a fruit! 🍹" class="text-white" />
2724
<SelectMarker class="w-6 h-6">
2825
<svg
2926
xmlns="http://www.w3.org/2000/svg"
3027
viewBox="0 0 24 24"
3128
fill="none"
3229
stroke-width="2"
33-
class="stroke-gray-700 dark:stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
30+
class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
3431
stroke-linecap="round"
3532
stroke-linejoin="round"
3633
>
3734
<polyline points="6 9 12 15 18 9"></polyline>
3835
</svg>
3936
</SelectMarker>
4037
</SelectTrigger>
41-
<SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 mt-2 border-[1px] rounded-md">
42-
<SelectOption value="🚀 Qwik" class="p-4" />
43-
<SelectGroup class="p-4 ">
38+
<SelectListBox class="bg-[#1f2532] border-[#7d95b3] mt-2 border-[1px] rounded-md text-white">
39+
<SelectOption
40+
value="🚀 Qwik"
41+
class="p-4 hover:bg-[#496080] focus:bg-[#496080]"
42+
/>
43+
<SelectGroup class="p-4">
4444
<SelectLabel class="p-4">Fruits</SelectLabel>
4545
{[
4646
{ value: '🍎 Apple', disabled: false },
@@ -53,7 +53,7 @@ export const Example01 = component$(() => {
5353
key={option.value}
5454
value={option.value}
5555
disabled={option.disabled}
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"
56+
class="hover:bg-[#496080] focus:bg-[#496080] aria-disabled:text-red-500 aria-disabled:cursor-not-allowed rounded-sm p-4"
5757
/>
5858
);
5959
})}

0 commit comments

Comments
 (0)