playbook_ui 14.18.0.pre.alpha.play2034zonesandcolors7407 → 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469

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 (57) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +304 -21
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +5 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  11. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  12. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  13. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  14. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  15. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  17. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  18. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  19. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  21. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
  24. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
  25. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
  26. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  27. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
  28. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
  29. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
  30. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  31. data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
  32. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
  33. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
  34. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  35. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  36. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  37. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  38. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  39. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  40. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
  41. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
  42. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
  43. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  44. data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
  45. data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
  46. data/dist/chunks/{_typeahead-CvkGr9xV.js → _typeahead-D8CsVBZO.js} +2 -2
  47. data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
  48. data/dist/chunks/{lib-yWHJ_8mm.js → lib-BmTAc7Nc.js} +1 -1
  49. data/dist/chunks/{pb_form_validation-CFPfX89U.js → pb_form_validation-BWjy4bFn.js} +1 -1
  50. data/dist/chunks/vendor.js +1 -1
  51. data/dist/playbook-doc.js +1 -1
  52. data/dist/playbook-rails-react-bindings.js +1 -1
  53. data/dist/playbook-rails.js +1 -1
  54. data/dist/playbook.css +1 -1
  55. data/lib/playbook/version.rb +1 -1
  56. metadata +24 -6
  57. data/dist/chunks/_weekday_stacked-B-ran-L1.js +0 -45
data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb ADDED
@@ -0,0 +1,46 @@
1
+ <%= pb_rails("flex", props: {
2
+ dark: true,
3
+ orientation: "row",
4
+ vertical: "center",
5
+ margin_bottom: "md"
6
+ }) do %>
7
+ <%= pb_rails("body", props: { text: "Click info for more details" }) %>
8
+ &nbsp;
9
+ <%= pb_rails("circle_icon_button", props: {
10
+ variant: "secondary",
11
+ icon: "info",
12
+ id: "append-to-popover-1"
13
+ }) %>
14
+ <%= pb_rails("popover", props: {
15
+ trigger_element_id: "append-to-popover-1",
16
+ tooltip_id: "append-to-tooltip-1",
17
+ offset: true,
18
+ position: "top",
19
+ append_to: "parent",
20
+ }) do %>
21
+ I'm a popover. I have been appended to my parent element.
22
+ <% end %>
23
+ <% end %>
24
+
25
+ <%= pb_rails("flex", props: {
26
+ dark: true,
27
+ orientation: "row",
28
+ vertical: "center"
29
+ }) do %>
30
+ <%= pb_rails("body", props: { text: "Click info for more details" }) %>
31
+ &nbsp;
32
+ <%= pb_rails("circle_icon_button", props: {
33
+ variant: "secondary",
34
+ icon: "info",
35
+ id: "append-to-popover-2"
36
+ }) %>
37
+ <%= pb_rails("popover", props: {
38
+ trigger_element_id: "append-to-popover-2",
39
+ tooltip_id: "append-to-tooltip-2",
40
+ offset: true,
41
+ position: "top",
42
+ append_to: ".kit-show-wrapper",
43
+ }) do %>
44
+ I'm a popover. I have been appended to the .kit-show-wrapper.
45
+ <% end %>
46
+ <% end %>
data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md ADDED
@@ -0,0 +1 @@
1
+ By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
data/app/pb_kits/playbook/pb_popover/docs/example.yml CHANGED
@@ -6,6 +6,7 @@ examples:
6
6
  - popover_z_index: Set Z-Index
7
7
  - popover_scroll_height: Scroll and Height Settings
8
8
  - popover_actionable_content: With Actionable Content
9
+ - popover_append_to: Append To
9
10
 
10
11
  react:
11
12
  - popover_default: Default
data/app/pb_kits/playbook/pb_popover/index.ts CHANGED
@@ -13,7 +13,15 @@ export default class PbPopover extends PbEnhancedElement {
13
13
  }
14
14
 
15
15
  moveTooltip() {
16
- document.querySelector('body').appendChild(this.tooltip)
16
+ let container: HTMLElement | null;
17
+
18
+ if (this.appendTo === "parent") {
19
+ container = this.element.parentElement;
20
+ } else if (this.appendTo) {
21
+ container = document.querySelector(this.appendTo);
22
+ }
23
+
24
+ (container || document.body).appendChild(this.tooltip);
17
25
  }
18
26
 
19
27
  connect() {
@@ -108,4 +116,8 @@ export default class PbPopover extends PbEnhancedElement {
108
116
  get closeOnClick() {
109
117
  return this.element.dataset.pbPopoverCloseOnClick
110
118
  }
119
+
120
+ get appendTo() {
121
+ return this.element.dataset.pbPopoverAppendTo;
122
+ }
111
123
  }
data/app/pb_kits/playbook/pb_popover/popover.rb CHANGED
@@ -3,6 +3,7 @@
3
3
  module Playbook
4
4
  module PbPopover
5
5
  class Popover < Playbook::KitBase
6
+ prop :append_to, type: Playbook::Props::String, default: "body"
6
7
  prop :position, type: Playbook::Props::Enum,
7
8
  values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
8
9
  default: "left"
@@ -47,6 +48,7 @@ module Playbook
47
48
 
48
49
  def data
49
50
  Hash(values[:data]).merge(
51
+ pb_popover_append_to: append_to,
50
52
  pb_popover_kit: true,
51
53
  pb_popover_position: position,
52
54
  pb_popover_trigger_element_id: trigger_element_id,