playbook_ui 14.22.0.pre.alpha.PLAY22578709 → 14.22.0.pre.alpha.PLAY22958842

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 (65) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
  3. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
  4. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  20. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
  21. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
  22. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
  23. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
  24. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
  25. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
  26. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
  27. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
  28. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
  39. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +4 -12
  40. data/app/pb_kits/playbook/pb_draggable/context/types.ts +2 -5
  41. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  42. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  43. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  44. data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
  45. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
  46. data/dist/chunks/_circle_chart-BjcInQNv.js +1 -0
  47. data/dist/chunks/{_typeahead-BZsshVoi.js → _typeahead-CuwY9iVi.js} +3 -3
  48. data/dist/chunks/{_weekday_stacked-DO4S-plL.js → _weekday_stacked-C3EeTZ8D.js} +1 -1
  49. data/dist/chunks/{lib-Carqm8Ip.js → lib-DYpq0k8j.js} +1 -1
  50. data/dist/chunks/{pb_form_validation-DqRmTS8m.js → pb_form_validation-BUOKwfvW.js} +1 -1
  51. data/dist/chunks/vendor.js +1 -1
  52. data/dist/menu.yml +68 -8
  53. data/dist/playbook-doc.js +1 -1
  54. data/dist/playbook-rails-react-bindings.js +1 -1
  55. data/dist/playbook-rails.js +1 -1
  56. data/dist/playbook.css +1 -1
  57. data/lib/playbook/version.rb +1 -1
  58. metadata +15 -14
  59. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  60. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  61. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  62. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  63. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  64. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  65. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.22.0"
5
- VERSION = "14.22.0.pre.alpha.PLAY22578709"
5
+ VERSION = "14.22.0.pre.alpha.PLAY22958842"
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.22.0.pre.alpha.PLAY22578709
4
+ version: 14.22.0.pre.alpha.PLAY22958842
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-30 00:00:00.000000000 Z
12
+ date: 2025-07-07 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -518,19 +518,19 @@ files:
518
518
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
519
519
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
520
520
  - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
521
+ - app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
521
522
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
522
523
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
523
524
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
524
525
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
525
526
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
526
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
527
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
528
527
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
529
528
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
530
529
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
531
530
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
532
531
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
533
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
534
534
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
535
535
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
536
536
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
@@ -542,8 +542,6 @@ files:
542
542
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
543
543
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
544
544
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
545
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
546
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
547
545
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
548
546
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
549
547
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -769,7 +767,8 @@ files:
769
767
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
770
768
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
771
769
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
772
- - 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
773
772
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
774
773
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
775
774
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
@@ -781,8 +780,6 @@ files:
781
780
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
782
781
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
783
782
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
784
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
785
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
786
783
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
787
784
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
788
785
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
@@ -791,6 +788,7 @@ files:
791
788
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
792
789
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
793
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
794
792
  - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
795
793
  - app/pb_kits/playbook/pb_circle_chart/docs/index.js
796
794
  - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
@@ -3341,8 +3339,10 @@ files:
3341
3339
  - app/pb_kits/playbook/pb_toggle/toggle.test.js
3342
3340
  - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
3343
3341
  - app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
3342
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
3344
3343
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
3345
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
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
3346
3346
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
3347
3347
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
3348
3348
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -3618,11 +3618,12 @@ files:
3618
3618
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3619
3619
  - app/pb_kits/playbook/utilities/text.ts
3620
3620
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3621
- - dist/chunks/_typeahead-BZsshVoi.js
3622
- - dist/chunks/_weekday_stacked-DO4S-plL.js
3621
+ - dist/chunks/_circle_chart-BjcInQNv.js
3622
+ - dist/chunks/_typeahead-CuwY9iVi.js
3623
+ - dist/chunks/_weekday_stacked-C3EeTZ8D.js
3623
3624
  - dist/chunks/lazysizes-B7xYodB-.js
3624
- - dist/chunks/lib-Carqm8Ip.js
3625
- - dist/chunks/pb_form_validation-DqRmTS8m.js
3625
+ - dist/chunks/lib-DYpq0k8j.js
3626
+ - dist/chunks/pb_form_validation-BUOKwfvW.js
3626
3627
  - dist/chunks/vendor.js
3627
3628
  - dist/menu.yml
3628
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.