refactor(button): replace SVG icons with text characters for keyboard shortcuts (#2823)

Author: dylantientcheu

packages/docsearch-css/src/button.css

@@ -59,6 +59,7 @@
   position: relative;
   border: 0;
   font-size: 14px;
+  font-family: system-ui, -apple-system, sans-serif;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 100ms;

packages/docsearch-css/src/sidepanel.css

@@ -193,6 +193,14 @@ html[data-theme='dark'] {
   opacity: 1;
 }
 
+/* Ensure open state always overrides side-specific transforms even if CSS gets reordered during bundling/minification. */
+.DocSearch-Sidepanel-Container.floating.side-right.is-open,
+.DocSearch-Sidepanel-Container.floating.side-left.is-open,
+.DocSearch-Sidepanel-Container.inline.side-right.is-open,
+.DocSearch-Sidepanel-Container.inline.side-left.is-open {
+  transform: none;
+}
+
 .DocSearch-Sidepanel-Container.side-right.is-open {
   transform: none;
 }

packages/docsearch-react/src/DocSearchButton.tsx

@@ -3,7 +3,6 @@ import { useTheme } from '@docsearch/core/useTheme';
 import React, { useEffect, useState, type JSX } from 'react';
 
 import { getKeyboardShortcuts } from './constants/keyboardShortcuts';
-import { ControlKeyIcon, KKeyIcon, MetaKeyIcon } from './icons/MetaKeysIcon';
 import { SearchIcon } from './icons/SearchIcon';
 import type { DocSearchTheme } from './types';
 import { ACTION_KEY_APPLE, ACTION_KEY_DEFAULT, isAppleDevice } from './utils';
@@ -32,12 +31,10 @@ export const DocSearchButton = React.forwardRef<HTMLButtonElement, DocSearchButt
       }
     }, []);
 
-    const [actionKeyReactsTo, actionKeyAltText, actionKeyChild] =
+    const [actionKeyReactsTo, actionKeyAltText, actionKeyLabel] =
       key === ACTION_KEY_DEFAULT
-        ? // eslint-disable-next-line react/jsx-key -- false flag
-          ([ACTION_KEY_DEFAULT, 'Control', <ControlKeyIcon />] as const)
-        : // eslint-disable-next-line react/jsx-key -- false flag
-          (['Meta', 'Meta', <MetaKeyIcon />] as const);
+        ? ([ACTION_KEY_DEFAULT, 'Control', 'Ctrl'] as const)
+        : (['Meta', 'Meta', '⌘'] as const);
 
     const isCtrlCmdKEnabled = resolvedShortcuts['Ctrl/Cmd+K'];
     const shortcut = `${actionKeyAltText}+k`;
@@ -59,10 +56,8 @@ export const DocSearchButton = React.forwardRef<HTMLButtonElement, DocSearchButt
         <span className="DocSearch-Button-Keys">
           {key !== null && isCtrlCmdKEnabled && (
             <>
-              <DocSearchButtonKey reactsToKey={actionKeyReactsTo}>{actionKeyChild}</DocSearchButtonKey>
-              <DocSearchButtonKey reactsToKey="k">
-                <KKeyIcon />
-              </DocSearchButtonKey>
+              <DocSearchButtonKey reactsToKey={actionKeyReactsTo}>{actionKeyLabel}</DocSearchButtonKey>
+              <DocSearchButtonKey reactsToKey="k">K</DocSearchButtonKey>
             </>
           )}
         </span>