playbook_ui 15.6.0.pre.alpha.play266013023 → 15.6.0.pre.rc.0

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 (106) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +163 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +190 -0
  4. data/app/pb_kits/playbook/pb_background/_background.tsx +6 -6
  5. data/app/pb_kits/playbook/pb_background/background.test.js +1 -5
  6. data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +1 -1
  7. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +1 -0
  8. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -2
  9. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  10. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  11. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +2 -2
  12. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx +8 -10
  13. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -0
  14. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +3 -0
  15. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +0 -24
  16. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +3 -181
  17. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -2
  18. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_dialog/dialog.rb +0 -1
  20. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +0 -14
  21. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +4 -5
  22. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +0 -2
  23. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +0 -31
  24. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -2
  25. data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -2
  26. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +1 -1
  27. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +7 -458
  28. data/app/pb_kits/playbook/pb_draggable/context/types.ts +3 -8
  29. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -3
  30. data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -2
  31. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +1 -77
  32. data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +4 -4
  33. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +22 -34
  34. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +12 -16
  35. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb +1 -1
  36. data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.html.erb +12 -16
  37. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +12 -16
  38. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +0 -10
  39. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +15 -66
  40. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -1
  41. data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +0 -1
  42. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.test.js +0 -25
  43. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +10 -44
  44. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +4 -34
  45. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +7 -16
  46. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md +1 -1
  47. data/app/pb_kits/playbook/pb_select/_select.tsx +3 -8
  48. data/app/pb_kits/playbook/pb_select/docs/_select_error.md +1 -1
  49. data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -2
  50. data/app/pb_kits/playbook/pb_select/docs/index.js +0 -1
  51. data/app/pb_kits/playbook/pb_select/select.html.erb +2 -2
  52. data/app/pb_kits/playbook/pb_select/select.rb +1 -3
  53. data/app/pb_kits/playbook/pb_select/select.test.js +0 -23
  54. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md +1 -1
  55. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md +1 -1
  56. data/app/pb_kits/playbook/pb_timeline/_item.tsx +0 -3
  57. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md +1 -1
  58. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +0 -2
  59. data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
  60. data/app/pb_kits/playbook/pb_timeline/item.html.erb +1 -1
  61. data/app/pb_kits/playbook/pb_timeline/item.rb +0 -2
  62. data/app/pb_kits/playbook/pb_timeline/label.html.erb +1 -2
  63. data/app/pb_kits/playbook/pb_timeline/label.rb +0 -2
  64. data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +0 -3
  65. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -51
  66. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +0 -15
  67. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +0 -3
  68. data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx +2 -13
  69. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -6
  70. data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx +7 -34
  71. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
  72. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -2
  73. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -6
  74. data/app/pb_kits/playbook/tokens/_colors.scss +1 -2
  75. data/dist/chunks/_typeahead-kRdz5zPn.js +6 -0
  76. data/dist/chunks/lib-CgpqUb6l.js +29 -0
  77. data/dist/chunks/vendor.js +2 -2
  78. data/dist/playbook-rails-react-bindings.js +1 -1
  79. data/dist/playbook-rails.js +1 -1
  80. data/dist/playbook.css +1 -1
  81. data/lib/playbook/forms/builder/collection_select_field.rb +1 -9
  82. data/lib/playbook/forms/builder/select_field.rb +1 -9
  83. data/lib/playbook/forms/builder/time_zone_select_field.rb +1 -9
  84. data/lib/playbook/pb_kit_helper.rb +0 -35
  85. data/lib/playbook/version.rb +2 -2
  86. metadata +4 -22
  87. data/app/pb_kits/playbook/pb_background/docs/_background_light.md +0 -1
  88. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.html.erb +0 -24
  89. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx +0 -60
  90. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md +0 -3
  91. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx +0 -180
  92. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md +0 -22
  93. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +0 -42
  94. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +0 -1
  95. data/app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb +0 -16
  96. data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx +0 -30
  97. data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md +0 -1
  98. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb +0 -60
  99. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx +0 -118
  100. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md +0 -1
  101. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb +0 -30
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx +0 -37
  103. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md +0 -3
  104. data/app/pb_kits/playbook/utilities/deprecated.ts +0 -73
  105. data/dist/chunks/_typeahead-CYNrKU10.js +0 -6
  106. data/dist/chunks/lib-DDDLiZuu.js +0 -29
