playbook_ui 14.13.0.pre.alpha.PLAY1873rails86087 → 14.13.0.pre.alpha.advsncedtablefix6185

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 (83) 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/_advanced_table.tsx +6 -5
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx +75 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  7. data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss +58 -0
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
  13. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -1
  14. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +90 -0
  15. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
  16. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
  17. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  18. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +7 -4
  19. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +6 -3
  20. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
  21. data/app/pb_kits/playbook/pb_nav/item.html.erb +7 -19
  22. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -8
  23. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -6
  24. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
  25. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss +6 -1
  26. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +7 -5
  27. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb +1 -0
  28. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx +7 -0
  29. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md +1 -0
  30. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb +1 -0
  31. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx +18 -0
  32. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md +1 -0
  33. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md +1 -0
  34. data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
  35. data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
  36. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +1 -1
  37. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb +6 -0
  38. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js +26 -1
  39. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
  41. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
  42. data/app/pb_kits/playbook/pb_table/docs/example.yml +1 -0
  43. data/app/pb_kits/playbook/pb_table/index.ts +41 -9
  44. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +4 -0
  45. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +29 -2
  46. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +31 -3
  47. data/app/pb_kits/playbook/pb_table/table_body.html.erb +13 -7
  48. data/app/pb_kits/playbook/pb_table/table_body.rb +2 -0
  49. data/app/pb_kits/playbook/pb_table/table_row.html.erb +14 -7
  50. data/app/pb_kits/playbook/pb_table/table_row.rb +14 -1
  51. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +14 -0
  52. data/app/pb_kits/playbook/pb_text_input/index.js +9 -0
  53. data/app/pb_kits/playbook/pb_text_input/text_input.rb +5 -2
  54. data/dist/chunks/{_typeahead-DQTwAd_2.js → _typeahead-CAIQfP7X.js} +4 -4
  55. data/dist/chunks/_weekday_stacked-CsxncF8U.js +45 -0
  56. data/dist/chunks/{lib-WQEeEj3t.js → lib-D3us1bGD.js} +1 -1
  57. data/dist/chunks/{pb_form_validation-Cq64l4zn.js → pb_form_validation-BpihMSOQ.js} +1 -1
  58. data/dist/chunks/vendor.js +1 -1
  59. data/dist/menu.yml +0 -7
  60. data/dist/playbook-doc.js +1 -1
  61. data/dist/playbook-rails-react-bindings.js +1 -1
  62. data/dist/playbook-rails.js +1 -1
  63. data/dist/playbook.css +1 -1
  64. data/lib/playbook/version.rb +1 -1
  65. metadata +22 -25
  66. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +0 -66
  67. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +0 -98
  68. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +0 -28
  69. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb +0 -42
  70. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
  71. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
  72. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
  73. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
  74. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
  75. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
  76. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
  77. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
  78. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
  79. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
  80. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
  81. data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js +0 -31
  82. data/dist/chunks/_weekday_stacked-ei-exO-N.js +0 -45
  83. /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_with_custom_click.md → _table_with_collapsible_with_custom_click_react.md} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e08365da5253269e56718df0229fb325a9904ae790a197f4d9498972990d5e20
4
- data.tar.gz: 2fd146a0b22bd09f5b4dbe54a16a3b438a7a24bb360f3a476c307645e8b6fc5b
3
+ metadata.gz: 7a7a2e5ca60a324ed94a9eeafc8a8b0a458a045aafb3ed2d93e284590941f65e
4
+ data.tar.gz: dc4b1f1f0d8afc9774805ae6bd1c0e2df6f6077c7086019bb8247c1dcabf1aa6
5
5
  SHA512:
6
- metadata.gz: 79d14e319ea738d2959955de82a9eac69637d27eba8efad3549f520b7c9ce95ee4ed704e4e7451f8aca6ffc633cccab31a1306bd03ca8b6127eaceeb3f16a01c
7
- data.tar.gz: 734cff649221dc31c3a2eb03c73d9bc27df9aa28642bb0e190f41317ef0896fd8b9decc85e2e6587d7c2f7a660e1cefd2f7a151dd4ec4264652e6eb44f610557
6
+ metadata.gz: fdda34d574e75cf743086d341b2c27e08269f6a8483f8f6dc1fd6409e7e8fd25e0ece1f67f345e0836b5c86f0e82b1dfea0e48d9bdaeab3818e2bdab31967ff5
7
+ data.tar.gz: 3f51f45b3580853de7b4fa027d83f24e1669b5798b4db06f4cd48cd6fd9e11418058177018383561edfee92e859943f271ba080786cc5d455424654f0ab959a4
@@ -1,7 +1,6 @@
1
1
 
