playbook_ui 11.3.0 → 11.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_button/_button.tsx +6 -6
- data/app/pb_kits/playbook/pb_circle_icon_button/{_circle_icon_button.jsx → _circle_icon_button.tsx} +6 -10
- data/app/pb_kits/playbook/pb_contact/contact.test.js +45 -1
- data/app/pb_kits/playbook/pb_currency/{_currency.jsx → _currency.tsx} +17 -12
- data/app/pb_kits/playbook/pb_date/_date.tsx +101 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +10 -9
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +80 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/{_icon_circle.jsx → _icon_circle.tsx} +2 -4
- data/app/pb_kits/playbook/pb_kit/{dateTime.js → dateTime.ts} +5 -6
- data/app/pb_kits/playbook/pb_label_pill/{_label_pill.jsx → _label_pill.tsx} +2 -4
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +1 -1
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +1 -1
- data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -1
- data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx} +7 -8
- data/app/pb_kits/playbook/pb_time/_time.tsx +92 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +1 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +1 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +1 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +1 -1
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +1 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +49 -6
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +144 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +59 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md +5 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +52 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +40 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +7 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +50 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb +37 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -2
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +10 -2
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +1 -1
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/lib/playbook/version.rb +2 -2
- metadata +25 -11
- data/app/pb_kits/playbook/pb_date/_date.jsx +0 -138
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +0 -93
- data/app/pb_kits/playbook/pb_time/_time.jsx +0 -90
@@ -0,0 +1,92 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import classnames from "classnames";
|
3
|
+
|
4
|
+
import DateTime from "../pb_kit/dateTime";
|
5
|
+
import { buildCss } from "../utilities/props";
|
6
|
+
import { globalProps } from "../utilities/globalProps";
|
7
|
+
|
8
|
+
import Body from "../pb_body/_body";
|
9
|
+
import Caption from "../pb_caption/_caption";
|
10
|
+
import Icon from "../pb_icon/_icon";
|
11
|
+
|
12
|
+
type TimeProps = {
|
13
|
+
align?: "left" | "center" | "right";
|
14
|
+
className?: string | string[];
|
15
|
+
data?: string;
|
16
|
+
date: string;
|
17
|
+
dark?: boolean;
|
18
|
+
id?: string;
|
19
|
+
showIcon?: boolean;
|
20
|
+
size?: "md" | "sm";
|
21
|
+
showTimezone?: boolean;
|
22
|
+
timeZone?: string;
|
23
|
+
};
|
24
|
+
|
25
|
+
const Time = (props: TimeProps) => {
|
26
|
+
const {
|
27
|
+
align,
|
28
|
+
className,
|
29
|
+
date,
|
30
|
+
showIcon,
|
31
|
+
size,
|
32
|
+
timeZone,
|
33
|
+
showTimezone = true,
|
34
|
+
} = props;
|
35
|
+
const classes = classnames(
|
36
|
+
buildCss("pb_time_kit", align, size),
|
37
|
+
globalProps(props),
|
38
|
+
className
|
39
|
+
);
|
40
|
+
|
41
|
+
const dateTimestamp = new DateTime({ value: date, zone: timeZone });
|
42
|
+
|
43
|
+
return (
|
44
|
+
<div className={classes}>
|
45
|
+
{showIcon && (
|
46
|
+
<>
|
47
|
+
<Body color="light" tag="span">
|
48
|
+
<Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
|
49
|
+
</Body>{" "}
|
50
|
+
</>
|
51
|
+
)}
|
52
|
+
|
53
|
+
<time dateTime={date}>
|
54
|
+
<span>
|
55
|
+
{size === "md" ? (
|
56
|
+
<>
|
57
|
+
<Body
|
58
|
+
className="pb_time"
|
59
|
+
tag="span"
|
60
|
+
text={dateTimestamp.toTimeWithMeridian()}
|
61
|
+
/>{" "}
|
62
|
+
{showTimezone && (
|
63
|
+
<Body
|
64
|
+
color="light"
|
65
|
+
tag="span"
|
66
|
+
text={dateTimestamp.toTimezone()}
|
67
|
+
/>
|
68
|
+
)}
|
69
|
+
</>
|
70
|
+
) : (
|
71
|
+
<>
|
72
|
+
<Caption
|
73
|
+
color="light"
|
74
|
+
tag="span"
|
75
|
+
text={dateTimestamp.toTimeWithMeridian()}
|
76
|
+
/>{" "}
|
77
|
+
{showTimezone && (
|
78
|
+
<Caption
|
79
|
+
color="light"
|
80
|
+
tag="span"
|
81
|
+
text={dateTimestamp.toTimezone()}
|
82
|
+
/>
|
83
|
+
)}
|
84
|
+
</>
|
85
|
+
)}
|
86
|
+
</span>
|
87
|
+
</time>
|
88
|
+
</div>
|
89
|
+
);
|
90
|
+
};
|
91
|
+
|
92
|
+
export default Time;
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
|
6
|
-
import DateTime from '../pb_kit/dateTime
|
6
|
+
import DateTime from '../pb_kit/dateTime'
|
7
7
|
import { buildCss, buildDataProps } from '../utilities/props'
|
8
8
|
import { deprecatedProps, globalProps } from '../utilities/globalProps'
|
9
9
|
|
@@ -5,7 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
|
|
5
5
|
|
6
6
|
type TitleProps = {
|
7
7
|
aria?: {[key: string]: string},
|
8
|
-
children?: React.ReactChild[],
|
8
|
+
children?: React.ReactChild[] | React.ReactChild,
|
9
9
|
className?: string,
|
10
10
|
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
11
11
|
data?: {[key: string]: string},
|
@@ -23,6 +23,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
23
23
|
}
|
24
24
|
|
25
25
|
[class^="pb_tooltip_kit"] {
|
26
|
+
~ .tooltip_tooltip,
|
26
27
|
.tooltip_tooltip {
|
27
28
|
display: block;
|
28
29
|
opacity: 0;
|
@@ -52,15 +53,42 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
52
53
|
border-width: 10px;
|
53
54
|
margin-bottom: 50px;
|
54
55
|
}
|
56
|
+
|
57
|
+
&.visible,
|
55
58
|
&.show {
|
56
|
-
opacity: 1;
|
57
59
|
z-index: $z_9;
|
58
|
-
margin-bottom: $space_sm;
|
59
|
-
background-color: $white;
|
60
60
|
padding: $space_xs $space_sm;
|
61
61
|
box-shadow: $shadow_deeper;
|
62
62
|
border-radius: $border_rad_light;
|
63
|
+
}
|
63
64
|
|
65
|
+
// react only
|
66
|
+
&.visible {
|
67
|
+
color: $white;
|
68
|
+
background-color: rgba($black, $opacity_9);
|
69
|
+
&.right {
|
70
|
+
box-shadow: -8px 0 28px 0 $tooltip_shadow;
|
71
|
+
}
|
72
|
+
&.bottom {
|
73
|
+
box-shadow: 0 -12px 28px 0 $tooltip_shadow;
|
74
|
+
}
|
75
|
+
&.left {
|
76
|
+
box-shadow: 8px 0 28px 0 $tooltip_shadow;
|
77
|
+
}
|
78
|
+
// react arrow
|
79
|
+
.arrow_bg {
|
80
|
+
width: 10px;
|
81
|
+
height: 10px;
|
82
|
+
background-color: rgba($black, $opacity_9);
|
83
|
+
transform: rotate(45deg);
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
//rails only
|
88
|
+
&.show {
|
89
|
+
opacity: 1;
|
90
|
+
margin-bottom: $space_sm;
|
91
|
+
background-color: $white;
|
64
92
|
&.fade_out {
|
65
93
|
animation-name: fadeOut;
|
66
94
|
animation-duration: 150ms;
|
@@ -69,14 +97,29 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
69
97
|
}
|
70
98
|
}
|
71
99
|
}
|
100
|
+
|
101
|
+
&.dark,
|
72
102
|
&[class*=_dark]{
|
73
|
-
|
74
|
-
|
75
|
-
|
103
|
+
~.tooltip_tooltip,
|
104
|
+
.tooltip_tooltip {
|
105
|
+
//react
|
106
|
+
&.visible {
|
107
|
+
color: $charcoal;
|
108
|
+
background-color: $white;
|
109
|
+
}
|
110
|
+
//rails
|
111
|
+
&.show {
|
112
|
+
color: $white;
|
113
|
+
background-color: rgba($black, $opacity_9);
|
114
|
+
}
|
76
115
|
.arrow {
|
77
116
|
border-color: $black transparent transparent transparent;
|
78
117
|
opacity: $opacity_9;
|
79
118
|
}
|
119
|
+
// react arrow
|
120
|
+
.arrow_bg {
|
121
|
+
background-color: $white;
|
122
|
+
}
|
80
123
|
&.flipped {
|
81
124
|
.arrow {
|
82
125
|
border-color: transparent transparent $black transparent;
|
@@ -0,0 +1,144 @@
|
|
1
|
+
/* @flow*/
|
2
|
+
|
3
|
+
import React, { useRef, useState } from "react"
|
4
|
+
import classnames from "classnames"
|
5
|
+
import {
|
6
|
+
Placement,
|
7
|
+
offset,
|
8
|
+
arrow,
|
9
|
+
shift,
|
10
|
+
useFloating,
|
11
|
+
useInteractions,
|
12
|
+
useHover,
|
13
|
+
flip,
|
14
|
+
safePolygon,
|
15
|
+
} from "@floating-ui/react-dom-interactions"
|
16
|
+
import { GlobalProps, globalProps } from "../utilities/globalProps"
|
17
|
+
import { buildAriaProps, buildDataProps } from "../utilities/props"
|
18
|
+
import Flex from "../pb_flex/_flex"
|
19
|
+
|
20
|
+
type TooltipProps = {
|
21
|
+
aria?: { [key: string]: string },
|
22
|
+
data?: { [key: string]: string },
|
23
|
+
text: string,
|
24
|
+
icon?: string,
|
25
|
+
interaction?: boolean,
|
26
|
+
placement?: Placement,
|
27
|
+
children: JSX.Element,
|
28
|
+
zIndex?: Pick<GlobalProps, "ZIndex">,
|
29
|
+
} & GlobalProps
|
30
|
+
|
31
|
+
const Tooltip = (props: TooltipProps) => {
|
32
|
+
const {
|
33
|
+
aria = {},
|
34
|
+
children,
|
35
|
+
data = {},
|
36
|
+
icon = null,
|
37
|
+
interaction = false,
|
38
|
+
text,
|
39
|
+
placement: preferredPlacement = "top",
|
40
|
+
zIndex,
|
41
|
+
...rest
|
42
|
+
} = props
|
43
|
+
|
44
|
+
console.log(rest)
|
45
|
+
|
46
|
+
const dataProps: { [key: string]: any } = buildDataProps(data)
|
47
|
+
const ariaProps: { [key: string]: any } = buildAriaProps(aria)
|
48
|
+
|
49
|
+
const css = classnames(globalProps({...rest}))
|
50
|
+
const [open, setOpen] = useState(false)
|
51
|
+
const arrowRef = useRef(null)
|
52
|
+
const {
|
53
|
+
x,
|
54
|
+
y,
|
55
|
+
reference,
|
56
|
+
floating,
|
57
|
+
strategy,
|
58
|
+
context,
|
59
|
+
placement,
|
60
|
+
middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
|
61
|
+
} = useFloating({
|
62
|
+
placement: preferredPlacement,
|
63
|
+
open,
|
64
|
+
onOpenChange(open) {
|
65
|
+
setOpen(open)
|
66
|
+
},
|
67
|
+
middleware: [
|
68
|
+
offset(10),
|
69
|
+
shift(),
|
70
|
+
flip({
|
71
|
+
fallbackPlacements: ["top", "right", "bottom", "left"],
|
72
|
+
fallbackStrategy: "initialPlacement",
|
73
|
+
flipAlignment: false,
|
74
|
+
}),
|
75
|
+
arrow({
|
76
|
+
element: arrowRef,
|
77
|
+
}),
|
78
|
+
],
|
79
|
+
})
|
80
|
+
|
81
|
+
const { getFloatingProps } = useInteractions([
|
82
|
+
useHover(context, {
|
83
|
+
handleClose: interaction ? safePolygon({
|
84
|
+
blockPointerEvents: false
|
85
|
+
}) : null,
|
86
|
+
})
|
87
|
+
])
|
88
|
+
|
89
|
+
const staticSide = {
|
90
|
+
top: "bottom",
|
91
|
+
right: "left",
|
92
|
+
bottom: "top",
|
93
|
+
left: "right",
|
94
|
+
}[placement.split("-")[0]]
|
95
|
+
|
96
|
+
return (
|
97
|
+
<>
|
98
|
+
<div
|
99
|
+
ref={reference}
|
100
|
+
className={`pb_tooltip_kit ${css}`}
|
101
|
+
style={{ display: "inline-flex" }}
|
102
|
+
role="tooltip_trigger"
|
103
|
+
{...ariaProps}
|
104
|
+
{...dataProps}
|
105
|
+
>
|
106
|
+
{children}
|
107
|
+
</div>
|
108
|
+
{open && (
|
109
|
+
<div
|
110
|
+
{...getFloatingProps({
|
111
|
+
role: "tooltip",
|
112
|
+
ref: floating,
|
113
|
+
className: `tooltip_tooltip ${placement} visible`,
|
114
|
+
style: {
|
115
|
+
position: strategy,
|
116
|
+
top: y ?? 0,
|
117
|
+
left: x ?? 0,
|
118
|
+
zIndex: zIndex ?? 0,
|
119
|
+
},
|
120
|
+
})}
|
121
|
+
>
|
122
|
+
<Flex gap="xs" align="center">
|
123
|
+
{icon && (
|
124
|
+
<i className={`pb_icon_kit far fa-${icon} fa-fw`} />
|
125
|
+
)}
|
126
|
+
{text}
|
127
|
+
</Flex>
|
128
|
+
<div
|
129
|
+
ref={arrowRef}
|
130
|
+
className="arrow_bg"
|
131
|
+
style={{
|
132
|
+
position: strategy,
|
133
|
+
left: arrowX != null ? `${arrowX}px` : "",
|
134
|
+
top: arrowY != null ? `${arrowY}px` : "",
|
135
|
+
[staticSide]: "-5px",
|
136
|
+
}}
|
137
|
+
/>
|
138
|
+
</div>
|
139
|
+
)}
|
140
|
+
</>
|
141
|
+
)
|
142
|
+
}
|
143
|
+
|
144
|
+
export default Tooltip
|
@@ -0,0 +1,59 @@
|
|
1
|
+
// @flow
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import { Tooltip, Flex, FlexItem } from '../..';
|
5
|
+
|
6
|
+
const TooltipDefaultReact = (props) => {
|
7
|
+
|
8
|
+
return (
|
9
|
+
<Flex
|
10
|
+
flexDirection='row'
|
11
|
+
gap='md'
|
12
|
+
justifyContent='center'
|
13
|
+
wrap
|
14
|
+
>
|
15
|
+
<FlexItem>
|
16
|
+
<Tooltip
|
17
|
+
placement='top'
|
18
|
+
text="Whoa. I'm a Tooltip"
|
19
|
+
zIndex={10}
|
20
|
+
{...props}
|
21
|
+
>
|
22
|
+
{'Hover here (Top)'}
|
23
|
+
</Tooltip>
|
24
|
+
</FlexItem>
|
25
|
+
<FlexItem>
|
26
|
+
<Tooltip
|
27
|
+
placement='bottom'
|
28
|
+
text="Whoa. I'm a Tooltip"
|
29
|
+
zIndex={10}
|
30
|
+
{...props}
|
31
|
+
>
|
32
|
+
{'Hover here (Bottom)'}
|
33
|
+
</Tooltip>
|
34
|
+
</FlexItem>
|
35
|
+
<FlexItem>
|
36
|
+
<Tooltip
|
37
|
+
placement='right'
|
38
|
+
text="Whoa. I'm a Tooltip"
|
39
|
+
zIndex={10}
|
40
|
+
{...props}
|
41
|
+
>
|
42
|
+
{'Hover here (Right)'}
|
43
|
+
</Tooltip>
|
44
|
+
</FlexItem>
|
45
|
+
<FlexItem>
|
46
|
+
<Tooltip
|
47
|
+
placement='left'
|
48
|
+
text="Whoa. I'm a Tooltip"
|
49
|
+
zIndex={10}
|
50
|
+
{...props}
|
51
|
+
>
|
52
|
+
{'Hover here (Left)'}
|
53
|
+
</Tooltip>
|
54
|
+
</FlexItem>
|
55
|
+
</Flex>
|
56
|
+
)
|
57
|
+
}
|
58
|
+
|
59
|
+
export default TooltipDefaultReact
|
@@ -0,0 +1,5 @@
|
|
1
|
+
You can define the tooltip placement sending the prop `placement` with one of the available options: `top | right | bottom | left`.
|
2
|
+
|
3
|
+
If you don't specify a desired `placement`, the component will automatically choose the one that fits better.
|
4
|
+
|
5
|
+
If the desired `placement` doesn't fit on screen, the component will automatically switch to the one that fits better.
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
|
2
|
+
|
3
|
+
<%= pb_rails("tooltip", props: {
|
4
|
+
trigger_element_id: "result-1-sample-email-link",
|
5
|
+
tooltip_id: "sample-email-tooltip-result-1",
|
6
|
+
position: "top",
|
7
|
+
dark: true
|
8
|
+
}) do %>
|
9
|
+
Send Email
|
10
|
+
<% end %>
|
@@ -0,0 +1,52 @@
|
|
1
|
+
// @flow
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import { Tooltip, Button, Flex } from '../..'
|
5
|
+
|
6
|
+
const TooltipIcon = (props) => {
|
7
|
+
return (
|
8
|
+
<Flex flexDirection='row'
|
9
|
+
gap='md'
|
10
|
+
wrap
|
11
|
+
>
|
12
|
+
<Tooltip
|
13
|
+
icon='paper-plane'
|
14
|
+
placement='top'
|
15
|
+
text='Send Email'
|
16
|
+
zIndex={10}
|
17
|
+
{...props}
|
18
|
+
>
|
19
|
+
<Button text='Tooltip With Icon' />
|
20
|
+
</Tooltip>
|
21
|
+
<Tooltip
|
22
|
+
icon='paper-plane'
|
23
|
+
placement='bottom'
|
24
|
+
text='Send Email'
|
25
|
+
zIndex={10}
|
26
|
+
{...props}
|
27
|
+
>
|
28
|
+
<Button text='Tooltip With Icon' />
|
29
|
+
</Tooltip>
|
30
|
+
<Tooltip
|
31
|
+
icon='paper-plane'
|
32
|
+
placement='right'
|
33
|
+
text='Send Email'
|
34
|
+
zIndex={10}
|
35
|
+
{...props}
|
36
|
+
>
|
37
|
+
<Button text='Tooltip With Icon' />
|
38
|
+
</Tooltip>
|
39
|
+
<Tooltip
|
40
|
+
icon='paper-plane'
|
41
|
+
placement='left'
|
42
|
+
text='Send Email'
|
43
|
+
zIndex={10}
|
44
|
+
{...props}
|
45
|
+
>
|
46
|
+
<Button text='Tooltip With Icon' />
|
47
|
+
</Tooltip>
|
48
|
+
</Flex>
|
49
|
+
)
|
50
|
+
}
|
51
|
+
|
52
|
+
export default TooltipIcon
|
@@ -0,0 +1 @@
|
|
1
|
+
Set the prop `icon` with the desired icon to display inside the tooltip.
|
@@ -0,0 +1,40 @@
|
|
1
|
+
// @flow
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import { Tooltip, Button, Flex, FlexItem } from '../..';
|
5
|
+
|
6
|
+
const TooltipInteraction = (props) => {
|
7
|
+
|
8
|
+
return (
|
9
|
+
<Flex
|
10
|
+
flexDirection='row'
|
11
|
+
gap='md'
|
12
|
+
justifyContent='center'
|
13
|
+
wrap
|
14
|
+
>
|
15
|
+
<FlexItem>
|
16
|
+
<Tooltip
|
17
|
+
interaction
|
18
|
+
placement='top'
|
19
|
+
text="You can copy me"
|
20
|
+
zIndex={10}
|
21
|
+
{...props}
|
22
|
+
>
|
23
|
+
<Button text="With Interaction"/>
|
24
|
+
</Tooltip>
|
25
|
+
</FlexItem>
|
26
|
+
<FlexItem>
|
27
|
+
<Tooltip
|
28
|
+
placement='top'
|
29
|
+
text="I'm just a regular tooltip"
|
30
|
+
zIndex={10}
|
31
|
+
{...props}
|
32
|
+
>
|
33
|
+
<Button text="No Interaction"/>
|
34
|
+
</Tooltip>
|
35
|
+
</FlexItem>
|
36
|
+
</Flex>
|
37
|
+
)
|
38
|
+
}
|
39
|
+
|
40
|
+
export default TooltipInteraction
|
@@ -0,0 +1 @@
|
|
1
|
+
Set the prop `interaction` as `true` for cases that require users to copy the content inside the tooltip.
|
@@ -0,0 +1,39 @@
|
|
1
|
+
// @flow
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import { Tooltip, Flex, CircleIconButton } from '../..'
|
5
|
+
|
6
|
+
const TooltipMargin = (props) => {
|
7
|
+
return (
|
8
|
+
<Flex
|
9
|
+
flexDirection='row'
|
10
|
+
justifyContent='center'
|
11
|
+
wrap
|
12
|
+
>
|
13
|
+
<Tooltip
|
14
|
+
margin='md'
|
15
|
+
placement='top'
|
16
|
+
text='Send Email'
|
17
|
+
zIndex={10}
|
18
|
+
{...props}
|
19
|
+
>
|
20
|
+
<CircleIconButton
|
21
|
+
icon='paper-plane'
|
22
|
+
/>
|
23
|
+
</Tooltip>
|
24
|
+
<Tooltip
|
25
|
+
margin='md'
|
26
|
+
placement='top'
|
27
|
+
text='Send Email'
|
28
|
+
zIndex={10}
|
29
|
+
{...props}
|
30
|
+
>
|
31
|
+
<CircleIconButton
|
32
|
+
icon='paper-plane'
|
33
|
+
/>
|
34
|
+
</Tooltip>
|
35
|
+
</Flex>
|
36
|
+
)
|
37
|
+
}
|
38
|
+
|
39
|
+
export default TooltipMargin
|
@@ -0,0 +1,3 @@
|
|
1
|
+
You should set `margin` in the `tooltip` component itself. If you add this prop to the child, it will cause the tooltip to be pulled away from the trigger.
|
2
|
+
|
3
|
+
It is not recommended to set `padding` in the `tooltip` nor its child, doing so will cause it to be pulled away from its trigger element.
|
@@ -4,4 +4,10 @@ examples:
|
|
4
4
|
- tooltip_default: Default
|
5
5
|
- tooltip_selectors: Using Common Selectors
|
6
6
|
- tooltip_white: White
|
7
|
-
- tooltip_with_icon_circle: Icon Circle
|
7
|
+
- tooltip_with_icon_circle: Icon Circle Tooltip
|
8
|
+
|
9
|
+
react:
|
10
|
+
- tooltip_default_react: Default
|
11
|
+
- tooltip_interaction: Content Interaction
|
12
|
+
- tooltip_margin: Margin
|
13
|
+
- tooltip_icon: Tooltip with Icon
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { cleanup, render, screen, fireEvent } from "../utilities/test-utils";
|
3
|
+
import { Button, Tooltip } from "..";
|
4
|
+
|
5
|
+
function TooltipTest() {
|
6
|
+
const text = "this is a text",
|
7
|
+
placement = "top",
|
8
|
+
triggerText = "hover me",
|
9
|
+
zIndex = "10";
|
10
|
+
|
11
|
+
return (
|
12
|
+
<Tooltip
|
13
|
+
data={{ testid: "primary-test" }}
|
14
|
+
placement={placement}
|
15
|
+
text={text}
|
16
|
+
zIndex={zIndex}
|
17
|
+
>
|
18
|
+
<Button text={triggerText} />
|
19
|
+
</Tooltip>
|
20
|
+
);
|
21
|
+
}
|
22
|
+
|
23
|
+
test("renders the component", () => {
|
24
|
+
render(<TooltipTest />);
|
25
|
+
|
26
|
+
const kit = screen.getByTestId("primary-test");
|
27
|
+
expect(kit).toBeInTheDocument();
|
28
|
+
expect(kit).toHaveClass("pb_tooltip_kit");
|
29
|
+
|
30
|
+
cleanup();
|
31
|
+
});
|
32
|
+
|
33
|
+
test("opens on mouseenter", () => {
|
34
|
+
render(<TooltipTest />);
|
35
|
+
|
36
|
+
fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
|
37
|
+
expect(screen.queryByRole("tooltip")).toBeInTheDocument();
|
38
|
+
|
39
|
+
cleanup();
|
40
|
+
});
|
41
|
+
|
42
|
+
test("closes on mouseleave", () => {
|
43
|
+
render(<TooltipTest />);
|
44
|
+
|
45
|
+
fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
|
46
|
+
fireEvent.mouseLeave(screen.getByRole("tooltip_trigger"));
|
47
|
+
expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
|
48
|
+
|
49
|
+
cleanup();
|
50
|
+
});
|