docs(search): add cmdk style example

kobaltedev · Oct 31, 2024 · 406b47f · 406b47f
1 parent 3559681
commit 406b47f
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 41 deletions.
diff --git a/apps/docs/src/examples/search.module.css b/apps/docs/src/examples/search.module.css
@@ -1,4 +1,5 @@
 .search__control {
+	overflow: hidden;
 	display: inline-flex;
 	justify-content: space-between;
 	width: 250px;
@@ -14,11 +15,6 @@
 		color 250ms;
 }
 
-.search__control[data-invalid] {
-	border-color: hsl(0 72% 51%);
-	color: hsl(0 72% 51%);
-}
-
 .search__control_multi {
 	width: 100%;
 	min-width: 250px;
@@ -49,8 +45,6 @@
 	align-items: center;
 	width: auto;
 	outline: none;
-	border-top-left-radius: 6px;
-	border-bottom-left-radius: 6px;
 	padding: 0 10px;
 	background-color: hsl(240 5% 96%);
 	border-right: 1px solid hsl(240 6% 90%);
@@ -205,11 +199,6 @@
 	border-color: hsl(240 4% 46%);
 }
 
-[data-kb-theme="dark"] .search__control[data-invalid] {
-	border-color: hsl(0 72% 51%);
-	color: hsl(0 72% 51%);
-}
-
 [data-kb-theme="dark"] .search__input::placeholder {
 	color: hsl(0 100% 100% / 0.5);
 }
@@ -245,13 +234,42 @@
 }
 
 .search__root_cmdk {
-	min-height: 250px;
+	min-height: 240px;
 	min-width: 250px;
+	display: flex;
+	flex-direction: column;
+}
+
+.search__control_cmdk {
+	overflow: hidden;
+	display: inline-flex;
+	justify-content: space-between;
+	border-radius: 12px 12px 0 0;
+	font-size: 16px;
+	line-height: 1;
+	outline: none;
+	background-color: white;
+	border: 1px solid hsl(240 6% 90%);
+	color: hsl(240 4% 16%);
+	transition:
+		border-color 250ms,
+		color 250ms;
 }
 
 .search__content_cmdk {
-	height: 200px;
+	height: 100%;
+	flex-grow: 1;
 	background-color: white;
-	border-radius: 6px;
+	border-radius: 0 0 12px 12px;
 	border: 1px solid hsl(240 6% 90%);
+	border-top: none;
+	display: flex;
+	flex-direction: column;
+}
+
+.search__no_result_cmdk {
+	text-align: center;
+	margin: auto;
+	padding-bottom: 24px;
+	color: hsl(240 4% 46%);
 }
diff --git a/apps/docs/src/examples/search.tsx b/apps/docs/src/examples/search.tsx
@@ -328,10 +328,6 @@ const RAW_EMOJI_DATA: EmojiDatum[] = ([] as any)
 					emoji: "🙁",
 					name: "slightly frowning face",
 				},
-				{
-					emoji: "☹",
-					name: "frowning face",
-				},
 				{
 					emoji: "😮",
 					name: "face with open mouth",
@@ -656,12 +652,13 @@ export function DebounceExample() {
 	);
 }
 
