Skip to content

Commit 42a4dcb

Browse files
krisantrobusnkrantzserifluouskodiakhq[bot]
authored
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>
1 parent 7f39856 commit 42a4dcb

File tree

12 files changed

+728
-33
lines changed

12 files changed

+728
-33
lines changed

‎.changeset/slow-jokes-matter.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/keyboard-key": patch
3+
"@twilio-paste/core": patch
4+
---
5+
6+
[KeyboardKey] fixed issue with shift key being captured as capitals on subsequesnt key presses

‎cypress/integration/sitemap-vrt/constants.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,9 @@ export const SITEMAP = [
132132
"/components/input/",
133133
"/components/input/api",
134134
"/components/input/changelog",
135+
"components/keyboard-key",
136+
"components/keyboard-key/api",
137+
"components/keyboard-key/changelog",
135138
"/components/label/",
136139
"/components/label/api",
137140
"/components/label/changelog",

‎packages/paste-core/components/keyboard-key/__tests__/hooks.spec.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ describe("Hooks", () => {
4040
});
4141

4242
await waitFor(() => {
43-
expect(result.current?.activeKeys).toEqual(["Control"]);
43+
expect(result.current?.activeKeys).toEqual(["control"]);
4444
});
4545

4646
await act(async () => {
@@ -49,11 +49,11 @@ describe("Hooks", () => {
4949
});
5050

5151
await waitFor(() => {
52-
expect(result.current?.activeKeys).toEqual(["Control", "d", "v"]);
52+
expect(result.current?.activeKeys).toEqual(["control", "d", "v"]);
5353
});
5454

5555
await act(async () => {
56-
fireEvent.keyUp(window, { key: "Control" });
56+
fireEvent.keyUp(window, { key: "control" });
5757
fireEvent.keyUp(window, { key: "d" });
5858
});
5959

@@ -73,15 +73,15 @@ describe("Hooks", () => {
7373
});
7474

7575
await waitFor(() => {
76-
expect(result.current?.activeKeys).toEqual(["Control"]);
76+
expect(result.current?.activeKeys).toEqual(["control"]);
7777
});
7878

7979
await act(async () => {
8080
fireEvent.keyDown(window, { key: "b" });
8181
});
8282

8383
await waitFor(() => {
84-
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
84+
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
8585
expect(onCombinationPress).toHaveBeenCalled();
8686
});
8787
});
@@ -97,15 +97,15 @@ describe("Hooks", () => {
9797
});
9898

9999
await waitFor(() => {
100-
expect(result.current?.activeKeys).toEqual(["Control"]);
100+
expect(result.current?.activeKeys).toEqual(["control"]);
101101
});
102102

103103
await act(async () => {
104104
fireEvent.keyDown(window, { key: "d" });
105105
});
106106

107107
await waitFor(() => {
108-
expect(result.current?.activeKeys).toEqual(["Control", "d"]);
108+
expect(result.current?.activeKeys).toEqual(["control", "d"]);
109109
expect(onCombinationPress).not.toHaveBeenCalled();
110110
});
111111
});
@@ -121,7 +121,7 @@ describe("Hooks", () => {
121121
});
122122

123123
await waitFor(() => {
124-
expect(result.current?.activeKeys).toEqual(["Control"]);
124+
expect(result.current?.activeKeys).toEqual(["control"]);
125125
});
126126

127127
await act(async () => {
@@ -130,7 +130,7 @@ describe("Hooks", () => {
130130
});
131131

132132
await waitFor(() => {
133-
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "v", "b"]));
133+
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "v", "b"]));
134134
expect(onCombinationPress).not.toHaveBeenCalled();
135135
});
136136
});
@@ -148,15 +148,15 @@ describe("Hooks", () => {
148148
});
149149

150150
await waitFor(() => {
151-
expect(result.current?.activeKeys).toEqual(["Control"]);
151+
expect(result.current?.activeKeys).toEqual(["control"]);
152152
});
153153

154154
await act(async () => {
155155
fireEvent.keyDown(window, { key: "b" });
156156
});
157157

158158
await waitFor(() => {
159-
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
159+
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
160160
expect(onCombinationPress).not.toHaveBeenCalled();
161161
});
162162
});
@@ -180,7 +180,7 @@ describe("Hooks", () => {
180180
});
181181

182182
await waitFor(() => {
183-
expect(result.current?.activeKeys).toEqual(["Control"]);
183+
expect(result.current?.activeKeys).toEqual(["control"]);
184184
});
185185

