Add a component for showing keyboard shortcuts.
Review Request #13600 — Created March 2, 2024 and submitted — Latest diff uploaded
This introduces
Ink.KeyboardShortcut
, a utility component used to
display an available keyboard shortcut and optionally register it.Keys are shown in a form that best matches the local operating system.
On macOS, the Control, Meta/Cmd, Alt/Option, and Shift keys show the
typical symbols, for instance. Some symbols are used in all cases, such
as arrows.If a
KeyboardShortcut
is instantiated with anonInvoke
and
registry
options, then the keyboard shortcut will be registered in the
registry and theonInvoke
handler will be called when the shortcut is
pressed. A specialonInvoke
value ofclick
will trigger aclick
event on this component, bubbling up to a parent, which will be useful
for buttons and menu items.
Unit tests pass.
Tested this with in-progress components, ensuring that registration
and event handling worked correctly.
Diff Revision 1 (Latest)
Commits
Files
src/ink/js/components/views/index.ts |
---|
src/ink/js/components/views/keyboardShortcutView.ts |
---|
src/ink/js/components/views/tests/keyboardShortcutViewTests.ts |
---|
src/ink/less/components/index.less |
---|
src/ink/less/components/keyboard-shortcut.component.less |
---|
src/ink/less/components/schemas/index.less |
---|
src/ink/less/components/schemas/keyboard-shortcut.schema.less |
---|
src/ink/less/themes/default/components/index.less |
---|
src/ink/less/themes/default/components/keyboard-shortcut.theme.less |
---|
src/stories/components/keyboard-shortcut.stories.ts |
---|