diff --git a/.changeset/cyan-glasses-sit.md b/.changeset/cyan-glasses-sit.md new file mode 100644 index 00000000000..db84691d743 --- /dev/null +++ b/.changeset/cyan-glasses-sit.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Adds `keybindingHint` prop to `TooltipV2` and `IconButton`, updates `onEmphasis` design variant for `KeybindingHint`, and adds `size` prop with `small` option to `KeybindingHint`. diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-colorblind-linux.png new file mode 100644 index 00000000000..ab8acd4003e Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-dimmed-linux.png new file mode 100644 index 00000000000..f3fd9e860d2 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-high-contrast-linux.png new file mode 100644 index 00000000000..86c35b1d46d Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-linux.png new file mode 100644 index 00000000000..ab8acd4003e Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-tritanopia-linux.png new file mode 100644 index 00000000000..ab8acd4003e Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-colorblind-linux.png new file mode 100644 index 00000000000..2f957b92a84 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-high-contrast-linux.png new file mode 100644 index 00000000000..707be9c26fd Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-linux.png new file mode 100644 index 00000000000..2f957b92a84 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png new file mode 100644 index 00000000000..2f957b92a84 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-colorblind-linux.png new file mode 100644 index 00000000000..b4e3cb7eb61 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-dimmed-linux.png new file mode 100644 index 00000000000..c5045c2b0e0 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-high-contrast-linux.png new file mode 100644 index 00000000000..f890b775103 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-linux.png new file mode 100644 index 00000000000..b4e3cb7eb61 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-tritanopia-linux.png new file mode 100644 index 00000000000..b4e3cb7eb61 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-colorblind-linux.png new file mode 100644 index 00000000000..a7f5e45497e Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-high-contrast-linux.png new file mode 100644 index 00000000000..50b6c495b06 Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-linux.png new file mode 100644 index 00000000000..a7f5e45497e Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-tritanopia-linux.png new file mode 100644 index 00000000000..a7f5e45497e Binary files /dev/null and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-light-tritanopia-linux.png differ diff --git a/e2e/components/IconButton.test.ts b/e2e/components/IconButton.test.ts index 86a6b3d1c26..83b00e325e1 100644 --- a/e2e/components/IconButton.test.ts +++ b/e2e/components/IconButton.test.ts @@ -308,12 +308,12 @@ test.describe('IconButton', () => { }) } }) - test.describe('Keyshortcuts', () => { + test.describe('Keybinding hint', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-iconbutton-features--keyshortcuts', + id: 'components-iconbutton-features--keybinding-hint', globals: { colorScheme: theme, }, @@ -322,13 +322,13 @@ test.describe('IconButton', () => { // Default state await page.keyboard.press('Tab') // focus on icon button expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `IconButton.Keyshortcuts.${theme}.png`, + `IconButton.Keybinding Hint.${theme}.png`, ) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-iconbutton-features--keyshortcuts', + id: 'components-iconbutton-features--keybinding-hint', globals: { colorScheme: theme, }, @@ -340,12 +340,12 @@ test.describe('IconButton', () => { } }) - test.describe('Keyshortcuts on Description', () => { + test.describe('Keybinding hint on Description', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-iconbutton-features--keyshortcuts-on-description', + id: 'components-iconbutton-features--keybinding-hint-on-description', globals: { colorScheme: theme, }, @@ -354,13 +354,13 @@ test.describe('IconButton', () => { // Default state await page.keyboard.press('Tab') // focus on icon button expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `IconButton.Keyshortcuts on Description.${theme}.png`, + `IconButton.Keybinding Hint on Description.${theme}.png`, ) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-iconbutton-features--keyshortcuts-on-description', + id: 'components-iconbutton-features--keybinding-hint-on-description', globals: { colorScheme: theme, }, diff --git a/packages/react/src/Button/IconButton.docs.json b/packages/react/src/Button/IconButton.docs.json index 4513186be1c..88d7ae75938 100644 --- a/packages/react/src/Button/IconButton.docs.json +++ b/packages/react/src/Button/IconButton.docs.json @@ -47,10 +47,10 @@ "id": "components-iconbutton-features--loading-trigger" }, { - "id": "components-iconbutton-features--keyshortcuts-on-description" + "id": "components-iconbutton-features--keybinding-hint-on-description" }, { - "id": "components-iconbutton-features--keyshortcuts" + "id": "components-iconbutton-features--keybinding-hint" } ], "importPath": "@primer/react", @@ -95,8 +95,13 @@ "name": "keyshortcuts", "type": "string", "defaultValue": "", - "required": false, - "description": "Keyboard shortcuts that trigger the button. Keyboard shortcut will be appended to the accessible name or description (depending on the tooltip type) of the button with a comma (i.e. Bold, Command+B) and it will be displayed in the tooltip." + "deprecated": true, + "description": "Use `keybindingHint` instead." + }, + { + "name": "keybindingHint", + "type": "string", + "description": "Optional keybinding hint to show in the tooltip for this button. See the `KeybindingHint` component documentation for the correct format for this string. Has no effect if tooltip is overridden or disabled. Does **not** bind any keybindings for this button - this is only for visual hints." }, { "name": "tooltipDirection", diff --git a/packages/react/src/Button/IconButton.features.stories.tsx b/packages/react/src/Button/IconButton.features.stories.tsx index e8581bd6482..d8db5c4b4c2 100644 --- a/packages/react/src/Button/IconButton.features.stories.tsx +++ b/packages/react/src/Button/IconButton.features.stories.tsx @@ -84,13 +84,13 @@ export const LoadingTrigger = () => { return } -export const KeyshortcutsOnDescription = () => ( +export const KeybindingHintOnDescription = () => ( ) -export const Keyshortcuts = () => +export const KeybindingHint = () => diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx index 4b3d00f6e3e..4b86ea1bd48 100644 --- a/packages/react/src/Button/IconButton.tsx +++ b/packages/react/src/Button/IconButton.tsx @@ -21,6 +21,7 @@ const IconButton = forwardRef( // This is planned to be a temporary prop until the default tooltip on icon buttons are fully rolled out. unsafeDisableTooltip = false, keyshortcuts, + keybindingHint, className, ...props }, @@ -58,15 +59,14 @@ const IconButton = forwardRef( /> ) } else { - // Does it have keyshortcuts? - const tooltipSuffix = keyshortcuts ? `, ${keyshortcuts}` : '' const tooltipText = description ?? ariaLabel return ( { expect(triggerEl).toHaveAttribute('aria-keyshortcuts', 'Command+H') }) it('should append the keyshortcuts to the tooltip text that labels the icon button when keyshortcuts prop is passed', () => { - const {getByRole, getByText} = render() - const triggerEl = getByRole('button') - const tooltipEl = getByText('Heart, Command+H') - expect(tooltipEl).toBeInTheDocument() - expect(triggerEl).toHaveAttribute('aria-labelledby', tooltipEl.id) + const {getByRole} = render() + const triggerEl = getByRole('button', {name: 'Heart ( command h )'}) + expect(triggerEl).toBeInTheDocument() }) - it('should render aria-keyshorts on an icon button when keyshortcuts prop is passed (Description Type)', () => { + it('should render aria-keyshortcuts on an icon button when keyshortcuts prop is passed (Description Type)', () => { const {getByRole} = render( , ) @@ -354,12 +352,10 @@ describe('Button', () => { expect(triggerEl).toHaveAttribute('aria-keyshortcuts', 'Command+H') }) it('should append the keyshortcuts to the tooltip text that describes the icon button when keyshortcuts prop is passed (Description Type)', () => { - const {getByRole, getByText} = render( + const {getByRole} = render( , ) - const triggerEl = getByRole('button') - const tooltipEl = getByText('Love is all around, Command+H') - expect(tooltipEl).toBeInTheDocument() - expect(triggerEl.getAttribute('aria-describedby')).toEqual(expect.stringContaining(tooltipEl.id)) + const triggerEl = getByRole('button', {name: 'Heart'}) + expect(triggerEl).toHaveAccessibleDescription('Love is all around ( command h )') }) }) diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index 2f94f999eba..6824ae17e69 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -94,7 +94,9 @@ export type IconButtonProps = ButtonA11yProps & { unsafeDisableTooltip?: boolean description?: string tooltipDirection?: TooltipDirection + /** @deprecated Use `keybindingHint` instead. */ keyshortcuts?: string + keybindingHint?: string } & Omit // adopted from React.AnchorHTMLAttributes diff --git a/packages/react/src/KeybindingHint/KeybindingHint.docs.json b/packages/react/src/KeybindingHint/KeybindingHint.docs.json index 136c41954ef..46d1d975f44 100644 --- a/packages/react/src/KeybindingHint/KeybindingHint.docs.json +++ b/packages/react/src/KeybindingHint/KeybindingHint.docs.json @@ -22,6 +22,12 @@ "type": "'normal' | 'onEmphasis'", "defaultValue": "'normal'", "description": "Set to `onEmphasis` for display on 'emphasis' colors." + }, + { + "name": "size", + "type": "'small' | 'normal'", + "defaultValue": "'normal'", + "description": "Control the size of the hint." } ], "subcomponents": [] diff --git a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx index 37e92d203ce..a9a20a0ca21 100644 --- a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx +++ b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx @@ -28,3 +28,5 @@ export const OnEmphasis: StoryObj = { ), args: {keys: chord, variant: 'onEmphasis'}, } + +export const Small = {args: {keys: chord, size: 'small'}} diff --git a/packages/react/src/KeybindingHint/components/Chord.tsx b/packages/react/src/KeybindingHint/components/Chord.tsx index d12ce8f44ff..280769db16d 100644 --- a/packages/react/src/KeybindingHint/components/Chord.tsx +++ b/packages/react/src/KeybindingHint/components/Chord.tsx @@ -29,24 +29,26 @@ const splitChord = (chord: string) => .map(k => k.toLowerCase()) .sort(compareLowercaseKeys) -export const Chord = ({keys, format = 'condensed', variant = 'normal'}: KeybindingHintProps) => ( +export const Chord = ({keys, format = 'condensed', variant = 'normal', size = 'normal'}: KeybindingHintProps) => ( {splitChord(keys).map((k, i) => ( diff --git a/packages/react/src/KeybindingHint/components/Sequence.tsx b/packages/react/src/KeybindingHint/components/Sequence.tsx index aaa4ba00f0f..d2b6ab5ce9f 100644 --- a/packages/react/src/KeybindingHint/components/Sequence.tsx +++ b/packages/react/src/KeybindingHint/components/Sequence.tsx @@ -5,7 +5,7 @@ import {accessibleChordString, Chord} from './Chord' const splitSequence = (sequence: string) => sequence.split(' ') -export const Sequence = ({keys, format = 'condensed', variant = 'normal'}: KeybindingHintProps) => +export const Sequence = ({keys, ...chordProps}: KeybindingHintProps) => splitSequence(keys).map((c, i) => ( { @@ -16,7 +16,7 @@ export const Sequence = ({keys, format = 'condensed', variant = 'normal'}: Keybi ) } - + )) diff --git a/packages/react/src/KeybindingHint/props.ts b/packages/react/src/KeybindingHint/props.ts index 72584086435..111908a7370 100644 --- a/packages/react/src/KeybindingHint/props.ts +++ b/packages/react/src/KeybindingHint/props.ts @@ -27,4 +27,8 @@ export interface KeybindingHintProps { * Set to `onEmphasis` for display on emphasis colors. */ variant?: KeybindingHintVariant + /** + * Control the size of the hint. + */ + size?: 'small' | 'normal' } diff --git a/packages/react/src/TooltipV2/Tooltip.docs.json b/packages/react/src/TooltipV2/Tooltip.docs.json index f4e2dee6102..d8b04275e00 100644 --- a/packages/react/src/TooltipV2/Tooltip.docs.json +++ b/packages/react/src/TooltipV2/Tooltip.docs.json @@ -53,6 +53,11 @@ "defaultValue": "description", "description": "The type of tooltip. `label` is used for labelling the element that triggers tooltip. `description` is used for describing or adding a suplementary information to the element that triggers the tooltip." }, + { + "name": "keybindingHint", + "type": "string", + "description": "Optional keybinding hint to indicate the availability of a keyboard shortcut. Supported syntax is described in the docs for the `KeybindingHint` component." + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/TooltipV2/Tooltip.features.stories.tsx b/packages/react/src/TooltipV2/Tooltip.features.stories.tsx index 2819aef6dd3..fb3015ceda7 100644 --- a/packages/react/src/TooltipV2/Tooltip.features.stories.tsx +++ b/packages/react/src/TooltipV2/Tooltip.features.stories.tsx @@ -2,7 +2,7 @@ import React from 'react' import {IconButton, Button, Box, Link, ActionMenu, ActionList} from '..' import Octicon from '../Octicon' import {Tooltip} from './Tooltip' -import {SearchIcon, BookIcon, CheckIcon, TriangleDownIcon, GitBranchIcon} from '@primer/octicons-react' +import {SearchIcon, BookIcon, CheckIcon, TriangleDownIcon, GitBranchIcon, InfoIcon} from '@primer/octicons-react' export default { title: 'Components/TooltipV2/Features', @@ -174,3 +174,13 @@ export const OnActionMenuAnchor = () => ( ) + +export const KeybindingHint = () => ( + + + + + + + +) diff --git a/packages/react/src/TooltipV2/Tooltip.module.css b/packages/react/src/TooltipV2/Tooltip.module.css index 6508dc39fc7..916f74bb9c0 100644 --- a/packages/react/src/TooltipV2/Tooltip.module.css +++ b/packages/react/src/TooltipV2/Tooltip.module.css @@ -118,3 +118,10 @@ animation-delay: 0s; } } + +.keybindingHintContainer.hasTextBefore { + /* Offset negative on the right right to make right spacing look like top and bottom spacing, only for keybinding hints and only when there is text */ + /* stylelint-disable-next-line primer/spacing */ + margin-right: -0.125em; + margin-left: var(--base-size-6); +} diff --git a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx index 106f636aae5..0495379974f 100644 --- a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx +++ b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx @@ -11,6 +11,7 @@ const meta: Meta = { text: 'This is the tooltip text', direction: 's', type: 'description', + keybindingHint: undefined, }, argTypes: { text: {control: {type: 'text'}}, @@ -21,6 +22,9 @@ const meta: Meta = { type: { control: false, }, + keybindingHint: { + control: {type: 'text'}, + }, }, } diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx index ba265568501..1f69594c9e0 100644 --- a/packages/react/src/TooltipV2/Tooltip.tsx +++ b/packages/react/src/TooltipV2/Tooltip.tsx @@ -13,6 +13,8 @@ import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' import {clsx} from 'clsx' import classes from './Tooltip.module.css' import {useFeatureFlag} from '../FeatureFlags' +import {KeybindingHint, type KeybindingHintProps} from '../KeybindingHint' +import VisuallyHidden from '../_VisuallyHidden' const CSS_MODULE_FEATURE_FLAG = 'primer_react_css_modules_team' @@ -138,6 +140,7 @@ export type TooltipProps = React.PropsWithChildren< direction?: TooltipDirection text: string type?: 'label' | 'description' + keybindingHint?: KeybindingHintProps['keys'] } & SxProp > & React.HTMLAttributes @@ -196,7 +199,10 @@ const isInteractive = (element: HTMLElement) => { export const TooltipContext = React.createContext<{tooltipId?: string}>({}) export const Tooltip = React.forwardRef( - ({direction = 's', text, type = 'description', children, id, className, ...rest}: TooltipProps, forwardedRef) => { + ( + {direction = 's', text, type = 'description', children, id, className, keybindingHint, ...rest}: TooltipProps, + forwardedRef, + ) => { const tooltipId = useId(id) const child = Children.only(children) const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) @@ -379,6 +385,13 @@ export const Tooltip = React.forwardRef( onMouseLeave={closeTooltip} > {text} + {keybindingHint && ( + + ( + + ) + + )}