fix: Search and SearchCmdk long text [MDS-909] (#2523)

coingaming · Dec 19, 2023 · d3ccdc4 · d3ccdc4
1 parent 2cfcd99
commit d3ccdc4
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 66 deletions.
diff --git a/next-docs/public/examples/search/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/search/__tests__/__snapshots__/index.test.tsx.snap
@@ -16,7 +16,7 @@ Object {
               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"
             >
               <div
-                class="flex items-center ps-3 gap-2 moon-search-input"
+                class="flex items-center px-3 gap-2 moon-search-input"
               >
                 <svg
                   class="w-6 h-6 pointer-events-none text-bulma"
@@ -41,7 +41,7 @@ Object {
                   value=""
                 />
                 <button
-                  class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
+                  class="cursor-pointer text-trunks text-moon-14 transition transform"
                   tabindex="-1"
                   type="button"
                 >
@@ -66,7 +66,7 @@ Object {
             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"
           >
             <div
-              class="flex items-center ps-3 gap-2 moon-search-input"
+              class="flex items-center px-3 gap-2 moon-search-input"
             >
               <svg
                 class="w-6 h-6 pointer-events-none text-bulma"
@@ -91,7 +91,7 @@ Object {
                 value=""
               />
               <button
-                class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
+                class="cursor-pointer text-trunks text-moon-14 transition transform"
                 tabindex="-1"
                 type="button"
               >
@@ -170,7 +170,7 @@ Object {
             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"
           >
             <div
-              class="flex items-center ps-3 gap-2 moon-search-input"
+              class="flex items-center px-3 gap-2 moon-search-input"
             >
               <svg
                 class="w-6 h-6 pointer-events-none text-bulma"
@@ -195,7 +195,7 @@ Object {
                 value=""
               />
               <button
-                class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
+                class="cursor-pointer text-trunks text-moon-14 transition transform"
                 tabindex="-1"
                 type="button"
               >
@@ -216,7 +216,7 @@ Object {
           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"
         >
           <div
-            class="flex items-center ps-3 gap-2 moon-search-input"
+            class="flex items-center px-3 gap-2 moon-search-input"
           >
             <svg
               class="w-6 h-6 pointer-events-none text-bulma"
@@ -241,7 +241,7 @@ Object {
               value=""
             />
             <button
-              class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
+              class="cursor-pointer text-trunks text-moon-14 transition transform"
               tabindex="-1"
               type="button"
             >
@@ -319,7 +319,7 @@ Object {
             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"
           >
             <div
-              class="flex items-center ps-3 gap-2 moon-search-input"
+              class="flex items-center px-3 gap-2 moon-search-input"
             >
               <svg
                 class="w-6 h-6 pointer-events-none text-bulma"
@@ -344,7 +344,7 @@ Object {
                 value=""
               />
               <button
-                class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
+                class="cursor-pointer text-trunks text-moon-14 transition transform"
                 tabindex="-1"
                 type="button"
               >
@@ -365,7 +365,7 @@ Object {
           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"
         >
           <div
-            class="flex items-center ps-3 gap-2 moon-search-input"
+            class="flex items-center px-3 gap-2 moon-search-input"
           >
             <svg
               class="w-6 h-6 pointer-events-none text-bulma"
@@ -390,7 +390,7 @@ Object {
               value=""
             />
             <button
-              class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
+              class="cursor-pointer text-trunks text-moon-14 transition transform"
               tabindex="-1"
               type="button"
             >
@@ -468,7 +468,7 @@ Object {
             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"
           >
             <div
-              class="flex items-center ps-3 gap-2 moon-search-input"
+              class="flex items-center px-3 gap-2 moon-search-input"
             >
               <svg
                 class="w-6 h-6 pointer-events-none text-bulma"
@@ -493,7 +493,7 @@ Object {
                 value=""
               />
               <button
-                class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
+                class="cursor-pointer text-trunks text-moon-14 transition transform"
                 tabindex="-1"
                 type="button"
               >
@@ -514,7 +514,7 @@ Object {
           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"
         >
           <div
-            class="flex items-center ps-3 gap-2 moon-search-input"
+            class="flex items-center px-3 gap-2 moon-search-input"
           >
             <svg
               class="w-6 h-6 pointer-events-none text-bulma"
@@ -539,7 +539,7 @@ Object {
               value=""
             />
             <button
-              class="cursor-pointer text-trunks text-moon-14 transition absolute end-4 top-1/2 transform -translate-y-1/2"
+              class="cursor-pointer text-trunks text-moon-14 transition transform"
               tabindex="-1"
               type="button"
             >

diff --git a/next-docs/public/examples/searchCmdk/CommandMenu.tsx b/next-docs/public/examples/searchCmdk/CommandMenu.tsx
@@ -1,40 +1,46 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 import { SearchCmdk } from '@heathmont/moon-cmdk-tw';
 
 type Item = {
-  label: string
-}
+  label: string;
+};
 
 const items = [
-  { label: "Aurum" },
-  { label: "Argentum" },
-  { label: "Zink" },
-  { label: "Plumbum" }
+  { label: 'Aurum' },
+  { label: 'Argentum' },
+  { label: 'Zink' },
+  { label: 'Plumbum' },
 ];
 
 function CommandMenu() {
   const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
 
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       // Toggle the menu when ⌘K is pressed
-      if (e.key === "k" && e.metaKey) {
+      if (e.key === 'k' && e.metaKey) {
         e.preventDefault();
         setOpen((open) => !open);
       }
     };
 
-    document.addEventListener("keydown", down);
-    return () => document.removeEventListener("keydown", down);
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
   }, []);
 
-  const filterItems = (values: Item[], search: string) => { return values.filter(({ label }) => +label.toLowerCase().includes(search)); }
+  const filterItems = (values: Item[], search: string) => {
+    return values.filter(({ label }) => +label.toLowerCase().includes(search));
+  };
   const filteredItems = filterItems(items, search.toLowerCase());
 
   return (
     <>
-      <SearchCmdk.Trigger onClick={() => { setOpen(true) }}>
+      <SearchCmdk.Trigger
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
         <SearchCmdk.TriggerIcon />
         <span className="text-moon-16">Search...</span>
         <SearchCmdk.TriggerKbd>⌘K</SearchCmdk.TriggerKbd>
@@ -56,26 +62,22 @@ function CommandMenu() {
             onValueChange={setSearch}
             placeholder="Search for a component"
           />
-          <SearchCmdk.Kbd onClick={() => setOpen(false)}>
-            Esc
-          </SearchCmdk.Kbd>
+          <SearchCmdk.Kbd onClick={() => setOpen(false)}>Esc</SearchCmdk.Kbd>
         </SearchCmdk.InputWrapper>
         <SearchCmdk.Separator />
         <SearchCmdk.Result>
-          <SearchCmdk.NoResults>
-            No Results
-          </SearchCmdk.NoResults>
-            {filteredItems.map(({ label }) =>
-              <SearchCmdk.ResultItem
-                key={label}
-                value={label}
-                onSelect={() => {
-                  setOpen(false);
-                }}
-              >
-                {label}
-              </SearchCmdk.ResultItem>
-            )}
+          <SearchCmdk.NoResults>No Results</SearchCmdk.NoResults>
+          {filteredItems.map(({ label }) => (
+            <SearchCmdk.ResultItem
+              key={label}
+              value={label}
+              onSelect={() => {
+                setOpen(false);
+              }}
+            >
+              {label}
+            </SearchCmdk.ResultItem>
+          ))}
         </SearchCmdk.Result>
       </SearchCmdk>
     </>

diff --git a/next-docs/public/examples/searchCmdk/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/searchCmdk/__tests__/__snapshots__/index.test.tsx.snap
@@ -86,7 +86,7 @@ Object {
           Command Menu
         </label>
         <div
-          class="relative flex items-center gap-2 ps-3 py-4"
+          class="flex items-center gap-2 px-3 py-4"
         >
           <svg
             class="w-6 h-6 pointer-events-none text-bulma"
@@ -109,7 +109,7 @@ Object {
             aria-labelledby=":re:"
             autocomplete="off"
             autocorrect="off"
-            class="py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent placeholder-bulma text-bulma"
+            class="py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent placeholder-trunks text-bulma"
             cmdk-input=""
             id=":rf:"
             placeholder="Search for a component"
@@ -119,7 +119,7 @@ Object {
             value=""
           />
           <kbd
-            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"
+            class="select-none hover:cursor-pointer text-trunks text-moon-10 transition transform border border-trunks rounded-md p-1"
           >
             Esc
           </kbd>
@@ -364,7 +364,7 @@ Object {
           Command Menu
         </label>
         <div
-          class="relative flex items-center gap-2 ps-3 py-4"
+          class="flex items-center gap-2 px-3 py-4"
         >
           <svg
             class="w-6 h-6 pointer-events-none text-bulma"
@@ -387,7 +387,7 @@ Object {
             aria-labelledby=":r4:"
             autocomplete="off"
             autocorrect="off"
-            class="py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent placeholder-bulma text-bulma"
+            class="py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent placeholder-trunks text-bulma"
             cmdk-input=""
             id=":r5:"
             placeholder="Search for a component"
@@ -397,7 +397,7 @@ Object {
             value=""
           />
           <kbd
-            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"
+            class="select-none hover:cursor-pointer text-trunks text-moon-10 transition transform border border-trunks rounded-md p-1"
           >
             Esc
           </kbd>

diff --git a/workspaces/cmdk/src/searchCmdk/SearchCmdk.tsx b/workspaces/cmdk/src/searchCmdk/SearchCmdk.tsx
@@ -32,10 +32,7 @@ const InputWrapper = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={mergeClassnames(
-      'relative flex items-center gap-2 ps-3 py-4',
-      className
-    )}
+    className={mergeClassnames('flex items-center gap-2 px-3 py-4', className)}
     {...props}
   >
     {children}
@@ -51,7 +48,7 @@ const Input = ({
     placeholder={placeholder}
     className={mergeClassnames(
       'py-2 px-0 border-0 w-full focus:outline-none focus:border-0 focus:ring-0 bg-transparent',
-      'placeholder-bulma text-bulma',
+      'placeholder-trunks text-bulma',
       className
     )}
     {...props}
@@ -78,8 +75,8 @@ const Kbd = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <kbd
     className={mergeClassnames(
-      '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',
+      'select-none hover:cursor-pointer text-trunks text-moon-10 transition transform border',
+      'border-trunks rounded-md p-1',
       className
     )}
     {...props}

diff --git a/workspaces/core/src/search/private/components/Input.tsx b/workspaces/core/src/search/private/components/Input.tsx
@@ -10,7 +10,7 @@ const Wrapper = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={mergeClassnames(
-      'flex items-center ps-3 gap-2 moon-search-input',
+      'flex items-center px-3 gap-2 moon-search-input',
       className
     )}
     {...props}
@@ -96,8 +96,7 @@ export const ButtonClear = ({
       tabIndex={-1}
       type="button"
       className={mergeClassnames(
-        'cursor-pointer text-trunks text-moon-14 transition absolute end-4',
-        'top-1/2 transform -translate-y-1/2',
+        'cursor-pointer text-trunks text-moon-14 transition transform',
         className
       )}
       onClick={(e) => {

diff --git a/workspaces/core/src/search/private/components/NoResults.tsx b/workspaces/core/src/search/private/components/NoResults.tsx
@@ -12,11 +12,9 @@ const NoResults = ({
   const { search } = useContext(SearchContext);
   return (
     <ListItem index={0} showType={false} {...props}>
-      <span
-        className={mergeClassnames('max-w-md truncate text-bulma', className)}
-      >
+      <p className={mergeClassnames('truncate text-bulma', className)}>
         {label} <span className="font-medium">"{search}"</span>
-      </span>
+      </p>
     </ListItem>
   );
 };