playbook_ui 14.21.2.pre.alpha.PLAY22558410 → 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863

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 (123) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +6 -7
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
  5. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +2 -2
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +19 -2
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -2
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +16 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -2
  16. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
  17. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  27. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  28. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  29. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  30. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  31. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  32. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  33. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  34. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
  47. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
  53. data/app/pb_kits/playbook/pb_contact/contact.test.js +2 -2
  54. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -39
  55. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -39
  56. data/app/pb_kits/playbook/pb_filter/filter.test.js +2 -2
  57. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
  58. data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
  59. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
  60. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
  61. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
  62. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
  63. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
  64. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
  65. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +11 -0
  66. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +34 -22
  67. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  68. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx +25 -0
  69. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  70. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md +1 -0
  71. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
  72. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  73. data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
  74. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
  75. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
  76. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
  77. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  78. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
  79. data/dist/chunks/_circle_chart-C56zcOHC.js +1 -0
  80. data/dist/chunks/_typeahead-Do6525vz.js +22 -0
  81. data/dist/chunks/_weekday_stacked-CrFm3XuJ.js +45 -0
  82. data/dist/chunks/{lib-CTkMyvfQ.js → lib-DYpq0k8j.js} +2 -2
  83. data/dist/chunks/{pb_form_validation-BVF3TmcL.js → pb_form_validation-BUOKwfvW.js} +1 -1
  84. data/dist/chunks/vendor.js +1 -1
  85. data/dist/menu.yml +0 -9
  86. data/dist/playbook-doc.js +2 -2
  87. data/dist/playbook-rails-react-bindings.js +1 -1
  88. data/dist/playbook-rails.js +1 -1
  89. data/dist/playbook.css +1 -1
  90. data/lib/playbook/version.rb +2 -2
  91. metadata +23 -37
  92. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  93. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  94. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  95. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  96. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  97. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  98. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss +0 -14
  99. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +0 -119
  100. data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +0 -5
  101. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +0 -37
  102. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +0 -48
  103. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +0 -2
  104. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +0 -37
  105. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +0 -47
  106. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +0 -3
  107. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +0 -79
  108. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +0 -90
  109. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +0 -1
  110. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +0 -54
  111. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +0 -65
  112. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +0 -3
  113. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +0 -37
  114. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +0 -48
  115. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +0 -3
  116. data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +0 -15
  117. data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +0 -5
  118. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -63
  119. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb +0 -1
  120. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +0 -48
  121. data/dist/chunks/_typeahead-B80UsDrG.js +0 -22
  122. data/dist/chunks/_weekday_stacked-D1bqIne1.js +0 -45
  123. /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "14.21.2"
5
- VERSION = "14.21.2.pre.alpha.PLAY22558410"
4
+ PREVIOUS_VERSION = "14.22.0"
5
+ VERSION = "14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863"
6
6
  end
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: 14.21.2.pre.alpha.PLAY22558410
4
+ version: 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863
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: 2025-06-13 00:00:00.000000000 Z
12
+ date: 2025-07-11 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -328,6 +328,8 @@ files:
328
328
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
329
329
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb
330
330
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md
331
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx
332
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
331
333
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
332
334
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
333
335
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
@@ -401,6 +403,8 @@ files:
401
403
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
402
404
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
403
405
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
406
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
407
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md
404
408
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
405
409
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
406
410
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
@@ -514,19 +518,19 @@ files:
514
518
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
515
519
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
516
520
  - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
521
+ - app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
517
522
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
518
523
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
519
524
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
520
525
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
521
526
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
522
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
523
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
524
527
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
525
528
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
526
529
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
527
530
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
528
531
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
529
532
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
533
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
530
534
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
531
535
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
532
536
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
@@ -538,8 +542,6 @@ files:
538
542
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
539
543
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
540
544
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
541
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
542
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
543
545
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
544
546
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
545
547
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -765,7 +767,8 @@ files:
765
767
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
766
768
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
767
769
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
768
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
770
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
771
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
769
772
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
770
773
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
771
774
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
@@ -777,8 +780,6 @@ files:
777
780
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
778
781
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
779
782
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
780
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
781
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
782
783
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
783
784
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
784
785
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
@@ -787,6 +788,7 @@ files:
787
788
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
788
789
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
789
790
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
791
+ - app/pb_kits/playbook/pb_circle_chart/docs/_description.md
790
792
  - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
