playbook_ui 14.14.0.pre.alpha.play1868dependencyremovallodash6286 → 14.14.0.pre.alpha.play1922tooltipfloatingui6361
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/pb_card/_card.tsx +1 -2
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +46 -31
- data/app/pb_kits/playbook/pb_currency/currency.html.erb +15 -8
- data/app/pb_kits/playbook/pb_currency/currency.rb +17 -2
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +22 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +34 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_currency/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +4 -4
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -2
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +0 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_tooltip/floating_ui.js +282 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +1 -1
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +10 -2
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +4 -5
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -2
- data/app/pb_kits/playbook/utilities/object.ts +1 -82
- data/dist/chunks/_typeahead-BGTMEmj7.js +36 -0
- data/dist/chunks/_weekday_stacked-De2TduOp.js +45 -0
- data/dist/chunks/{lib-CrrD678a.js → lib-Fr78pbpF.js} +2 -2
- data/dist/chunks/{pb_form_validation-BbWhQeoO.js → pb_form_validation-CN51bfsD.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +14 -6
- data/dist/chunks/_typeahead-CHxdYnAw.js +0 -36
- data/dist/chunks/_weekday_stacked-D2tZHCNS.js +0 -45
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 502cec589e04f1dadf9f1031362601dc45cd275a31e6adbe7740fff375ea51ad
|
|
4
|
+
data.tar.gz: d6503c736579de2429555d24c9d7deaa184c0be62a7d7ec7c3cfffbccb44da4e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e19a779db35a93ad46589bb48a6341a5829843b81567e82f0f2a6cee8cdd7d9d9a2f9a7ae16105f51e70505db96747217d8306f12bcf49dcf8942179a5e157c0
|
|
7
|
+
data.tar.gz: 422d4862023de1ccd5c0a154dbe4cd57757c289072626fa35e57706050468b61b2e8935a816b59dc4f64218a9958b8272b482eca3ef3b88d5f42233b79e4aeb3
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/* eslint-disable react/no-multi-comp */
|
|
2
2
|
|
|
3
3
|
import React from 'react'
|
|
4
|
-
import { get } from '
|
|
5
|
-
|
|
4
|
+
import { get } from 'lodash'
|
|
6
5
|
import classnames from 'classnames'
|
|
7
6
|
|
|
8
7
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
|
@@ -21,6 +21,7 @@ type CurrencyProps = {
|
|
|
21
21
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
|
22
22
|
id?: string,
|
|
23
23
|
label?: string,
|
|
24
|
+
nullDisplay?: string,
|
|
24
25
|
size?: 'sm' | 'md' | 'lg',
|
|
25
26
|
symbol?: string,
|
|
26
27
|
variant?: 'default' | 'light' | 'bold',
|
|
@@ -49,6 +50,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
|
49
50
|
unit,
|
|
50
51
|
className,
|
|
51
52
|
label = '',
|
|
53
|
+
nullDisplay = '',
|
|
52
54
|
size = 'sm',
|
|
53
55
|
symbol = '$',
|
|
54
56
|
variant = 'default',
|
|
@@ -118,44 +120,57 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
|
118
120
|
id={id}
|
|
119
121
|
>
|
|
120
122
|
<Caption dark={dark}>{label}</Caption>
|
|
121
|
-
|
|
122
123
|
<div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
|
|
123
124
|
{unstyled ? (
|
|
124
|
-
|
|
125
|
-
<div>{
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
{
|
|
129
|
-
{
|
|
130
|
-
|
|
131
|
-
|
|
125
|
+
nullDisplay && !amount ? (
|
|
126
|
+
<div>{nullDisplay}</div>
|
|
127
|
+
) : (
|
|
128
|
+
<>
|
|
129
|
+
<div>{handleNegative}{symbol}</div>
|
|
130
|
+
<div>{getAmount}</div>
|
|
131
|
+
<div>
|
|
132
|
+
{getAbbreviation}
|
|
133
|
+
{unit ? unit : getDecimalValue}
|
|
134
|
+
</div>
|
|
135
|
+
</>
|
|
136
|
+
)
|
|
132
137
|
) : (
|
|
133
|
-
|
|
134
|
-
<Body
|
|
135
|
-
className="dollar_sign"
|
|
136
|
-
color="light"
|
|
137
|
-
dark={dark}
|
|
138
|
-
>
|
|
139
|
-
{handleNegative}{symbol}
|
|
140
|
-
</Body>
|
|
141
|
-
|
|
138
|
+
nullDisplay && !amount ? (
|
|
142
139
|
<Title
|
|
143
140
|
className="pb_currency_value"
|
|
144
141
|
dark={dark}
|
|
145
142
|
size={sizes[size]}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
143
|
+
>
|
|
144
|
+
{nullDisplay}
|
|
145
|
+
</Title>
|
|
146
|
+
) : (
|
|
147
|
+
<>
|
|
148
|
+
<Body
|
|
149
|
+
className="dollar_sign"
|
|
150
|
+
color="light"
|
|
151
|
+
dark={dark}
|
|
152
|
+
>
|
|
153
|
+
{handleNegative}{symbol}
|
|
154
|
+
</Body>
|
|
155
|
+
|
|
156
|
+
<Title
|
|
157
|
+
className="pb_currency_value"
|
|
158
|
+
dark={dark}
|
|
159
|
+
size={sizes[size]}
|
|
160
|
+
>
|
|
161
|
+
{getAmount}
|
|
162
|
+
</Title>
|
|
163
|
+
|
|
164
|
+
<Body
|
|
165
|
+
className="unit"
|
|
166
|
+
color="light"
|
|
167
|
+
dark={dark}
|
|
168
|
+
>
|
|
169
|
+
{getAbbreviation}
|
|
170
|
+
{unit ? unit : getDecimalValue}
|
|
171
|
+
</Body>
|
|
172
|
+
</>
|
|
173
|
+
)
|
|
159
174
|
)}
|
|
160
175
|
</div>
|
|
161
176
|
</div>
|
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
<%= pb_content_tag do %>
|
|
2
2
|
<%= pb_rails("caption", props: object.caption_props) %>
|
|
3
|
-
|
|
4
3
|
<div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
|
|
5
4
|
<% if object.unstyled %>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
<% if object.null_display && object.amount.blank? %>
|
|
6
|
+
<div><%= object.null_display %></div>
|
|
7
|
+
<% else %>
|
|
8
|
+
<div><%= object.negative_sign %><%= object.symbol %></div>
|
|
9
|
+
<div><%= object.title_props[:text] %></div>
|
|
10
|
+
<div><%= object.body_props[:text] %></div>
|
|
11
|
+
<% end %>
|
|
9
12
|
<% else %>
|
|
10
|
-
|
|
11
|
-
<%=
|
|
13
|
+
<% if object.null_display && object.amount.blank? %>
|
|
14
|
+
<%= pb_rails("title", props: object.title_props) %>
|
|
15
|
+
<% else %>
|
|
16
|
+
<%= pb_rails("body", props: object.currency_wrapper_props) do %>
|
|
17
|
+
<%= object.negative_sign %><%= object.symbol %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<%= pb_rails("title", props: object.title_props) %>
|
|
20
|
+
<%= pb_rails("body", props: object.body_props) %>
|
|
12
21
|
<% end %>
|
|
13
|
-
<%= pb_rails("title", props: object.title_props) %>
|
|
14
|
-
<%= pb_rails("body", props: object.body_props) %>
|
|
15
22
|
<% end %>
|
|
16
23
|
</div>
|
|
17
24
|
<% end %>
|
|
@@ -46,6 +46,9 @@ module Playbook
|
|
|
46
46
|
prop :comma_separator, type: Playbook::Props::Boolean,
|
|
47
47
|
default: false
|
|
48
48
|
|
|
49
|
+
prop :null_display, type: Playbook::Props::String,
|
|
50
|
+
required: false
|
|
51
|
+
|
|
49
52
|
def classname
|
|
50
53
|
generate_classname("pb_currency_kit", align, size, dark_class)
|
|
51
54
|
end
|
|
@@ -65,10 +68,20 @@ module Playbook
|
|
|
65
68
|
}
|
|
66
69
|
end
|
|
67
70
|
|
|
71
|
+
def title_text
|
|
72
|
+
if null_display
|
|
73
|
+
null_display
|
|
74
|
+
elsif swap_negative
|
|
75
|
+
absolute_amount(abbr_or_format_amount)
|
|
76
|
+
else
|
|
77
|
+
abbr_or_format_amount
|
|
78
|
+
end
|
|
79
|
+
end
|
|
80
|
+
|
|
68
81
|
def title_props
|
|
69
82
|
{
|
|
70
83
|
size: size_value,
|
|
71
|
-
text:
|
|
84
|
+
text: title_text,
|
|
72
85
|
classname: "pb_currency_value",
|
|
73
86
|
dark: dark,
|
|
74
87
|
}
|
|
@@ -145,8 +158,10 @@ module Playbook
|
|
|
145
158
|
1
|
|
146
159
|
when "md"
|
|
147
160
|
3
|
|
148
|
-
|
|
161
|
+
when "sm"
|
|
149
162
|
4
|
|
163
|
+
else
|
|
164
|
+
3
|
|
150
165
|
end
|
|
151
166
|
end
|
|
152
167
|
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<%= pb_rails("currency", props: {
|
|
2
|
+
amount: "",
|
|
3
|
+
label: "Nil",
|
|
4
|
+
margin_bottom: "md",
|
|
5
|
+
null_display: "--",
|
|
6
|
+
size: "sm"
|
|
7
|
+
}) %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("currency", props: {
|
|
10
|
+
amount: "",
|
|
11
|
+
label: "Nil",
|
|
12
|
+
margin_bottom: "md",
|
|
13
|
+
null_display: "$0.00",
|
|
14
|
+
size: "sm"
|
|
15
|
+
}) %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("currency", props: {
|
|
18
|
+
amount: "",
|
|
19
|
+
label: "Nil",
|
|
20
|
+
null_display: " ",
|
|
21
|
+
size: "sm"
|
|
22
|
+
}) %>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Currency } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const CurrencyNullDisplay = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<Currency
|
|
8
|
+
amount=""
|
|
9
|
+
label="Null"
|
|
10
|
+
marginBottom="md"
|
|
11
|
+
nullDisplay="--"
|
|
12
|
+
{...props}
|
|
13
|
+
/>
|
|
14
|
+
|
|
15
|
+
<Currency
|
|
16
|
+
amount=""
|
|
17
|
+
label="Null"
|
|
18
|
+
marginBottom="md"
|
|
19
|
+
nullDisplay="$0.00"
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
<Currency
|
|
24
|
+
amount=""
|
|
25
|
+
label="Null"
|
|
26
|
+
marginBottom="md"
|
|
27
|
+
nullDisplay=" "
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
</>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export default CurrencyNullDisplay
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.
|
|
@@ -10,6 +10,7 @@ examples:
|
|
|
10
10
|
- currency_unstyled: Unstyled
|
|
11
11
|
- currency_comma_separator: Comma Separator
|
|
12
12
|
- currency_negative: Negative
|
|
13
|
+
- currency_null_display: Null Display
|
|
13
14
|
|
|
14
15
|
react:
|
|
15
16
|
- currency_variants: Variants
|
|
@@ -21,6 +22,7 @@ examples:
|
|
|
21
22
|
- currency_unstyled: Unstyled
|
|
22
23
|
- currency_comma_separator: Comma Separator
|
|
23
24
|
- currency_negative: Negative
|
|
25
|
+
- currency_null_display: Null Display
|
|
24
26
|
|
|
25
27
|
swift:
|
|
26
28
|
- currency_size_swift: Size
|
|
@@ -6,4 +6,5 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
|
|
|
6
6
|
export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
|
|
7
7
|
export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
|
|
8
8
|
export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
|
|
9
|
-
export { default as CurrencyNegative } from './_currency_negative.jsx'
|
|
9
|
+
export { default as CurrencyNegative } from './_currency_negative.jsx'
|
|
10
|
+
export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { isEmpty, map, omitBy } from '
|
|
2
|
+
import { isEmpty, map, omitBy } from 'lodash'
|
|
3
3
|
|
|
4
4
|
import Body from '../../pb_body/_body'
|
|
5
5
|
import Caption from '../../pb_caption/_caption'
|
|
@@ -40,13 +40,13 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
|
|
|
40
40
|
className="filter"
|
|
41
41
|
key={`filter-${name}`}
|
|
42
42
|
>
|
|
43
|
-
{ value === true ?
|
|
43
|
+
{ value === true ?
|
|
44
44
|
<Title
|
|
45
45
|
dark={dark}
|
|
46
46
|
size={4}
|
|
47
47
|
tag="h4"
|
|
48
48
|
text={name}
|
|
49
|
-
/> :
|
|
49
|
+
/> :
|
|
50
50
|
<div>
|
|
51
51
|
<Caption
|
|
52
52
|
dark={dark}
|
|
@@ -58,7 +58,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
|
|
|
58
58
|
tag="h4"
|
|
59
59
|
text={value}
|
|
60
60
|
/>
|
|
61
|
-
</div>
|
|
61
|
+
</div>
|
|
62
62
|
}
|
|
63
63
|
</div>
|
|
64
64
|
))}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { isEmpty } from '
|
|
2
|
+
import { isEmpty } from 'lodash'
|
|
3
3
|
|
|
4
4
|
import Flex from '../../pb_flex/_flex'
|
|
5
5
|
|
|
@@ -46,7 +46,7 @@ const FilterSingle = ({
|
|
|
46
46
|
paddingRight="lg"
|
|
47
47
|
vertical="center"
|
|
48
48
|
>
|
|
49
|
-
{ children &&
|
|
49
|
+
{ children &&
|
|
50
50
|
<>
|
|
51
51
|
<FiltersPopover
|
|
52
52
|
dark={dark}
|
|
@@ -141,7 +141,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
|
141
141
|
|
|
142
142
|
&[data-popper-placement="right"] {
|
|
143
143
|
box-shadow: -8px 0 28px 0 $tooltip_shadow;
|
|
144
|
-
margin: 0 0 0 $space_sm;
|
|
145
144
|
.arrow {
|
|
146
145
|
left: -18px;
|
|
147
146
|
right: auto;
|
|
@@ -156,7 +155,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
|
156
155
|
|
|
157
156
|
&[data-popper-placement="bottom"] {
|
|
158
157
|
box-shadow: 0 -12px 28px 0 $tooltip_shadow;
|
|
159
|
-
margin: $space_sm 0 0 0;
|
|
160
158
|
.arrow {
|
|
161
159
|
top: -18px;
|
|
162
160
|
margin-bottom: 0;
|
|
@@ -169,7 +167,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
|
169
167
|
|
|
170
168
|
&[data-popper-placement="left"] {
|
|
171
169
|
box-shadow: 8px 0 28px 0 $tooltip_shadow;
|
|
172
|
-
margin: 0 $space_sm 0 0;
|
|
173
170
|
.arrow {
|
|
174
171
|
margin-bottom: 0;
|
|
175
172
|
right: -18px;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
|
|
2
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
|
3
|
+
<%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
|
|
4
|
+
<% end %>
|
|
5
|
+
|
|
6
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
|
7
|
+
<%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
|
|
8
|
+
<% end %>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
|
11
|
+
<%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
|
|
12
|
+
<% end %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("tooltip", props: {
|
|
15
|
+
trigger_element_selector: ".tooltip-delay",
|
|
16
|
+
tooltip_id: "delay-tooltip",
|
|
17
|
+
position: 'top',
|
|
18
|
+
delay_open: 1000,
|
|
19
|
+
delay_close: 1000
|
|
20
|
+
}) do %>
|
|
21
|
+
1s open/close delay
|
|
22
|
+
<% end %>
|
|
23
|
+
<%= pb_rails("tooltip", props: {
|
|
24
|
+
trigger_element_selector: ".tooltip-open-delay",
|
|
25
|
+
tooltip_id: "open-tooltip",
|
|
26
|
+
position: 'top',
|
|
27
|
+
delay_open: 1000
|
|
28
|
+
}) do %>
|
|
29
|
+
1s open delay
|
|
30
|
+
<% end %>
|
|
31
|
+
<%= pb_rails("tooltip", props: {
|
|
32
|
+
trigger_element_selector: ".tooltip-close-delay",
|
|
33
|
+
tooltip_id: "close-tooltip",
|
|
34
|
+
position: 'top',
|
|
35
|
+
delay_close: 1000
|
|
36
|
+
}) do %>
|
|
37
|
+
1s close delay
|
|
38
|
+
<% end %>
|
|
39
|
+
<% end %>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
|
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
3
|
+
<%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("tooltip", props: {
|
|
6
|
+
trigger_element_selector: "#tooltip-interaction",
|
|
7
|
+
tooltip_id: "tooltip-with-interaction",
|
|
8
|
+
position: 'top',
|
|
9
|
+
interaction: true
|
|
10
|
+
}) do %>
|
|
11
|
+
You can copy me
|
|
12
|
+
<% end %>
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
16
|
+
<%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
|
|
17
|
+
|
|
18
|
+
<%= pb_rails("tooltip", props: {
|
|
19
|
+
trigger_element_selector: "#tooltip-no-interaction",
|
|
20
|
+
tooltip_id: "tooltip-without-interaction",
|
|
21
|
+
position: 'top',
|
|
22
|
+
}) do %>
|
|
23
|
+
I'm just a regular tooltip
|
|
24
|
+
<% end %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<% end %>
|
|
@@ -2,8 +2,10 @@ examples:
|
|
|
2
2
|
|
|
3
3
|
rails:
|
|
4
4
|
- tooltip_default: Default
|
|
5
|
+
- tooltip_interaction: Content Interaction
|
|
5
6
|
- tooltip_selectors: Using Common Selectors
|
|
6
7
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
|
8
|
+
- tooltip_delay_rails: Delay
|
|
7
9
|
- tooltip_show_tooltip: Show Tooltip
|
|
8
10
|
|
|
9
11
|
react:
|