playbook_ui 14.17.0.pre.alpha.PLAY20267223 → 14.17.0.pre.alpha.alphaforaudiences7167

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 (45) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +3 -23
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +1 -11
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +128 -60
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -3
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
  8. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +20 -43
  9. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +105 -102
  10. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
  11. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +48 -50
  12. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
  13. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.jsx → _draggable_with_table_react.jsx} +1 -1
  14. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +1 -3
  15. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -9
  16. data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -4
  17. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +0 -68
  18. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +3 -4
  19. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +7 -19
  20. data/dist/chunks/{_typeahead-HqfDnjRe.js → _typeahead-7W5Ha5Td.js} +1 -1
  21. data/dist/chunks/_weekday_stacked-DSKatW3m.js +45 -0
  22. data/dist/chunks/vendor.js +1 -1
  23. data/dist/playbook-doc.js +1 -1
  24. data/dist/playbook-rails-react-bindings.js +1 -1
  25. data/dist/playbook-rails.js +1 -1
  26. data/dist/playbook.css +1 -1
  27. data/lib/playbook/version.rb +1 -1
  28. metadata +16 -21
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +0 -58
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +0 -6
  31. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +0 -97
  32. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +0 -110
  33. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +0 -5
  34. data/dist/chunks/_weekday_stacked-CPNaHtxQ.js +0 -45
  35. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_react.md → _draggable_default.md} +0 -0
  36. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.html.erb → _draggable_default_rails.html.erb} +0 -0
  37. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_react.md → _draggable_multiple_containers.md} +0 -0
  38. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.html.erb → _draggable_multiple_containers_rails.html.erb} +0 -0
  39. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_react.md → _draggable_with_cards.md} +0 -0
  40. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.html.erb → _draggable_with_cards_rails.html.erb} +0 -0
  41. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_react.md → _draggable_with_list.md} +0 -0
  42. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.html.erb → _draggable_with_list_rails.html.erb} +0 -0
  43. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_react.md → _draggable_with_selectable_list.md} +0 -0
  44. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.html.erb → _draggable_with_selectable_list_rails.html.erb} +0 -0
  45. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_rails.md → _draggable_with_table.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.17.0"
5
- VERSION = "14.17.0.pre.alpha.PLAY20267223"
5
+ VERSION = "14.17.0.pre.alpha.alphaforaudiences7167"
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.17.0.pre.alpha.PLAY20267223
4
+ version: 14.17.0.pre.alpha.alphaforaudiences7167
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-04-15 00:00:00.000000000 Z
12
+ date: 2025-04-11 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -344,8 +344,6 @@ files:
344
344
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
345
345
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
346
346
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
347
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
348
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
349
347
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
350
348
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
351
349
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
@@ -370,7 +368,6 @@ files:
370
368
  - app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss
371
369
  - app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
372
370
  - app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss
373
- - app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss
374
371
  - app/pb_kits/playbook/pb_advanced_table/table_body.html.erb
375
372
  - app/pb_kits/playbook/pb_advanced_table/table_body.rb
376
373
  - app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
@@ -1187,35 +1184,33 @@ files:
1187
1184
  - app/pb_kits/playbook/pb_draggable/_draggable.tsx
1188
1185
  - app/pb_kits/playbook/pb_draggable/context/index.tsx
1189
1186
  - app/pb_kits/playbook/pb_draggable/context/types.ts
1190
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb
1191
1187
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
1188
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
1189
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
1192
1190
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
1193
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
1194
1191
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
1195
1192
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
1196
1193
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
1197
1194
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
1198
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
1199
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
1200
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
1201
1195
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
1196
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
1197
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
1202
1198
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
1203
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
1204
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
1205
1199
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
1200
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
1201
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
1206
1202
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md
1207
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md
1208
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.html.erb
1209
1203
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
1204
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
1205
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
1210
1206
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md
1211
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md
1212
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.html.erb
1213
1207
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
1208
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
1209
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
1214
1210
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
1215
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md
1216
1211
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb
1217
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.jsx
1218
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_rails.md
1212
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md
1213
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx
1219
1214
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
1220
1215
  - app/pb_kits/playbook/pb_draggable/docs/example.yml
1221
1216
  - app/pb_kits/playbook/pb_draggable/docs/index.js
@@ -3472,8 +3467,8 @@ files:
3472
3467
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3473
3468
  - app/pb_kits/playbook/utilities/text.ts
3474
3469
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3475
- - dist/chunks/_typeahead-HqfDnjRe.js
3476
- - dist/chunks/_weekday_stacked-CPNaHtxQ.js
3470
+ - dist/chunks/_typeahead-7W5Ha5Td.js
3471
+ - dist/chunks/_weekday_stacked-DSKatW3m.js
3477
3472
  - dist/chunks/lazysizes-B7xYodB-.js