2
2
  @import 'pb_advanced_table/advanced_table';
3
3
  @import 'pb_avatar/avatar';
4
- @import 'pb_avatar_action_button/avatar_action_button';
5
4
  @import 'pb_background/background';
6
5
  @import 'pb_badge/badge';
7
6
  @import 'pb_bar_graph/bar_graph';
@@ -116,7 +116,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
116
116
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
117
117
 
118
118
  //Create cells for columns, with customization for first column
119
- const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
119
+ const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, isFirstColumn?: boolean) => {
120
120
  const columnCells = ({
121
121
  row,
122
122
  getValue,
@@ -126,7 +126,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
126
126
  }) => {
127
127
  const rowData = row.original
128
128
 
129
- if (index === 0) {
129
+ if (isFirstColumn) {
130
130
  switch (row.depth) {
131
131
  case 0: {
132
132
  return (
@@ -164,15 +164,16 @@ const AdvancedTable = (props: AdvancedTableProps) => {
164
164
  return columnCells
165
165
  }
166
166
 
167
- const buildColumns = (columnDefinitions: GenericObject[]): any => {
167
+ const buildColumns = (columnDefinitions: GenericObject[], isRoot= true): any => {
168
168
  return (
169
169
  columnDefinitions &&
170
170
  columnDefinitions.map((column, index) => {
171
+ const isFirstColumn = isRoot && index === 0;
171
172
  //Checking to see if grouped column or not
172
173
  if (column.columns && column.columns.length > 0) {
173
174
  return {
174
175
  header: column.label || "",
175
- columns: buildColumns(column.columns),
176
+ columns: buildColumns(column.columns, false),
176
177
  };
177
178
  } else {
178
179
  // Define the base column structure
@@ -186,7 +187,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
186
187
  columnStructure.cell = createCellFunction(
187
188
  column.cellAccessors,
188
189
  column.customRenderer,
189
- index
190
+ isFirstColumn
190
191
  );
191
192
  }
192
193
 
@@ -0,0 +1,75 @@
1
+ import React from "react"
2
+ import { AdvancedTable, Pill } from "playbook-ui"
3
+ import MOCK_DATA from "./advanced_table_mock_data.json"
4
+
5
+ const AdvancedTableColumnHeadersCustomCell = (props) => {
6
+ const columnDefinitions = [
7
+ {
8
+ accessor: "year",
9
+ label: "Year",
10
+ cellAccessors: ["quarter", "month", "day"],
11
+ },
12
+ {
13
+ label: "Enrollment Data",
14
+ columns: [
15
+ {
16
+ accessor: "newEnrollments",
17
+ label: "New Enrollments",
18
+ customRenderer: (row, value) => (
19
+ <Pill text={value}
20
+ variant="success"
21
+ />
22
+ ),
23
+ },
24
+ {
25
+ accessor: "scheduledMeetings",
26
+ label: "Scheduled Meetings",
27
+ customRenderer: (row, value) => (
28
+ <Pill text={value}
29
+ variant="info"
30
+ />
31
+ ),
32
+ },
33
+ ],
34
+ },
35
+ {
36
+ label: "Performance Data",
37
+ columns: [
38
+ {
39
+ accessor: "attendanceRate",
40
+ label: "Attendance Rate",
41
+ },
42
+ {
43
+ accessor: "completedClasses",
44
+ label: "Completed Classes",
45
+ customRenderer: (row, value) => (
46
+ <Pill text={value}
47
+ variant="error"
48
+ />
49
+ ),
50
+ },
51
+ {
52
+ accessor: "classCompletionRate",
53
+ label: "Class Completion Rate",
54
+ },
55
+ {
56
+ accessor: "graduatedStudents",
57
+ label: "Graduated Students",
58
+ },
59
+ ],
60
+ },
61
+ ];
62
+
63
+
64
+ return (
65
+ <>
66
+ <AdvancedTable
67
+ columnDefinitions={columnDefinitions}
68
+ tableData={MOCK_DATA}
69
+ {...props}
70
+ />
71
+ </>
72
+ )
73
+ }
74
+
75
+ export default AdvancedTableColumnHeadersCustomCell
@@ -30,6 +30,7 @@ examples:
30
30
  - advanced_table_pagination_with_props: Pagination Props
31
31
  - advanced_table_column_headers: Multi-Header Columns
32
32
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
33
+ - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
33
34
  # - advanced_table_no_subrows: Table with No Subrows
34
35
  - advanced_table_selectable_rows: Selectable Rows
35
36
  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
@@ -19,4 +19,5 @@ export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_tab
19
19
  export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
20
20
  export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
21
21
  export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
22
- export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
22
+ export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
23
+ export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
@@ -0,0 +1,58 @@
1
+ @import "../tokens/colors";
2
+ @import "../tokens/typography";
3
+ @import url("https://code.highcharts.com/css/highcharts.css");
4
+
5
+ :root {
6
+ --highcharts-color-0: #{$data_1};
7
+ --highcharts-color-1: #{$data_2};
8
+ --highcharts-color-2: #{$data_3};
9
+ --highcharts-color-3: #{$data_4};
10
+ --highcharts-color-4: #{$data_5};
11
+ --highcharts-color-5: #{$data_6};
12
+ --highcharts-color-6: #{$data_7};
13
+ --highcharts-color-7: #{$data_8};
14
+ }
15
+
16
+ .highcharts-title {
17
+ font-family: $font_family_base;
18
+ font-weight: $bold;
19
+ font-size: $heading_3;
20
+ color: $text_lt_default;
21
+ fill: $text_lt_default;
22
+ }
23
+
24
+ .highcharts-subtitle {
25
+ font-family: $font_family_base;
26
+ color: $text_lt_light;
27
+ fill: $text_lt_light;
28
+ font-weight: $regular;
29
+ font-size: $text_base;
30
+ }
31
+
32
+ .highcharts-yaxis > .highcharts-axis-title {
33
+ color: $text_lt_lighter;
34
+ fill: $text_lt_lighter;
35
+ font-family: $font_family_base;
36
+ font-weight: $bold;
37
+ font-size: $text_smaller;
38
+ }
39
+
40
+ .highcharts-axis-labels {
41
+ font-family: $font_family_base;
42
+ color: $text_lt_lighter;
43
+ fill: $text_lt_lighter;
44
+ font-weight: $bold;
45
+ font-size: $text_smaller;
46
+ }
47
+
48
+ .highcharts-grid-line {
49
+ stroke: $border_light;
50
+ }
51
+
52
+ .highcharts-point {
53
+ border-radius: 3px;
54
+ }
55
+
56
+ .highcharts-axis-line {
57
+ stroke: $border_light;
58
+ }
@@ -0,0 +1,64 @@
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
@@ -0,0 +1 @@
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.
@@ -17,6 +17,7 @@ examples:
17
17
 
18
18
  react:
19
19
  - bar_graph_default: Default
20
+ - bar_graph_pb_styles: Playbook Styles
20
21
  - bar_graph_legend: Legend
21
22
  - bar_graph_legend_position: Legend Position
22
23
  - bar_graph_legend_non_clickable: Legend Non Clickable
@@ -10,3 +10,4 @@ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
10
10
  export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
11
11
  export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
12
12
  export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
13
+ export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'
@@ -43,9 +43,9 @@
43
43
  <% end %>
44
44
  <% end %>
45
45
 
46
- <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
46
+ <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
47
47
  <% initial_items.each do |item| %>
48
- <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
48
+ <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
49
49
  <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
50
50
  <%= pb_rails("table/table_cell") do %>
51
51
  <%= pb_rails("flex", props:{align:"center"}) do %>
@@ -1 +1,4 @@
1
- The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here.
1
+ The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
2
+
3
+ - use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
4
+ - use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here.
@@ -0,0 +1,90 @@
1
+ import React, { useState } from "react";
2
+ import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
3
+
4
+ // Initial items to be dragged
5
+ const data = [
6
+ {
7
+ id: "1",
8
+ task: "Task 1",
9
+ assignee_name: "Terry Miles",
10
+ assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
11
+ },
12
+ {
13
+ id: "2",
14
+ task: "Task 2",
15
+ assignee_name: "Sophia Miles",
16
+ assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
17
+ },
18
+ {
19
+ id: "3",
20
+ task: "Task 3",
21
+ assignee_name: "Alice Jones",
22
+ assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
23
+ },
24
+ {
25
+ id: "4",
26
+ task: "Task 4",
27
+ assignee_name: "Mike James",
28
+ assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
29
+ },
30
+ {
31
+ id: "5",
32
+ task: "Task 5",
33
+ assignee_name: "James Guy",
34
+ assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
35
+ }
36
+ ];
37
+
38
+ const DraggableWithTableReact = (props) => {
39
+ const [initialState, setInitialState] = useState(data);
40
+
41
+ return (
42
+ <>
43
+ <DraggableProvider initialItems={data}
44
+ onReorder={(items) => setInitialState(items)}
45
+ >
46
+ <Table
47
+ responsive="none"
48
+ size="sm"
49
+ {...props}
50
+ >
51
+ <Table.Head>
52
+ <Table.Row>
53
+ <Table.Header>{"id"}</Table.Header>
54
+ <Table.Header>{"name"}</Table.Header>
55
+ <Table.Header>{"task number"}</Table.Header>
56
+ </Table.Row>
57
+ </Table.Head>
58
+ <Table.Body draggableContainer>
59
+ {initialState.map(({ id, task, assignee_name, assignee_img }) => (
60
+ <Table.Row
61
+ dragId={id}
62
+ draggableItem
63
+ key={id}
64
+ >
65
+ <Table.Cell>{id}</Table.Cell>
66
+ <Table.Cell>
67
+ <Flex align="center">
68
+ <Avatar
69
+ imageUrl={assignee_img}
70
+ size="xs"
71
+ />
72
+ <Body
73
+ paddingLeft="xxs"
74
+ text={assignee_name}
75
+ {...props}
76
+ />
77
+ </Flex>
78
+ </Table.Cell>
79
+ <Table.Cell>{task}</Table.Cell>
80
+ </Table.Row>
81
+ ))}
82
+ </Table.Body>
83
+ </Table>
84
+ </DraggableProvider>
85
+ </>
86
+
87
+ );
88
+ };
89
+
90
+ export default DraggableWithTableReact;
@@ -0,0 +1,5 @@
1
+ The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
2
+
3
+ - Wrap the Table with the `DraggableProvider` and manage state as shown.
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.
@@ -4,7 +4,9 @@ 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
8
  - draggable_multiple_containers: Dragging Across Multiple Containers
9
+
8
10
  rails:
9
11
  - draggable_default_rails: Default
10
12
  - draggable_with_list_rails: Draggable with List Kit
@@ -2,4 +2,5 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
2
2
  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
- export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
5
+ export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
6
+ export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
@@ -17,10 +17,11 @@ type DraggableContainerProps = {
17
17
  data?: { [key: string]: string };
18
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string;
20
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
20
21
  };
21
22
 
22
23
  const DraggableContainer = (props: DraggableContainerProps) => {
23
- const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
24
+ const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
24
25
 
25
26
  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
26
27
 
@@ -28,6 +29,8 @@ const DraggableContainer = (props: DraggableContainerProps) => {
28
29
  const dataProps = buildDataProps(data);
29
30
  const htmlProps = buildHtmlProps(htmlOptions);
30
31
 
32
+ const Tag: React.ReactElement | any = `${tag}`;
33
+
31
34
  const classes = classnames(
32
35
  buildCss("pb_draggable_container"),
33
36
  `${activeContainer === container ? "active" : ""}`,
@@ -36,18 +39,18 @@ const DraggableContainer = (props: DraggableContainerProps) => {
36
39
  );
37
40
 
38
41
  return (
39
- <div
42
+ <Tag
40
43
  {...ariaProps}
41
44
  {...dataProps}
42
45
  {...htmlProps}
43
46
  className={classes}
44
47
  id={id}
45
48
  key={container}
46
- onDragOver={(e) => handleDragOver(e, container)}
49
+ onDragOver={(e: Event) => handleDragOver(e, container)}
47
50
  onDrop={() => handleDrop(container)}
48
51
  >
49
52
  {children}
50
- </div>
53
+ </Tag>
51
54
  );
52
55
  };
53
56
 
@@ -18,10 +18,11 @@ type DraggableItemProps = {
18
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string;
20
20
  dragId?: string;
21
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
21
22
  };
22
23
 
23
24
  const DraggableItem = (props: DraggableItemProps) => {
24
- const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, dragId } = props;
25
+ const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, dragId, tag="div" } = props;
25
26
 
26
27
  const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
27
28
  DraggableContext();
@@ -30,6 +31,8 @@ const DraggableItem = (props: DraggableItemProps) => {
30
31
  const dataProps = buildDataProps(data);
31
32
  const htmlProps = buildHtmlProps(htmlOptions);
32
33
 
34
+ const Tag: React.ReactElement | any = `${tag}`;
35
+
33
36
  const classes = classnames(
34
37
  buildCss("pb_draggable_item"),
35
38
  `${isDragging === dragId ? "is_dragging" : ""}`,
@@ -38,7 +41,7 @@ const DraggableItem = (props: DraggableItemProps) => {
38
41
  );
39
42
 
40
43
  return (
41
- <div
44
+ <Tag
42
45
  {...ariaProps}
43
46
  {...dataProps}
44
47
  {...htmlProps}
@@ -51,7 +54,7 @@ const DraggableItem = (props: DraggableItemProps) => {
51
54
  onDragStart={() => handleDragStart(dragId, container)}
52
55
  >
53
56
  {children}
54
- </div>
57
+ </Tag>
55
58
  );
56
59
  };
57
60
 
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- data: object.data,
4
- id: object.id,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= react_component("MultiLevelSelect", object.multi_level_select_options) %>
8
3
  <% end %>
@@ -1,15 +1,9 @@
1
1
  <% if object.collapsible %>
2
2
  <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
3
3
  <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
4
- <%= content_tag(object.tag,
5
- aria: object.aria,
6
- class: object.classname,
7
- data: object.data,
8
- dark: object.dark,
9
- id: object.id,
10
- href: object.link && object.link,
11
- target: object.link && object.target,
12
- **combined_html_options
4
+ <%= pb_content_tag( object.tag,
5
+ href: object.link && object.link,
6
+ target: object.link && object.target
13
7
  ) do %>
14
8
  <% if object.image_url %>
15
9
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -20,22 +14,16 @@
20
14
  <span class="pb_nav_list_item_text_collapsible">
21
15
  <%= object.text %>
22
16
  </span>
23
- <% end %>
17
+ <% end %>
24
18
  <% end %>
25
19
  <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
26
20
  <%= content.presence %>
27
21
  <% end %>
28
22
  <% end %>
29
23
  <% else %>
30
- <%= content_tag(object.tag,
31
- aria: object.aria,
32
- class: object.classname,
33
- **combined_html_options,
34
- data: object.data,
35
- dark: object.dark,
36
- id: object.id,
37
- href: object.link && object.link,
38
- target: object.link && object.target
24
+ <%= pb_content_tag( object.tag,
25
+ href: object.link && object.link,
26
+ target: object.link && object.target
39
27
  ) do %>
40
28
  <% if object.image_url %>
41
29
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
@@ -1,12 +1,7 @@
1
- <%= content_tag(:nav,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(:nav) do %>
7
2
  <% if object.title %>
8
- <%= content_tag(:div, class: "pb_nav_list_title") do %>
9
- <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
3
+ <%= pb_content_tag do %>
4
+ <%= pb_content_tag(:a) do %>
10
5
  <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
11
6
  <% end %>
12
7
  <% end %>
@@ -1,7 +1,2 @@
1
- <%= content_tag(:div,
2
- aria: object.aria.merge!(label: object.status),
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
8
3
  <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
9
4
  <%= content.presence %>
@@ -3,7 +3,8 @@
3
3
  @import "../tokens/border_radius";
4
4
 
5
5
  @mixin pb_progress_pill {
6
- width: 45px;
6
+ width: 100%;
7
+ max-width: 45px;
7
8
  height: 4px;
8
9
  border-radius: $border_rad_light;
9
10
  margin-right: $space_xs;
@@ -27,6 +28,10 @@
27
28
  [class*=pb_progress_pill] {
28
29
  @include pb_progress_pill;
29
30
 
31
+ &.full_width_pill {
32
+ max-width: none;
33
+ }
34
+
30
35
  &[class*=_inactive] {
31
36
  background-color: $border_light;
32
37
  &.dark {