-export function CmdkExample() {
+export function CmdkStyleExample() {
 	const [options, setOptions] = createSignal<EmojiDatum[]>([]);
 	const [emoji, setEmoji] = createSignal<EmojiDatum | null>();
 	return (
 		<>
 			<Search
+				open
 				options={options()}
 				onInputChange={(query: string) => {
 					setOptions(queryEmojiData(query));
@@ -671,31 +668,26 @@ export function CmdkExample() {
 				optionLabel="name"
 				placeholder="Search an emoji…"
 				itemComponent={(props: any) => (
-					<Search.Item item={props.item} class={style.search__item}>
+					<Search.Item as="button" item={props.item} class={style.search__item}>
 						<Search.ItemLabel>{props.item.rawValue.emoji}</Search.ItemLabel>
 					</Search.Item>
 				)}
 				class={style.search__root_cmdk}
 			>
-				<div>
-					<Search.Control class={style.search__control} aria-label="Emoji">
-						<Search.Indicator class={style.search__indicator}>
-							<Search.Icon class={style.search__icon}>
-								<MagnifyingGlassIcon class={style.center__icon} />
-							</Search.Icon>
-						</Search.Indicator>
-
-						<Search.Input class={style.search__input} />
-					</Search.Control>
-				</div>
+				<Search.Control class={style.search__control_cmdk} aria-label="Emoji">
+					<Search.Indicator class={style.search__indicator}>
+						<Search.Icon class={style.search__icon}>
+							<MagnifyingGlassIcon class={style.center__icon} />
+						</Search.Icon>
+					</Search.Indicator>
 
-				<div>
-					<Search.Content class={style.search__content_cmdk}>
-						<Search.Listbox class={style.search__listbox} />
-						<Search.NoResult class={style.search__no_result}>
-							😬 No emoji found
-						</Search.NoResult>
-					</Search.Content>
+					<Search.Input class={style.search__input} />
+				</Search.Control>
+				<div class={style.search__content_cmdk}>
+					<Search.Listbox class={style.search__listbox} />
+					<Search.NoResult class={style.search__no_result_cmdk}>
+						😬 No emoji found
+					</Search.NoResult>
 				</div>
 			</Search>
 

diff --git a/apps/docs/src/routes/docs/core/components/search.mdx b/apps/docs/src/routes/docs/core/components/search.mdx
@@ -1,5 +1,5 @@
 import { Preview, TabsSnippets, Kbd, Callout } from "../../../../components";
-import { BasicExample, DebounceExample, CmdkExample } from "../../../../examples/search";
+import { BasicExample, DebounceExample, CmdkStyleExample } from "../../../../examples/search";
 
 # Search
 
@@ -344,7 +344,7 @@ Show a debouncing icon by adding a `loadingComponent` to `Search.Indicator`.
     		optionValue="name"
     		optionLabel="name"
     		placeholder="Search an emoji…"
-    		itemComponent={(props: any) => (
+    			itemComponent={(props: any) => (
     			<Search.Item item={props.item}>
     				<Search.ItemLabel>{props.item.rawValue.emoji}</Search.ItemLabel>
     			</Search.Item>
@@ -375,6 +375,47 @@ Show a debouncing icon by adding a `loadingComponent` to `Search.Indicator`.
     	</Search>
     ```
 
+### Cmdk style
+
+To achieve the command menu look, add the `open` prop to permanently open dropdown. Replace `Search.Portal` and `Search.Content` with a `div` to directly mount your content below the search input.
+
+<Preview>
+	<CmdkStyleExample />
+</Preview>
+
+    	```tsx
+    	<Search
+    		open
+    		options={options()}
+    		onInputChange={query => setOptions(queryEmojiData(query))}
+    		onChange={result => setEmoji(result)}
+    		debounceOptionsMillisecond={300}
+    		optionValue="name"
+    		optionLabel="name"
+    		placeholder="Search an emoji…"
+    		itemComponent={(props: any) => (
+    			<Search.Item item={props.item}>
+    				<Search.ItemLabel>{props.item.rawValue.emoji}</Search.ItemLabel>
+    			</Search.Item>
+    		)}
+    	>
+    		<Search.Control aria-label="Emoji">
+    			<Search.Indicator>
+    				<Search.Icon>
+    					<MagnifyingGlassIcon />
+    				</Search.Icon>
+    			</Search.Indicator>
+    			<Search.Input />
+    		</Search.Control>
+    		<div>
+    				<Search.Listbox />
+    				<Search.NoResult>
+    					😬 No emoji found
+    				</Search.NoResult>
+    		</div>
+    	</Search>
+    ```
+
 ## API Reference
 
 ### Search