Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat!: merge old Tooltip with ActionTooltip and introduce new Tooltip (…
- Loading branch information
1 parent
84f8c97
commit 56aa587
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,85 @@ | ||
| import React from 'react'; | ||
|
|
||
| import {useForkRef} from '../../hooks'; | ||
| import {type TooltipDelayProps, useTooltipVisible} from '../../hooks/private'; | ||
| import {Hotkey, type HotkeyProps} from '../Hotkey'; | ||
| import {Popup, type PopupPlacement} from '../Popup'; | ||
| import type {DOMProps, QAProps} from '../types'; | ||
| import {block} from '../utils/cn'; | ||
|
|
||
| import './ActionTooltip.scss'; | ||
|
|
||
| export interface ActionTooltipProps extends QAProps, DOMProps, TooltipDelayProps { | ||
| id?: string; | ||
| disablePortal?: boolean; | ||
| contentClassName?: string; | ||
| disabled?: boolean; | ||
| placement?: PopupPlacement; | ||
| children: React.ReactElement; | ||
| title: string; | ||
| hotkey?: HotkeyProps['value']; | ||
| description?: React.ReactNode; | ||
| } | ||
|
|
||
| const DEFAULT_PLACEMENT: PopupPlacement = ['bottom', 'top']; | ||
| const b = block('action-tooltip'); | ||
|
|
||
| export function ActionTooltip(props: ActionTooltipProps) { | ||
| const { | ||
| placement = DEFAULT_PLACEMENT, | ||
| title, | ||
| hotkey, | ||
| children, | ||
| className, | ||
| contentClassName, | ||
| description, | ||
| disabled = false, | ||
| style, | ||
| qa, | ||
| id, | ||
| disablePortal, | ||
| ...delayProps | ||
| } = props; | ||
|
|
||
| const [anchorElement, setAnchorElement] = React.useState<HTMLElement | null>(null); | ||
| const tooltipVisible = useTooltipVisible(anchorElement, delayProps); | ||
|
|
||
| const renderPopup = () => { | ||
| return ( | ||
| <Popup | ||
| id={id} | ||
| disablePortal={disablePortal} | ||
| role="tooltip" | ||
| className={b(null, className)} | ||
| style={style} | ||
| open={tooltipVisible && !disabled} | ||
| placement={placement} | ||
| anchorRef={{current: anchorElement}} | ||
| disableEscapeKeyDown | ||
| disableOutsideClick | ||
| disableLayer | ||
| qa={qa} | ||
| > | ||
| <div className={b('content', contentClassName)}> | ||
| <div className={b('heading')}> | ||
| <div className={b('title')}>{title}</div> | ||
| {hotkey && <Hotkey view="dark" value={hotkey} className={b('hotkey')} />} | ||
| </div> | ||
| {description && <div className={b('description')}>{description}</div>} | ||
| </div> | ||
| </Popup> | ||
| ); | ||
| }; | ||
|
|
||
| const child = React.Children.only(children); | ||
| const childRef = (child as any).ref; | ||
|
|
||
| const ref = useForkRef(setAnchorElement, childRef); | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| {React.cloneElement(child, {ref})} | ||
| {anchorElement ? renderPopup() : null} | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!--GITHUB_BLOCK--> | ||
|
|
||
| # ActionTooltip | ||
|
|
||
| <!--/GITHUB_BLOCK--> | ||
|
|
||
| A simple text tip that uses its children node as an anchor. For correct functioning, the anchor node | ||
| must be able to handle mouse events and focus or blur events. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```tsx | ||
| import {ActionTooltip} from '@gravity-ui/uikit'; | ||
|
|
||
| <ActionTooltip title="Content"> | ||
| <div tabIndex={0}>Anchor</div> | ||
| </ActionTooltip>; | ||
| ``` | ||
|
|
||
| ## Properties | ||
|
|
||
| | Name | Description | Type | Default | | ||
| | :--------------- | --------------------------------------------------------------------------------------- | :----------------------------------------------: | :-----: | | ||
| | children | An anchor element for a `Tooltip`. Must accept a `ref` that will provide a DOM element. | `React.ReactElement` | | | ||
| | closeDelay | Number of ms to delay hiding the `Tooltip` after the hover ends | `number` | `0` | | ||
| | openDelay | Number of ms to delay showing the `Tooltip` after the hover begins | `number` | `250` | | ||
| | placement | `Tooltip` position relative to its anchor | [`PopupPlacement`](../Popup/README.md#placement) | | | ||
| | qa | HTML `data-qa` attribute, used in tests | `string` | | | ||
| | title | Tooltip title text | `string` | | | ||
| | description | Tooltip description text | `string` | | | ||
| | hotkey | Hot keys that are assigned to an interface action. | `string` | | | ||
| | id | This prop is used to help implement the accessibility logic. | `string` | | | ||
| | disablePortal | Do not use Portal for children | `boolean` | | | ||
| | contentClassName | HTML class attribute for content node | `string` | | | ||
| | disabled | Prevent popup from opening | `boolean` | `false` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import React from 'react'; | ||
|
|
||
| import {createEvent, fireEvent, render, screen} from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| import {ActionTooltip} from '../ActionTooltip'; | ||
|
|
||
| export function fireAnimationEndEvent(el: Node | Window, animationName = 'animation') { | ||
| const ev = createEvent.animationEnd(el, {animationName}); | ||
| Object.assign(ev, { | ||
| animationName, | ||
| }); | ||
|
|
||
| fireEvent(el, ev); | ||
| } | ||
|
|
||
| test('should preserve ref on anchor element', () => { | ||
| const ref = jest.fn(); | ||
| render( | ||
| <ActionTooltip title="text"> | ||
| <button ref={ref} /> | ||
| </ActionTooltip>, | ||
| ); | ||
|
|
||
| expect(ref).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| test('should show tooltip on hover and hide on un hover', async () => { | ||
| const user = userEvent.setup(); | ||
|
|
||
| render( | ||
| <ActionTooltip title="test content"> | ||
| <button /> | ||
| </ActionTooltip>, | ||
| ); | ||
|
|
||
| const button = await screen.findByRole('button'); | ||
|
|
||
| await user.hover(button); | ||
|
|
||
| const tooltip = await screen.findByRole('tooltip'); | ||
|
|
||
| expect(tooltip).toBeVisible(); | ||
|
|
||
| await user.unhover(button); | ||
|
|
||
| fireAnimationEndEvent(tooltip); | ||
|
|
||
| expect(tooltip).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('should show tooltip on focus and hide on blur', async () => { | ||
| const user = userEvent.setup(); | ||
| render( | ||
| <ActionTooltip title="test content"> | ||
| <button /> | ||
| </ActionTooltip>, | ||
| ); | ||
|
|
||
| const button = await screen.findByRole('button'); | ||
|
|
||
| await user.tab(); | ||
| expect(button).toHaveFocus(); | ||
|
|
||
| const tooltip = await screen.findByRole('tooltip'); | ||
|
|
||
| expect(tooltip).toBeVisible(); | ||
|
|
||
| await user.tab(); | ||
|
|
||
| fireAnimationEndEvent(tooltip); | ||
|
|
||
| expect(button).not.toHaveFocus(); | ||
| expect(tooltip).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('should hide on press Escape', async () => { | ||
| const user = userEvent.setup(); | ||
| render( | ||
| <ActionTooltip title="test content"> | ||
| <button /> | ||
| </ActionTooltip>, | ||
| ); | ||
|
|
||
| const button = await screen.findByRole('button'); | ||
|
|
||
| await user.tab(); | ||
| expect(button).toHaveFocus(); | ||
|
|
||
| const tooltip = await screen.findByRole('tooltip'); | ||
|
|
||
| expect(tooltip).toBeVisible(); | ||
|
|
||
| await user.keyboard('[Escape]'); | ||
|
|
||
| fireAnimationEndEvent(tooltip); | ||
|
|
||
| expect(button).toHaveFocus(); | ||
| expect(tooltip).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('should show on focus and hide on un hover', async () => { | ||
| const user = userEvent.setup(); | ||
| render( | ||
| <ActionTooltip title="test content"> | ||
| <button /> | ||
| </ActionTooltip>, | ||
| ); | ||
|
|
||
| const button = screen.getByRole('button'); | ||
|
|
||
| button.focus(); | ||
|
|
||
| const tooltip = await screen.findByRole('tooltip'); | ||
|
|
||
| expect(tooltip).toBeVisible(); | ||
|
|
||
| await user.hover(button); | ||
|
|
||
| expect(tooltip).toBeVisible(); | ||
|
|
||
| await user.unhover(button); | ||
|
|
||
| fireAnimationEndEvent(tooltip); | ||
|
|
||
| expect(button).toHaveFocus(); | ||
| expect(tooltip).not.toBeInTheDocument(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.