Skip to content

Commit 1a59190

Browse files
mlaursenmlaursen
committed
docs(tooltip): Remove documentation around Tooltipped component
Closes #1367
1 parent b30f1bf commit 1a59190

28 files changed

+487
-278
lines changed

‎packages/documentation/src/components/AppBarAction.tsx

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
AppBarAction as RMDAppBarAction,
44
AppBarActionProps,
55
} from "@react-md/app-bar";
6-
import { Tooltipped } from "@react-md/tooltip";
6+
import { Tooltip, useTooltip } from "@react-md/tooltip";
77

88
interface Props extends AppBarActionProps {
99
id: string;
@@ -13,25 +13,35 @@ interface Props extends AppBarActionProps {
1313
export default function AppBarAction({
1414
id,
1515
tooltip,
16+
onClick,
17+
onBlur,
18+
onFocus,
19+
onKeyDown,
1620
onMouseEnter,
1721
onMouseLeave,
1822
onTouchStart,
19-
onFocus,
20-
onKeyDown,
23+
onContextMenu,
2124
children,
2225
...props
2326
}: Props): ReactElement {
27+
const { elementProps, tooltipProps } = useTooltip({
28+
baseId: id,
29+
onClick,
30+
onBlur,
31+
onFocus,
32+
onMouseEnter,
33+
onMouseLeave,
34+
onKeyDown,
35+
onTouchStart,
36+
onContextMenu,
37+
});
38+
2439
return (
25-
<Tooltipped
26-
id={id}
27-
tooltip={tooltip}
28-
onMouseEnter={onMouseEnter}
29-
onMouseLeave={onMouseLeave}
30-
onTouchStart={onTouchStart}
31-
onFocus={onFocus}
32-
onKeyDown={onKeyDown}
33-
>
34-
<RMDAppBarAction {...props}>{children}</RMDAppBarAction>
35-
</Tooltipped>
40+
<>
41+
<RMDAppBarAction {...props} {...(tooltip ? elementProps : { id })}>
42+
{children}
43+
</RMDAppBarAction>
44+
<Tooltip {...tooltipProps}>{tooltip}</Tooltip>
45+
</>
3646
);
3747
}

‎packages/documentation/src/components/AppBarNav.tsx

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ReactElement, ReactNode } from "react";
22
import { AppBarNav as RMDAppBarNav, AppBarNavProps } from "@react-md/app-bar";
3-
import { Tooltipped } from "@react-md/tooltip";
3+
import { Tooltip, useTooltip } from "@react-md/tooltip";
44

55
interface Props extends AppBarNavProps {
66
id: string;
@@ -10,25 +10,35 @@ interface Props extends AppBarNavProps {
1010
export default function AppBarNav({
1111
id,
1212
tooltip,
13+
onClick,
14+
onBlur,
15+
onFocus,
16+
onKeyDown,
1317
onMouseEnter,
1418
onMouseLeave,
1519
onTouchStart,
16-
onFocus,
17-
onKeyDown,
20+
onContextMenu,
1821
children,
1922
...props
2023
}: Props): ReactElement {
24+
const { elementProps, tooltipProps } = useTooltip({
25+
baseId: id,
26+
onClick,
27+
onBlur,
28+
onFocus,
29+
onMouseEnter,
30+
onMouseLeave,
31+
onKeyDown,
32+
onTouchStart,
33+
onContextMenu,
34+
});
35+
2136
return (
22-
<Tooltipped
23-
id={id}
24-
tooltip={tooltip}
25-
onMouseEnter={onMouseEnter}
26-
onMouseLeave={onMouseLeave}
27-
onTouchStart={onTouchStart}
28-
onFocus={onFocus}
29-
onKeyDown={onKeyDown}
30-
>
31-
<RMDAppBarNav {...props}>{children}</RMDAppBarNav>
32-
</Tooltipped>
37+
<>
38+
<RMDAppBarNav {...props} {...(tooltip ? elementProps : { id })}>
39+
{children}
40+
</RMDAppBarNav>
41+
<Tooltip {...tooltipProps}>{tooltip}</Tooltip>
42+
</>
3343
);
3444
}

‎packages/documentation/src/components/AppBarTitle.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
AppBarTitle as RMDAppBarTitle,
44
AppBarTitleProps,
55
} from "@react-md/app-bar";
6-
import { Tooltipped } from "@react-md/tooltip";
6+
import { Tooltip, useTooltip } from "@react-md/tooltip";
77
import { useResizeObserver } from "@react-md/utils";
88

99
import { useId } from "./IdProvider";
@@ -41,16 +41,22 @@ export default function AppBarTitle({
4141
const [, refHandler] = useResizeObserver(updateTooltip, {
4242
disableHeight: true,
4343
});
44+
const baseId = useId(id);
45+
const { elementProps, tooltipProps } = useTooltip({
46+
baseId,
47+
});
4448

4549
return (
46-
<Tooltipped id={useId(id)} tooltip={tooltip}>
50+
<>
4751
<RMDAppBarTitle
4852
{...props}
53+
{...(tooltip ? elementProps : { id: baseId })}
4954
ref={refHandler}
5055
tabIndex={tooltip ? 0 : undefined}
5156
>
5257
{children}
5358
</RMDAppBarTitle>
54-
</Tooltipped>
59+
<Tooltip {...tooltipProps}>{tooltip}</Tooltip>
60+
</>
5561
);
5662
}

‎packages/documentation/src/components/Button.tsx

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ReactElement, ReactNode } from "react";
22
import { Button as RMDButton, ButtonProps } from "@react-md/button";
3-
import { Tooltipped } from "@react-md/tooltip";
3+
import { Tooltip, useTooltip } from "@react-md/tooltip";
44

55
interface Props extends ButtonProps {
66
id: string;
@@ -10,25 +10,35 @@ interface Props extends ButtonProps {
1010
export default function Button({
1111
id,
1212
tooltip,
13+
onClick,
14+
onBlur,
15+
onFocus,
16+
onKeyDown,
1317
onMouseEnter,
1418
onMouseLeave,
1519
onTouchStart,
16-
onFocus,
17-
onKeyDown,
20+
onContextMenu,
1821
children,
1922
...props
2023
}: Props): ReactElement {
24+
const { elementProps, tooltipProps } = useTooltip({
25+
baseId: id,
26+
onClick,
27+
onBlur,
28+
onFocus,
29+
onMouseEnter,
30+
onMouseLeave,
31+
onKeyDown,
32+
onTouchStart,
33+
onContextMenu,
34+
});
35+
2136
return (
22-
<Tooltipped
23-
id={id}
24-
tooltip={tooltip}
25-
onMouseEnter={onMouseEnter}
26-
onMouseLeave={onMouseLeave}
27-
onTouchStart={onTouchStart}
28-
onFocus={onFocus}
29-
onKeyDown={onKeyDown}
30-
>
31-
<RMDButton {...props}>{children}</RMDButton>
32-
</Tooltipped>
37+
<>
38+
<RMDButton {...props} {...(tooltip ? elementProps : { id })}>
39+
{children}
40+
</RMDButton>
41+
<Tooltip {...tooltipProps}>{tooltip}</Tooltip>
42+
</>
3343
);
3444
}

‎packages/documentation/src/components/Demos/Badge/TooltippedBadgedButton.tsx

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CSSProperties, forwardRef, ReactNode } from "react";
22
import { BadgedButton, BadgedButtonProps } from "@react-md/badge";
3-
import { Tooltipped } from "@react-md/tooltip";
3+
import { Tooltip, useTooltip } from "@react-md/tooltip";
44

55
export interface TooltippedBadgedButtonProps extends BadgedButtonProps {
66
id: string;
@@ -11,20 +11,53 @@ export interface TooltippedBadgedButtonProps extends BadgedButtonProps {
1111

1212
export default forwardRef<HTMLButtonElement, TooltippedBadgedButtonProps>(
1313
function TooltippedBadgedButton(
14-
{ id, tooltip, tooltipStyle, tooltipClassName, children, ...props },
14+
{
15+
id,
16+
tooltip,
17+
tooltipStyle,
18+
tooltipClassName,
19+
onClick,
20+
onBlur,
21+
onFocus,
22+
onKeyDown,
23+
onMouseEnter,
24+
onMouseLeave,
25+
onTouchStart,
26+
onContextMenu,
27+
children,
28+
...props
29+
},
1530
ref
1631
) {
32+
const { elementProps, tooltipProps } = useTooltip({
33+
baseId: id,
34+
onClick,
35+
onBlur,
36+
onFocus,
37+
onMouseEnter,
38+
onMouseLeave,
39+
onKeyDown,
40+
onTouchStart,
41+
onContextMenu,
42+
});
43+
1744
return (
18-
<Tooltipped
19-
id={id}
20-
tooltip={tooltip}
21-
style={tooltipStyle}
22-
className={tooltipClassName}
23-
>
24-
<BadgedButton {...props} ref={ref}>
45+
<>
46+
<BadgedButton
47+
{...props}
48+
{...(tooltip ? elementProps : { id })}
49+
ref={ref}
50+
>
2551
{children}
2652
</BadgedButton>
27-
</Tooltipped>
53+
<Tooltip
54+
{...tooltipProps}
55+
style={tooltipStyle}
56+
className={tooltipClassName}
57+
>
58+
{tooltip}
59+
</Tooltip>
60+
</>
2861
);
2962
}
3063
);

‎packages/documentation/src/components/Demos/CodePreview.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ReactElement } from "react";
22
import { useRouter } from "next/router";
33
import { useActionClassName } from "@react-md/app-bar";
44
import { CodeSVGIcon } from "@react-md/material-icons";
5-
import { Tooltipped } from "@react-md/tooltip";
5+
import { Tooltip, useTooltip } from "@react-md/tooltip";
66

77
import { useCodePreference } from "components/CodePreference";
88
import LinkButton from "components/LinkButton";
@@ -22,10 +22,20 @@ export default function CodePreview({
2222
}: CodePreviewProps): ReactElement {
2323
const router = useRouter();
2424
const { pref } = useCodePreference();
25+
const { elementProps, tooltipProps } = useTooltip({
26+
baseId: `${demoId}-show-code`,
27+
onClick: sendAnalytics({
28+
name: EventName.ViewCode,
29+
lang: pref,
30+
demoName: demoTitle,
31+
packageName: folder,
32+
}),
33+
});
2534

2635
return (
27-
<Tooltipped id={`${demoId}-show-code`} tooltip="Show Code">
36+
<>
2837
<LinkButton
38+
{...elementProps}
2939
buttonType="icon"
3040
aria-label="Show Code"
3141
href={toSandbox({
@@ -34,15 +44,10 @@ export default function CodePreview({
3444
from: `${router.pathname}#${demoId}-title`,
3545
})}
3646
className={useActionClassName({ first: true })}
37-
onClick={sendAnalytics({
38-
name: EventName.ViewCode,
39-
lang: pref,
40-
demoName: demoTitle,
41-
packageName: folder,
42-
})}
4347
>
4448
<CodeSVGIcon />
4549
</LinkButton>
46-
</Tooltipped>
50+
<Tooltip {...tooltipProps}>Show Code</Tooltip>
51+
</>
4752
);
4853
}

‎packages/documentation/src/components/Demos/GithubDemoLink.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ReactElement } from "react";
2-
import { Tooltipped } from "@react-md/tooltip";
2+
import { Tooltip, useTooltip } from "@react-md/tooltip";
33

44
import GithubLink from "components/GithubLink";
55

@@ -12,9 +12,13 @@ export default function GithubDemoLink({
1212
id,
1313
href,
1414
}: GithubDemoLinkProps): ReactElement {
15+
const { elementProps, tooltipProps } = useTooltip({
16+
baseId: id,
17+
});
1518
return (
16-
<Tooltipped id={id} tooltip="View source GitHub">
17-
<GithubLink href={href} />
18-
</Tooltipped>
19+
<>
20+
<GithubLink {...elementProps} href={href} />
21+
<Tooltip {...tooltipProps}>View source GitHub</Tooltip>
22+
</>
1923
);
2024
}

‎packages/documentation/src/components/Demos/List/TwoLineExamples.tsx

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Avatar, AvatarProps } from "@react-md/avatar";
55
import { FolderSVGIcon, InfoOutlineSVGIcon } from "@react-md/material-icons";
66
import { List, ListItem, ListSubheader } from "@react-md/list";
77
import { SVGIconProps } from "@react-md/icon";
8-
import { Tooltipped } from "@react-md/tooltip";
8+
import { Tooltip, useTooltip } from "@react-md/tooltip";
99

1010
import Container from "./Container";
1111
import styles from "./TwoLineExamples.module.scss";
@@ -36,16 +36,22 @@ function InfoIcon({
3636
date,
3737
...props
3838
}: SVGIconProps & { id: string; date: Date }): ReactElement {
39+
const { elementProps, tooltipProps } = useTooltip({
40+
baseId: `${id}-info`,
41+
defaultPosition: "left",
42+
});
43+
3944
return (
40-
<Tooltipped
41-
id={`${id}-info`}
42-
tooltip={date.toLocaleString()}
43-
defaultPosition="left"
44-
>
45-
<span tabIndex={0} className={cn(styles.icon, className)}>
45+
<>
46+
<span
47+
{...elementProps}
48+
tabIndex={0}
49+
className={cn(styles.icon, className)}
50+
>
4651
<InfoOutlineSVGIcon {...props} />
4752
</span>
48-
</Tooltipped>
53+
<Tooltip {...tooltipProps}>{date.toLocaleString()}</Tooltip>
54+
</>
4955
);
5056
}
5157

0 commit comments

Comments
 (0)