playbook_ui 14.17.0.pre.alpha.play1499backgroundkitoverlay7110 → 14.17.0.pre.alpha.play1735highchartscirclechartdefaultrebuild7365

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 (137) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +23 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -128
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +9 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +7 -2
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +5 -1
  26. data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_background/_background.tsx +0 -1
  30. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +3 -4
  31. data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -1
  32. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  33. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +45 -0
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -1
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  38. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  39. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  40. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  41. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +1 -0
  42. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  43. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  44. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
  45. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
  46. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
  47. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
  48. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
  49. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
  50. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
  51. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
  52. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
  53. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
  54. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
  55. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +10 -6
  56. data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
  57. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +68 -0
  58. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
  59. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  60. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  61. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
  62. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  63. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  64. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
  65. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  66. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  67. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  68. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
  69. data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
  70. data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
  71. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
  72. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  73. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
  74. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  75. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
  76. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
  77. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
  78. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  79. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  80. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  81. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
  82. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
  83. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
  84. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
  85. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  86. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  87. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  88. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  89. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
  90. data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
  91. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  92. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  93. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  94. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  95. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  96. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  97. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
  98. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
  99. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
  100. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
  101. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  102. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  103. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  104. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  105. data/app/pb_kits/playbook/pb_table/table.rb +13 -1
  106. data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
  107. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  108. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  109. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  110. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  111. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  112. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  113. data/dist/chunks/_typeahead-B8ZHFkS2.js +22 -0
  114. data/dist/chunks/_weekday_stacked-BHIbkVpj.js +45 -0
  115. data/dist/chunks/lib-D4SkptW4.js +29 -0
  116. data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-CUMPJ9As.js} +1 -1
  117. data/dist/chunks/vendor.js +1 -1
  118. data/dist/playbook-doc.js +19 -1
  119. data/dist/playbook-rails-react-bindings.js +1 -1
  120. data/dist/playbook-rails.js +1 -1
  121. data/dist/playbook.css +1 -1
  122. data/lib/playbook/version.rb +1 -1
  123. metadata +59 -18
  124. data/dist/chunks/_typeahead-1gVtCLYL.js +0 -22
  125. data/dist/chunks/_weekday_stacked-Cl62R0Ef.js +0 -45
  126. data/dist/chunks/lib-BGzBzFZX.js +0 -29
  127. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
  128. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
  129. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
  130. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
  131. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
  132. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
  133. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
  134. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
  135. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
  136. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
  137. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -6,6 +6,8 @@ import Caption from '../../pb_caption/_caption'
6
6
  import Draggable from '../../pb_draggable/_draggable'
7
7
  import { DraggableProvider } from '../../pb_draggable/context'
8
8
 
9
+
10
+
9
11
  // Initial items to be dragged