791
793
  - app/pb_kits/playbook/pb_circle_chart/docs/index.js
792
794
  - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
@@ -3337,6 +3339,10 @@ files:
3337
3339
  - app/pb_kits/playbook/pb_toggle/toggle.test.js
3338
3340
  - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
3339
3341
  - app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
3342
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
3343
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
3344
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
3345
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
3340
3346
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
3341
3347
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
3342
3348
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -3368,29 +3374,6 @@ files:
3368
3374
  - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
3369
3375
  - app/pb_kits/playbook/pb_tooltip/tooltip.rb
3370
3376
  - app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
3371
- - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss
3372
- - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
3373
- - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
3374
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
3375
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
3376
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md
3377
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb
3378
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx
3379
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md
3380
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb
3381
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx
3382
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md
3383
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb
3384
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx
3385
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md
3386
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb
3387
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx
3388
- - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md
3389
- - app/pb_kits/playbook/pb_treemap_chart/docs/example.yml
3390
- - app/pb_kits/playbook/pb_treemap_chart/docs/index.js
3391
- - app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js
3392
- - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
3393
- - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
3394
3377
  - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
3395
3378
  - app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
3396
3379
  - app/pb_kits/playbook/pb_typeahead/_typeahead.tsx
@@ -3425,8 +3408,10 @@ files:
3425
3408
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
3426
3409
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
3427
3410
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
3411
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
3428
3412
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
3429
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md
3413
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md
3414
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
3430
3415
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
3431
3416
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
3432
3417
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
@@ -3633,11 +3618,12 @@ files:
3633
3618
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3634
3619
  - app/pb_kits/playbook/utilities/text.ts
3635
3620
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3636
- - dist/chunks/_typeahead-B80UsDrG.js
3637
- - dist/chunks/_weekday_stacked-D1bqIne1.js
3621
+ - dist/chunks/_circle_chart-C56zcOHC.js
3622
+ - dist/chunks/_typeahead-Do6525vz.js
3623
+ - dist/chunks/_weekday_stacked-CrFm3XuJ.js
3638
3624
  - dist/chunks/lazysizes-B7xYodB-.js
3639
- - dist/chunks/lib-CTkMyvfQ.js
3640
- - dist/chunks/pb_form_validation-BVF3TmcL.js
3625
+ - dist/chunks/lib-DYpq0k8j.js
3626
+ - dist/chunks/pb_form_validation-BUOKwfvW.js
3641
3627
  - dist/chunks/vendor.js
3642
3628
  - dist/menu.yml
3643
3629
  - dist/playbook-doc.js
