style: hotkey label

adarshpastakia · Aug 24, 2024 · 0f8cb0f · 0f8cb0f
1 parent acece38
commit 0f8cb0f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 23 deletions.
diff --git a/packages/core/src/hotkeys/HotKeyLabel.tsx b/packages/core/src/hotkeys/HotKeyLabel.tsx
@@ -32,26 +32,9 @@ export const HotKeyLabel = ({
       const item = reduceHotKey({ keyCombo });
 
       const label = [];
-      const controls = [];
-      if (item.alt)
-        controls.push(
-          <span key="alt" className="text-[0.875rem]">
-            ⌥
-          </span>,
-        );
-      if (item.ctrl)
-        controls.push(
-          <span key="ctrl" className="text-[0.875rem]">
-            ⌃
-          </span>,
-        );
-      if (item.meta)
-        controls.push(
-          <span key="meta" className="text-[0.875rem]">
-            ⌘
-          </span>,
-        );
-
+      if (item.alt) label.push("ALT");
+      if (item.ctrl) label.push("CTRL");
+      if (item.meta) label.push("META");
       if (item.shift) label.push("SHFT");
       if (item.key.toLowerCase() === "tab") label.push("TAB");
       else if (item.key.toLowerCase() === "space") label.push("SPC");
@@ -64,14 +47,14 @@ export const HotKeyLabel = ({
       else if (item.key.toLowerCase() === "escape") label.push("ESC");
       else if (item.key.toLowerCase() === "backspace") label.push("BKSPC");
       else label.push(item.key.toUpperCase());
-      return [...controls, <span key="label">{label.join(" ")}</span>];
+      return [<span key="label">{label.join(" ")}</span>];
     },
     [keyCombo],
     "HotKey label",
   );
 
   return (
-    <kbd className="hotkey-label inline-flex gap-1 items-center text-[0.625rem] leading-4 bg-tint-900/10 text-base/50 whitespace-nowrap rounded px-2 mx-1">
+    <kbd className="hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/10 text-base/50 whitespace-nowrap rounded px-2 mx-1">
       {label}
     </kbd>
   );

diff --git a/packages/form/stories/inputs/Search.stories.tsx b/packages/form/stories/inputs/Search.stories.tsx
@@ -24,6 +24,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { Search } from "../../src";
+import { HotKeyLabel } from "@react-fabric/core";
 
 const meta: Meta = {
   component: Search,
@@ -46,7 +47,9 @@ type SearchStory = StoryObj<typeof Search>;
 
 export const _Search: SearchStory = {
   render: (args) => {
-    return <Search {...args} />;
+    return (
+      <Search {...args} decorateEnd={<HotKeyLabel keyCombo="shift+/" />} />
+    );
   },
   args: {
     label: "Search input",