chore(suite): remove needless and confusing 'disabled' prop from tooltip

trezor · Feb 6, 2025 · c9eb8db · c9eb8db
1 parent 2852a5c
commit c9eb8db
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 19 deletions.
diff --git a/packages/components/src/components/Tooltip/Tooltip.stories.tsx b/packages/components/src/components/Tooltip/Tooltip.stories.tsx
@@ -6,13 +6,14 @@ import styled from 'styled-components';
 
 import { Elevation, mapElevationToBackground, spacingsPx, zIndices } from '@trezor/theme';
 
-import { Tooltip as TooltipComponent, TooltipProps } from './Tooltip';
+import { Tooltip as TooltipComponent, TooltipProps, allowedTooltipFrameProps } from './Tooltip';
 import {
     TOOLTIP_DELAY_LONG,
     TOOLTIP_DELAY_NONE,
     TOOLTIP_DELAY_NORMAL,
     TOOLTIP_DELAY_SHORT,
 } from './TooltipDelay';
+import { getFramePropsStory } from '../../utils/frameProps';
 import { ElevationContext, useElevation } from '../ElevationContext/ElevationContext';
 import { Button } from '../buttons/Button/Button';
 
@@ -107,6 +108,7 @@ export const Tooltip: StoryObj<TooltipProps> = {
         offset: 10,
         delayHide: TOOLTIP_DELAY_SHORT,
         delayShow: TOOLTIP_DELAY_SHORT,
+        ...getFramePropsStory(allowedTooltipFrameProps).args,
     },
     argTypes: {
         hasArrow: {
@@ -176,5 +178,6 @@ export const Tooltip: StoryObj<TooltipProps> = {
             control: 'select',
             options: DELAYS,
         },
+        ...getFramePropsStory(allowedTooltipFrameProps).argTypes,
     },
 };
diff --git a/packages/components/src/components/Tooltip/Tooltip.test.tsx b/packages/components/src/components/Tooltip/Tooltip.test.tsx
@@ -74,4 +74,26 @@ describe('Tooltip', () => {
         const parent = triggerBefore.parentElement;
         expect(parent).toHaveAttribute('data-state', 'closed');
     });
+
+    it('should apply the cursor prop to the content wrapper', () => {
+        const tooltipContent = 'Tooltip Content';
+        render(
+            <Tooltip content={tooltipContent} cursor="pointer">
+                <button>Hover me</button>
+            </Tooltip>,
+        );
+
+        expect(screen.getByText('Hover me').parentElement).toHaveStyle({ cursor: 'pointer' });
+    });
+
+    it('should should apply the default=help cursor when the passed cursor is undefined', () => {
+        const tooltipContent = 'Tooltip Content';
+        render(
+            <Tooltip content={tooltipContent} cursor={undefined}>
+                <button>Hover me</button>
+            </Tooltip>,
+        );
+
+        expect(screen.getByText('Hover me').parentElement).toHaveStyle({ cursor: 'help' });
+    });
 });
diff --git a/packages/components/src/components/Tooltip/Tooltip.tsx b/packages/components/src/components/Tooltip/Tooltip.tsx
@@ -11,25 +11,37 @@ import { TooltipBox, TooltipBoxProps } from './TooltipBox';
 import { TOOLTIP_DELAY_SHORT, TooltipDelay } from './TooltipDelay';
 import { TooltipContent, TooltipFloatingUi, TooltipTrigger } from './TooltipFloatingUi';
 import { intermediaryTheme } from '../../config/colors';
+import {
+    FrameProps,
+    FramePropsKeys,
+    pickAndPrepareFrameProps,
+    withFrameProps,
+} from '../../utils/frameProps';
+import { TransientProps } from '../../utils/transientProps';
 import { Icon } from '../Icon/Icon';
 
-export type Cursor = 'inherit' | 'pointer' | 'help' | 'default' | 'not-allowed';
+export type TooltipInteraction = 'none' | 'hover';
+
+export const allowedTooltipFrameProps = ['cursor'] as const satisfies FramePropsKeys[];
+type AllowedFrameProps = Pick<FrameProps, (typeof allowedTooltipFrameProps)[number]>;
 
 const Wrapper = styled.div<{ $isFullWidth: boolean }>`
     width: ${({ $isFullWidth }) => ($isFullWidth ? '100%' : 'auto')};
 `;
 
