playbook_ui_docs 14.5.0.pre.rc.15 → 14.6.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4222
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +105 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +106 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
- data/dist/playbook-doc.js +1 -1
- metadata +28 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f73508e55ce0ee6248cda20fef81e57d484011fd7d8672c5aad298c7a88347f9
|
|
4
|
+
data.tar.gz: 8676a39b0ccf3710fd7b02ecac0451bbe5bca3eacb373425f668d4656e6b5682
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 37ac71105f21691327c9c5afd1fc123dc78a36d326b930144f52982b0dfa65e29f6ef34e334c772f598951f3b1247b19c34ff51fc4e8968b57eca8baf49b7c8c
|
|
7
|
+
data.tar.gz: 9bac0fe76d968dd17867f5d49d6a2ab06aaca3a2bdc058999d6151c3e222225a64653f11f9abf86d4b84a169042d20a112bb31ab13aad5049f5715fef88f2914
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableCustomCell = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
accessor: "newEnrollments",
|
|
15
|
+
label: "New Enrollments",
|
|
16
|
+
customRenderer: (row, value) => (
|
|
17
|
+
<Pill text={value}
|
|
18
|
+
variant="success"
|
|
19
|
+
/>
|
|
20
|
+
),
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
accessor: "scheduledMeetings",
|
|
24
|
+
label: "Scheduled Meetings",
|
|
25
|
+
customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>,
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "attendanceRate",
|
|
29
|
+
label: "Attendance Rate",
|
|
30
|
+
customRenderer: (row, value) => (
|
|
31
|
+
<Flex alignItems="end"
|
|
32
|
+
orientation="column"
|
|
33
|
+
>
|
|
34
|
+
<Detail bold
|
|
35
|
+
color="default"
|
|
36
|
+
text={value}
|
|
37
|
+
/>
|
|
38
|
+
<Caption size="xs">{row.original.graduatedStudents}</Caption>
|
|
39
|
+
</Flex>
|
|
40
|
+
),
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
accessor: "completedClasses",
|
|
44
|
+
label: "Completed Classes",
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
accessor: "classCompletionRate",
|
|
48
|
+
label: "Class Completion Rate",
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
accessor: "graduatedStudents",
|
|
52
|
+
label: "Graduated Students",
|
|
53
|
+
},
|
|
54
|
+
]
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div>
|
|
58
|
+
<AdvancedTable
|
|
59
|
+
columnDefinitions={columnDefinitions}
|
|
60
|
+
enableToggleExpansion="all"
|
|
61
|
+
responsive="none"
|
|
62
|
+
tableData={MOCK_DATA}
|
|
63
|
+
{...props}
|
|
64
|
+
>
|
|
65
|
+
<AdvancedTable.Header enableSorting />
|
|
66
|
+
<AdvancedTable.Body />
|
|
67
|
+
</AdvancedTable>
|
|
68
|
+
</div>
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export default AdvancedTableCustomCell
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `customRenderer` item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. To access the data, use `row.original` which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived.
|
|
2
|
+
|
|
3
|
+
See [here](https://playbook.powerapp.cloud/kits/advanced_table/react#columnDefinitions) for more indepth information on columnDefinitions are how to use them.
|
|
4
|
+
|
|
5
|
+
See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used.
|
|
@@ -3,6 +3,7 @@ examples:
|
|
|
3
3
|
- advanced_table_beta: Default (Required Props)
|
|
4
4
|
- advanced_table_beta_subrow_headers: SubRow Headers
|
|
5
5
|
- advanced_table_beta_sort: Enable Sorting
|
|
6
|
+
|
|
6
7
|
react:
|
|
7
8
|
- advanced_table_default: Default (Required Props)
|
|
8
9
|
- advanced_table_loading: Loading State
|
|
@@ -15,3 +16,4 @@ examples:
|
|
|
15
16
|
- advanced_table_table_props: Table Props
|
|
16
17
|
- advanced_table_inline_row_loading: Inline Row Loading
|
|
17
18
|
- advanced_table_responsive: Responsive Tables
|
|
19
|
+
- advanced_table_custom_cell: Custom Components for Cells
|
|
@@ -9,3 +9,4 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
|
|
|
9
9
|
export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
|
|
10
10
|
export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
|
|
11
11
|
export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
|
|
12
|
+
export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
|
|
@@ -1,13 +1,36 @@
|
|
|
1
1
|
<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
|
|
2
2
|
|
|
3
|
-
<%= pb_rails("dialog", props: {
|
|
4
|
-
id:"dialog-loading",
|
|
5
|
-
size: "sm",
|
|
6
|
-
title: "Loading
|
|
7
|
-
text: "Make a loading request?",
|
|
8
|
-
cancel_button: "Cancel Button",
|
|
3
|
+
<%= pb_rails("dialog", props: {
|
|
4
|
+
id:"dialog-loading",
|
|
5
|
+
size: "sm",
|
|
6
|
+
title: "Loading Example",
|
|
7
|
+
text: "Make a loading request?",
|
|
8
|
+
cancel_button: "Cancel Button",
|
|
9
9
|
cancel_button_id: "cancel-button-loading",
|
|
10
|
-
confirm_button: "Okay",
|
|
10
|
+
confirm_button: "Okay",
|
|
11
11
|
confirm_button_id: "confirm-button-loading",
|
|
12
12
|
loading: true,
|
|
13
13
|
}) %>
|
|
14
|
+
|
|
15
|
+
<script>
|
|
16
|
+
const loadingButton = document.querySelector('[data-disable-with="Loading"]');
|
|
17
|
+
if (loadingButton) {
|
|
18
|
+
loadingButton.addEventListener("click", function() {
|
|
19
|
+
const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
|
|
20
|
+
const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
|
|
21
|
+
let currentClass = okayLoadingButton.className;
|
|
22
|
+
let cancelClass = cancelButton ? cancelButton.className : "";
|
|
23
|
+
|
|
24
|
+
setTimeout(function() {
|
|
25
|
+
okayLoadingButton.disabled = false;
|
|
26
|
+
okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
|
|
27
|
+
|
|
28
|
+
if (cancelButton) {
|
|
29
|
+
cancelButton.disabled = false;
|
|
30
|
+
cancelButton.className = cancelClass.replace("_disabled", "_enabled");
|
|
31
|
+
}
|
|
32
|
+
}, 5000);
|
|
33
|
+
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
</script>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useRef } from 'react'
|
|
2
|
+
import { Button, Dropdown } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const options = [
|
|
5
|
+
{
|
|
6
|
+
label: "United States",
|
|
7
|
+
value: "United States",
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
label: "Canada",
|
|
11
|
+
value: "Canada",
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
label: "Pakistan",
|
|
15
|
+
value: "Pakistan",
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
|
|
19
|
+
const DropdownClearSelection = (props) => {
|
|
20
|
+
const dropdownRef = useRef(null)
|
|
21
|
+
|
|
22
|
+
const handleReset = () => {
|
|
23
|
+
if (dropdownRef.current) {
|
|
24
|
+
dropdownRef.current.clearSelected()
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<>
|
|
30
|
+
<Dropdown
|
|
31
|
+
defaultValue={options[2]}
|
|
32
|
+
options={options}
|
|
33
|
+
ref={dropdownRef}
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
<Button
|
|
37
|
+
marginTop="md"
|
|
38
|
+
onClick={handleReset}
|
|
39
|
+
text="Reset"
|
|
40
|
+
/>
|
|
41
|
+
</>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export default DropdownClearSelection
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
|
6
|
+
]
|
|
7
|
+
|
|
8
|
+
%>
|
|
9
|
+
<%= pb_rails("dropdown", props: {options: options, separators: false}) %>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Dropdown } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const DropdownSeparatorsHidden = (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
|
+
options={options}
|
|
26
|
+
separators={false}
|
|
27
|
+
{...props}
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default DropdownSeparatorsHidden
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
|
6
|
+
]
|
|
7
|
+
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("dropdown", props: { options: options, variant: "subtle", separators: false }) %>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Dropdown } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const DropdownSubtleVariant = (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
|
+
<>
|
|
24
|
+
<Dropdown
|
|
25
|
+
options={options}
|
|
26
|
+
separators={false}
|
|
27
|
+
variant="subtle"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
</>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export default DropdownSubtleVariant
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
3
|
- dropdown_default: Default
|
|
4
|
+
- dropdown_subtle_variant: Subtle Variant
|
|
4
5
|
- dropdown_subcomponent_structure_rails: Subcomponent Structure
|
|
5
6
|
- dropdown_with_label: With Label
|
|
6
7
|
- dropdown_with_custom_options_rails: Custom Options
|
|
@@ -10,9 +11,11 @@ examples:
|
|
|
10
11
|
- dropdown_error: Dropdown with Error
|
|
11
12
|
- dropdown_default_value: Default Value
|
|
12
13
|
- dropdown_blank_selection: Blank Selection
|
|
14
|
+
- dropdown_separators_hidden: Separators Hidden
|
|
13
15
|
|
|
14
16
|
react:
|
|
15
17
|
- dropdown_default: Default
|
|
18
|
+
- dropdown_subtle_variant: Subtle Variant
|
|
16
19
|
- dropdown_subcomponent_structure: Subcomponent Structure
|
|
17
20
|
- dropdown_with_label: With Label
|
|
18
21
|
- dropdown_with_custom_options: Custom Options
|
|
@@ -22,6 +25,8 @@ examples:
|
|
|
22
25
|
- dropdown_error: Dropdown with Error
|
|
23
26
|
- dropdown_default_value: Default Value
|
|
24
27
|
- dropdown_blank_selection: Blank Selection
|
|
28
|
+
- dropdown_clear_selection: Clear Selection
|
|
29
|
+
- dropdown_separators_hidden: Separators Hidden
|
|
25
30
|
# - dropdown_with_autocomplete: Autocomplete
|
|
26
31
|
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
|
27
32
|
# - dropdown_with_external_control: useDropdown Hook
|
|
@@ -12,3 +12,6 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
|
|
|
12
12
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
|
13
13
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
|
14
14
|
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
|
15
|
+
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|
|
16
|
+
export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
|
|
17
|
+
export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<%=
|
|
2
|
+
pb_rails("filter", props: {
|
|
3
|
+
id: "filter_popover_props",
|
|
4
|
+
position: "top",
|
|
5
|
+
filters: [
|
|
6
|
+
{ name: "name", value: "John Wick" },
|
|
7
|
+
{ name: "city", value: "San Francisco"}
|
|
8
|
+
],
|
|
9
|
+
sort_menu: [
|
|
10
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
|
11
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
|
12
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
|
13
|
+
],
|
|
14
|
+
template: "default",
|
|
15
|
+
results: 1,
|
|
16
|
+
popover_props: { width: "250px" },
|
|
17
|
+
}) do
|
|
18
|
+
%>
|
|
19
|
+
<%
|
|
20
|
+
example_collection = [
|
|
21
|
+
OpenStruct.new(name: "USA", value: 1),
|
|
22
|
+
OpenStruct.new(name: "Canada", value: 2),
|
|
23
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
|
24
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
|
25
|
+
OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
|
|
26
|
+
]
|
|
27
|
+
%>
|
|
28
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
|
29
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
30
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
|
31
|
+
|
|
32
|
+
<%= form.actions do |action| %>
|
|
33
|
+
<%= action.submit props: {
|
|
34
|
+
text: "Apply",
|
|
35
|
+
data: {
|
|
36
|
+
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
|
37
|
+
},}%>
|
|
38
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
|
39
|
+
<% end %>
|
|
40
|
+
<% end %>
|
|
41
|
+
<% end %>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const FilterPopoverProps = (props) => {
|
|
5
|
+
const options = [
|
|
6
|
+
{ value: 'USA' },
|
|
7
|
+
{ value: 'Canada' },
|
|
8
|
+
{ value: 'Brazil' },
|
|
9
|
+
{ value: 'Philippines' },
|
|
10
|
+
{ value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
|
|
11
|
+
]
|
|
12
|
+
|
|
13
|
+
const popoverProps = {
|
|
14
|
+
width: "250px"
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<Filter
|
|
19
|
+
{...props}
|
|
20
|
+
double
|
|
21
|
+
filters={{
|
|
22
|
+
'Full Name': 'John Wick',
|
|
23
|
+
'City': 'San Francisco',
|
|
24
|
+
}}
|
|
25
|
+
popoverProps={popoverProps}
|
|
26
|
+
results={1}
|
|
27
|
+
sortOptions={{
|
|
28
|
+
popularity: 'Popularity',
|
|
29
|
+
// eslint-disable-next-line
|
|
30
|
+
manager_title: 'Manager\'s Title',
|
|
31
|
+
// eslint-disable-next-line
|
|
32
|
+
manager_name: 'Manager\'s Name',
|
|
33
|
+
}}
|
|
34
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
|
35
|
+
>
|
|
36
|
+
{({ closePopover }) => (
|
|
37
|
+
<form>
|
|
38
|
+
<TextInput
|
|
39
|
+
label="Example Text Field"
|
|
40
|
+
placeholder="Enter Text"
|
|
41
|
+
{...props}
|
|
42
|
+
/>
|
|
43
|
+
<Select
|
|
44
|
+
blankSelection="Select One..."
|
|
45
|
+
label="Example Collection Select"
|
|
46
|
+
name="Collection Select"
|
|
47
|
+
options={options}
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
50
|
+
<Flex
|
|
51
|
+
spacing="between"
|
|
52
|
+
{...props}
|
|
53
|
+
>
|
|
54
|
+
<Button
|
|
55
|
+
onClick={closePopover}
|
|
56
|
+
text="Apply"
|
|
57
|
+
{...props}
|
|
58
|
+
/>
|
|
59
|
+
<Button
|
|
60
|
+
text="Clear"
|
|
61
|
+
variant="secondary"
|
|
62
|
+
{...props}
|
|
63
|
+
/>
|
|
64
|
+
</Flex>
|
|
65
|
+
</form>
|
|
66
|
+
)}
|
|
67
|
+
</Filter>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default FilterPopoverProps
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popover_props` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover).
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover/react) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popoverProps` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover/react).
|
|
@@ -10,6 +10,7 @@ examples:
|
|
|
10
10
|
- filter_max_width: Max Width for Popover Inside of Filter
|
|
11
11
|
- filter_max_height: Max Height for Popover Inside of Filter
|
|
12
12
|
- filter_placement: Filter Placement
|
|
13
|
+
- filter_popover_props: Popover Props
|
|
13
14
|
|
|
14
15
|
react:
|
|
15
16
|
- filter_default: Default
|
|
@@ -21,3 +22,5 @@ examples:
|
|
|
21
22
|
- filter_max_width: Max Width for Popover Inside of Filter
|
|
22
23
|
- filter_max_height: Max Height for Popover Inside of Filter
|
|
23
24
|
- filter_placement: Filter Placement
|
|
25
|
+
- filter_popover_props: Popover Props
|
|
26
|
+
|
|
@@ -7,3 +7,4 @@ export { default as SortOnly } from './_sort_only.jsx'
|
|
|
7
7
|
export { default as FilterMaxWidth } from './_filter_max_width.jsx'
|
|
8
8
|
export { default as FilterMaxHeight } from './_filter_max_height.jsx'
|
|
9
9
|
export { default as FilterPlacement } from './_filter_placement.jsx'
|
|
10
|
+
export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
|
|
2
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
3
|
+
|
|
4
|
+
<%= form.actions do |action| %>
|
|
5
|
+
<%= action.submit %>
|
|
6
|
+
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<% end %>
|
|
9
|
+
|
|
10
|
+
<script>
|
|
11
|
+
const loadingForm = document.querySelector(".pb_form_loading")
|
|
12
|
+
if (loadingForm) {
|
|
13
|
+
loadingForm.addEventListener("submit", function(event) {
|
|
14
|
+
event.preventDefault();
|
|
15
|
+
|
|
16
|
+
const submitButton = event['submitter'];
|
|
17
|
+
const cancelButton = event['target'].querySelector('button[type="reset"]');
|
|
18
|
+
|
|
19
|
+
if (submitButton) {
|
|
20
|
+
let currentClass = submitButton.className;
|
|
21
|
+
let newClass = currentClass.replace("_disabled_loading", "_enabled");
|
|
22
|
+
|
|
23
|
+
let cancelClass = cancelButton ? cancelButton.className : "";
|
|
24
|
+
let newCancelClass = cancelClass.replace("_disabled", "_enabled");
|
|
25
|
+
|
|
26
|
+
setTimeout(function() {
|
|
27
|
+
submitButton.disabled = false;
|
|
28
|
+
submitButton.className = currentClass;
|
|
29
|
+
|
|
30
|
+
if (cancelButton) {
|
|
31
|
+
cancelButton.disabled = false;
|
|
32
|
+
cancelButton.className = cancelClass;
|
|
33
|
+
}
|
|
34
|
+
}, 5000);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
</script>
|
|
39
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<%
|
|
2
|
+
names = [
|
|
3
|
+
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
|
4
|
+
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
|
5
|
+
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
|
6
|
+
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
|
7
|
+
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
|
8
|
+
]
|
|
9
|
+
%>
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("typeahead", props: {
|
|
12
|
+
html_options: { style: { maxWidth: "240px" }},
|
|
13
|
+
id: "typeahead-form-pill",
|
|
14
|
+
is_multi: true,
|
|
15
|
+
options: names,
|
|
16
|
+
label: "Names",
|
|
17
|
+
pills: true,
|
|
18
|
+
truncate: 1,
|
|
19
|
+
}) %>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Typeahead from '../../pb_typeahead/_typeahead'
|
|
3
|
+
|
|
4
|
+
const names = [
|
|
5
|
+
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
|
6
|
+
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
|
7
|
+
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
|
8
|
+
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
|
9
|
+
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
|
10
|
+
]
|
|
11
|
+
|
|
12
|
+
const FormPillTruncatedText = (props) => {
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<Typeahead
|
|
16
|
+
htmlOptions={{ style: { maxWidth: "240px" }}}
|
|
17
|
+
isMulti
|
|
18
|
+
label="Names"
|
|
19
|
+
options={names}
|
|
20
|
+
truncate={1}
|
|
21
|
+
{...props}
|
|
22
|
+
/>
|
|
23
|
+
</>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export default FormPillTruncatedText
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
|
@@ -3,6 +3,7 @@ examples:
|
|
|
3
3
|
rails:
|
|
4
4
|
- form_pill_user: Form Pill User
|
|
5
5
|
- form_pill_size: Form Pill Size
|
|
6
|
+
- form_pill_truncated_text: Truncated Text
|
|
6
7
|
- form_pill_tag: Form Pill Tag
|
|
7
8
|
- form_pill_example: Example
|
|
8
9
|
- form_pill_icon: Form Pill Icon
|
|
@@ -11,6 +12,7 @@ examples:
|
|
|
11
12
|
react:
|
|
12
13
|
- form_pill_user: Form Pill User
|
|
13
14
|
- form_pill_size: Form Pill Size
|
|
15
|
+
- form_pill_truncated_text: Truncated Text
|
|
14
16
|
- form_pill_tag: Form Pill Tag
|
|
15
17
|
- form_pill_example: Example
|
|
16
18
|
- form_pill_icon: Form Pill Icon
|
|
@@ -4,3 +4,4 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
|
|
|
4
4
|
export { default as FormPillExample } from './_form_pill_example.jsx'
|
|
5
5
|
export { default as FormPillIcon } from './_form_pill_icon.jsx'
|
|
6
6
|
export { default as FormPillColors } from './_form_pill_colors.jsx'
|
|
7
|
+
export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
|