playbook_ui 11.3.0.pre.alpha2 → 11.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +0 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +6 -49
- 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 +1 -7
- data/app/pb_kits/playbook/playbook-doc.js +0 -2
- data/dist/reset.css +2 -0
- data/lib/playbook/version.rb +1 -1
- metadata +5 -16
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -144
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +0 -59
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md +0 -5
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +0 -52
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md +0 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +0 -40
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md +0 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +0 -39
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md +0 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +0 -4
- data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +0 -50
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 829ab73754749eeb3476c40cfaba3fb74e62e92744f725772b851b3c084a81ce
|
4
|
+
data.tar.gz: e42dc4f35cb80676454745307afba58a5d33e7deae5f68ff36074a28e78e3299
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6c74669ef536138bc842fb3b2867d68716e10b15af93ea73233593bad06c7c0f01494d30e29cba67c7a2526401a854bf6ad00b259829a2adcfe4795969dbbcb5
|
7
|
+
data.tar.gz: 169d399c99f5fddd984fedb81e3701b85e918da087546259e84989bbf5f17a0227a9787494a8f524c2a50d38eccfc4badab2e9810e3e0b5cecd5585bb85883ac
|
@@ -98,7 +98,6 @@ export { default as Title } from './pb_title/_title'
|
|
98
98
|
export { default as TitleCount } from './pb_title_count/_title_count'
|
99
99
|
export { default as TitleDetail } from './pb_title_detail/_title_detail'
|
100
100
|
export { default as Toggle } from './pb_toggle/_toggle'
|
101
|
-
export { default as Tooltip } from './pb_tooltip/_tooltip'
|
102
101
|
export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
|
103
102
|
export { default as Typeahead } from './pb_typeahead/_typeahead'
|
104
103
|
export { default as User } from './pb_user/_user'
|
@@ -23,7 +23,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
23
23
|
}
|
24
24
|
|
25
25
|
[class^="pb_tooltip_kit"] {
|
26
|
-
~ .tooltip_tooltip,
|
27
26
|
.tooltip_tooltip {
|
28
27
|
display: block;
|
29
28
|
opacity: 0;
|
@@ -53,42 +52,15 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
53
52
|
border-width: 10px;
|
54
53
|
margin-bottom: 50px;
|
55
54
|
}
|
56
|
-
|
57
|
-
&.visible,
|
58
55
|
&.show {
|
56
|
+
opacity: 1;
|
59
57
|
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
|
-
}
|
64
63
|
|
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;
|
92
64
|
&.fade_out {
|
93
65
|
animation-name: fadeOut;
|
94
66
|
animation-duration: 150ms;
|
@@ -97,29 +69,14 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
97
69
|
}
|
98
70
|
}
|
99
71
|
}
|
100
|
-
|
101
|
-
&.dark,
|
102
72
|
&[class*=_dark]{
|
103
|
-
|
104
|
-
|
105
|
-
|
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
|
-
}
|
73
|
+
.tooltip_tooltip{
|
74
|
+
color: $white;
|
75
|
+
background-color: rgba($black, $opacity_9);
|
115
76
|
.arrow {
|
116
77
|
border-color: $black transparent transparent transparent;
|
117
78
|
opacity: $opacity_9;
|
118
79
|
}
|
119
|
-
// react arrow
|
120
|
-
.arrow_bg {
|
121
|
-
background-color: $white;
|
122
|
-
}
|
123
80
|
&.flipped {
|
124
81
|
.arrow {
|
125
82
|
border-color: transparent transparent $black transparent;
|
@@ -4,10 +4,4 @@ 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
|
8
|
-
|
9
|
-
react:
|
10
|
-
- tooltip_default_react: Default
|
11
|
-
- tooltip_interaction: Content Interaction
|
12
|
-
- tooltip_margin: Margin
|
13
|
-
- tooltip_icon: Tooltip with Icon
|
7
|
+
- tooltip_with_icon_circle: Icon Circle Tooptip
|
@@ -92,7 +92,6 @@ import * as Title from 'pb_title/docs'
|
|
92
92
|
import * as TitleCount from 'pb_title_count/docs'
|
93
93
|
import * as TitleDetail from 'pb_title_detail/docs'
|
94
94
|
import * as Toggle from 'pb_toggle/docs'
|
95
|
-
import * as Tooltip from 'pb_tooltip/docs'
|
96
95
|
import * as TreemapChart from 'pb_treemap_chart/docs'
|
97
96
|
import * as Typeahead from 'pb_typeahead/docs'
|
98
97
|
import * as User from 'pb_user/docs'
|
@@ -189,7 +188,6 @@ WebpackerReact.setup({
|
|
189
188
|
...TitleCount,
|
190
189
|
...TitleDetail,
|
191
190
|
...Toggle,
|
192
|
-
...Tooltip,
|
193
191
|
...TreemapChart,
|
194
192
|
...Typeahead,
|
195
193
|
...User,
|
data/dist/reset.css
ADDED
@@ -0,0 +1,2 @@
|
|
1
|
+
*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
|
2
|
+
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 11.3.0
|
4
|
+
version: 11.3.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2022-08-
|
12
|
+
date: 2022-08-19 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1990,27 +1990,15 @@ files:
|
|
1990
1990
|
- app/pb_kits/playbook/pb_toggle/toggle.html.erb
|
1991
1991
|
- app/pb_kits/playbook/pb_toggle/toggle.rb
|
1992
1992
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.scss
|
1993
|
-
- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
|
1994
1993
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
|
1995
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
|
1996
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
|
1997
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
|
1998
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
|
1999
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
|
2000
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
|
2001
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
|
2002
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx
|
2003
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md
|
2004
1994
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb
|
2005
1995
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md
|
2006
1996
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
|
2007
1997
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
|
2008
1998
|
- app/pb_kits/playbook/pb_tooltip/docs/example.yml
|
2009
|
-
- app/pb_kits/playbook/pb_tooltip/docs/index.js
|
2010
1999
|
- app/pb_kits/playbook/pb_tooltip/index.js
|
2011
2000
|
- app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
|
2012
2001
|
- app/pb_kits/playbook/pb_tooltip/tooltip.rb
|
2013
|
-
- app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
|
2014
2002
|
- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
|
2015
2003
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
|
2016
2004
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
|
@@ -2191,6 +2179,7 @@ files:
|
|
2191
2179
|
- app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
|
2192
2180
|
- app/pb_kits/playbook/utilities/test/globalProps/order.test.js
|
2193
2181
|
- app/pb_kits/playbook/utilities/text.ts
|
2182
|
+
- dist/reset.css
|
2194
2183
|
- fonts/fontawesome-min.js
|
2195
2184
|
- fonts/regular-min.js
|
2196
2185
|
- lib/playbook.rb
|
@@ -2263,9 +2252,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2263
2252
|
version: '0'
|
2264
2253
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2265
2254
|
requirements:
|
2266
|
-
- - "
|
2255
|
+
- - ">="
|
2267
2256
|
- !ruby/object:Gem::Version
|
2268
|
-
version:
|
2257
|
+
version: '0'
|
2269
2258
|
requirements: []
|
2270
2259
|
rubygems_version: 3.3.7
|
2271
2260
|
signing_key:
|
@@ -1,144 +0,0 @@
|
|
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
|
@@ -1,59 +0,0 @@
|
|
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
|
@@ -1,5 +0,0 @@
|
|
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.
|
@@ -1,10 +0,0 @@
|
|
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 %>
|
@@ -1,52 +0,0 @@
|
|
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
|
@@ -1 +0,0 @@
|
|
1
|
-
Set the prop `icon` with the desired icon to display inside the tooltip.
|
@@ -1,40 +0,0 @@
|
|
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
|
@@ -1 +0,0 @@
|
|
1
|
-
Set the prop `interaction` as `true` for cases that require users to copy the content inside the tooltip.
|
@@ -1,39 +0,0 @@
|
|
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
|
@@ -1,3 +0,0 @@
|
|
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.
|
@@ -1,50 +0,0 @@
|
|
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
|
-
});
|