feat: add keypress effect to DocSearchButton

algolia · Oct 1, 2023 · 14568c6 · 14568c6
1 parent d00f5c4
commit 14568c6
Show file tree

Hide file tree

Showing 3 changed files with 69 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,72 @@ 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>
+  );
+}