Skip to content

ref(useHoverOverlay): remove isHoverable prop #123688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TkDodo wants to merge 1 commit into
base: master
Choose a base branch
from
Open

ref(useHoverOverlay): remove isHoverable prop #123688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion static/app/components/actions/archive.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,6 @@ export function ArchiveActions({
tooltipProps={{
delay: 1000,
disabled,
isHoverable: true,
title: tct(
'We’ll nag you with a notification if the issue gets worse. All archived issues can be found in the Archived tab. [docs:Read the docs]',
{
Expand Down
6 changes: 1 addition & 5 deletions static/app/components/aiPrivacyTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,5 @@ function AiPrivacyNoticeShort() {
* A tooltip wrapper for the privacy notice.
*/
export function AiPrivacyTooltip({children}: {children: ReactNode}) {
return (
<Tooltip isHoverable title={<AiPrivacyNoticeShort />}>
{children}
</Tooltip>
);
return <Tooltip title={<AiPrivacyNoticeShort />}>{children}</Tooltip>;
}
3 changes: 1 addition & 2 deletions static/app/components/assigneeBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@ export function AssigneeBadge({
if (assignedTo) {
return (
<Tooltip
isHoverable
maxWidth={ASSIGNED_TOOLTIP_MAX_WIDTH}
title={
<AssignedTooltip
Expand All @@ -88,7 +87,7 @@ export function AssigneeBadge({
}

return (
<Tooltip isHoverable title={<UnassignedTooltip />} skipWrapper>
<Tooltip title={<UnassignedTooltip />} skipWrapper>
<UnassignedTag
icon={
<UnassignedIcon showLabel={showLabel} chevronDirection={chevronDirection} />
Expand Down
10 changes: 2 additions & 8 deletions static/app/components/assigneeSelectorDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,6 @@ function AssigneeAvatar({
<SuggestedAvatarStack
size={26}
owners={suggestedActors}
tooltipOptions={{isHoverable: true}}
tooltip={
<Stack gap="xs" align="start">
<Text as="div" align="left" wrap="nowrap">
Expand All @@ -199,7 +198,6 @@ function AssigneeAvatar({

return (
<Tooltip
isHoverable
skipWrapper
title={
<Stack gap="xs" align="start">
Expand Down Expand Up @@ -604,11 +602,7 @@ export function AssigneeSelectorDropdown({
disabled={loading}
ref={ref as Ref<HTMLButtonElement>}
size="xs"
tooltipProps={
showLabel
? undefined
: {isHoverable: true, maxWidth: 300, title: tooltipTitle}
}
tooltipProps={showLabel ? undefined : {maxWidth: 300, title: tooltipTitle}}
/>
);

Expand All @@ -617,7 +611,7 @@ export function AssigneeSelectorDropdown({
}

return (
<Tooltip isHoverable maxWidth={300} skipWrapper title={tooltipTitle}>
<Tooltip maxWidth={300} skipWrapper title={tooltipTitle}>
<Flex as="label" align="center" gap="sm" htmlFor={triggerProps.id}>
{avatarButton}
<AssigneeLabel ellipsis>{triggerLabel}</AssigneeLabel>
Expand Down
1 change: 0 additions & 1 deletion static/app/components/commitRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,6 @@ function CommitRow({
disabled={!commit.author || commit.author.id !== undefined}
overlayStyle={{maxWidth: '350px'}}
skipWrapper
isHoverable
>
<AuthorWrapper>
{isUser ? t('You') : (commit.author?.name ?? t('Unknown author'))}
Expand Down
3 changes: 1 addition & 2 deletions static/app/components/core/badge/featureBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const iconMap: Record<FeatureBadgeProps['type'], React.ReactNode> = {

export interface FeatureBadgeProps {
type: 'alpha' | 'beta' | 'new' | 'experimental' | 'debug';
tooltipProps?: Omit<Partial<TooltipProps>, 'isHoverable' | 'skipWrapper'>;
tooltipProps?: Omit<Partial<TooltipProps>, 'skipWrapper'>;
}

export function FeatureBadge({type, tooltipProps}: FeatureBadgeProps) {
Expand All @@ -62,7 +62,6 @@ export function FeatureBadge({type, tooltipProps}: FeatureBadgeProps) {
title={title}
position="right"
{...tooltipProps}
isHoverable
skipWrapper
forceVisible={
isInteractiveElementFocusVisible ? 'delayed' : tooltipProps?.forceVisible
Expand Down
7 changes: 1 addition & 6 deletions static/app/components/core/breadcrumbList/items/breadcrumbItemPageTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,6 @@ export function BreadcrumbItemPageTitle({
<Tooltip
title={pagination.previous.tooltip}
disabled={!pagination.previous.tooltip}
isHoverable
>
{pagination.previous.to ? (
<LinkButton
Expand All @@ -145,11 +144,7 @@ export function BreadcrumbItemPageTitle({
/>
)}
</Tooltip>
<Tooltip
title={pagination.next.tooltip}
disabled={!pagination.next.tooltip}
isHoverable
>
<Tooltip title={pagination.next.tooltip} disabled={!pagination.next.tooltip}>
{pagination.next.to ? (
<LinkButton
size="zero"
Expand Down
1 change: 0 additions & 1 deletion static/app/components/core/info/infoText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export function InfoText<T extends 'span' | 'p' | 'label' | 'div' | 'time' = 'sp
showOnlyOnOverflow={isOverflowOnly}
onOverflowChange={isOverflowOnly ? setIsOverflowing : undefined}
skipWrapper
isHoverable
showUnderline={!isOverflowOnly}
underlineColor={textProps.variant === 'inherit' ? undefined : textProps.variant}
>
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/core/info/infoTip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function IconWithTooltip({
...props
}: InfoTooltipProps & {icon: React.ComponentType<SVGIconProps>}) {
return (
<Tooltip title={title} skipWrapper isHoverable position={position}>
<Tooltip title={title} skipWrapper position={position}>
<StyledIconWrapper tabIndex={0} role="img" aria-label={ariaLabel}>
<Icon {...props} aria-hidden />
</StyledIconWrapper>
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/core/tooltip/tooltip.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ describe('Tooltip', () => {

render(
<button type="button" onClick={handleAncestorClick}>
<Tooltip title={<span>Copy</span>} isHoverable forceVisible>
<Tooltip title={<span>Copy</span>} forceVisible>
<div>Trigger</div>
</Tooltip>
</button>
Expand Down
3 changes: 1 addition & 2 deletions static/app/components/core/tooltip/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ function TooltipComponent({
title,
disabled = false,
maxWidth,
isHoverable = true,
...hoverOverlayProps
}: TooltipProps) {
const theme = useTheme();
Expand All @@ -71,7 +70,7 @@ function TooltipComponent({
arrowProps,
reset,
update,
} = useHoverOverlay({...hoverOverlayProps, isHoverable});
} = useHoverOverlay({...hoverOverlayProps});

const {forceVisible} = hoverOverlayProps;

Expand Down
1 change: 0 additions & 1 deletion static/app/components/createAlertButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,6 @@ export function CreateAlertButton({
to={to ?? (projectSlug ? createAlertUrl(projectSlug) : '')}
tooltipProps={{
title: canCreateAlert ? undefined : permissionTooltipText,
isHoverable: true,
position: 'top',
overlayStyle: {
maxWidth: '270px',
Expand Down
1 change: 0 additions & 1 deletion static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,6 @@ export function BreadcrumbsTimeline({
<Timestamp>
<Tooltip
title={<BreadcrumbTimestampTooltipBody timestamp={timestamp} />}
isHoverable
maxWidth={400}
>
{isValidDate(startTimeDate) ? (
Expand Down
1 change: 0 additions & 1 deletion static/app/components/events/contexts/contextIcon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export default Storybook.story('ContextIcon', story => {
return (
<Tooltip
key={name}
isHoverable
overlayStyle={{maxWidth: 440}}
title={<Storybook.JSXNode name="ContextIcon" props={props} />}
>
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/events/highlights/highlightsIconSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export function HighlightsIconSummary({event, group}: HighlightsIconSummaryProps
<ScrollCarousel gap="xl" aria-label={t('Icon highlights')}>
{runtimeInfo && (
<Fragment>
<Tooltip title={runtimeInfo.tooltip} isHoverable skipWrapper>
<Tooltip title={runtimeInfo.tooltip} skipWrapper>
<Container as="span" padding="xs 0">
<Text>{runtimeInfo.label}</Text>
</Container>
Expand Down
1 change: 0 additions & 1 deletion static/app/components/events/interfaces/frame/defaultTitle/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,6 @@ export function DefaultTitle({
title.push(
<StyledQuestionTooltip
key="info-tooltip"
isHoverable
size="xs"
delay={tooltipDelay}
overlayStyle={{maxWidth: 400, wordBreak: 'break-all'}}
Expand Down
1 change: 0 additions & 1 deletion static/app/components/events/interfaces/nativeFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,6 @@ export function NativeFrame({
title={frame.absPath}
disabled={!(defined(frame.absPath) && frame.absPath !== frame.filename)}
delay={tooltipDelay}
isHoverable
maxWidth={FRAME_TOOLTIP_MAX_WIDTH}
>
<FileName>
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/events/meta/annotatedText/filteredAnnotatedTextValue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function FilteredAnnotatedTextValue({value, meta}: Props) {
}, [meta.rem, organization, projectDetails]);

return (
<Tooltip title={tooltipText} isHoverable>
<Tooltip title={tooltipText}>
<ValueElement value={value} meta={meta} />
</Tooltip>
);
Expand Down
4 changes: 1 addition & 3 deletions static/app/components/feedback/list/mailboxPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,7 @@ export function MailboxPicker({onChange, value}: Props) {
<Tooltip disabled={!count} title={title}>
<Flex align="center" gap="sm">
{mailbox.tooltip ? (
<Tooltip isHoverable title={mailbox.tooltip}>
{mailbox.label}
</Tooltip>
<Tooltip title={mailbox.tooltip}>{mailbox.label}</Tooltip>
) : (
mailbox.label
)}
Expand Down
3 changes: 0 additions & 3 deletions static/app/components/forms/controls/radioGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ interface BaseRadioGroupProps<C extends string> {
* Switch the radio items to flow left to right, instead of vertically.
*/
orientInline?: boolean;
tooltipIsHoverable?: boolean;
tooltipPosition?: PopperProps<any>['placement'];
}

Expand Down Expand Up @@ -58,7 +57,6 @@ export function RadioGroup<C extends string>({
onChange,
orientInline,
tooltipPosition,
tooltipIsHoverable,
...props
}: RadioGroupProps<C>) {
return (
Expand All @@ -84,7 +82,6 @@ export function RadioGroup<C extends string>({
disabled={!disabledChoiceReason}
title={disabledChoiceReason}
position={tooltipPosition}
isHoverable={tooltipIsHoverable}
>
<RadioLineItem index={index} aria-checked={value === id} disabled={disabled}>
<Radio
Expand Down
3 changes: 1 addition & 2 deletions static/app/components/hovercard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {Overlay, PositionWrapper} from 'sentry/components/overlay';
import type {UseHoverOverlayProps} from 'sentry/utils/useHoverOverlay';
import {HoverOverlayGroupProvider, useHoverOverlay} from 'sentry/utils/useHoverOverlay';

interface HovercardProps extends Omit<UseHoverOverlayProps, 'isHoverable'> {
interface HovercardProps extends UseHoverOverlayProps {
/**
* Classname to apply to the hovercard
*/
Expand Down Expand Up @@ -132,7 +132,6 @@ function Hovercard({
const {wrapTrigger, isOpen, snapClosed, ...hoverOverlayState} = useHoverOverlay({
offset,
displayTimeout,
isHoverable: true,
className: containerClassName,
...hoverOverlayProps,
});
Expand Down
1 change: 0 additions & 1 deletion static/app/components/modals/dataWidgetViewerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -809,7 +809,6 @@ function DataWidgetViewerModal(props: Props) {
title={widget.description}
containerDisplayMode="grid"
showOnlyOnOverflow
isHoverable
position="bottom"
>
<WidgetDescription>{widget.description}</WidgetDescription>
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/modals/widgetBuilder/addToDashboardModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,7 @@ function AddToDashboardModal({
value: 'new',
disabled: hasReachedDashboardLimit || isLoading,
tooltip: hasReachedDashboardLimit ? limitMessage : undefined,
tooltipOptions: {position: 'right', isHoverable: true},
tooltipOptions: {position: 'right'},
} satisfies SelectValue<string>,
...dashboards
.filter(dashboard =>
Expand Down
1 change: 0 additions & 1 deletion static/app/components/onboarding/productSelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -551,7 +551,6 @@ function Product({
</Stack>
))
}
isHoverable
>
<ProductButton
onClick={disabled?.onClick ?? onClick}
Expand Down
1 change: 0 additions & 1 deletion static/app/components/projectList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ export function ProjectList({
{numCollapsedProjects > 0 && (
<Tooltip
skipWrapper
isHoverable
disabled={collapsedProjectsTooltip === null}
title={
collapsedProjectsTooltip ? (
Expand Down
4 changes: 0 additions & 4 deletions static/app/components/questionTooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export default Storybook.story('QuestionTooltip', story => {
size="lg"
position="top"
title="The top selectors your users have dead clicked on (i.e., a user click that does not result in any page activity after 7 seconds)."
isHoverable
/>
</Flex>
<p>
Expand Down Expand Up @@ -81,9 +80,6 @@ export default Storybook.story('QuestionTooltip', story => {
<li>
<Storybook.JSXProperty name="containerDisplayMode" value />
</li>
<li>
<Storybook.JSXProperty name="isHoverable" value />
</li>
<li>
<Storybook.JSXProperty name="overlayStyle" value />
</li>
Expand Down
7 changes: 1 addition & 6 deletions static/app/components/questionTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,7 @@ import {SvgIcon, type SVGIconProps} from 'sentry/icons/svgIcon';
interface QuestionProps extends Partial<
Pick<
TooltipProps,
| 'containerDisplayMode'
| 'isHoverable'
| 'overlayStyle'
| 'position'
| 'skipWrapper'
| 'delay'
'containerDisplayMode' | 'overlayStyle' | 'position' | 'skipWrapper' | 'delay'
>
> {
/**
Expand Down
1 change: 0 additions & 1 deletion static/app/components/replays/breadcrumbs/replayComparisonModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export default function ReplayComparisonModal({
<Title>
{t('Hydration Error')}
<Tooltip
isHoverable
title={tct(
'This modal helps with debugging hydration errors by diffing the DOM before and after the app hydrated. [boldBefore:Before] refers to the HTML rendered on the server. [boldAfter:After] refers to the HTML rendered on the client. Read more about [link:resolving hydration errors].',
{
Expand Down
7 changes: 1 addition & 6 deletions static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,12 +157,7 @@ function Event({

return (
<IconPosition style={{marginLeft: `${markerWidth / 2}px`}}>
<Tooltip
title={title}
overlayStyle={overlayStyle}
containerDisplayMode="grid"
isHoverable
>
<Tooltip title={title} overlayStyle={overlayStyle} containerDisplayMode="grid">
<IconNode
colorTokens={sortedUniqueColorTokens}
frameCount={frameCount}
Expand Down
6 changes: 1 addition & 5 deletions static/app/components/replays/breadcrumbs/selectorList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,7 @@ export function SelectorList({frame}: {frame: ClickFrame}) {
return (
<Fragment>
<span>{selectorPrefix}</span>
<Tooltip
title={t('Search by this component')}
containerDisplayMode="inline"
isHoverable
>
<Tooltip title={t('Search by this component')} containerDisplayMode="inline">
<Link
to={{
pathname: makeReplaysPathname({
Expand Down
1 change: 0 additions & 1 deletion static/app/components/replays/breadcrumbs/timelineGaps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ export function TimelineGaps({durationMs, startTimestampMs, videoEvents}: Props)
>
<Tooltip
title={t('Video Unavailable')}
isHoverable
containerDisplayMode="block"
position="top"
>
Expand Down
1 change: 0 additions & 1 deletion static/app/components/replays/replayCurrentUrl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ export function ReplayCurrentUrl() {
),
}
)}
isHoverable
>
<TextCopyInput aria-label={t('Current URL')} size="sm">
{url}
Expand Down
1 change: 0 additions & 1 deletion static/app/components/replays/replayTagsTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ export function ReplayTagsTableRow({name, values, generateUrl}: Props) {
title={
expandedViewKeys.includes(name) ? renderValueList(values) : renderTagValue
}
isHoverable
showOnlyOnOverflow
>
{renderTagValue}
Expand Down
Loading
Loading