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.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/docs/_button_circle_swift.md +28 -0
  3. data/app/pb_kits/playbook/pb_button/docs/_button_default_swift.md +23 -0
  4. data/app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md +9 -0
  5. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md +18 -0
  6. data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md +11 -0
  7. data/app/pb_kits/playbook/pb_button/docs/_button_size_swift.md +20 -0
  8. data/app/pb_kits/playbook/pb_button/docs/example.yml +8 -0
  9. data/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md +29 -0
  10. data/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md +7 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md +33 -0
  12. data/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md +33 -0
  13. data/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md +17 -0
  14. data/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md +7 -0
  15. data/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md +33 -0
  16. data/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md +10 -0
  17. data/app/pb_kits/playbook/pb_card/docs/_card_selected_swift.md +0 -0
  18. data/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md +11 -0
  19. data/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md +21 -0
  20. data/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md +17 -0
  21. data/app/pb_kits/playbook/pb_card/docs/_card_tag_swift.md +0 -0
  22. data/app/pb_kits/playbook/pb_card/docs/example.yml +12 -0
  23. data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +47 -31
  24. data/app/pb_kits/playbook/pb_table/docs/_table_header.md +5 -0
  25. data/app/pb_kits/playbook/pb_table/table_header.html.erb +1 -1
  26. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +19 -6
  27. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +0 -1
  28. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.html.erb +31 -0
  29. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.jsx +45 -0
  30. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_truncated.md +5 -0
  31. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +3 -0
  32. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  33. data/app/pb_kits/playbook/pb_tooltip/docs/styles.css +7 -0
  34. data/app/pb_kits/playbook/pb_tooltip/index.js +3 -0
  35. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +19 -0
  36. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +1 -0
  37. data/dist/playbook-rails.js +7 -7
  38. data/lib/playbook/version.rb +1 -1
  39. 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'
@@ -0,0 +1,7 @@
1
+ .tooltip-text-truncation {
2
+ display: inline-block !important;
3
+ white-space: nowrap;
4
+ overflow: hidden;
5
+ text-overflow: ellipsis;
6
+ max-width: 100px;
7
+ }
@@ -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>
@@ -7,6 +7,7 @@ module Playbook
7
7
  prop :trigger_element_selector
8
8
  prop :trigger_element_id, deprecated: true
9
9
  prop :tooltip_id
10
+ prop :truncatable, default: false
10
11
  prop :dark, type: Playbook::Props::Boolean,
11
12
  default: false
12
13