@@ -1,72 +0,0 @@
1
- import React from 'react'
2
- import ReactDOMServer from 'react-dom/server'
3
- import BarGraph from '../_bar_graph'
4
- import Icon from '../../pb_icon/_icon'
5
-
6
- const chartData = [
7
- {
8
- name: 'Role',
9
- data: [0, 200, 300, 654, 656],
10
- },
11
- {
12
- name: 'Company',
13
- data: [150, 524, 320, 440, 500],
14
- },
15
- ]
16
-
17
- const renderIcon = (iconName, color) => {
18
- return ReactDOMServer.renderToStaticMarkup(
19
- <Icon
20
- color={color}
21
- icon={iconName}
22
- />)
23
- };
24
-
25
- const barGraphOptions = {
26
- yAxis: {
27
- tickInterval: 5,
28
- },
29
- xAxis: {
30
- categories: ['1', '2', '3', '4', '5'],
31
- labels: {
32
- useHTML: true,
33
- formatter: function () {
34
- switch (this.value) {
35
- case '1':
36
- return `${renderIcon('frown', 'error')}`;
37
- case '2':
38
- return `${renderIcon('frown', 'warning')}`;
39
- case '3':
40
- return `${renderIcon('frown-open', 'neutral')}`;
41
- case '4':
42
- return `${renderIcon('smile', 'category_7')}`;
43
- case '5':
44
- return `${renderIcon('smile-beam', 'success')}`;
45
- default:
46
- return ''
47
- }
48
- },
49
- style: {
50
- fontSize: '1.4em',
51
- },
52
- y: 42,
53
- },
54
- },
55
- legend: {
56
- itemMarginTop: 62,
57
- },
58
- }
59
-
60
- const BarGraphCustom = () => (
61
- <div>
62
- <BarGraph
63
- chartData={chartData}
64
- customOptions={barGraphOptions}
65
- id="happiness-dashboard"
66
- legend
67
- title="Bar Graph with Custom Overrides"
68
- />
69
- </div>
70
- )
71
-
72
- export default BarGraphCustom
@@ -1,6 +0,0 @@
1
- The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
2
- It's important to note that certain options may require specific script imports to function properly.
3
-
4
- Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
5
-
6
- You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.
@@ -1,64 +0,0 @@
1
- import React from 'react'
2
- import Highcharts from "highcharts";
3
- import HighchartsReact from "highcharts-react-official";
4
-
5
- import "../BarGraphStyles.scss";
6
- // Your path might look more like this
7
- //import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
8
-
9
- const columnChartData = [
10
- {
11
- name: "Installation",
12
- data: [1475, 200, 3000, 654, 656],
13
- },
14
- {
15
- name: "Manufacturing",
16
- data: [4434, 524, 2320, 440, 500],
17
- },
18
- {
19
- name: "Sales & Distribution",
20
- data: [3387, 743, 1344, 434, 440],
21
- },
22
- {
23
- name: "Project Development",
24
- data: [3227, 878, 999, 780, 1000],
25
- },
26
- {
27
- name: "Other",
28
- data: [1111, 677, 3245, 500, 200],
29
- },
30
- ];
31
-
32
- const columnOptions = {
33
- chart: {
34
- type: "column",
35
- },
36
- series: columnChartData,
37
- title: {
38
- text: "Solar Employment Growth by Sector, 2010-2016",
39
- },
40
- subtitle: {
41
- text: "Source: thesolarfoundation.com",
42
- },
43
- xAxis: {
44
- categories: ["Jan", "Feb", "Mar", "Apr", "May"],
45
- },
46
- yAxis: {
47
- min: 0,
48
- title: {
49
- text: "Number of Employees",
50
- },
51
- },
52
- legend: { enabled: false },
53
- credits: { enabled: false },
54
- };
55
-
56
- const BarGraphPbStyles = () => (
57
- <div>
58
- <HighchartsReact highcharts={Highcharts}
59
- options={columnOptions}
60
- />
61
- </div>
62
- )
63
-
64
- export default BarGraphPbStyles
@@ -1 +0,0 @@
1
- You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.
@@ -1,38 +0,0 @@
1
- import React from 'react'
2
- import circleChartTheme from '../circleChartTheme'
3
- import Highcharts from "highcharts"
4
- import HighchartsReact from "highcharts-react-official"
5
-
6
- const data = [
7
- {
8
- name: 'Waiting for Calls',
9
- y: 41,
10
- },
11
- {
12
- name: 'On Call',
13
- y: 49,
14
- },
15
- {
16
- name: 'After Call',
17
- y: 10,
18
- },
19
- ]
20
-
21
- const baseOptions = {
22
- series: [{ data: data }],
23
- }
24
-
25
- const CircleChartPbStyles = () => {
26
- const options = Highcharts.merge({}, circleChartTheme, baseOptions )
27
-
28
- return (
29
- <div>
30
- <HighchartsReact
31
- highcharts={Highcharts}
32
- options={options}
33
- />
34
- </div>
35
- );
36
- };
37
-
38
- export default CircleChartPbStyles;
@@ -1 +0,0 @@
1
- You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.
@@ -1,14 +0,0 @@
1
- .pb_treemap_chart {
2
- .highcharts-drillup-button {
3
- .highcharts-button-box {
4
- fill: $primary;
5
- &:hover {
6
- fill: #004ebb;
7
- }
8
- }
9
- text {
10
- transform: translateX(25px);
11
- fill: $white;
12
- }
13
- }
14
- }
@@ -1,119 +0,0 @@
1
- import React, { useState, useEffect } from "react";
2
- import classnames from "classnames";
3
-
4
- import { globalProps } from "../utilities/globalProps";
5
- import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
6
-
7
- import HighchartsReact from "highcharts-react-official";
8
- import Highcharts from "highcharts";
9
- import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
10
- import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
11
- import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
- import treemap from 'highcharts/modules/treemap'
13
- import { merge } from '../utilities/object'
14
-
15
- type TreemapChartProps = {
16
- chartData: {
17
- name: string;
18
- parent?: string | number;
19
- value: number;
20
- color?: string;
21
- id?: string | number;
22
- }[];
23
- className?: string;
24
- colors: string[];
25
- customOptions?: Partial<Highcharts.Options>;
26
- dark?: boolean;
27
- drillable: boolean;
28
- grouped: boolean;
29
- height?: string;
30
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
31
- id: number | string;
32
- title?: string;
33
- tooltipHtml: string;
34
- type?: string;
35
- aria?: { [key: string]: string };
36
- data?: { [key: string]: string };
37
- };
38
-
39
- const TreemapChart = ({
40
- aria = {},
41
- data = {},
42
- chartData,
43
- colors,
44
- customOptions = {},
45
- dark = false,
46
- drillable = false,
47
- grouped = false,
48
- height,
49
- htmlOptions = {},
50
- id,
51
- title = "",
52
- tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
53
- type = "treemap",
54
- ...props
55
- }: TreemapChartProps): React.ReactElement => {
56
-
57
- const ariaProps = buildAriaProps(aria)
58
- const dataProps = buildDataProps(data)
59
- const htmlProps = buildHtmlProps(htmlOptions)
60
-
61
- const setupTheme = () => {
62
- dark
63
- ? Highcharts.setOptions(highchartsDarkTheme)
64
- : Highcharts.setOptions(highchartsTheme);
65
- };
66
- treemap(Highcharts)
67
- setupTheme();
68
-
69
- const staticOptions = {
70
- title: {
71
- text: title,
72
- },
73
- chart: {
74
- height: height,
75
- type: type,
76
- },
77
- credits: false,
78
- series: [
79
- {
80
- data: chartData,
81
- },
82
- ],
83
- plotOptions: {
84
- treemap: {
85
- tooltip: {
86
- pointFormat: tooltipHtml,
87
- },
88
- allowTraversingTree: drillable,
89
- colorByPoint: !grouped,
90
- colors:
91
- colors !== undefined && colors.length > 0
92
- ? mapColors(colors)
93
- : highchartsTheme.colors,
94
- },
95
- },
96
- };
97
-
98
- const [options, setOptions] = useState({});
99
-
100
- useEffect(() => {
101
- setOptions(merge(staticOptions, customOptions));
102
- }, [chartData]);
103
-
104
- return (
105
- <HighchartsReact
106
- containerProps={{
107
- className: classnames(globalProps(props), "pb_treemap_chart"),
108
- id: id,
109
- ...ariaProps,
110
- ...dataProps,
111
- ...htmlProps
112
- }}
113
- highcharts={Highcharts}
114
- options={options}
115
- />
116
- );
117
- };
118
-
119
- export default TreemapChart;
@@ -1,5 +0,0 @@
1
- Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
2
-
3
- The default height of treemap is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.
4
-
5
- For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.
@@ -1,37 +0,0 @@
1
- <% data = [
2
- {
3
- name: "Pepperoni",
4
- parent: "Toppings",
5
- value: 600,
6
- }, {
7
- name: "Cheese",
8
- parent: "Toppings",
9
- value: 510,
10
- }, {
11
- name: "Mushroom",
12
- parent: "Toppings",
13
- value: 330,
14
- },{
15
- name: "Onions",
16
- parent: "Toppings",
17
- value: 250,
18
- }, {
19
- name: "Olives",
20
- parent: "Toppings",
21
- value: 204,
22
- }, {
23
- name: "Pineapple",
24
- parent: "Toppings",
25
- value: 90,
26
- }, {
27
- name: "Pizza Toppings",
28
- id: "Toppings",
29
- },
30
- ] %>
31
-
32
- <%= pb_rails("treemap_chart", props: {
33
- chart_data: data,
34
- colors: ["data-4", "data-7", "#8E6E53", "#124732"],
35
- id: "treemap-colors",
36
- title: "Favored Pizza Toppings",
37
- }) %>
@@ -1,48 +0,0 @@
1
- import React from 'react'
2
-
3
- import TreemapChart from '../_treemap_chart'
4
-
5
- const chartData = [
6
- {
7
- name: "Pepperoni",
8
- parent: "Toppings",
9
- value: 600,
10
- }, {
11
- name: "Cheese",
12
- parent: "Toppings",
13
- value: 510,
14
- }, {
15
- name: "Mushroom",
16
- parent: "Toppings",
17
- value: 330,
18
- },{
19
- name: "Onions",
20
- parent: "Toppings",
21
- value: 250,
22
- }, {
23
- name: "Olives",
24
- parent: "Toppings",
25
- value: 204,
26
- }, {
27
- name: "Pineapple",
28
- parent: "Toppings",
29
- value: 90,
30
- }, {
31
- name: "Pizza Toppings",
32
- id: "Toppings",
33
- },
34
- ]
35
-
36
- const TreemapChartColors = (props) => (
37
- <div>
38
- <TreemapChart
39
- chartData={chartData}
40
- colors={["data-4", "data-7", "#8E6E53", "#124732"]}
41
- id="treemap-colors"
42
- title="Favored Pizza Toppings"
43
- {...props}
44
- />
45
- </div>
46
- )
47
-
48
- export default TreemapChartColors
@@ -1,2 +0,0 @@
1
- Custom data colors allow for color customization to match the needs of business requirements.
2
- Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`
@@ -1,37 +0,0 @@
1
- <% data = [
2
- {
3
- name: "Pepperoni",
4
- parent: "Toppings",
5
- value: 600,
6
- }, {
7
- name: "Cheese",
8
- parent: "Toppings",
9
- value: 510,
10
- }, {
11
- name: "Mushroom",
12
- parent: "Toppings",
13
- value: 330,
14
- },{
15
- name: "Onions",
16
- parent: "Toppings",
17
- value: 250,
18
- }, {
19
- name: "Olives",
20
- parent: "Toppings",
21
- value: 204,
22
- }, {
23
- name: "Pineapple",
24
- parent: "Toppings",
25
- value: 90,
26
- }, {
27
- name: "Pizza Toppings",
28
- id: "Toppings",
29
- },
30
- ] %>
31
-
32
-
33
- <%= pb_rails("treemap_chart", props: {
34
- chart_data: data,
35
- id: "treemap-default",
36
- title: "Favored Pizza Toppings",
37
- }) %>
@@ -1,47 +0,0 @@
1
- import React from 'react'
2
-
3
- import TreemapChart from '../_treemap_chart'
4
-
5
- const chartData = [
6
- {
7
- name: "Pepperoni",
8
- parent: "Toppings",
9
- value: 600,
10
- }, {
11
- name: "Cheese",
12
- parent: "Toppings",
13
- value: 510,
14
- }, {
15
- name: "Mushroom",
16
- parent: "Toppings",
17
- value: 330,
18
- },{
19
- name: "Onions",
20
- parent: "Toppings",
21
- value: 250,
22
- }, {
23
- name: "Olives",
24
- parent: "Toppings",
25
- value: 204,
26
- }, {
27
- name: "Pineapple",
28
- parent: "Toppings",
29
- value: 90,
30
- }, {
31
- name: "Pizza Toppings",
32
- id: "Toppings",
33
- },
34
- ]
35
-
36
- const TreemapChartDefault = (props) => (
37
- <div>
38
- <TreemapChart
39
- chartData={chartData}
40
- id="treemap-default"
41
- title="Favored Pizza Toppings"
42
- {...props}
43
- />
44
- </div>
45
- )
46
-
47
- export default TreemapChartDefault