playbook_ui 13.10.0.pre.alpha.play10561428 → 13.10.0.pre.alpha.webpackerregistercomponents1463
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/pb_checkbox/docs/_checkbox_default_swift.md +10 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error_swift.md +12 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md +12 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md +7 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_props.md +6 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_swift.md +16 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_defaul_swift.md +7 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_swift.md +11 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +6 -19
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +0 -3
- data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +0 -19
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +0 -1
- data/app/pb_kits/playbook/playbook-doc.js +1 -1
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +1 -1
- metadata +10 -6
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.html.erb +0 -31
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.jsx +0 -45
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.md +0 -5
- data/app/pb_kits/playbook/pb_tooltip/docs/styles.css +0 -13
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: 13.10.0.pre.alpha.
|
4
|
+
version: 13.10.0.pre.alpha.webpackerregistercomponents1463
|
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: 2023-11-
|
12
|
+
date: 2023-11-10 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -563,11 +563,15 @@ files:
|
|
563
563
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx
|
564
564
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb
|
565
565
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx
|
566
|
+
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default_swift.md
|
566
567
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb
|
567
568
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx
|
569
|
+
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error_swift.md
|
568
570
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb
|
569
571
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx
|
572
|
+
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
|
570
573
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
|
574
|
+
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
|
571
575
|
- app/pb_kits/playbook/pb_checkbox/docs/_description.md
|
572
576
|
- app/pb_kits/playbook/pb_checkbox/docs/example.yml
|
573
577
|
- app/pb_kits/playbook/pb_checkbox/docs/index.js
|
@@ -1242,6 +1246,9 @@ files:
|
|
1242
1246
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb
|
1243
1247
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx
|
1244
1248
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md
|
1249
|
+
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_props.md
|
1250
|
+
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_swift.md
|
1251
|
+
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_defaul_swift.md
|
1245
1252
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb
|
1246
1253
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx
|
1247
1254
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.html.erb
|
@@ -1249,6 +1256,7 @@ files:
|
|
1249
1256
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.md
|
1250
1257
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb
|
1251
1258
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx
|
1259
|
+
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_swift.md
|
1252
1260
|
- app/pb_kits/playbook/pb_icon_circle/docs/example.yml
|
1253
1261
|
- app/pb_kits/playbook/pb_icon_circle/docs/index.js
|
1254
1262
|
- app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb
|
@@ -2378,13 +2386,9 @@ files:
|
|
2378
2386
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md
|
2379
2387
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb
|
2380
2388
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md
|
2381
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.html.erb
|
2382
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.jsx
|
2383
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.md
|
2384
2389
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
|
2385
2390
|
- app/pb_kits/playbook/pb_tooltip/docs/example.yml
|
2386
2391
|
- app/pb_kits/playbook/pb_tooltip/docs/index.js
|
2387
|
-
- app/pb_kits/playbook/pb_tooltip/docs/styles.css
|
2388
2392
|
- app/pb_kits/playbook/pb_tooltip/index.js
|
2389
2393
|
- app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
|
2390
2394
|
- app/pb_kits/playbook/pb_tooltip/tooltip.rb
|
@@ -1,31 +0,0 @@
|
|
1
|
-
<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
|
2
|
-
<%= pb_rails("flex/flex_item") do %>
|
3
|
-
<span id='truncated-tooltip-2' style="
|
4
|
-
display: inline-block;
|
5
|
-
white-space: nowrap;
|
6
|
-
overflow: hidden;
|
7
|
-
text-overflow: ellipsis;
|
8
|
-
max-width: 65px;
|
9
|
-
">Tooltip for truncation only</span>
|
10
|
-
<%= pb_rails("tooltip", props: {
|
11
|
-
trigger_element_selector: "#truncated-tooltip-2",
|
12
|
-
tooltip_id: "truncated-2",
|
13
|
-
position: 'left',
|
14
|
-
truncation_enabled: true
|
15
|
-
}) do %>
|
16
|
-
Tooltip for truncation only
|
17
|
-
<% end %>
|
18
|
-
<% end %>
|
19
|
-
<%= pb_rails("flex/flex_item") do %>
|
20
|
-
<span id='truncated-tooltip-1'>Tooltip for truncation only</span>
|
21
|
-
<%= pb_rails("tooltip", props: {
|
22
|
-
trigger_element_selector: "#truncated-tooltip-1",
|
23
|
-
tooltip_id: "truncated-1",
|
24
|
-
position: 'left',
|
25
|
-
truncation_enabled: true
|
26
|
-
}) do %>
|
27
|
-
Tooltip for truncation only
|
28
|
-
<% end %>
|
29
|
-
<% end %>
|
30
|
-
|
31
|
-
<% end %>
|
@@ -1,45 +0,0 @@
|
|
1
|
-
// @flow
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import { Tooltip, Flex, FlexItem } from '../..'
|
5
|
-
import './styles.css'
|
6
|
-
|
7
|
-
const TooltipTruncated = (props) => {
|
8
|
-
|
9
|
-
return (
|
10
|
-
<Flex
|
11
|
-
flexDirection='row'
|
12
|
-
gap='md'
|
13
|
-
justifyContent='center'
|
14
|
-
wrap
|
15
|
-
>
|
16
|
-
<FlexItem>
|
17
|
-
<Tooltip
|
18
|
-
className='tooltip-text-truncation short'
|
19
|
-
style={{
|
20
|
-
'backgroundColor': 'red'
|
21
|
-
}}
|
22
|
-
text='Tooltip for truncation only short'
|
23
|
-
truncationEnabled
|
24
|
-
zIndex={10}
|
25
|
-
{...props}
|
26
|
-
>
|
27
|
-
{'Tooltip for truncation only'}
|
28
|
-
</Tooltip>
|
29
|
-
</FlexItem>
|
30
|
-
<FlexItem>
|
31
|
-
<Tooltip
|
32
|
-
className='tooltip-text-truncation long'
|
33
|
-
text='Tooltip for truncation only'
|
34
|
-
truncationEnabled
|
35
|
-
zIndex={10}
|
36
|
-
{...props}
|
37
|
-
>
|
38
|
-
{'Tooltip for truncation only'}
|
39
|
-
</Tooltip>
|
40
|
-
</FlexItem>
|
41
|
-
</Flex>
|
42
|
-
)
|
43
|
-
}
|
44
|
-
|
45
|
-
export default TooltipTruncated
|
@@ -1,5 +0,0 @@
|
|
1
|
-
If your implementation involves truncated text, you can set the `truncationEnabled` prop to `true` and only display the tooltip when the trigger element is truncated.
|
2
|
-
|
3
|
-
When activated, the component checks whether the trigger element's scrollWidth is equal to its clientWidth, or if the scrollWidth is equal to 0. If either of these conditions is met, the tooltip won't be displayed because the text is not truncated.
|
4
|
-
|
5
|
-
This feature only works alongside with CSS `ellipsis` and setting a `max-width` for the trigger element. Check the CSS applied in the example above for details.
|
@@ -1,13 +0,0 @@
|
|
1
|
-
.tooltip-text-truncation {
|
2
|
-
display: inline-block !important;
|
3
|
-
white-space: nowrap;
|
4
|
-
overflow: hidden;
|
5
|
-
text-overflow: ellipsis;
|
6
|
-
}
|
7
|
-
.tooltip-text-truncation.short {
|
8
|
-
max-width: 65px;
|
9
|
-
}
|
10
|
-
|
11
|
-
.tooltip-text-truncation.long {
|
12
|
-
max-width: 180px;
|
13
|
-
}
|