Skip to content

Commit 4c52048

Browse files
dkireevdkireev
committed
fix: Search and SearchCmdk long text [MDS-909]
1 parent 2cfcd99 commit 4c52048

File tree

6 files changed

+62
-66
lines changed

6 files changed

+62
-66
lines changed

‎next-docs/public/examples/search/__tests__/__snapshots__/index.test.tsx.snap

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Object {
1616
class="relative w-full h-full bg-goku flex flex-col border border-beerus rounded-moon-s-sm [&_.moon-search-result]:top-10 [&_.moon-search-transition>.moon-search-result]:top-0"
1717
>
1818
<div
19-
class="flex items-center ps-3 gap-2 moon-search-input"
19+
class="flex items-center px-3 gap-2 moon-search-input"
2020
>
2121
<svg
2222
class="w-6 h-6 pointer-events-none text-bulma"
@@ -41,7 +41,7 @@ Object {
4141
value=""
4242
/>
4343
<button
44-
class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
44+
class="cursor-pointer text-trunks text-moon-14 transition transform"
4545
tabindex="-1"
4646
type="button"
4747
>
@@ -66,7 +66,7 @@ Object {
6666
class="relative w-full h-full bg-goku flex flex-col border border-beerus rounded-moon-s-sm [&_.moon-search-result]:top-10 [&_.moon-search-transition>.moon-search-result]:top-0"
6767
>
6868
<div
69-
class="flex items-center ps-3 gap-2 moon-search-input"
69+
class="flex items-center px-3 gap-2 moon-search-input"
7070
>
7171
<svg
7272
class="w-6 h-6 pointer-events-none text-bulma"
@@ -91,7 +91,7 @@ Object {
9191
value=""
9292
/>
9393
<button
94-
class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
94+
class="cursor-pointer text-trunks text-moon-14 transition transform"
9595
tabindex="-1"
9696
type="button"
9797
>
@@ -170,7 +170,7 @@ Object {
170170
class="relative w-full h-full bg-goku flex flex-col border border-beerus rounded-moon-s-sm [&_.moon-search-result]:top-10 [&_.moon-search-transition>.moon-search-result]:top-0"
171171
>
172172
<div
173-
class="flex items-center ps-3 gap-2 moon-search-input"
173+
class="flex items-center px-3 gap-2 moon-search-input"
174174
>
175175
<svg
176176
class="w-6 h-6 pointer-events-none text-bulma"
@@ -195,7 +195,7 @@ Object {
195195
value=""
196196
/>
197197
<button
198-
class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
198+
class="cursor-pointer text-trunks text-moon-14 transition transform"
199199
tabindex="-1"
200200
type="button"
201201
>
@@ -216,7 +216,7 @@ Object {
216216
class="relative w-full h-full bg-goku flex flex-col border border-beerus rounded-moon-s-sm [&_.moon-search-result]:top-10 [&_.moon-search-transition>.moon-search-result]:top-0"
217217
>
218218
<div
219-
class="flex items-center ps-3 gap-2 moon-search-input"
219+
class="flex items-center px-3 gap-2 moon-search-input"
220220
>
221221
<svg
222222
class="w-6 h-6 pointer-events-none text-bulma"
@@ -241,7 +241,7 @@ Object {
241241
value=""
242242
/>
243243
<button
244-
class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
244+
class="cursor-pointer text-trunks text-moon-14 transition transform"
245245
tabindex="-1"
246246
type="button"
247247
>
@@ -319,7 +319,7 @@ Object {
319319
class="relative w-full h-full bg-goku flex flex-col border border-beerus rounded-moon-s-sm [&_.moon-search-result]:top-10 [&_.moon-search-transition>.moon-search-result]:top-0"
320320
>
321321
<div
322-
class="flex items-center ps-3 gap-2 moon-search-input"
322+
class="flex items-center px-3 gap-2 moon-search-input"
323323
>
324324
<svg
325325
class="w-6 h-6 pointer-events-none text-bulma"
@@ -344,7 +344,7 @@ Object {
344344
value=""
345345
/>
346346
<button
347-
class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
347+
class="cursor-pointer text-trunks text-moon-14 transition transform"
348348
tabindex="-1"
349349
type="button"
350350
>
@@ -365,7 +365,7 @@ Object {
365365
class="relative w-full h-full bg-goku flex flex-col border border-beerus rounded-moon-s-sm [&_.moon-search-result]:top-10 [&_.moon-search-transition>.moon-search-result]:top-0"
366366
>
367367
<div
368-
class="flex items-center ps-3 gap-2 moon-search-input"
368+
class="flex items-center px-3 gap-2 moon-search-input"
369369
>
370370
<svg
371371
class="w-6 h-6 pointer-events-none text-bulma"
@@ -390,7 +390,7 @@ Object {
390390
value=""
391391
/>
392392
<button
393-
class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
393+
class="cursor-pointer text-trunks text-moon-14 transition transform"
394394
tabindex="-1"
395395
type="button"
396396
>
@@ -468,7 +468,7 @@ Object {
468468
class="relative w-full h-full bg-goku flex flex-col border border-beerus rounded-moon-s-sm [&_.moon-search-result]:top-10 [&_.moon-search-transition>.moon-search-result]:top-0"
469469
>
470470
<div
471-
class="flex items-center ps-3 gap-2 moon-search-input"
471+
class="flex items-center px-3 gap-2 moon-search-input"
472472
>
473473
<svg
474474
class="w-6 h-6 pointer-events-none text-bulma"
@@ -493,7 +493,7 @@ Object {
493493
value=""
494494
/>
495495
<button
496-
class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
496+
class="cursor-pointer text-trunks text-moon-14 transition transform"
497497
tabindex="-1"
498498
type="button"
499499
>
@@ -514,7 +514,7 @@ Object {
514514
class="relative w-full h-full bg-goku flex flex-col border border-beerus rounded-moon-s-sm [&_.moon-search-result]:top-10 [&_.moon-search-transition>.moon-search-result]:top-0"
515515
>
516516
<div
517-
class="flex items-center ps-3 gap-2 moon-search-input"
517+
class="flex items-center px-3 gap-2 moon-search-input"
518518
>
519519
<svg
520520
class="w-6 h-6 pointer-events-none text-bulma"
@@ -539,7 +539,7 @@ Object {
539539
value=""
540540
/>
541541
<button
542-
class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
542+
class="cursor-pointer text-trunks text-moon-14 transition transform"
543543
tabindex="-1"
544544
type="button"
545545
>

‎next-docs/public/examples/searchCmdk/CommandMenu.tsx

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,46 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, { useEffect, useState } from 'react';
22
import { SearchCmdk } from '@heathmont/moon-cmdk-tw';
33

44
type Item = {
5-
label: string
6-
}
5+
label: string;
6+
};
77

88
const items = [
9-
{ label: "Aurum" },
10-
{ label: "Argentum" },
11-
{ label: "Zink" },
12-
{ label: "Plumbum" }
9+
{ label: 'Aurum' },
10+
{ label: 'Argentum' },
11+
{ label: 'Zink' },
12+
{ label: 'Plumbum' },
1313
];
1414

1515
function CommandMenu() {
1616
const [open, setOpen] = useState(false);
17-
const [search, setSearch] = useState("");
17+
const [search, setSearch] = useState('');
1818

1919
useEffect(() => {
2020
const down = (e: KeyboardEvent) => {
2121
// Toggle the menu when ⌘K is pressed
22-
if (e.key === "k" && e.metaKey) {
22+
if (e.key === 'k' && e.metaKey) {
2323
e.preventDefault();
2424
setOpen((open) => !open);
2525
}
2626
};
2727

28-
document.addEventListener("keydown", down);
29-
return () => document.removeEventListener("keydown", down);
28+
document.addEventListener('keydown', down);
29+
return () => document.removeEventListener('keydown', down);
3030
}, []);
3131

32-
const filterItems = (values: Item[], search: string) => { return values.filter(({ label }) => +label.toLowerCase().includes(search)); }
32+
const filterItems = (values: Item[], search: string) => {
33+
return values.filter(({ label }) => +label.toLowerCase().includes(search));
34+
};
3335
const filteredItems = filterItems(items, search.toLowerCase());
3436

3537
return (
3638
<>
37-
<SearchCmdk.Trigger onClick={() => { setOpen(true) }}>
39+
<SearchCmdk.Trigger
40+
onClick={() => {
41+
setOpen(true);
42+
}}
43+
>
3844
<SearchCmdk.TriggerIcon />
3945
<span className="text-moon-16">Search...</span>
4046
<SearchCmdk.TriggerKbd>⌘K</SearchCmdk.TriggerKbd>
@@ -56,26 +62,22 @@ function CommandMenu() {
5662
onValueChange={setSearch}
5763
placeholder="Search for a component"
5864
/>
59-
<SearchCmdk.Kbd onClick={() => setOpen(false)}>
60-
Esc
61-
</SearchCmdk.Kbd>
65+
<SearchCmdk.Kbd onClick={() => setOpen(false)}>Esc</SearchCmdk.Kbd>
6266
</SearchCmdk.InputWrapper>
6367
<SearchCmdk.Separator />
6468
<SearchCmdk.Result>
65-
<SearchCmdk.NoResults>
66-
No Results
67-
</SearchCmdk.NoResults>
68-
{filteredItems.map(({ label }) =>
69-
<SearchCmdk.ResultItem
70-
key={label}
71-
value={label}
72-
onSelect={() => {
73-
setOpen(false);
74-
}}
75-
>
76-
{label}
77-
</SearchCmdk.ResultItem>
78-
)}
69+
<SearchCmdk.NoResults>No Results</SearchCmdk.NoResults>
70+
{filteredItems.map(({ label }) => (
71+
<SearchCmdk.ResultItem
72+
key={label}
73+
value={label}
74+
onSelect={() => {
75+
setOpen(false);
76+
}}
77+
>
78+
{label}
79+
</SearchCmdk.ResultItem>
80+
))}
7981
</SearchCmdk.Result>
8082
</SearchCmdk>
8183
</>

‎next-docs/public/examples/searchCmdk/__tests__/__snapshots__/index.test.tsx.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ Object {
8686
Command Menu
8787
</label>
8888
<div
89-
class="relative flex items-center gap-2 ps-3 py-4"
89+
class="flex items-center gap-2 px-3 py-4"
9090
>
9191
<svg
9292
class="w-6 h-6 pointer-events-none text-bulma"
@@ -109,7 +109,7 @@ Object {
109109
aria-labelledby=":re:"
110110
autocomplete="off"
111111
autocorrect="off"
112-
class="py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent placeholder-bulma text-bulma"
112+
class="py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent placeholder-trunks text-bulma"
113113
cmdk-input=""
114114
id=":rf:"
115115
placeholder="Search for a component"
@@ -119,7 +119,7 @@ Object {
119119
value=""
120120
/>
121121
<kbd
122-
class="select-none hover:cursor-pointer text-trunks text-moon-10 transition absolute end-4 top-1/2 transform -translate-y-1/2 border border-trunks rounded-md p-1"
122+
class="select-none hover:cursor-pointer text-trunks text-moon-10 transition transform border border-trunks rounded-md p-1"
123123
>
124124
Esc
125125
</kbd>
@@ -364,7 +364,7 @@ Object {
364364
Command Menu
365365
</label>
366366
<div
367-
class="relative flex items-center gap-2 ps-3 py-4"
367+
class="flex items-center gap-2 px-3 py-4"
368368
>
369369
<svg
370370
class="w-6 h-6 pointer-events-none text-bulma"
@@ -387,7 +387,7 @@ Object {
387387
aria-labelledby=":r4:"
388388
autocomplete="off"
389389
autocorrect="off"
390-
class="py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent placeholder-bulma text-bulma"
390+
class="py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent placeholder-trunks text-bulma"
391391
cmdk-input=""
392392
id=":r5:"
393393
placeholder="Search for a component"
@@ -397,7 +397,7 @@ Object {
397397
value=""
398398
/>
399399
<kbd
400-
class="select-none hover:cursor-pointer text-trunks text-moon-10 transition absolute end-4 top-1/2 transform -translate-y-1/2 border border-trunks rounded-md p-1"
400+
class="select-none hover:cursor-pointer text-trunks text-moon-10 transition transform border border-trunks rounded-md p-1"
401401
>
402402
Esc
403403
</kbd>

‎workspaces/cmdk/src/searchCmdk/SearchCmdk.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,7 @@ const InputWrapper = ({
3232
...props
3333
}: React.HTMLAttributes<HTMLDivElement>) => (
3434
<div
35-
className={mergeClassnames(
36-
'relative flex items-center gap-2 ps-3 py-4',
37-
className
38-
)}
35+
className={mergeClassnames('flex items-center gap-2 px-3 py-4', className)}
3936
{...props}
4037
>
4138
{children}
@@ -51,7 +48,7 @@ const Input = ({
5148
placeholder={placeholder}
5249
className={mergeClassnames(
5350
'py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent',
54-
'placeholder-bulma text-bulma',
51+
'placeholder-trunks text-bulma',
5552
className
5653
)}
5754
{...props}
@@ -78,8 +75,8 @@ const Kbd = ({
7875
}: React.HTMLAttributes<HTMLDivElement>) => (
7976
<kbd
8077
className={mergeClassnames(
81-
'select-none hover:cursor-pointer text-trunks text-moon-10 transition absolute end-4',
82-
'top-1/2 transform -translate-y-1/2 border border-trunks rounded-md p-1',
78+
'select-none hover:cursor-pointer text-trunks text-moon-10 transition transform border',
79+
'border-trunks rounded-md p-1',
8380
className
8481
)}
8582
{...props}

‎workspaces/core/src/search/private/components/Input.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Wrapper = ({
1010
}: React.HTMLAttributes<HTMLDivElement>) => (
1111
<div
1212
className={mergeClassnames(
13-
'flex items-center ps-3 gap-2 moon-search-input',
13+
'flex items-center px-3 gap-2 moon-search-input',
1414
className
1515
)}
1616
{...props}
@@ -96,8 +96,7 @@ export const ButtonClear = ({
9696
tabIndex={-1}
9797
type="button"
9898
className={mergeClassnames(
99-
'cursor-pointer text-trunks text-moon-14 transition absolute end-4',
100-
'top-1/2 transform -translate-y-1/2',
99+
'cursor-pointer text-trunks text-moon-14 transition transform',
101100
className
102101
)}
103102
onClick={(e) => {

‎workspaces/core/src/search/private/components/NoResults.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,9 @@ const NoResults = ({
1212
const { search } = useContext(SearchContext);
1313
return (
1414
<ListItem index={0} showType={false} {...props}>
15-
<span
16-
className={mergeClassnames('max-w-md truncate text-bulma', className)}
17-
>
15+
<p className={mergeClassnames('truncate text-bulma', className)}>
1816
{label} <span className="font-medium">"{search}"</span>
19-
</span>
17+
</p>
2018
</ListItem>
2119
);
2220
};

0 commit comments

Comments
 (0)