playbook_ui 14.16.0.pre.rc.3 → 14.16.0.pre.rc.4

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.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +4 -2
  3. data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +38 -0
  4. data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx +213 -0
  5. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +38 -0
  6. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +17 -0
  7. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +21 -0
  8. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +35 -0
  9. data/app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg +21 -0
  10. data/app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx +118 -0
  11. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +8 -0
  12. data/app/pb_kits/playbook/pb_empty_state/docs/index.js +4 -0
  13. data/app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx +17 -0
  14. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -5
  15. data/app/pb_kits/playbook/pb_time/time.html.erb +1 -5
  16. data/app/pb_kits/playbook/pb_title/title.html.erb +1 -6
  17. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -6
  18. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +2 -2
  19. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb +22 -0
  20. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  21. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +7 -6
  22. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +32 -7
  23. data/app/pb_kits/playbook/tokens/_display.scss +3 -1
  24. data/app/pb_kits/playbook/utilities/_display.scss +6 -1
  25. data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js +1 -1
  26. data/dist/chunks/{_typeahead-BzyvjExg.js → _typeahead-D720juMS.js} +1 -1
  27. data/dist/chunks/_weekday_stacked-D_IMHltv.js +45 -0
  28. data/dist/chunks/vendor.js +1 -1
  29. data/dist/menu.yml +8 -0
  30. data/dist/playbook-doc.js +1 -1
  31. data/dist/playbook-rails-react-bindings.js +1 -1
  32. data/dist/playbook-rails.js +1 -1
  33. data/dist/playbook.css +1 -1
  34. data/lib/playbook/display.rb +2 -2
  35. data/lib/playbook/version.rb +1 -1
  36. metadata +16 -4
  37. data/dist/chunks/_weekday_stacked-BjRQgfjn.js +0 -45
@@ -0,0 +1,22 @@
1
+ <%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
2
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
3
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
4
+ I'm 150px high and 100px wide!
5
+ <% end %>
6
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
7
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
8
+ I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
9
+ <% end %>
10
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
11
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
12
+ I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
13
+ <% end %>
14
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
15
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
16
+ I have a min_width of 300px!
17
+ <% end %>
18
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
19
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px" } do %>
20
+ I have a min_height of 300px!
21
+ <% end %>
22
+ <% end %>
@@ -4,6 +4,7 @@ examples:
4
4
  - tooltip_default: Default
5
5
  - tooltip_interaction: Content Interaction
6
6
  - tooltip_selectors: Using Common Selectors
7
+ - tooltip_sizing: Tooltip Sizing
7
8
  - tooltip_icon_rails: Tooltip with Icon
8
9
  - tooltip_with_icon_circle: Icon Circle Tooltip
9
10
  - tooltip_delay_rails: Delay
@@ -1,10 +1,11 @@
1
1
  <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
6
- <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname,
5
+ style: remove_height_properties(combined_html_options[:style]) || "",
6
+ **combined_html_options.except(:style)) do %>
7
+ <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
7
8
  <%= content.presence %>
8
9
  <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
9
10
  </div>
10
- <% end %>
11
+ <% end %>
@@ -3,24 +3,49 @@
3
3
  module Playbook
4
4
  module PbTooltip
5
5
  class Tooltip < Playbook::KitBase
6
+ prop :dark, type: Playbook::Props::Boolean,
7
+ default: false
8
+ prop :delay_open
9
+ prop :delay_close
10
+ prop :height
11
+ prop :interaction, type: Playbook::Props::Boolean,
12
+ default: false
13
+ prop :max_height
14
+ prop :max_width
15
+ prop :min_height
16
+ prop :min_width
6
17
  prop :position
18
+ prop :tooltip_id
7
19
  prop :trigger_element_selector
8
20
  prop :trigger_element_id, deprecated: true
9
- prop :tooltip_id
10
- prop :interaction, type: Playbook::Props::Boolean,
11
- default: false
12
- prop :delay_open
13
- prop :delay_close
14
- prop :dark, type: Playbook::Props::Boolean,
15
- default: false
16
21
  prop :trigger_method, type: Playbook::Props::Enum,
17
22
  values: %w[hover click],
18
23
  default: "hover"
24
+ prop :width
19
25
 
20
26
  def classname
21
27
  generate_classname("pb_tooltip_kit", dark_class)
22
28
  end
23
29
 
30
+ def remove_height_properties(combined_html_options_style)
31
+ return nil if combined_html_options_style.nil?
32
+
33
+ combined_html_options_style.gsub(/\s*(height|min-height|max-height)\s*:[^;]*;?\s*/, "")
34
+ .strip
35
+ .presence
36
+ end
37
+
38
+ def height_and_width_helper
39
+ out = ""
40
+ out += "width: #{width};" if width.present?
41
+ out += "height: #{height};" if height.present?
42
+ out += "max-height: #{max_height};" if max_height.present?
43
+ out += "max-width: #{max_width};" if max_width.present?
44
+ out += "min-height: #{min_height};" if min_height.present?
45
+ out += "min-width: #{min_width};" if min_width.present?
46
+ out
47
+ end
48
+
24
49
  def data
25
50
  data = Hash(values[:data]).merge(
26
51
  pb_tooltip_kit: true,
@@ -4,10 +4,12 @@ $display_inline_block: inline-block !default;
4
4
  $display_flex: flex !default;
5
5
  $display_none: none !default;
6
6
  $display_inline_flex: inline-flex !default;
7
+ $display_grid: grid !default;
7
8
  $displays: (
8
9
  display_none: $display_none,
9
10
  display_flex: $display_flex,
10
11
  display_inline: $display_inline,
11
12
  display_inline_block: $display_inline_block,
12
- display_block: $display_block
13
+ display_block: $display_block,
14
+ display_grid: $display_grid
13
15
  );
@@ -24,13 +24,18 @@
24
24
  display: none;
25
25
  }
26
26
 
27
+ .display_grid {
28
+ display: grid;
29
+ }
30
+
27
31
  $display_values: (
28
32
  none: $display_none,
29
33
  flex: $display_flex,
30
34
  inline: $display_inline,
31
35
  inline_block: $display_inline_block,
32
36
  inline_flex: $display_inline_flex,
33
- block: $display_block
37
+ block: $display_block,
38
+ grid: $display_grid
34
39
  );
35
40
 
36
41
  // using a grid here
@@ -9,7 +9,7 @@ const testSubject = 'body'
9
9
 
10
10
  // %w[block inline_block inline flex inline_flex none]
11
11
  test('Global Props: returns proper class name', () => {
12
- const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none"]
12
+ const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none", "grid" ]
13
13
  for(let x = 0, y = propValues.length; x < y; ++x) {
14
14
  const testId = `${testSubject}-${propValues[x]}`
15
15
  render(