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 +4 -4
- 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_form/docs/_form_form_with_loading.html.erb +8 -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/dist/playbook-doc.js +1 -1
- metadata +7 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: bad974688339e23819a28f81702f310c9504eae7c79447d92d0252537608c10b
|
4
|
+
data.tar.gz: 2c4dcfc9cc6c8a92f67c1f0365ff5569e2a5a660a5f1f5ee15bd56ebb8ef7a22
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
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,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.
|
@@ -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'
|