playbook_ui 13.10.0.pre.alpha.play978makehighchartsadevdependencypoc1322 → 13.10.0.pre.alpha.play10561409
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_button/docs/_button_circle_swift.md +28 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_default_swift.md +23 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md +9 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md +18 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md +11 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size_swift.md +20 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md +29 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md +7 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md +33 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md +33 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md +17 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md +7 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md +33 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md +10 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_selected_swift.md +0 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md +11 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md +21 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md +17 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_tag_swift.md +0 -0
- data/app/pb_kits/playbook/pb_card/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +47 -31
- data/app/pb_kits/playbook/pb_table/docs/_table_header.md +5 -0
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +19 -6
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +0 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.html.erb +31 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.jsx +45 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.md +5 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/styles.css +7 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +3 -0
- data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +19 -0
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +1 -0
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +1 -1
- metadata +25 -2
@@ -0,0 +1,45 @@
|
|
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'
|
19
|
+
style={{
|
20
|
+
'backgroundColor': 'red'
|
21
|
+
}}
|
22
|
+
text='This is a truncated tooltip trigger.'
|
23
|
+
truncatable
|
24
|
+
zIndex={10}
|
25
|
+
{...props}
|
26
|
+
>
|
27
|
+
{'This is a truncated tooltip trigger.'}
|
28
|
+
</Tooltip>
|
29
|
+
</FlexItem>
|
30
|
+
<FlexItem>
|
31
|
+
<Tooltip
|
32
|
+
className='tooltip-text-truncation'
|
33
|
+
text='This is a truncated tooltip trigger.'
|
34
|
+
truncatable
|
35
|
+
zIndex={10}
|
36
|
+
{...props}
|
37
|
+
>
|
38
|
+
{'This'}
|
39
|
+
</Tooltip>
|
40
|
+
</FlexItem>
|
41
|
+
</Flex>
|
42
|
+
)
|
43
|
+
}
|
44
|
+
|
45
|
+
export default TooltipTruncated
|
@@ -0,0 +1,5 @@
|
|
1
|
+
If your implementation involves truncated text, you can set the `truncatable` 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.
|
@@ -4,6 +4,7 @@ examples:
|
|
4
4
|
- tooltip_default: Default
|
5
5
|
- tooltip_selectors: Using Common Selectors
|
6
6
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
7
|
+
- tooltip_truncated: Text Truncation
|
7
8
|
|
8
9
|
react:
|
9
10
|
- tooltip_default_react: Default
|
@@ -11,3 +12,5 @@ examples:
|
|
11
12
|
- tooltip_margin: Margin
|
12
13
|
- tooltip_icon: Tooltip with Icon
|
13
14
|
- tooltip_delay: Delay
|
15
|
+
- tooltip_truncated: Text Truncation
|
16
|
+
|
@@ -3,3 +3,4 @@ export { default as TooltipInteraction } from './_tooltip_interaction'
|
|
3
3
|
export { default as TooltipMargin } from './_tooltip_margin'
|
4
4
|
export { default as TooltipIcon } from './_tooltip_icon'
|
5
5
|
export { default as TooltipDelay } from './_tooltip_delay'
|
6
|
+
export { default as TooltipTruncated } from './_tooltip_truncated'
|
@@ -54,6 +54,9 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
54
54
|
}
|
55
55
|
|
56
56
|
showTooltip(trigger) {
|
57
|
+
let triggerClasses = [...trigger.classList];
|
58
|
+
if (triggerClasses.includes("tooltip-disabled")) return
|
59
|
+
|
57
60
|
this.popper = createPopper(trigger, this.tooltip, {
|
58
61
|
placement: this.position,
|
59
62
|
modifiers: [
|
@@ -7,3 +7,22 @@
|
|
7
7
|
<div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
|
8
8
|
</div>
|
9
9
|
<% end %>
|
10
|
+
|
11
|
+
<script>
|
12
|
+
if (<%= object.truncatable %>) {
|
13
|
+
// only display tooltip if trigger element is truncated
|
14
|
+
document.addEventListener("DOMContentLoaded", function () {
|
15
|
+
const formatedTriggerElementId =
|
16
|
+
"<%= object.trigger_element_selector %>".replace("#", "");
|
17
|
+
const triggerElement = document.getElementById(formatedTriggerElementId);
|
18
|
+
|
19
|
+
// if scrollWidth is the same as the offsetWidth, the trigger element is not truncated
|
20
|
+
if (
|
21
|
+
triggerElement.offsetWidth === triggerElement.scrollWidth ||
|
22
|
+
triggerElement.scrollWidth === 0
|
23
|
+
) {
|
24
|
+
triggerElement.classList.add("tooltip-disabled");
|
25
|
+
}
|
26
|
+
});
|
27
|
+
}
|
28
|
+
</script>
|