docs(keyboard-key): add documentation (#4164)

* feat(keyboard-key): component init * chore(tools): plopfile syntax fix * chore(tools): plopfile syntax fix * chore(tools): plopfile syntax fix * feat(keyboard-key): styled w/ hook unit tests * feat(keyboard-key): added variants and styles * chore(plop): update tsx dependency * chore(keyboard-key): internal exports in core * chore(keyboard-key): typedocs & build * chore(docs): use KeyboardKey in nav * docs(keyboard-key): init content * feat(keyboard-key): change to infline-flex style * docs(keybaord-key): added examples * chore(keyboard-key): added stroy * chore(keyboard-key): linting * fix(keyboard-key): command logic * feat(design-tokens): added new box shadows to support keyboard-keys * chore(ci-cd): added chagesets * fix(keyboard-key): boxShadow stylings * fix(keyboard-key): remove null component wrapper * fix(keyboard-key): aria-hidden * chore(keyboard-key): refactor * chore(keyboard-key): code cleanup * chore(keyboard-key): code cleanup * chore(keyboard-key): typedocs * chore(keyboard-key): fix tests * fix(keyboard-key): aria and diableBrowserShortcuts * fix(keyboard-key): props fix * chore(keyboard-key): playgorund storybook * chore(keyboard-key): formatting fix * chore(keyboard-key): stories update * chore(keyboard-key): formatting fix * chore(keyboard-key): typo * Update .changeset/sweet-mugs-admire.md Co-authored-by: Nora Krantz <[email protected]> * Update .changeset/shaggy-sheep-confess.md Co-authored-by: Nora Krantz <[email protected]> * chore(keyboard-key): address PR comments * feat(keyboard-tooltip): wip * chore(tooltip): update types * chore(tooltip): update types * chore(tooltip): better var naming * chore(tooltip): fail safe check * chore(tooltip): linting * chore(tooltip): linting * chore(tooltip): yarn lock * chore(tooltip): changeset * chore(tooltip): fix spelling * chore(tooltip): uppdate type name * docs(keyboard-key): wip * feat(tooltip): add anonymous keybaord action to tooltip * fix(keyboard-key): ignore case sensitivty to overcome shift combo bug * fix(keyboard-key): ignore case sensitivty to overcome shift combo bug * Update packages/paste-core/components/tooltip/src/Tooltip.tsx Co-authored-by: Sarah <[email protected]> * fix(tooltip): update keyboardkey styles * chore(tooltip): formatting * docs(keyboard-key): hook examples * docs(keyboard-key): fix composition notes * docs(keyboard-key): fix docs search * docs(keyboard-key): change example trigger * docs(keyboard-key): fix build issue * docs(keyboard-key): yanlock * docs(keyboard-key): import fix * docs(keyboard-key): lint and format * docs(keyboard-key): changeset * Apply suggestions from code review Co-authored-by: Nora Krantz <[email protected]> * docs(keyboard-key): address PR comments * Apply suggestions from code review Co-authored-by: Nora Krantz <[email protected]> * docs(keyboard-key): address PR comments * docs(keyboard-key): remopve unused import * docs(keyboard-key): address PR comments * docs(keyboard-key): address PR comments * docs(keyboard-key): address PR comments * docs(keyboard-key): pressed stlying example --------- Co-authored-by: Nora Krantz <[email protected]> Co-authored-by: Sarah <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
twilio-labs · Nov 27, 2024 · 42a4dcb · 42a4dcb
1 parent 7f39856
commit 42a4dcb
Show file tree

Hide file tree

Showing 12 changed files with 728 additions and 33 deletions.
diff --git a/.changeset/slow-jokes-matter.md b/.changeset/slow-jokes-matter.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/keyboard-key": patch
+"@twilio-paste/core": patch
+---
+
+[KeyboardKey] fixed issue with shift key being captured as capitals on subsequesnt key presses
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
@@ -132,6 +132,9 @@ export const SITEMAP = [
   "/components/input/",
   "/components/input/api",
   "/components/input/changelog",
+  "components/keyboard-key",
+  "components/keyboard-key/api",
+  "components/keyboard-key/changelog",
   "/components/label/",
   "/components/label/api",
   "/components/label/changelog",

diff --git a/packages/paste-core/components/keyboard-key/__tests__/hooks.spec.tsx b/packages/paste-core/components/keyboard-key/__tests__/hooks.spec.tsx
@@ -40,7 +40,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
@@ -49,11 +49,11 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control", "d", "v"]);
+        expect(result.current?.activeKeys).toEqual(["control", "d", "v"]);
       });
 
       await act(async () => {
-        fireEvent.keyUp(window, { key: "Control" });
+        fireEvent.keyUp(window, { key: "control" });
         fireEvent.keyUp(window, { key: "d" });
       });
 