-const Content = styled.div<{ $dashed: boolean; $isInline: boolean; $cursor: Cursor }>`
+const Content = styled.div<
+    { $dashed: boolean; $isInline: boolean } & TransientProps<AllowedFrameProps>
+>`
     display: ${({ $isInline }) => ($isInline ? 'inline-flex' : 'flex')};
     align-items: center;
     justify-content: flex-start;
     gap: ${spacingsPx.xxs};
     cursor: ${({ $cursor }) => $cursor};
     border-bottom: ${({ $dashed, theme }) =>
         $dashed && `1.5px dotted ${transparentize(0.66, theme.textSubdued)}`};
-`;
 
-export type TooltipInteraction = 'none' | 'hover';
+    ${withFrameProps}
+`;
 
 type ManagedModeProps = {
     isOpen?: boolean;
@@ -46,22 +58,20 @@ type UnmanagedModeProps = {
 };
 
 type TooltipUiProps = {
-    isActive?: boolean; // Determines if the tooltip is activated - if it listens and reacts to the interaction
+    isActive?: boolean;
     children: ReactNode;
     className?: string;
     dashed?: boolean;
-    disabled?: boolean;
     offset?: number;
     shift?: ShiftOptions;
-    cursor?: Cursor;
     isFullWidth?: boolean;
     placement?: Placement;
     hasArrow?: boolean;
     hasIcon?: boolean;
     appendTo?: HTMLElement | null | MutableRefObject<HTMLElement | null>;
     zIndex?: ZIndexValues;
     isInline?: boolean;
-};
+} & AllowedFrameProps;
 
 export type TooltipProps = (ManagedModeProps | UnmanagedModeProps) &
     TooltipUiProps &
@@ -70,15 +80,13 @@ export type TooltipProps = (ManagedModeProps | UnmanagedModeProps) &
 export const Tooltip = ({
     isActive = true, // NOTE: determines, if the tooltip is actually working - is displayed, reacts to the events
     placement = 'top',
-    disabled = false, // NOTE: determines the appearance of the cursor over the tooltip trigger
     children,
     isLarge = false,
     dashed = false,
     delayShow = TOOLTIP_DELAY_SHORT,
     delayHide = TOOLTIP_DELAY_SHORT,
     maxWidth = 400,
     offset = spacings.sm,
-    cursor = 'help',
     content,
     addon,
     title,
@@ -92,7 +100,10 @@ export const Tooltip = ({
     appendTo,
     shift,
     zIndex = zIndices.tooltip,
+    ...rest
 }: TooltipProps) => {
+    const frameProps = pickAndPrepareFrameProps(rest, allowedTooltipFrameProps);
+
     if (!content || !children) {
         return <>{children}</>;
     }
@@ -111,12 +122,7 @@ export const Tooltip = ({
                 delay={delayConfiguration}
             >
                 <TooltipTrigger>
-                    <Content
-                        $dashed={dashed}
-                        $isInline={isInline}
-                        $cursor={disabled ? 'not-allowed' : cursor}
-                        as={elType}
-                    >
+                    <Content $dashed={dashed} $isInline={isInline} as={elType} {...frameProps}>
                         {children}
                         {hasIcon && <Icon name="question" size="medium" />}
                     </Content>

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx
@@ -137,6 +137,7 @@ export const DeviceSelector = () => {
                     isActive={discoveryInProgress}
                     isFullWidth
                     placement="bottom"
+                    cursor="not-allowed"
                     content={<Translation id="TR_UNAVAILABLE_WHILE_LOADING" />}
                 >
                     <InnerContainer

diff --git a/packages/suite/src/views/dashboard/PromoBanner.tsx b/packages/suite/src/views/dashboard/PromoBanner.tsx
@@ -136,7 +136,7 @@ const StoreBadge = ({
     return (
         <Tooltip
             isOpen={isTooltipOpen}
-            disabled={isMobileLayout}
+            cursor={isMobileLayout ? 'not-allowed' : undefined}
             content={
                 <Column alignItems="center">
                     <StoreTitle

diff --git a/packages/suite/src/views/settings/SettingsDevice/FirmwareVersion.tsx b/packages/suite/src/views/settings/SettingsDevice/FirmwareVersion.tsx
@@ -100,7 +100,10 @@ export const FirmwareVersion = ({ isDeviceLocked }: FirmwareVersionProps) => {
                                 id="TR_YOUR_FIRMWARE_VERSION"
                                 values={{
                                     version: (
-                                        <VersionTooltip content={revision} disabled={!revision}>
+                                        <VersionTooltip
+                                            content={revision}
+                                            cursor={!revision ? 'not-allowed' : undefined}
+                                        >
                                             {revision ? (
                                                 <TrezorLink href={changelogUrl} variant="nostyle">
                                                     <GithubButton />