10
12
  const dataPrimary = [
11
13
  {
@@ -42,54 +44,54 @@ const DraggableDropZonesColors = (props) => {
42
44
 
43
45
  return (
44
46
  <>
45
- <Caption marginBottom="xs">
46
- Primary
47
- </Caption>
48
- <DraggableProvider
49
- dropZone={{type: "shadow", color: "primary"}}
50
- initialItems={dataPrimary}
51
- onReorder={(items) => setInitialPrimaryState(items)}
52
- >
53
- <Draggable.Container {...props}>
54
- <Flex>
55
- {initialPrimaryState.map(({ id, url }) => (
56
- <Draggable.Item dragId={id}
57
- key={id}
58
- marginRight="sm"
59
- >
60
- <Image alt={id}
61
- size="md"
62
- url={url}
63
- />
64
- </Draggable.Item>
65
- ))}
66
- </Flex>
67
- </Draggable.Container>
68
- </DraggableProvider>
69
- <Caption marginBottom="xs">
70
- Purple
71
- </Caption>
72
- <DraggableProvider
73
- dropZone={{type: "outline", color: "purple"}}
74
- initialItems={dataPurple}
75
- onReorder={(items) => setInitialPurpleState(items)}
76
- >
77
- <Draggable.Container {...props}>
78
- <Flex>
79
- {initialPurpleState.map(({ id, url }) => (
80
- <Draggable.Item dragId={id}
81
- key={id}
82
- marginRight="sm"
83
- >
84
- <Image alt={id}
85
- size="md"
86
- url={url}
87
- />
88
- </Draggable.Item>
89
- ))}
90
- </Flex>
91
- </Draggable.Container>
92
- </DraggableProvider>
47
+ <Caption marginBottom="xs"
48
+ text="Primary"
49
+ />
50
+ <DraggableProvider
51
+ dropZone={{type: "shadow", color: "primary"}}
52
+ initialItems={dataPrimary}
53
+ onReorder={(items) => setInitialPrimaryState(items)}
54
+ >
55
+ <Draggable.Container {...props}>
56
+ <Flex>
57
+ {initialPrimaryState.map(({ id, url }) => (
58
+ <Draggable.Item dragId={id}
59
+ key={id}
60
+ marginRight="sm"
61
+ >
62
+ <Image alt={id}
63
+ size="md"
64
+ url={url}
65
+ />
66
+ </Draggable.Item>
67
+ ))}
68
+ </Flex>
69
+ </Draggable.Container>
70
+ </DraggableProvider>
71
+ <Caption marginBottom="xs"
72
+ text="Purple"
73
+ />
74
+ <DraggableProvider
75
+ dropZone={{type: "outline", color: "purple"}}
76
+ initialItems={dataPurple}
77
+ onReorder={(items) => setInitialPurpleState(items)}
78
+ >
79
+ <Draggable.Container {...props}>
80
+ <Flex>
81
+ {initialPurpleState.map(({ id, url }) => (
82
+ <Draggable.Item dragId={id}
83
+ key={id}
84
+ marginRight="sm"
85
+ >
86
+ <Image alt={id}
87
+ size="md"
88
+ url={url}
89
+ />
90
+ </Draggable.Item>
91
+ ))}
92
+ </Flex>
93
+ </Draggable.Container>
94
+ </DraggableProvider>
93
95
  </>
94
96
  );
95
97
  };
@@ -1 +1 @@
1
- By default, the Draggable kit sets the default color of drop zones to "neutral" (or "primary" if using the "line" style.)
1
+ The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options. When `type` is set to "line", the default color is "primary" and "purple" is the only other option.
@@ -0,0 +1,110 @@
1
+ import React, { useState } from "react";
2
+ import Flex from '../../pb_flex/_flex'
3
+ import Caption from '../../pb_caption/_caption'
4
+ import Draggable from '../_draggable'
5
+ import { DraggableProvider } from '../context'
6
+ import Image from '../../pb_image/_image'
7
+
8
+
9
+
10
+ const dataLineVertical = [
11
+ {
12
+ id: "211",
13
+ url: "https://unsplash.it/500/400/?image=633",
14
+ },
15
+ {
16
+ id: "212",
17
+ url: "https://unsplash.it/500/400/?image=634",
18
+ },
19
+ {
20
+ id: "213",
21
+ url: "https://unsplash.it/500/400/?image=637",
22
+ },
23
+ ];
24
+
25
+ const dataLineHorizontal = [
26
+ {
27
+ id: "2111",
28
+ url: "https://unsplash.it/500/400/?image=633",
29
+ },
30
+ {
31
+ id: "2122",
32
+ url: "https://unsplash.it/500/400/?image=634",
33
+ },
34
+ {
35
+ id: "2133",
36
+ url: "https://unsplash.it/500/400/?image=637",
37
+ },
38
+ ];
39
+
40
+ const DraggableDropZones = (props) => {
41
+ const [initialLineVerticalState, setInitialLineVerticalState] = useState(dataLineVertical);
42
+ const [initialLineHorizontalState, setInitialLineHorizontalState] = useState(dataLineHorizontal);
43
+
44
+ return (
45
+ <>
46
+ <Caption marginBottom="xs"
47
+ marginTop="xl"
48
+ text="Vertical"
49
+ />
50
+ <DraggableProvider
51
+ dropZone={{ type: "line", color: "purple" }}
52
+ initialItems={dataLineVertical}
53
+ onReorder={(items) => setInitialLineVerticalState(items)}
54
+ >
55
+ <Draggable.Container {...props}>
56
+ <Flex flexDirection="column"
57
+ height="367px"
58
+ >
59
+ {initialLineVerticalState.map(({ id, url }) => (
60
+ <Draggable.Item dragId={id}
61
+ key={id}
62
+ marginBottom="sm"
63
+ >
64
+ <Image alt={id}
65
+ size="md"
66
+ url={url}
67
+ />
68
+ </Draggable.Item>
69
+ ))}
70
+ </Flex>
71
+ </Draggable.Container>
72
+ </DraggableProvider>
73
+ <Caption marginBottom="xs"
74
+ marginTop="xl"
75
+ text="Horizontal"
76
+ />
77
+ <Flex>
78
+ <DraggableProvider
79
+ dropZone={{ type: "line", direction: "horizontal" }}
80
+ initialItems={dataLineHorizontal}
81
+ onReorder={(items) => setInitialLineHorizontalState(items)}
82
+ >
83
+ <Draggable.Container
84
+ htmlOptions={{style:{ width: "285px"}}}
85
+ {...props}
86
+ >
87
+ <Flex alignItems="stretch"
88
+ flexDirection="row"
89
+ height="110px"
90
+ >
91
+ {initialLineHorizontalState.map(({ id, url }) => (
92
+ <Draggable.Item dragId={id}
93
+ key={id}
94
+ marginRight="sm"
95
+ >
96
+ <Image alt={id}
97
+ size="md"
98
+ url={url}
99
+ />
100
+ </Draggable.Item>
101
+ ))}
102
+ </Flex>
103
+ </Draggable.Container>
104
+ </DraggableProvider>
105
+ </Flex>
106
+ </>
107
+ );
108
+ };
109
+
110
+ export default DraggableDropZones;
@@ -0,0 +1,5 @@
1
+ When using the "line" style, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. The default `color` for "line" is "primary" and "purple" is the only alternative color option.
2
+
3
+ The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items.
4
+
5
+ Additionally, if the parent container of the `DraggableProvider`/`DraggableContainer` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.
@@ -0,0 +1,42 @@
1
+ <% initial_items = [
2
+ {
3
+ id: "100",
4
+ url: "https://unsplash.it/500/400/?image=638",
5
+ },
6
+ {
7
+ id: "200",
8
+ url: "https://unsplash.it/500/400/?image=639",
9
+ },
10
+ {
11
+ id: "300",
12
+ url: "https://unsplash.it/500/400/?image=640",
13
+ },
14
+ ] %>
15
+
16
+ <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
17
+ <%= pb_rails("draggable/draggable_container") do %>
18
+ <%= pb_rails("flex") do %>
19
+ <% initial_items.each do |item| %>
20
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
21
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
22
+ <% end %>
23
+ <% end %>
24
+ <% end %>
25
+ <% end %>
26
+ <% end %>
27
+
28
+ <script>
29
+ const itemIds = ["item_100", "item_200", "item_300"];
30
+
31
+ itemIds.forEach((id) => {
32
+ const element = document.getElementById(id);
33
+ if (element) {
34
+ element.addEventListener("dragstart", (event) => {
35
+ console.log(`${id} drag start!`);
36
+ });
37
+ element.addEventListener("dragend", (event) => {
38
+ console.log(`${id} drag end!`);
39
+ });
40
+ }
41
+ });
42
+ </script>
@@ -0,0 +1 @@
1
+ You can add drag event listeners for `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop`.
@@ -1,7 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
 
3
3
  import Flex from '../../pb_flex/_flex'
4
- import { DraggableProvider } from '../../pb_draggable/context'
4
+ import { DraggableProvider } from '../context'
5
5
  import Avatar from '../../pb_avatar/_avatar'
6
6
  import Body from '../../pb_body/_body'
7
7
  import Table from '../../pb_table/_table'
@@ -2,4 +2,6 @@ The draggable kit can also be used in conjunction with the table kit to create d
2
2
 
3
3
  - Wrap the Table with the `DraggableProvider` and manage state as shown.
4
4
  - use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
5
- - use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
5
+ - use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
6
+
7
+ We recommending using the default `dropZone type` with the Table kit.
@@ -4,14 +4,18 @@ examples:
4
4
  - draggable_with_list: Draggable with List Kit
5
5
  - draggable_with_selectable_list: Draggable with SelectableList Kit
6
6
  - draggable_with_cards: Draggable with Cards
7
- - draggable_with_table_react: Draggable with Table
7
+ - draggable_with_table: Draggable with Table
8
8
  - draggable_multiple_containers: Dragging Across Multiple Containers
9
+ - draggable_drop_zones: Draggable Drop Zones
10
+ - draggable_drop_zones_colors: Draggable Drop Zones Colors
11
+ - draggable_drop_zones_line: Draggable Drop Zones Line
9
12
 
10
13
  rails:
11
- - draggable_default_rails: Default
12
- - draggable_with_list_rails: Draggable with List Kit
13
- - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
14
- - draggable_with_cards_rails: Draggable with Cards
14
+ - draggable_default: Default
15
+ - draggable_with_list: Draggable with List Kit
16
+ - draggable_with_selectable_list: Draggable with SelectableList Kit
17
+ - draggable_with_cards: Draggable with Cards
15
18
  - draggable_with_table: Draggable with Table
16
- - draggable_multiple_containers_rails: Dragging Across Multiple Containers
19
+ - draggable_multiple_containers: Dragging Across Multiple Containers
20
+ - draggable_event_listeners: Draggable Event Listeners
17
21
 
@@ -3,4 +3,7 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
3
3
  export { default as DraggableWithList } from './_draggable_with_list.jsx'
4
4
  export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
5
5
  export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
6
- export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
6
+ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
7
+ export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
8
+ export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
9
+ export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
@@ -128,6 +128,58 @@ const DraggableKitWithCard = () => {
128
128
  );
129
129
  };
130
130
 
131
+ const DraggableWithLineVertical = () => {
132
+ const [initialState, setInitialState] = useState(data);
133
+ return (
134
+ <div data-testid={testId}>
135
+ <DraggableProvider
136
+ dropZone={{ type: "line" }}
137
+ initialItems={data}
138
+ onReorder={(items) => setInitialState(items)}
139
+ >
140
+ <Draggable>
141
+ <Draggable.Container>
142
+ {initialState.map(({ id, text }) => (
143
+ <Draggable.Item
144
+ dragId={id}
145
+ key={id}
146
+ >
147
+ {text}
148
+ </Draggable.Item>
149
+ ))}
150
+ </Draggable.Container>
151
+ </Draggable>
152
+ </DraggableProvider>
153
+ </div>
154
+ );
155
+ };
156
+
157
+ const DraggableWithLineHorizontal = () => {
158
+ const [initialState, setInitialState] = useState(data);
159
+ return (
160
+ <div data-testid={testId}>
161
+ <DraggableProvider
162
+ dropZone={{ type: "line", direction: "horizontal" }}
163
+ initialItems={data}
164
+ onReorder={(items) => setInitialState(items)}
165
+ >
166
+ <Draggable>
167
+ <Draggable.Container>
168
+ {initialState.map(({ id, text }) => (
169
+ <Draggable.Item
170
+ dragId={id}
171
+ key={id}
172
+ >
173
+ {text}
174
+ </Draggable.Item>
175
+ ))}
176
+ </Draggable.Container>
177
+ </Draggable>
178
+ </DraggableProvider>
179
+ </div>
180
+ );
181
+ };
182
+
131
183
  test("generated default kit and classname", () => {
132
184
  render(<DefaultDraggableKit />);
133
185
  const kit = screen.getByTestId(testId);
@@ -188,3 +240,19 @@ test("generated dragHandle with Card", () => {
188
240
  const dragHandle = card.querySelector(".pb_custom_icon");
189
241
  expect(dragHandle).toBeInTheDocument();
190
242
  });
243
+
244
+ test("line dropZone with default direction applies 'line_vertical' class to container", () => {
245
+ render(<DraggableWithLineVertical />);
246
+ const kit = screen.getByTestId(testId);
247
+ const container = kit.querySelector(".pb_draggable_container");
248
+
249
+ expect(container).toHaveClass("line_vertical");
250
+ });
251
+
252
+ test("line dropZone with horizontal direction applies 'line_horizontal' class to container", () => {
253
+ render(<DraggableWithLineHorizontal />);
254
+ const kit = screen.getByTestId(testId);
255
+ const container = kit.querySelector(".pb_draggable_container");
256
+
257
+ expect(container).toHaveClass("line_horizontal");
258
+ });
@@ -31,7 +31,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
31
31
  } = contextValues;
32
32
 
33
33
  // Only get direction if dropZone is 'line'
34
- const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
34
+ const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : null;
35
35
 
36
36
  const ariaProps = buildAriaProps(aria);
37
37
  const dataProps = buildDataProps(data);
@@ -41,8 +41,9 @@ const DraggableContainer = (props: DraggableContainerProps) => {
41
41
  const classes = classnames(
42
42
  buildCss("pb_draggable_container"),
43
43
  `${activeContainer === container ? "active" : ""}`,
44
- // Only add vertical class if dropZone is 'line' and direction is 'vertical'
45
- (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
44
+ // Line variant gets line_{direction} classname on container no matter what
45
+ dropZone === 'line' && direction === 'vertical' ? 'line_vertical' : '',
46
+ dropZone === 'line' && direction === 'horizontal' ? 'line_horizontal' : '',
46
47
  globalProps(props),
47
48
  className
48
49
  );
@@ -35,7 +35,7 @@ type DropdownProps = {
35
35
  label?: string;
36
36
  onSelect?: (arg: GenericObject) => null;
37
37
  options: GenericObject;
38
- separators: boolean;
38
+ separators?: boolean;
39
39
  triggerRef?: any;
40
40
  variant?: "default" | "subtle";
41
41
  };
@@ -22,7 +22,7 @@ type DropdownOptionProps = {
22
22
  data?: { [key: string]: string };
23
23
  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
24
24
  id?: string;
25
- key?: string;
25
+ key?: string | number;
26
26
  option?: GenericObject;
27
27
  padding?: string;
28
28
  } & GlobalProps;
@@ -85,11 +85,19 @@
85
85
  .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
86
86
  border-bottom-right-radius: 0;
87
87
  border-top-right-radius: 0;
88
- border-right-width: 0;
88
+ border-right-color: transparent;
89
89
  }
90
+ [class^=pb_text_input_kit] .text_input_wrapper input:focus,
91
+ [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
92
+ border-right-color: $primary;
93
+ }
94
+ [class^=pb_text_input_kit].error .text_input_wrapper input,
95
+ [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
96
+ border-right-color: $error;
97
+ }
90
98
  }
91
99
 
92
- & > [class^=pb_phone_number_input]:not(:first-child) {
100
+ & > [class^=pb_phone_number_input]:not(:first-child), [class^=pb_passphrase]:not(:first-child) {
93
101
  .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
94
102
  border-bottom-left-radius: 0;
95
103
  border-top-left-radius: 0;
@@ -107,8 +115,16 @@
107
115
  .text_input {
108
116
  border-bottom-right-radius: 0;
109
117
  border-top-right-radius: 0;
110
- border-right: none;
118
+ border-right-color: transparent;
111
119
  }
120
+ [class^=pb_text_input_kit] .text_input_wrapper input:focus,
121
+ [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
122
+ border-right-color: $primary;
123
+ }
124
+ [class^=pb_text_input_kit].error .text_input_wrapper input,
125
+ [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
126
+ border-right-color: $error;
127
+ }
112
128
  }
113
129
 
114
130
  &[class*=rails] > [class^=pb_date_picker_kit] {
@@ -227,4 +243,8 @@
227
243
  padding-left: calc(var(--iti-flag-width) + 1px);
228
244
  }
229
245
  }
246
+
247
+ &:has(> [class^="pb_select"]):has(> .pb_passphrase) [class^="pb_select"] {
248
+ align-self: baseline;
249
+ }
230
250
  }
@@ -1,5 +1,4 @@
1
- <div>
2
-
1
+ <%= pb_rails("flex", props: {orientation: "column", row_gap:"md"}) do %>
3
2
  <%= pb_rails("form_group") do %>
4
3
  <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
5
4
  <%= pb_rails("select", props: {
@@ -17,8 +16,6 @@
17
16
  ]
18
17
  }) %>
