docs(combobox): adding initial docs for autocomplete config

thejackshelton · wmertens · commit 093833e551f0 · 2023-08-31T13:15:46.000+02:00
diff --git a/apps/website/src/routes/docs.css b/apps/website/src/routes/docs.css
@@ -43,7 +43,7 @@
     }
 
     blockquote {
-      @apply bg-[#BFDBFE] dark:bg-[#312E81] p-4 border-l-[3px] dark:border-[#F3F3F3] border-[#333333] rounded-sm;
+      @apply bg-[#BFDBFE] dark:bg-[#312E81] p-4 border-l-[3px] dark:border-[#F3F3F3] border-[#333333] rounded-sm my-4;
     }
 
     ul {
diff --git a/apps/website/src/routes/docs/_components/code-example/code-example.tsx b/apps/website/src/routes/docs/_components/code-example/code-example.tsx
@@ -1,8 +1,8 @@
 import { component$, Slot } from '@builder.io/qwik';
 
-export const CodeExample = component$(() => {
+export const CodeExample = component$((props: { classes?: string }) => {
   return (
-    <div class="p-12 mb-6 rounded-xl bg-slate-900">
+    <div class={`p-12 mb-6 rounded-xl bg-slate-900 ${props.classes}`}>
       <section class="overflow-x-auto">
         <Slot />
       </section>
diff --git a/apps/website/src/routes/docs/headless/(components)/accordion/index.mdx b/apps/website/src/routes/docs/headless/(components)/accordion/index.mdx
@@ -101,7 +101,7 @@ Qwik UI's Accordion implementation follows the [WAI-Aria](https://www.w3.org/WAI
 - Animatable, dynamic, and resumable.
 
 <div class="mb-6 flex flex-col gap-2">
-  [View Source Code ↗️](https://github.com/qwikifiers/qwik-ui/tree/main/packages/kit-headless/src/components/accordion)
+[View Source Code ↗️](https://github.com/qwikifiers/qwik-ui/tree/main/packages/kit-headless/src/components/accordion)
 
 [Report an issue 🚨](https://github.com/qwikifiers/qwik-ui/issues)
 
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx b/apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx
@@ -44,7 +44,7 @@ const objectExample: Array<Trainer> = [
   { testValue: 'joseph', testLabel: 'Joseph', disabled: false }
 ];
 
-export const Example01 = component$(() => {
+export const HeroExample = component$(() => {
   const stringsExampleSig = useSignal(stringsExample);
   const objectExampleSig = useSignal(objectExample);
   const isComboboxVisibleSig = useSignal(true);
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/index.mdx b/apps/website/src/routes/docs/headless/(components)/combobox/index.mdx
@@ -11,7 +11,7 @@ import {
   ComboboxOption,
 } from '@qwik-ui/headless';
 
-import { Example01, StringCombobox, Example03 } from './examples';
+import { HeroExample, StringCombobox, Example03 } from './examples';
 import { CodeExample } from '../../../_components/code-example/code-example';
 import { KeyboardInteractionTable } from '../../../_components/keyboard-interaction-table/keyboard-interaction-table';
 import { APITable } from '../../../_components/api-table/api-table';
@@ -26,7 +26,7 @@ import {statusByComponent} from '../../../../../_state/component-statuses';
 
 {' '}
 
-<Example01>
+<HeroExample>
   ```tsx
   <Combobox class="relative text-white">
     <ComboboxLabel class="text-inherit font-semibold">
@@ -63,7 +63,40 @@ import {statusByComponent} from '../../../../../_state/component-statuses';
     </ComboboxPortal>
   </Combobox>
   ```
-</Example01>
+</HeroExample>
+
+<div class="bg-[#9A3412] p-4 rounded-sm border-l-[3px] dark:border-[#F3F3F3] border-[#333333]">
+  <p class="pb-4">The Combobox component makes use of **portals**. A basic use case for a portal is to prevent overflow issues in your UI. To support portals in Qwik UI, please add the following around your layout.tsx.</p>
+  <CodeExample classes="!mb-0 !p-6 !rounded-md">
+    ```tsx
+    <body>
+      <QwikUIProvider>
+        <slot />
+      </QwikUIProvider>
+    </body>
+    ```
+  </CodeExample>
+</div>
+
+> In Beta, we're currently supporting the **Autocomplete** configuration. We aim to support other combobox configurations according to our [roadmap](https://github.com/qwikifiers/qwik-ui/issues/405)
+
+##### ✨ Features
+
+- Full keyboard navigation.
+- Single or Multi Accordion.
+- Controlled or uncontrolled.
+- Animatable, dynamic, and resumable.
+
+Qwik UI's Combobox implementation follows the [WAI-Aria](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) design pattern, along with some additional API's that enhance the flexibility, types, and performance.
+
+<div class="mb-6 flex flex-col gap-2">
+[View Source Code ↗️](https://github.com/qwikifiers/qwik-ui/tree/main/packages/kit-headless/src/components/combobox)
+
+[Report an issue 🚨](https://github.com/qwikifiers/qwik-ui/issues)
+
+[Edit This Page 🗒️](<https://github.com/qwikifiers/qwik-ui/edit/main/apps/website/src/routes/docs/headless/(components)/combobox/index.mdx>)
+
+</div>
 
 ## Building blocks
 
diff --git a/packages/kit-headless/src/components/combobox/combobox-input.tsx b/packages/kit-headless/src/components/combobox/combobox-input.tsx
@@ -28,7 +28,7 @@ export const ComboboxInput = component$(({ ...props }: ComboboxInputProps) => {
   const inputId = `${context.localId}-input`;
   const listboxId = `${context.localId}-listbox`;
 
-  const isDefaultLabelNeeded = useSignal<boolean>(true);
+  const isDefaultLabelNeededSig = useSignal<boolean>(true);
 
   const onKeydownBehavior$ = $((e: QwikKeyboardEvent) => {
     const highlightedOptionLabel = getOptionLabel(
@@ -97,7 +97,7 @@ export const ComboboxInput = component$(({ ...props }: ComboboxInputProps) => {
     }
 
     if (context.inputRef.value.value === context.defaultLabel) {
-      isDefaultLabelNeeded.value = false;
+      isDefaultLabelNeededSig.value = false;
     }
   });
 
@@ -152,7 +152,7 @@ export const ComboboxInput = component$(({ ...props }: ComboboxInputProps) => {
           context.onInputChange$(inputElement.value);
         }
       }}
-      value={isDefaultLabelNeeded && context.defaultLabel}
+      value={isDefaultLabelNeededSig && context.defaultLabel}
       onBlur$={() => (context.isListboxOpenSig.value = false)}
       onKeyDown$={[onKeydownBehavior$, props.onKeyDown$]}
       {...props}

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`blockquote {`
`46`		`- @apply bg-[#BFDBFE] dark:bg-[#312E81] p-4 border-l-[3px] dark:border-[#F3F3F3] border-[#333333] rounded-sm;`
	`46`	`+ @apply bg-[#BFDBFE] dark:bg-[#312E81] p-4 border-l-[3px] dark:border-[#F3F3F3] border-[#333333] rounded-sm my-4;`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`ul {`