@@ -73,15 +73,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "b" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
         expect(onCombinationPress).toHaveBeenCalled();
       });
     });
@@ -97,15 +97,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "d" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control", "d"]);
+        expect(result.current?.activeKeys).toEqual(["control", "d"]);
         expect(onCombinationPress).not.toHaveBeenCalled();
       });
     });
@@ -121,7 +121,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
@@ -130,7 +130,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "v", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "v", "b"]));
         expect(onCombinationPress).not.toHaveBeenCalled();
       });
     });
@@ -148,15 +148,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "b" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
         expect(onCombinationPress).not.toHaveBeenCalled();
       });
     });
@@ -180,7 +180,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
@@ -189,7 +189,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control", "d", "v"]);
+        expect(result.current?.activeKeys).toEqual(["control", "d", "v"]);
       });
 
       await act(async () => {
@@ -222,15 +222,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "b" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
         expect(onCombinationPress1).toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });
@@ -241,7 +241,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b", "c"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b", "c"]));
         expect(onCombinationPress1).not.toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });
@@ -251,7 +251,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "c"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "c"]));
         expect(onCombinationPress1).not.toHaveBeenCalled();
         expect(onCombinationPress2).toHaveBeenCalled();
       });
@@ -277,15 +277,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "b" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
         expect(onCombinationPress1).toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });
@@ -296,7 +296,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b", "c"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b", "c"]));
         expect(onCombinationPress1).not.toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });
@@ -306,7 +306,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "c"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "c"]));
         expect(onCombinationPress1).not.toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });

diff --git a/packages/paste-core/components/keyboard-key/package.json b/packages/paste-core/components/keyboard-key/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "category": "typography",
   "status": "production",
-  "description": "A keyboard key distinguishes a keyboard command or shortcut from other text.",
+  "description": "A Keyboard Key distinguishes a keyboard command or shortcut from other text.",
   "author": "Twilio Inc.",
   "license": "MIT",
   "main:dev": "src/index.tsx",

diff --git a/packages/paste-core/components/keyboard-key/src/hooks.ts b/packages/paste-core/components/keyboard-key/src/hooks.ts
@@ -27,7 +27,7 @@ const useKeyEvents = (): { activeKeys: string[] } => {
   const handleKeyDown = (e: KeyboardEvent): void => {
     if (!e.repeat) {
       setActiveKeys((prev) => {
-        return Array.from(new Set([...prev, e.key]));
+        return Array.from(new Set([...prev, e.key.toLowerCase()]));
       });
     }
   };
@@ -41,7 +41,7 @@ const useKeyEvents = (): { activeKeys: string[] } => {
     if (e.key === "Meta") {
       setActiveKeys([]);
     } else {
-      setActiveKeys((prev) => [...prev].filter((k) => k !== e.key));
+      setActiveKeys((prev) => [...prev].filter((k) => k.toLowerCase() !== e.key.toLowerCase()));
     }
   };
 
@@ -59,7 +59,8 @@ const useKeyEvents = (): { activeKeys: string[] } => {
 };
 
 const stringArrayMatches = (arr1: string[], arr2: string[]): boolean =>
-  JSON.stringify(arr1.sort((a, b) => a.localeCompare(b))) === JSON.stringify(arr2.sort((a, b) => a.localeCompare(b)));
+  JSON.stringify(arr1.sort((a, b) => a.localeCompare(b)).map((s) => s.toLowerCase())) ===
+  JSON.stringify(arr2.sort((a, b) => a.localeCompare(b)));
 
 export const useKeyCombination = ({
   keys,

diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json
@@ -84,6 +84,7 @@
     "@twilio-paste/inline-control-group": "^13.0.2",
     "@twilio-paste/input": "^9.1.3",
     "@twilio-paste/input-box": "^10.1.1",
+    "@twilio-paste/keyboard-key": "^0.0.0",
     "@twilio-paste/label": "^13.1.1",
     "@twilio-paste/lexical-library": "^4.2.0",
     "@twilio-paste/list": "^8.2.1",