playbook_ui_docs 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3954 → 14.5.0.pre.alpha.PLAY1510railsformloading3975

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5529b49fbc2769d5824cc2d5969196a508ca8f0d57ef8e34bda003d8f186932b
4
- data.tar.gz: 0b231d041f24974acb5e8c8c57b38270cc41f3826effed5ff31b8a818720bc99
3
+ metadata.gz: bad974688339e23819a28f81702f310c9504eae7c79447d92d0252537608c10b
4
+ data.tar.gz: 2c4dcfc9cc6c8a92f67c1f0365ff5569e2a5a660a5f1f5ee15bd56ebb8ef7a22
5
5
  SHA512:
6
- metadata.gz: 69d108da7c89b2e3c29815d5cb44a5d6a7d2a60c889622f3be85a1bf3b9d2e1c1beb4c67510b84a80de8ea8d8b78f066b07800788e6de27614c61f34a85a98d0
7
- data.tar.gz: 87764fda70d7f117e837cfec6a390dccba9a4f36fae2f7fd4c894e3a66c3c5273f882dbd75724f4e0b9a4292a117b12ea521c62987612f36aa999b69f1c0ae9c
6
+ metadata.gz: a089346ac6b1364f128c6e20d1d53ab4a2f8c641625990c8a9fb72445759ac268c43316dd4b2a41982383e99d7ffdefd2e13423f3779054441770d05c4edd462
7
+ data.tar.gz: 1083b87904d5d3a36c88bce79230100cecaa998f81a1992a843d23ff1fa9cfd2647222811c0f0149027092aefb437f1fc306d8e31361815ef678c4e535019b05
@@ -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,8 @@
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 %>
@@ -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
@@ -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'