19
18
  <% end %>
20
- <br>
21
- <br>
22
19
  <%= pb_rails("form_group") do %>
23
20
  <%= pb_rails("select", props: {
24
21
  blank_selection: "Phone",
@@ -32,4 +29,17 @@
32
29
  id: "phone"
33
30
  }) %>
34
31
  <% end %>
35
- </div>
32
+ <%= pb_rails("form_group") do %>
33
+ <%= pb_rails("phone_number_input", props: {
34
+ id: "phone2"
35
+ }) %>
36
+ <%= pb_rails("select", props: {
37
+ blank_selection: "Phone",
38
+ options: [
39
+ { value: "Cell" },
40
+ { value: "Work" },
41
+ { value: "Home" },
42
+ ]
43
+ }) %>
44
+ <% end %>
45
+ <% end %>
@@ -1,11 +1,16 @@
1
- import React from 'react'
1
+ import React, {useState} from 'react'
2
2
 
3
3
  import FormGroup from '../_form_group'
4
4
  import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
5
5
  import Select from '../../pb_select/_select'
6
6
  import TextInput from '../../pb_text_input/_text_input'
7
+ import Flex from '../../pb_flex/_flex'
8
+ import Passphrase from '../../pb_passphrase/_passphrase'
7
9
 
8
10
  const FormGroupSelect = (props) => {
11
+ const [input, setInput] = useState("");
12
+ const handleChange = (e) => setInput(e.target.value);
13
+
9
14
  const options = [
10
15
  { value: 'Country' },
11
16
  { value: 'Pop' },
@@ -25,7 +30,10 @@ const FormGroupSelect = (props) => {
25
30
  ]
26
31
 
27
32
  return (
28
- <div>
33
+ <Flex
34
+ orientation="column"
35
+ rowGap="md"
36
+ >
29
37
  <FormGroup>
30
38
  <TextInput
31
39
  placeholder="Enter Artist Name"
@@ -37,18 +45,43 @@ const FormGroupSelect = (props) => {
37
45
  {...props}
38
46
  />
39
47
  </FormGroup>
40
- <br />
41
- <br />
42
48
  <FormGroup>
43
49
  <Select
44
50
  blankSelection="Phone"
45
51
  options={phoneOptions}
46
- />
52
+ {...props}
53
+ />
47
54
  <PhoneNumberInput
48
55
  id='default'
56
+ {...props}
49
57
  />
50
58
  </FormGroup>
51
- </div>
59
+ <FormGroup>
60
+ <PhoneNumberInput
61
+ id='default-2'
62
+ {...props}
63
+ />
64
+ <Select
65
+ blankSelection="Phone"
66
+ options={phoneOptions}
67
+ {...props}
68
+ />
69
+ </FormGroup>
70
+ <FormGroup>
71
+ <Select
72
+ blankSelection="Phone"
73
+ options={phoneOptions}
74
+ {...props}
75
+ />
76
+ <Passphrase
77
+ id="my-passphrase"
78
+ label=""
79
+ onChange={handleChange}
80
+ value={input}
81
+ {...props}
82
+ />
83
+ </FormGroup>
84
+ </Flex>
52
85
  )
53
86
  }
54
87
 
@@ -0,0 +1,30 @@
1
+ import React from 'react'
2
+ import gaugeTheme from '../gaugeTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
5
+ import HighchartsMore from "highcharts/highcharts-more"
6
+ import SolidGauge from "highcharts/modules/solid-gauge"
7
+
8
+ HighchartsMore(Highcharts);
9
+ SolidGauge(Highcharts);
10
+
11
+ const data = [{ name: "Name", y: 45 }]
12
+
13
+ const baseOptions = {
14
+ series: [{ data: data }],
15
+ };
16
+
17
+ const GaugePbStyles = () => {
18
+ const options = Highcharts.merge({}, gaugeTheme, baseOptions);
19
+
20
+ return (
21
+ <div>
22
+ <HighchartsReact
23
+ highcharts={Highcharts}
24
+ options={options}
25
+ />
26
+ </div>
27
+ );
28
+ };
29
+
30
+ export default GaugePbStyles;
@@ -0,0 +1 @@
1
+ You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.
@@ -15,6 +15,7 @@ examples:
15
15
 
16
16
  react:
17
17
  - gauge_default: Default
18
+ - gauge_pb_styles: Playbook Styles
18
19
  - gauge_disable_animation: Disable Animation
19
20
  - gauge_title: Title
20
21
  - gauge_units: Units