diff --git a/packages/@react-aria/tooltip/src/useTooltipTrigger.ts b/packages/@react-aria/tooltip/src/useTooltipTrigger.ts index d31c8ae9024..cacef8ec890 100644 --- a/packages/@react-aria/tooltip/src/useTooltipTrigger.ts +++ b/packages/@react-aria/tooltip/src/useTooltipTrigger.ts @@ -37,7 +37,7 @@ export function useTooltipTrigger(props: TooltipTriggerProps, state: TooltipTrig let { isDisabled, trigger, - closeOnPress = true + shouldCloseOnPress = true } = props; let tooltipId = useId(); @@ -103,8 +103,8 @@ export function useTooltipTrigger(props: TooltipTriggerProps, state: TooltipTrig }; let onPressStart = () => { - // if closeOnPress is false, we should not close the tooltip - if (!closeOnPress) { + // if shouldCloseOnPress is false, we should not close the tooltip + if (!shouldCloseOnPress) { return; } // no matter how the trigger is pressed, we should close the tooltip diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx index 0cb42d22ab7..9530a2404b0 100644 --- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx +++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx @@ -22,7 +22,7 @@ import {useTooltipTriggerState} from '@react-stately/tooltip'; const DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button const DEFAULT_CROSS_OFFSET = 0; -const DEFAULT_CLOSE_ON_PRESS = true; // Whether the tooltip should close when the trigger is pressed +const DEFAULT_SHOULD_CLOSE_ON_PRESS = true; // Whether the tooltip should close when the trigger is pressed function TooltipTrigger(props: SpectrumTooltipTriggerProps) { let { @@ -31,7 +31,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) { isDisabled, offset = DEFAULT_OFFSET, trigger: triggerAction, - closeOnPress = DEFAULT_CLOSE_ON_PRESS + shouldCloseOnPress = DEFAULT_SHOULD_CLOSE_ON_PRESS } = props; let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement]; @@ -43,7 +43,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) { let {triggerProps, tooltipProps} = useTooltipTrigger({ isDisabled, trigger: triggerAction, - closeOnPress + shouldCloseOnPress }, state, tooltipTriggerRef); let [borderRadius, setBorderRadius] = useState(0); diff --git a/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx b/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx index 48becc8c2bf..bcbdebd4b56 100644 --- a/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx +++ b/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx @@ -73,7 +73,7 @@ const argTypes = { children: { control: {disable: true} }, - closeOnPress: { + shouldCloseOnPress: { control: 'boolean' } }; @@ -117,7 +117,7 @@ export default { Change Name ], onOpenChange: action('openChange'), - closeOnPress: true + shouldCloseOnPress: true }, argTypes: argTypes } as Meta; diff --git a/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js b/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js index 5a898b7450e..9a6576f521a 100644 --- a/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js +++ b/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js @@ -330,10 +330,10 @@ describe('TooltipTrigger', function () { expect(queryByRole('tooltip')).toBeNull(); }); - it('does not close if the trigger is clicked when closeOnPress is false', async () => { + it('does not close if the trigger is clicked when shouldCloseOnPress is false', async () => { let {getByRole, getByLabelText} = render( - + Helpful information. @@ -351,10 +351,10 @@ describe('TooltipTrigger', function () { expect(tooltip).toBeVisible(); }); - it('does not close if the trigger is clicked with the keyboard when closeOnPress is false', async () => { + it('does not close if the trigger is clicked with the keyboard when shouldCloseOnPress is false', async () => { let {getByRole, getByLabelText} = render( - + Helpful information. diff --git a/packages/@react-types/tooltip/src/index.d.ts b/packages/@react-types/tooltip/src/index.d.ts index 73730df859f..5bac687bbb5 100644 --- a/packages/@react-types/tooltip/src/index.d.ts +++ b/packages/@react-types/tooltip/src/index.d.ts @@ -42,7 +42,7 @@ export interface TooltipTriggerProps extends OverlayTriggerProps { * Whether the tooltip should close when the trigger is pressed. * @default true */ - closeOnPress?: boolean + shouldCloseOnPress?: boolean } export interface SpectrumTooltipTriggerProps extends Omit, PositionProps { diff --git a/packages/dev/s2-docs/pages/s2/Tooltip.mdx b/packages/dev/s2-docs/pages/s2/Tooltip.mdx index 70b153d3a40..0d0e836aff0 100644 --- a/packages/dev/s2-docs/pages/s2/Tooltip.mdx +++ b/packages/dev/s2-docs/pages/s2/Tooltip.mdx @@ -11,7 +11,7 @@ export const description = 'Displays a description of an element on hover or foc {docs.exports.Tooltip.description} -```tsx render docs={docs.exports.TooltipTrigger} links={docs.links} props={['placement', 'crossOffset', 'shouldFlip']} type="s2" +```tsx render docs={docs.exports.TooltipTrigger} links={docs.links} props={['placement', 'crossOffset', 'shouldFlip', 'shouldCloseOnPress']} type="s2" "use client"; import {Tooltip, TooltipTrigger, ActionButton} from '@react-spectrum/s2'; import Edit from '@react-spectrum/s2/icons/Edit';