playbook_ui_docs 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216

Sign up to get free protection for your applications and to get access to all the features.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
  7. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  10. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
  11. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
  12. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
  13. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
  15. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
  16. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
  17. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
  18. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
  19. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
  20. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
  21. data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
  22. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
  24. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
  25. data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
  26. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  27. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  28. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  29. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
  31. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  32. data/dist/playbook-doc.js +1 -1
  33. metadata +19 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fe24b64017f99ab8bd28d842f00141146d18fa42b1484ee3f732b05481698f93
4
- data.tar.gz: 98b6ded3f763746b52ded2f73938eb669ae4f08f08ef8d5824b68d9b6de7b0d4
3
+ metadata.gz: 5e75e43e7642ebd8df5b1119910559a7e24c4ea0b50575dbfea446961b98ae15
4
+ data.tar.gz: d35a1fba51f32713b0dc93d7fb1a5b7ab868a548038dab7cbbfa5c2fc78b182d
5
5
  SHA512:
6
- metadata.gz: 50362b2e4c7a6ffbf506cd31c3a529f58a8faee4facfa9c050194323331038945a198de3bd9a766cae22ff387d18c52a2f2e72fddbbbc99c34ce20ebe3b5a74d
7
- data.tar.gz: afcfa7b3844642b1b0742c637ce41f0508b98a6d1114b7acde6258b2b229d23b5fde81b5d806beb5e3a3c6ade4a6d50e5cc2df1f6ffc858dc1ac628fc31ea101
6
+ metadata.gz: 2ce8a266b9f30e9edf816182997594496a6c79a6297347c94ae2edf0c4584d28db857d833bc26eca1c34ebef2a582c216ca9d4d84bd9859c55a26dbde4b1faeb
7
+ data.tar.gz: ad8d1c363ead41215c14bda843613273d9a75a290a91e7a6af098c5b298eafc8c65f1567a6e2577adfc2aa87fb0b83a2fae98173738ce5c40b163aae5a4bcf03
@@ -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 Exmaple",
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>
@@ -1,3 +1 @@
1
1
  Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
2
-
3
- Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.
@@ -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.
@@ -3,3 +3,4 @@ examples:
3
3
  rails:
4
4
  - form_form_with: Default
5
5
  - form_form_with_validate: Default + Validation
6
+ - form_form_with_loading: Default + Loading