feat: add keypress effect to DocSearchButton

algolia · Oct 1, 2023 · 41dca37 · 41dca37
1 parent d00f5c4
commit 41dca37
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/packages/docsearch-css/src/_variables.css b/packages/docsearch-css/src/_variables.css
@@ -38,7 +38,7 @@
   );
   --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
     inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
-
+  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,0.4);
   /* footer */
   --docsearch-footer-height: 44px;
   --docsearch-footer-background: #fff;
@@ -66,6 +66,7 @@ html[data-theme='dark'] {
   );
   --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85),
     inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 1px 1px 0 #0304094d;
   --docsearch-footer-background: rgb(30, 33, 54);
   --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
     0 -4px 8px 0 rgba(0, 0, 0, 0.2);

diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
@@ -63,6 +63,11 @@
   width: 20px;
 }
 
+.DocSearch-Button-Key--pressed {
+  transform: translate3d(0, 1px, 0);
+  box-shadow: var(--docsearch-key-pressed-shadow);
+}
+
 @media (max-width: 768px) {
   .DocSearch-Button-Keys,
   .DocSearch-Button-Placeholder {

diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -51,13 +51,55 @@ export const DocSearchButton = React.forwardRef<
       <span className="DocSearch-Button-Keys">
         {key !== null && (
           <>
-            <kbd className="DocSearch-Button-Key">
+            <DocSearchButtonKey reactsToKey={key === ACTION_KEY_DEFAULT ? ACTION_KEY_DEFAULT : 'Meta'}>
               {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
-            </kbd>
-            <kbd className="DocSearch-Button-Key">K</kbd>
+            </DocSearchButtonKey>
+            <DocSearchButtonKey reactsToKey='k'>K</DocSearchButtonKey>
           </>
         )}
       </span>
     </button>
   );
 });
+
+type DocSearchButtonKeyProps = {
+  reactsToKey?: string;
+}
+
+function DocSearchButtonKey({ reactsToKey, children}: React.PropsWithChildren<DocSearchButtonKeyProps>) {
+  const [isKeyDown, setIsKeyDown] = useState(false)
+
+  useEffect(() => {
+    if (!reactsToKey) {
+      return undefined;
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === reactsToKey) {
+        setIsKeyDown(true)
+      }
+    }
+
+    function handleKeyUp(e: KeyboardEvent) {
+      if (e.key === reactsToKey ||
+          // keyup doesn't fire when Command is held down,
+          // workaround is to mark key as also released when Command is released
+          // See https://stackoverflow.com/a/73419500
+          e.key === 'Meta') {
+        setIsKeyDown(false)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
+    }
+  }, [reactsToKey])
+
+  return (
+    <kbd className={isKeyDown ? "DocSearch-Button-Key DocSearch-Button-Key--pressed" : "DocSearch-Button-Key"}>{children}</kbd>
+  )
+}