3478
3473
  - dist/chunks/lib-BGzBzFZX.js
3479
3474
  - dist/chunks/pb_form_validation-BvNy9Bd6.js
@@ -1,58 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
4
-
5
- const AdvancedTableStickyColumns = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- id: "year",
11
- cellAccessors: ["quarter", "month", "day"],
12
- },
13
- {
14
- accessor: "newEnrollments",
15
- label: "New Enrollments",
16
- id: "newEnrollments",
17
- },
18
- {
19
- accessor: "scheduledMeetings",
20
- label: "Scheduled Meetings",
21
- id: "scheduledMeetings",
22
- },
23
- {
24
- accessor: "attendanceRate",
25
- label: "Attendance Rate",
26
- id: "attendanceRate",
27
- },
28
- {
29
- accessor: "completedClasses",
30
- label: "Completed Classes",
31
- id: "completedClasses",
32
- },
33
- {
34
- accessor: "classCompletionRate",
35
- label: "Class Completion Rate",
36
- id: "classCompletionRate",
37
- },
38
- {
39
- accessor: "graduatedStudents",
40
- label: "Graduated Students",
41
- id: "graduatedStudents",
42
- },
43
- ]
44
-
45
- return (
46
- <div>
47
- <AdvancedTable
48
- columnDefinitions={columnDefinitions}
49
- responsive="none"
50
- stickyLeftColumn={["year", "newEnrollments"]}
51
- tableData={MOCK_DATA}
52
- {...props}
53
- />
54
- </div>
55
- )
56
- }
57
-
58
- export default AdvancedTableStickyColumns
@@ -1,6 +0,0 @@
1
- To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
2
-
3
- To achieve this:
4
- - Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string.
5
- - One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
6
- - It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.
@@ -1,97 +0,0 @@
1
- @mixin advanced-table-sticky-mixin(
2
- $border-color,
3
- $bg-main,
4
- $bg-secondary,
5
- $highlight: $info_subtle
6
- ) {
7
- border-radius: 4px;
8
- box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
9
- display: block;
10
- [class^="pb_table"].table-sm.table-card thead tr th:first-child,
11
- [class^="pb_table"].table-sm:not(.no-hover).table-card
12
- tbody
13
- tr
14
- td:first-child {
15
- border-left-width: 0px !important;
16
- }
17
- [class^="pb_table"].table-sm.table-card thead tr th:last-child,
18
- [class^="pb_table"].table-sm:not(.no-hover).table-card
19
- tbody
20
- tr
21
- td:last-child {
22
- border-right-width: 0px;
23
- }
24
- [class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
25
- [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
26
- border-radius: 0 0 0 0;
27
- }
28
- .table-header-cells:first-child,
29
- td:first-child,
30
- .pb_table_td:first-child,
31
- .checkbox-cell.checkbox-cell-header:first-child,
32
- .table-header-cells.sticky-left,
33
- [class*="pinned-left"] {
34
- background-color: $bg-main;
35
- box-shadow: $shadow_deep !important;
36
- position: sticky !important;
37
- left: 0;
38
- z-index: 2;
39
- }
40
-
41
- .bg-silver {
42
- td:first-child,
43
- .sticky-left {
44
- background-color: $bg-secondary;
45
- }
46
- }
47
- .bg-row-selection {
48
- td:first-child,
49
- .sticky-left {
50
- background-color: $highlight;
51
- }
52
- }
53
-
54
- .bg-white {
55
- td:first-child,
56
- .sticky-left {
57
- background-color: $bg-main;
58
- }
59
- }
60
-
61
- .virtualized-table-row {
62
- &.bg-silver td:first-child {
63
- background-color: $bg-secondary;
64
- }
65
- &.bg-white td:first-child {
66
- background-color: $bg-main;
67
- }
68
- &.bg-row-selection td:first-child {
69
- background-color: $highlight;
70
- }
71
- }
72
-
73
- .row-selection-actions-card {
74
- border-right-width: 0px;
75
- border-left-width: 0px;
76
- position: sticky;
77
- top: 0;
78
- left: 0;
79
- border-radius: unset;
80
- }
81
-
82
- .checkbox-cell {
83
- display: table-cell !important;
84
- }
85
-
86
- .sticky-header {
87
- thead {
88
- th:first-child {
89
- box-shadow: 1px 0 10px -2px $border-color !important;
90
- }
91
- }
92
-
93
- .pb_advanced_table_header {
94
- box-shadow: none !important;
95
- }
96
- }
97
- }
@@ -1,110 +0,0 @@
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;
@@ -1,5 +0,0 @@
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.