diff --git a/packages/components/src/components/Tooltip/Tooltip.stories.tsx b/packages/components/src/components/Tooltip/Tooltip.stories.tsx index bf75dbfc0d7..fe801e3f9e5 100644 --- 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 = { offset: 10, delayHide: TOOLTIP_DELAY_SHORT, delayShow: TOOLTIP_DELAY_SHORT, + ...getFramePropsStory(allowedTooltipFrameProps).args, }, argTypes: { hasArrow: { @@ -176,5 +178,6 @@ export const Tooltip: StoryObj = { 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 index 6db89e8ddf7..c40c3a44f3c 100644 --- 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( + + + , + ); + + 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( + + + , + ); + + 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 index 6ad82194d5e..2a48a9bc503 100644 --- a/packages/components/src/components/Tooltip/Tooltip.tsx +++ b/packages/components/src/components/Tooltip/Tooltip.tsx @@ -11,15 +11,27 @@ 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[]; +export type AllowedFrameProps = Pick; 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 +>` display: ${({ $isInline }) => ($isInline ? 'inline-flex' : 'flex')}; align-items: center; justify-content: flex-start; @@ -27,9 +39,9 @@ const Content = styled.div<{ $dashed: boolean; $isInline: boolean; $cursor: Curs 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,14 +58,12 @@ 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; @@ -61,16 +71,15 @@ type TooltipUiProps = { appendTo?: HTMLElement | null | MutableRefObject; zIndex?: ZIndexValues; isInline?: boolean; -}; +} & AllowedFrameProps; export type TooltipProps = (ManagedModeProps | UnmanagedModeProps) & TooltipUiProps & TooltipBoxProps; export const Tooltip = ({ - isActive = true, // NOTE: determines, if the tooltip is actually working - is displayed, reacts to the events + isActive = true, placement = 'top', - disabled = false, // NOTE: determines the appearance of the cursor over the tooltip trigger children, isLarge = false, dashed = false, @@ -78,7 +87,6 @@ export const Tooltip = ({ 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} > - + {children} {hasIcon && } diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx index 7f59fae5215..07425e5e1ea 100644 --- 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={discoveryInProgress ? 'not-allowed' : undefined} content={} > { id="TR_YOUR_FIRMWARE_VERSION" values={{ version: ( - + {revision ? (