@@ -1,60 +0,0 @@
1
- <%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
2
- <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
3
- <%= pb_rails("title_detail", props: {
4
- title: "Jackson Heights",
5
- detail: "37-27 74th Street"
6
- }) %>
7
- <% end %>
8
- <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
9
- <%= pb_rails("title_detail", props: {
10
- title: "Greenpoint",
11
- detail: "81 Gate St Brooklyn"
12
- }) %>
13
- <% end %>
14
- <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
15
- <% item.label do %>
16
- <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
17
- <% end %>
18
- <% item.step do %>
19
- <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
20
- <% end %>
21
- <% item.detail do %>
22
- <%= pb_rails("title_detail", props: {
23
- title: "Society Hill",
24
- detail: "72 E St Astoria"
25
- }) %>
26
- <% end %>
27
- <% end %>
28
- <% end %>
29
-
30
- <br /><br /><br />
31
-
32
- <%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
33
- <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
34
- <%= pb_rails("title_detail", props: {
35
- title: "Jackson Heights",
36
- detail: "37-27 74th Street"
37
- }) %>
38
- <% end %>
39
- <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
40
- <%= pb_rails("title_detail", props: {
41
- title: "Greenpoint",
42
- detail: "81 Gate St Brooklyn"
43
- }) %>
44
- <% end %>
45
- <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
46
- <% item.label do %>
47
- <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
48
- <% end %>
49
- <% item.step do %>
50
- <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
51
- <% end %>
52
- <% item.detail do %>
53
- <%= pb_rails("title_detail", props: {
54
- title: "Society Hill",
55
- detail: "72 E St Astoria"
56
- }) %>
57
- <% end %>
58
- <% end %>
59
- <% end %>
60
-
@@ -1,118 +0,0 @@
1
- import React from 'react'
2
-
3
- import Timeline from '../_timeline'
4
- import TitleDetail from '../../pb_title_detail/_title_detail'
5
-
6
- const TimelineShowCurrentYear = (props) => (
7
- <div>
8
- <Timeline
9
- orientation="horizontal"
10
- showDate
11
- {...props}
12
- >
13
- <Timeline.Item
14
- date={new Date()}
15
- icon="user"
16
- iconColor="royal"
17
- showCurrentYear
18
- {...props}
19
- >
20
- <TitleDetail
21
- detail="37-27 74th Street"
22
- title="Jackson Heights"
23
- {...props}
24
- />
25
- </Timeline.Item>
26
- <Timeline.Item
27
- icon="check"
28
- iconColor="teal"
29
- lineStyle="dotted"
30
- {...props}
31
- >
32
- <TitleDetail
33
- detail="81 Gate St Brooklyn"
34
- title="Greenpoint"
35
- {...props}
36
- />
37
- </Timeline.Item>
38
- <Timeline.Item
39
- lineStyle="solid"
40
- {...props}
41
- >
42
- <Timeline.Label
43
- date={new Date()}
44
- showCurrentYear
45
- />
46
- <Timeline.Step
47
- icon="map-marker-alt"
48
- iconColor="purple"
49
- />
50
- <Timeline.Detail>
51
- <TitleDetail
52
- detail="72 E St Astoria"
53
- title="Society Hill"
54
- {...props}
55
- />
56
- </Timeline.Detail>
57
- </Timeline.Item>
58
- </Timeline>
59
-
60
- <br />
61
- <br />
62
- <br />
63
-
64
- <Timeline
65
- orientation="vertical"
66
- showDate
67
- {...props}
68
- >
69
- <Timeline.Item
70
- date={new Date()}
71
- icon="user"
72
- iconColor="royal"
73
- showCurrentYear
74
- {...props}
75
- >
76
- <TitleDetail
77
- detail="37-27 74th Street"
78
- title="Jackson Heights"
79
- {...props}
80
- />
81
- </Timeline.Item>
82
- <Timeline.Item
83
- icon="check"
84
- iconColor="teal"
85
- lineStyle="dotted"
86
- {...props}
87
- >
88
- <TitleDetail
89
- detail="81 Gate St Brooklyn"
90
- title="Greenpoint"
91
- {...props}
92
- />
93
- </Timeline.Item>
94
- <Timeline.Item
95
- lineStyle="solid"
96
- {...props}
97
- >
98
- <Timeline.Label
99
- date={new Date()}
100
- showCurrentYear
101
- />
102
- <Timeline.Step
103
- icon="map-marker-alt"
104
- iconColor="purple"
105
- />
106
- <Timeline.Detail>
107
- <TitleDetail
108
- detail="72 E St Astoria"
109
- title="Society Hill"
110
- {...props}
111
- />
112
- </Timeline.Detail>
113
- </Timeline.Item>
114
- </Timeline>
115
- </div>
116
- )
117
-
118
- export default TimelineShowCurrentYear
@@ -1 +0,0 @@
1
- By default, the Timeline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true. Pass it to `Timeline.Item`/`timeline/item` when using its `date` prop, or to `Timeline.Label`/`timeline/label` if following the "With Children" pattern.
@@ -1,30 +0,0 @@
1
- <%
2
- options = [
3
- { label: 'Orange', value: '#FFA500' },
4
- { label: 'Red', value: '#FF0000' },
5
- { label: 'Green', value: '#00FF00' },
6
- { label: 'Blue', value: '#0000FF' },
7
- { label: 'Yellow', value: '#FFFF00' },
8
- { label: 'Purple', value: '#800080' },
9
- { label: 'Cyan', value: '#00FFFF' },
10
- { label: 'Magenta', value: '#FF00FF' }
11
- ]
12
- %>
13
-
14
- <%= pb_rails("typeahead", props: {
15
- id: "typeahead-input-display-none",
16
- label: "With Input Display None",
17
- options: options,
18
- name: :foo,
19
- input_display: "none",
20
- })
21
- %>
22
- <br/>
23
- <%= pb_rails("typeahead", props: {
24
- id: "typeahead-input-display-pills",
25
- label: "With Input Display Pills (Default)",
26
- options: options,
27
- name: :foo,
28
- pills: true,
29
- })
30
- %>
@@ -1,37 +0,0 @@
1
- import React from 'react'
2
-
3
- import Typeahead from '../_typeahead'
4
-
5
- const options = [
6
- { label: 'Orange', value: '#FFA500' },
7
- { label: 'Red', value: '#FF0000' },
8
- { label: 'Green', value: '#00FF00' },
9
- { label: 'Blue', value: '#0000FF' },
10
- { label: 'Yellow', value: '#FFFF00' },
11
- { label: 'Purple', value: '#800080' },
12
- { label: 'Cyan', value: '#00FFFF' },
13
- { label: 'Magenta', value: '#FF00FF' }
14
- ]
15
-
16
- const TypeaheadInputDisplay = (props) => {
17
- return (
18
- <>
19
- <Typeahead
20
- inputDisplay="none"
21
- isMulti
22
- label="With Input Display None"
23
- options={options}
24
- {...props}
25
- />
26
- <br/>
27
- <Typeahead
28
- isMulti
29
- label="With Input Display Pills (Default)"
30
- options={options}
31
- {...props}
32
- />
33
- </>
34
- )
35
- }
36
-
37
- export default TypeaheadInputDisplay
@@ -1,3 +0,0 @@
1
- Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default.
2
-
3
- **NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.
@@ -1,73 +0,0 @@
1
- /**
2
- * Tracks which deprecated kits have already logged warnings in this session
3
- * to ensure we only log once per page load per kit
4
- */
5
- const warnedKits = new Set<string>();
6
-
7
- /**
8
- * Logs a deprecation warning for a Playbook kit
9
- * - Only logs once per kit per page load (prevents spam on re-renders)
10
- * - Only logs in development mode (not in production or test environments)
11
- *
12
- * @param kitName - The name of the deprecated kit (e.g., 'BarGraph', 'RichTextEditor')
13
- * @param message - Optional custom deprecation message. If not provided, uses a default message.
14
- *
15
- * @example
16
- * // In your kit component:
17
- * useEffect(() => {
18
- * deprecatedKitWarning('BarGraph');
19
- * }, []);
20
- */
21
- export const deprecatedKitWarning = (
22
- kitName: string,
23
- message?: string
24
- ): void => {
25
- // Skip in test environments (Jest sets NODE_ENV to 'test')
26
- if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
27
- return;
28
- }
29
-
30
- // In browser environments, check if we're on localhost/dev
31
- if (typeof window !== 'undefined') {
32
- const hostname = window.location?.hostname;
33
- const isLocalDev = hostname === 'localhost' ||
34
- hostname === '127.0.0.1' ||
35
- hostname?.endsWith('.local') ||
36
- hostname?.includes('local.') ||
37
- !hostname; // file:// protocol
38
-
39
- // Only show warnings in local development
40
- if (!isLocalDev) {
41
- return;
42
- }
43
- }
44
-
45
- // Only warn once per kit per page load
46
- if (warnedKits.has(kitName)) {
47
- return;
48
- }
49
-
50
- // Mark this kit as warned
51
- warnedKits.add(kitName);
52
-
53
- // Build the warning message
54
- const baseMessage = `PLAYBOOK DEPRECATION WARNING
55
- ----------------------------
56
- The "${kitName}" kit is deprecated and will be removed in a future version.`;
57
-
58
- const fullMessage = message
59
- ? `${baseMessage} ${message}`
60
- : `${baseMessage} Please migrate to the recommended alternative
61
-
62
- `;
63
-
64
- console.warn(fullMessage);
65
- };
66
-
67
- /**
68
- * Resets the warned kits tracker (useful for testing)
69
- * @internal
70
- */
71
- export const resetDeprecationWarnings = (): void => {
72
- warnedKits.clear();
73
- };