Skip to content

Commit

Permalink
chore(keyboard-key): update prop name to eventKey
Browse files Browse the repository at this point in the history
  • Loading branch information
@krisantrobus
krisantrobus committed Nov 8, 2024
1 parent 948f3a9 commit 781ea8e
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 33 deletions.
6 changes: 3 additions & 3 deletions packages/paste-core/components/keyboard-key/src/KeyboardKey.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@ export interface KeyboardKeyProps extends HTMLPasteProps<"kbd"> {
* @type string
* @memberof KeyboardKeyProps
*/
keyText?: string;
keyEvent?: string;
}

const KeyboardKey = React.forwardRef<HTMLDivElement, KeyboardKeyProps>(
({ element = "KEYBOARD_KEY", keyText, ...props }, ref) => {
({ element = "KEYBOARD_KEY", keyEvent, ...props }, ref) => {
const {
disabled,
activeKeys,
Expand All @@ -71,7 +71,7 @@ const KeyboardKey = React.forwardRef<HTMLDivElement, KeyboardKeyProps>(
} = React.useContext(KeyboardKeyCombinationContext);

const isKeyActive =
!disabled && activeKeys && keyText && activeKeys.map((k) => k.toLowerCase()).includes(keyText.toLowerCase());
!disabled && activeKeys && keyEvent && activeKeys.map((k) => k.toLowerCase()).includes(keyEvent.toLowerCase());

return (
<Box
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/keyboard-key/src/KeyboardKeyContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export interface KeyboardCombinationState {
*/
disabled?: boolean;
/**
* Whether the keys should show pressed state when active keys contains the keyText mapped to KeyboardKey
* Whether the keys should show pressed state when active keys contains the keyEvent mapped to KeyboardKey
* @default false
* @type { boolean }
* @memberof KeyboardCombinationState
Expand Down
54 changes: 27 additions & 27 deletions packages/paste-core/components/keyboard-key/stories/index.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,17 @@ export const Default = (): React.ReactElement => {
Default/pressed
</Text>
<KeyboardKeyGroup {...state}>
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="b">B</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="b">B</KeyboardKey>
</KeyboardKeyGroup>
</Box>
<Box>
<Text as="p" marginBottom="space30">
Disabled
</Text>
<KeyboardKeyGroup {...state} disabled>
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="b">B</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="b">B</KeyboardKey>
</KeyboardKeyGroup>
</Box>
</Stack>
Expand All @@ -70,17 +70,17 @@ export const Inverse = (): React.ReactElement => {
Default/pressed
</Text>
<KeyboardKeyGroup {...state} variant="inverse">
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="b">B</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="b">B</KeyboardKey>
</KeyboardKeyGroup>
</Box>
<Box>
<Text as="p" marginBottom="space30">
Disabled
</Text>
<KeyboardKeyGroup {...state} disabled variant="inverse">
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="b">B</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="b">B</KeyboardKey>
</KeyboardKeyGroup>
</Box>
</Stack>
Expand All @@ -102,12 +102,12 @@ export const ForcePressed = (): React.ReactElement => {
<Theme.Provider theme="twilio">
<Stack orientation="horizontal" spacing="space40">
<KeyboardKeyGroup {...state} activeKeys={["Control", "b"]}>
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="b">B</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="b">B</KeyboardKey>
</KeyboardKeyGroup>
<KeyboardKeyGroup {...state} activeKeys={["Control", "b"]} variant="inverse">
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="b">B</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="b">B</KeyboardKey>
</KeyboardKeyGroup>
</Stack>
</Theme.Provider>
Expand Down Expand Up @@ -157,25 +157,25 @@ export const MultipleCombinations = (): React.ReactElement => {
<Theme.Provider theme="twilio">
<Stack orientation="vertical" spacing="space40">
<KeyboardKeyGroup {...stateCtrB}>
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="b">B</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="b">B</KeyboardKey>
</KeyboardKeyGroup>
<KeyboardKeyGroup {...stateCtrK}>
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="k">K</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="k">K</KeyboardKey>
</KeyboardKeyGroup>
<KeyboardKeyGroup {...stateCmdB}>
<KeyboardKey keyText="Meta">Cmd</KeyboardKey>
<KeyboardKey keyText="b">B</KeyboardKey>
<KeyboardKey keyEvent="Meta">Cmd</KeyboardKey>
<KeyboardKey keyEvent="b">B</KeyboardKey>
</KeyboardKeyGroup>
<KeyboardKeyGroup {...stateCmdK}>
<KeyboardKey keyText="meta">Cmd</KeyboardKey>
<KeyboardKey keyText="k">K</KeyboardKey>
<KeyboardKey keyEvent="meta">Cmd</KeyboardKey>
<KeyboardKey keyEvent="k">K</KeyboardKey>
</KeyboardKeyGroup>
<KeyboardKeyGroup {...stateCmdShiftB}>
<KeyboardKey keyText="meta">Cmd</KeyboardKey>
<KeyboardKey keyText="Shift">Shift</KeyboardKey>
<KeyboardKey keyText="p">P</KeyboardKey>
<KeyboardKey keyEvent="meta">Cmd</KeyboardKey>
<KeyboardKey keyEvent="Shift">Shift</KeyboardKey>
<KeyboardKey keyEvent="p">P</KeyboardKey>
</KeyboardKeyGroup>
</Stack>
<br />
Expand All @@ -198,8 +198,8 @@ export const TriggerModal = (): React.ReactElement => {
<Theme.Provider theme="twilio">
<Paragraph>Use the following shortcut to open a modal:</Paragraph>
<KeyboardKeyGroup {...state}>
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="k">K</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="k">K</KeyboardKey>
</KeyboardKeyGroup>

<Modal ariaLabelledby="Close demo modal" isOpen={isOpen} onDismiss={() => setIsOpen(false)} size="default">
Expand Down Expand Up @@ -254,8 +254,8 @@ export const Customization = (): React.ReactElement => {
}}
>
<KeyboardKeyGroup {...state}>
<KeyboardKey keyText="Control">Control</KeyboardKey>
<KeyboardKey keyText="b">B</KeyboardKey>
<KeyboardKey keyEvent="Control">Control</KeyboardKey>
<KeyboardKey keyEvent="b">B</KeyboardKey>
</KeyboardKeyGroup>
</CustomizationProvider>
</Theme.Provider>
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-core/components/keyboard-key/type-docs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -489,7 +489,7 @@
"required": false,
"externalProp": true
},
"keyText": {
"keyEvent": {
"type": "string",
"defaultValue": "'KEYBOARD_KEY'",
"required": false,
Expand Down Expand Up @@ -2030,7 +2030,7 @@
"defaultValue": false,
"required": false,
"externalProp": false,
"description": "Whether the keys should show pressed state when active keys contains the keyText mapped to KeyboardKey"
"description": "Whether the keys should show pressed state when active keys contains the keyEvent mapped to KeyboardKey"
},
"hidden": {
"type": "boolean",
Expand Down

0 comments on commit 781ea8e

Please sign in to comment.