186186
await act(async () => {
@@ -189,7 +189,7 @@ describe("Hooks", () => {
189189
});
190190

191191
await waitFor(() => {
192-
expect(result.current?.activeKeys).toEqual(["Control", "d", "v"]);
192+
expect(result.current?.activeKeys).toEqual(["control", "d", "v"]);
193193
});
194194

195195
await act(async () => {
@@ -222,15 +222,15 @@ describe("Hooks", () => {
222222
});
223223

224224
await waitFor(() => {
225-
expect(result.current?.activeKeys).toEqual(["Control"]);
225+
expect(result.current?.activeKeys).toEqual(["control"]);
226226
});
227227

228228
await act(async () => {
229229
fireEvent.keyDown(window, { key: "b" });
230230
});
231231

232232
await waitFor(() => {
233-
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
233+
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
234234
expect(onCombinationPress1).toHaveBeenCalled();
235235
expect(onCombinationPress2).not.toHaveBeenCalled();
236236
});
@@ -241,7 +241,7 @@ describe("Hooks", () => {
241241
});
242242

243243
await waitFor(() => {
244-
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b", "c"]));
244+
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b", "c"]));
245245
expect(onCombinationPress1).not.toHaveBeenCalled();
246246
expect(onCombinationPress2).not.toHaveBeenCalled();
247247
});
@@ -251,7 +251,7 @@ describe("Hooks", () => {
251251
});
252252

253253
await waitFor(() => {
254-
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "c"]));
254+
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "c"]));
255255
expect(onCombinationPress1).not.toHaveBeenCalled();
256256
expect(onCombinationPress2).toHaveBeenCalled();
257257
});
@@ -277,15 +277,15 @@ describe("Hooks", () => {
277277
});
278278

279279
await waitFor(() => {
280-
expect(result.current?.activeKeys).toEqual(["Control"]);
280+
expect(result.current?.activeKeys).toEqual(["control"]);
281281
});
282282

283283
await act(async () => {
284284
fireEvent.keyDown(window, { key: "b" });
285285
});
286286

287287
await waitFor(() => {
288-
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
288+
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
289289
expect(onCombinationPress1).toHaveBeenCalled();
290290
expect(onCombinationPress2).not.toHaveBeenCalled();
291291
});
@@ -296,7 +296,7 @@ describe("Hooks", () => {
296296
});
297297

298298
await waitFor(() => {
299-
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b", "c"]));
299+
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b", "c"]));
300300
expect(onCombinationPress1).not.toHaveBeenCalled();
301301
expect(onCombinationPress2).not.toHaveBeenCalled();
302302
});
@@ -306,7 +306,7 @@ describe("Hooks", () => {
306306
});
307307

308308
await waitFor(() => {
309-
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "c"]));
309+
expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "c"]));
310310
expect(onCombinationPress1).not.toHaveBeenCalled();
311311
expect(onCombinationPress2).not.toHaveBeenCalled();
312312
});

‎packages/paste-core/components/keyboard-key/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.0.0",
44
"category": "typography",
55
"status": "production",
6-
"description": "A keyboard key distinguishes a keyboard command or shortcut from other text.",
6+
"description": "A Keyboard Key distinguishes a keyboard command or shortcut from other text.",
77
"author": "Twilio Inc.",
88
"license": "MIT",
99
"main:dev": "src/index.tsx",

‎packages/paste-core/components/keyboard-key/src/hooks.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const useKeyEvents = (): { activeKeys: string[] } => {
2727
const handleKeyDown = (e: KeyboardEvent): void => {
2828
if (!e.repeat) {
2929
setActiveKeys((prev) => {
30-
return Array.from(new Set([...prev, e.key]));
30+
return Array.from(new Set([...prev, e.key.toLowerCase()]));
3131
});
3232
}
3333
};
@@ -41,7 +41,7 @@ const useKeyEvents = (): { activeKeys: string[] } => {
4141
if (e.key === "Meta") {
4242
setActiveKeys([]);
4343
} else {
44-
setActiveKeys((prev) => [...prev].filter((k) => k !== e.key));
44+
setActiveKeys((prev) => [...prev].filter((k) => k.toLowerCase() !== e.key.toLowerCase()));
4545
}
4646
};
4747

@@ -59,7 +59,8 @@ const useKeyEvents = (): { activeKeys: string[] } => {
5959
};
6060

6161
const stringArrayMatches = (arr1: string[], arr2: string[]): boolean =>
62-
JSON.stringify(arr1.sort((a, b) => a.localeCompare(b))) === JSON.stringify(arr2.sort((a, b) => a.localeCompare(b)));
62+
JSON.stringify(arr1.sort((a, b) => a.localeCompare(b)).map((s) => s.toLowerCase())) ===
63+
JSON.stringify(arr2.sort((a, b) => a.localeCompare(b)));
6364

6465
export const useKeyCombination = ({
6566
keys,

‎packages/paste-website/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
"@twilio-paste/inline-control-group": "^13.0.2",
8585
"@twilio-paste/input": "^9.1.3",
8686
"@twilio-paste/input-box": "^10.1.1",
87+
"@twilio-paste/keyboard-key": "^0.0.0",
8788
"@twilio-paste/label": "^13.1.1",
8889
"@twilio-paste/lexical-library": "^4.2.0",
8990
"@twilio-paste/list": "^8.2.1",

0 commit comments

Comments
 (0)