playbook_ui_docs 14.20.0.pre.alpha.PLAY2140upgraderailsdependency8003 → 14.20.0.pre.alpha.PLAY2140upgraderailsdependency8086
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.jsx +53 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_date_display.html.erb +13 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.jsx +42 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/dist/playbook-doc.js +1 -1
- metadata +10 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3a51f9aecae2eaf36075f3e09cd950e80b0c7fba3706ca3288ab669253553b28
|
4
|
+
data.tar.gz: c827eb067a8e45fa2940bacff381bef26b000c067acfa14d35d47dd65f04d853
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ca1fce98173d5fe9b466c1d0b4a8aa23190395092e8347cda90675517ebff6328e32e2ab2ef7c77bde45230838332721ad7cc83ffaca6f0f1f117bd056b0f74c
|
7
|
+
data.tar.gz: 07b19479de155da27d911ca59fd6e86ab0aba19c637804475e456caba705cccead292dcef244658ae2120b1257eaa260efacc1242ab75ab55c9df3cbf11f461c
|
@@ -0,0 +1,33 @@
|
|
1
|
+
<% column_definitions = [
|
2
|
+
{
|
3
|
+
accessor: "year",
|
4
|
+
label: "Year",
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
6
|
+
},
|
7
|
+
{
|
8
|
+
accessor: "newEnrollments",
|
9
|
+
label: "New Enrollments",
|
10
|
+
},
|
11
|
+
{
|
12
|
+
accessor: "scheduledMeetings",
|
13
|
+
label: "Scheduled Meetings",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
accessor: "attendanceRate",
|
17
|
+
label: "Attendance Rate",
|
18
|
+
},
|
19
|
+
{
|
20
|
+
accessor: "completedClasses",
|
21
|
+
label: "Completed Classes",
|
22
|
+
},
|
23
|
+
{
|
24
|
+
accessor: "classCompletionRate",
|
25
|
+
label: "Class Completion Rate",
|
26
|
+
},
|
27
|
+
{
|
28
|
+
accessor: "graduatedStudents",
|
29
|
+
label: "Graduated Students",
|
30
|
+
}
|
31
|
+
] %>
|
32
|
+
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "table-no-children", enable_toggle_expansion: "none", table_data: @table_data_no_subrows, column_definitions: column_definitions }) %>
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import React, { useState } from "react"
|
2
|
+
import AdvancedTable from '../_advanced_table'
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
|
4
|
+
|
5
|
+
const AdvancedTableRowPinning = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
11
|
+
},
|
12
|
+
{
|
13
|
+
accessor: "newEnrollments",
|
14
|
+
label: "New Enrollments",
|
15
|
+
},
|
16
|
+
{
|
17
|
+
accessor: "scheduledMeetings",
|
18
|
+
label: "Scheduled Meetings",
|
19
|
+
},
|
20
|
+
{
|
21
|
+
accessor: "attendanceRate",
|
22
|
+
label: "Attendance Rate",
|
23
|
+
},
|
24
|
+
{
|
25
|
+
accessor: "completedClasses",
|
26
|
+
label: "Completed Classes",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "classCompletionRate",
|
30
|
+
label: "Class Completion Rate",
|
31
|
+
},
|
32
|
+
{
|
33
|
+
accessor: "graduatedStudents",
|
34
|
+
label: "Graduated Students",
|
35
|
+
},
|
36
|
+
]
|
37
|
+
|
38
|
+
const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
|
39
|
+
|
40
|
+
return (
|
41
|
+
<div>
|
42
|
+
<AdvancedTable
|
43
|
+
columnDefinitions={columnDefinitions}
|
44
|
+
maxHeight="xs"
|
45
|
+
pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
|
46
|
+
tableData={MOCK_DATA}
|
47
|
+
tableProps={{sticky: true}}
|
48
|
+
{...props}
|
49
|
+
>
|
50
|
+
<AdvancedTable.Header enableSorting />
|
51
|
+
<AdvancedTable.Body />
|
52
|
+
</AdvancedTable>
|
53
|
+
</div>
|
54
|
+
)
|
55
|
+
}
|
56
|
+
|
57
|
+
export default AdvancedTableRowPinning
|
@@ -0,0 +1,5 @@
|
|
1
|
+
Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
|
2
|
+
|
3
|
+
**NOTE:** This prop is in Beta. Current Requirements for V1:
|
4
|
+
- Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
|
5
|
+
- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually
|
@@ -0,0 +1,33 @@
|
|
1
|
+
<% column_definitions = [
|
2
|
+
{
|
3
|
+
accessor: "year",
|
4
|
+
label: "Year",
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
6
|
+
},
|
7
|
+
{
|
8
|
+
accessor: "newEnrollments",
|
9
|
+
label: "New Enrollments",
|
10
|
+
},
|
11
|
+
{
|
12
|
+
accessor: "scheduledMeetings",
|
13
|
+
label: "Scheduled Meetings",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
accessor: "attendanceRate",
|
17
|
+
label: "Attendance Rate",
|
18
|
+
},
|
19
|
+
{
|
20
|
+
accessor: "completedClasses",
|
21
|
+
label: "Completed Classes",
|
22
|
+
},
|
23
|
+
{
|
24
|
+
accessor: "classCompletionRate",
|
25
|
+
label: "Class Completion Rate",
|
26
|
+
},
|
27
|
+
{
|
28
|
+
accessor: "graduatedStudents",
|
29
|
+
label: "Graduated Students",
|
30
|
+
}
|
31
|
+
] %>
|
32
|
+
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", scroll_bar_none: true }) %>
|
@@ -0,0 +1,53 @@
|
|
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 AdvancedTableScrollbarNone = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
11
|
+
},
|
12
|
+
{
|
13
|
+
accessor: "newEnrollments",
|
14
|
+
label: "New Enrollments",
|
15
|
+
},
|
16
|
+
{
|
17
|
+
accessor: "scheduledMeetings",
|
18
|
+
label: "Scheduled Meetings",
|
19
|
+
},
|
20
|
+
{
|
21
|
+
accessor: "attendanceRate",
|
22
|
+
label: "Attendance Rate",
|
23
|
+
},
|
24
|
+
{
|
25
|
+
accessor: "completedClasses",
|
26
|
+
label: "Completed Classes",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "classCompletionRate",
|
30
|
+
label: "Class Completion Rate",
|
31
|
+
},
|
32
|
+
{
|
33
|
+
accessor: "graduatedStudents",
|
34
|
+
label: "Graduated Students",
|
35
|
+
},
|
36
|
+
]
|
37
|
+
|
38
|
+
return (
|
39
|
+
<div>
|
40
|
+
<AdvancedTable
|
41
|
+
columnDefinitions={columnDefinitions}
|
42
|
+
maxHeight="xs"
|
43
|
+
overflow="auto"
|
44
|
+
responsive="scroll"
|
45
|
+
scrollBarNone
|
46
|
+
tableData={MOCK_DATA}
|
47
|
+
{...props}
|
48
|
+
/>
|
49
|
+
</div>
|
50
|
+
)
|
51
|
+
}
|
52
|
+
|
53
|
+
export default AdvancedTableScrollbarNone
|
@@ -13,10 +13,12 @@ examples:
|
|
13
13
|
- advanced_table_column_headers: Multi-Header Columns
|
14
14
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
15
15
|
- advanced_table_column_border_color_rails: Column Group Border Color
|
16
|
+
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
16
17
|
- advanced_table_selectable_rows_rails: Selectable Rows
|
17
18
|
- advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
|
18
19
|
- advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
|
19
20
|
- advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
|
21
|
+
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
20
22
|
|
21
23
|
react:
|
22
24
|
- advanced_table_default: Default (Required Props)
|
@@ -42,7 +44,7 @@ examples:
|
|
42
44
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
43
45
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
44
46
|
- advanced_table_column_border_color: Column Group Border Color
|
45
|
-
|
47
|
+
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
46
48
|
- advanced_table_selectable_rows: Selectable Rows
|
47
49
|
- advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
|
48
50
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
@@ -52,4 +54,6 @@ examples:
|
|
52
54
|
- advanced_table_column_visibility: Column Visibility Control
|
53
55
|
- advanced_table_column_visibility_with_state: Column Visibility Control With State
|
54
56
|
- advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
|
55
|
-
- advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
|
57
|
+
- advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
|
58
|
+
- advanced_table_pinned_rows: Pinned Rows
|
59
|
+
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
@@ -31,4 +31,6 @@ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_colu
|
|
31
31
|
export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
|
32
32
|
export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
|
33
33
|
export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
|
34
|
-
export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
|
34
|
+
export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
|
35
|
+
export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
|
36
|
+
export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
allow_input: true,
|
3
|
+
date_display: false,
|
4
|
+
end_date_id: "quick-pick-end-date",
|
5
|
+
end_date_name: "quick-pick-end-date",
|
6
|
+
mode: "range",
|
7
|
+
picker_id: "date-picker-quick-pick-date-display",
|
8
|
+
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
9
|
+
selection_type: "quickpick",
|
10
|
+
start_date_id: "quick-pick-start-date",
|
11
|
+
start_date_name: "quick-pick-start-date"
|
12
|
+
}) %>
|
13
|
+
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Dropdown from '../../pb_dropdown/_dropdown'
|
3
|
+
|
4
|
+
const DropdownCloseOnSelect = (props) => {
|
5
|
+
|
6
|
+
const options = [
|
7
|
+
{
|
8
|
+
label: "United States",
|
9
|
+
value: "United States",
|
10
|
+
},
|
11
|
+
{
|
12
|
+
label: "Canada",
|
13
|
+
value: "Canada",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
label: "Pakistan",
|
17
|
+
value: "Pakistan",
|
18
|
+
}
|
19
|
+
];
|
20
|
+
|
21
|
+
|
22
|
+
return (
|
23
|
+
<div>
|
24
|
+
<Dropdown
|
25
|
+
closeOnSelection={false}
|
26
|
+
label="Default"
|
27
|
+
options={options}
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
<br />
|
31
|
+
<Dropdown
|
32
|
+
closeOnSelection={false}
|
33
|
+
label="Multi Select"
|
34
|
+
multiSelect
|
35
|
+
options={options}
|
36
|
+
{...props}
|
37
|
+
/>
|
38
|
+
</div>
|
39
|
+
)
|
40
|
+
}
|
41
|
+
|
42
|
+
export default DropdownCloseOnSelect
|
@@ -0,0 +1 @@
|
|
1
|
+
By default, the dropdown menu will close when a selection is made. You can prevent this behavior by using the `closeOnSelection` prop, which will leave the menu open after a selection is made when set to 'false'.
|
@@ -19,4 +19,5 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
|
|
19
19
|
export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
|
20
20
|
export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
|
21
21
|
export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
|
22
|
-
export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
|
22
|
+
export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
|
23
|
+
export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
|