LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Fix/1008: Tooltip visibility (#1027)

Browse Source 
* fix: tooltip visibility

* fix: remove event testing for now and check only controlled tooltips

* fix: remove unused import
This commit is contained in:
botond 2022-08-15 18:25:18 +01:00 committed by GitHub
parent 900205ed12
commit f6fe14dd0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
libs/ui-toolkit/src/components/tooltip/tooltip.spec.tsx
View File

@ -1,28 +1,29 @@
import { fireEvent, render, screen } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import { Tooltip } from './tooltip';
it('Renders a tooltip', async () => {
const props = {
description: 'description',
children: <button>Tooltip</button>,
open: true,
};
render(<Tooltip {...props} />);
// radix applies the data-state attribute
expect(screen.getByRole('button')).toHaveAttribute('data-state', 'closed');
fireEvent.mouseOver(screen.getByRole('button'));
expect(await screen.findByRole('tooltip')).toBeInTheDocument();
const trigger = screen.getByRole('button');
expect(trigger).toHaveAttribute('data-state', 'instant-open');
expect(screen.queryByRole('tooltip')).toBeInTheDocument();
});
it('Doesnt render a tooltip if no description provided', () => {
const props = {
description: undefined,
children: <button>Tooltip</button>,
open: true,
};
render(<Tooltip {...props} />);
expect(screen.getByRole('button')).not.toHaveAttribute(
'data-state',
'closed'
);
fireEvent.mouseOver(screen.getByRole('button'));
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
});

35
libs/ui-toolkit/src/components/tooltip/tooltip.tsx
View File

@ -6,6 +6,7 @@ import {
Trigger,
Content,
Arrow,
Portal,
} from '@radix-ui/react-tooltip';
export interface TooltipProps {
@ -21,21 +22,25 @@ export const Tooltip = ({ children, description, open, align }: TooltipProps) =>
<Provider delayDuration={200} skipDelayDuration={100}>
<Root open={open}>
<Trigger asChild>{children}</Trigger>
<Content align={align} alignOffset={8}>
<div className="relative z-0 p-8 bg-black-50 border border-black-60 text-white rounded-sm max-w-sm text-ui">
{description}
</div>
<Arrow
width={10}
height={5}
className="mx-8 fill-black-60 dark:fill-white-60 z-0 translate-x-[1px] translate-y-[-1px]"
/>
<Arrow
width={8}
height={4}
className="z-[1] mx-8 translate-y-[-1px] fill-black-50"
/>
</Content>
{description && (
<Portal>
<Content align={align} alignOffset={8}>
<div className="relative z-0 p-8 bg-black-50 border border-black-60 text-white rounded-sm max-w-sm text-ui">
{description}
</div>
<Arrow
width={10}
height={5}
className="fill-black-60 dark:fill-white-60 z-0 translate-x-[1px] translate-y-[-1px]"
/>
<Arrow
width={8}
height={4}
className="z-[1] translate-y-[-1px] fill-black-50"
/>
</Content>
</Portal>
)}
</Root>
</Provider>
) : (

2
package.json
View File

@ -26,7 +26,7 @@
"@radix-ui/react-select": "^0.1.1",
"@radix-ui/react-slider": "^1.0.0",
"@radix-ui/react-tabs": "^0.1.5",
"@radix-ui/react-tooltip": "^0.1.7",
"@radix-ui/react-tooltip": "^1.0.0",
"@sentry/nextjs": "^6.19.3",
"@sentry/react": "^6.19.2",
"@sentry/tracing": "^6.19.2",

42
yarn.lock
View File

@ -3791,26 +3791,24 @@
"@radix-ui/react-roving-focus" "0.1.5"
"@radix-ui/react-use-controllable-state" "0.1.0"
"@radix-ui/react-tooltip@^0.1.7":
version "0.1.7"
resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3"
integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==
"@radix-ui/react-tooltip@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.0.tgz#f7fcecf2bac5c31cd14666b5acd056015fc21646"
integrity sha512-RB06pov+O4Npy10ei1C6fsyB9QoOjz7Ubo8Sl3qdKtLgkL9iI96925DYtH0bxx6MH6YB2FuzLU6B75qn3AQQQw==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/primitive" "0.1.0"
"@radix-ui/react-compose-refs" "0.1.0"
"@radix-ui/react-context" "0.1.1"
"@radix-ui/react-id" "0.1.5"
"@radix-ui/react-popper" "0.1.4"
"@radix-ui/react-portal" "0.1.4"
"@radix-ui/react-presence" "0.1.2"
"@radix-ui/react-primitive" "0.1.4"
"@radix-ui/react-slot" "0.1.2"
"@radix-ui/react-use-controllable-state" "0.1.0"
"@radix-ui/react-use-escape-keydown" "0.1.0"
"@radix-ui/react-use-previous" "0.1.1"
"@radix-ui/react-use-rect" "0.1.1"
"@radix-ui/react-visually-hidden" "0.1.4"
"@radix-ui/primitive" "1.0.0"
"@radix-ui/react-compose-refs" "1.0.0"
"@radix-ui/react-context" "1.0.0"
"@radix-ui/react-dismissable-layer" "1.0.0"
"@radix-ui/react-id" "1.0.0"
"@radix-ui/react-popper" "1.0.0"
"@radix-ui/react-portal" "1.0.0"
"@radix-ui/react-presence" "1.0.0"
"@radix-ui/react-primitive" "1.0.0"
"@radix-ui/react-slot" "1.0.0"
"@radix-ui/react-use-controllable-state" "1.0.0"
"@radix-ui/react-visually-hidden" "1.0.0"
"@radix-ui/react-use-body-pointer-events@0.1.1":
version "0.1.1"
@ -3940,6 +3938,14 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-primitive" "0.1.4"
"@radix-ui/react-visually-hidden@1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz#4d69d7e3b6d21ee4678ed6de5215dcd068394401"
integrity sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-primitive" "1.0.0"
"@radix-ui/rect@0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419"