Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 95df2d6

Browse files
authored
feat(settings): improve tooltips (#2305)
* feat(settings): improve tooltips Signed-off-by: Adam Setch <adam.setch@outlook.com> * feat(settings): improve tooltips Signed-off-by: Adam Setch <adam.setch@outlook.com> * feat(settings): improve tooltips Signed-off-by: Adam Setch <adam.setch@outlook.com> * feat(settings): improve tooltips Signed-off-by: Adam Setch <adam.setch@outlook.com> --------- Signed-off-by: Adam Setch <adam.setch@outlook.com>
1 parent 3835d0c commit 95df2d6

16 files changed

+598
-334
lines changed
Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { render, screen } from '@testing-library/react';
22
import userEvent from '@testing-library/user-event';
33

4+
import { BaseStyles, ThemeProvider } from '@primer/react';
5+
6+
import { mockSettings } from '../../__mocks__/state-mocks';
7+
import { AppContext } from '../../context/App';
48
import { type ITooltip, Tooltip } from './Tooltip';
59

610
describe('renderer/components/fields/Tooltip.tsx', () => {
@@ -10,19 +14,44 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
1014
};
1115

1216
it('should render', () => {
13-
const tree = render(<Tooltip {...props} />);
14-
expect(tree).toMatchSnapshot();
17+
render(
18+
<ThemeProvider>
19+
<BaseStyles>
20+
<AppContext.Provider
21+
value={{
22+
settings: mockSettings,
23+
}}
24+
>
25+
<Tooltip {...props} />
26+
</AppContext.Provider>
27+
</BaseStyles>
28+
</ThemeProvider>,
29+
);
30+
31+
expect(screen.getByTestId('tooltip-test')).toBeInTheDocument();
1532
});
1633

1734
it('should display on mouse enter / leave', async () => {
18-
render(<Tooltip {...props} />);
35+
render(
36+
<ThemeProvider>
37+
<BaseStyles>
38+
<AppContext.Provider
39+
value={{
40+
settings: mockSettings,
41+
}}
42+
>
43+
<Tooltip {...props} />
44+
</AppContext.Provider>
45+
</BaseStyles>
46+
</ThemeProvider>,
47+
);
1948

2049
const tooltipElement = screen.getByTestId('tooltip-test');
2150

2251
await userEvent.hover(tooltipElement);
23-
expect(tooltipElement).toMatchSnapshot();
52+
expect(screen.queryByText(props.tooltipasstring)).toBeInTheDocument();
2453

2554
await userEvent.unhover(tooltipElement);
26-
expect(tooltipElement).toMatchSnapshot();
55+
expect(screen.queryByText(props.tooltipasstring)).not.toBeInTheDocument();
2756
});
2857
});
Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { type FC, type ReactNode, useState } from 'react';
22

33
import { QuestionIcon } from '@primer/octicons-react';
4+
import { AnchoredOverlay } from '@primer/react';
45

56
export interface ITooltip {
67
name: string;
@@ -11,23 +12,31 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
1112
const [showTooltip, setShowTooltip] = useState(false);
1213

1314
return (
14-
<button
15-
aria-label={props.name}
16-
className="relative"
17-
data-testid={`tooltip-${props.name}`}
18-
id={props.name}
19-
onMouseEnter={() => setShowTooltip(true)}
20-
onMouseLeave={() => setShowTooltip(false)}
21-
type="button"
22-
>
23-
<QuestionIcon className="text-gitify-tooltip-icon" />
24-
{showTooltip && (
25-
<div className="absolute left-[-80px] z-10 w-30 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
26-
<div className="text-left text-xs text-gitify-font">
27-
{props.tooltip}
28-
</div>
29-
</div>
15+
<AnchoredOverlay
16+
align="center"
17+
open={showTooltip}
18+
renderAnchor={(anchorProps) => (
19+
<button
20+
{...anchorProps}
21+
aria-label={props.name}
22+
data-testid={`tooltip-${props.name}`}
23+
id={props.name}
24+
onMouseEnter={() => setShowTooltip(true)}
25+
onMouseLeave={() => setShowTooltip(false)}
26+
type="button"
27+
>
28+
<QuestionIcon className="text-gitify-tooltip-icon" />
29+
</button>
3030
)}
31-
</button>
31+
side="outside-bottom"
32+
>
33+
<div
34+
className={
35+
'z-10 w-30 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout text-left text-xs text-gitify-font'
36+
}
37+
>
38+
{props.tooltip}
39+
</div>
40+
</AnchoredOverlay>
3241
);
3342
};

‎src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap‎

Lines changed: 6 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap‎

Lines changed: 0 additions & 175 deletions
This file was deleted.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /