playbook_ui_docs 15.1.0 → 15.2.0.pre.alpha.PLAY1978bugiconauto11317
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_button/docs/_button_managed_disabled.html.erb +31 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md +7 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb +21 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md +7 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb +16 -16
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +2 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb +31 -31
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +4 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +11 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +2 -2
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb +8 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +5 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md +1 -0
- data/dist/playbook-doc.js +2 -2
- 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: 39dfc13f02fce9d5ae986f84c6dfcff0c3b6c3c7a39098b86c2022e6eb9bc0a7
|
|
4
|
+
data.tar.gz: e144429945bddc5740d68672ea8b9f2b1c2f0dde749ef739902a67c5900b1a7e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e7ae24f12eabead8a6070e691a634854757c5409077473384f9cdeeb2f27bd32917feffd7ac5c797d996c1fd2cad2e88df983453fcc4ca7c82ca61604dce1557
|
|
7
|
+
data.tar.gz: 46771eebbacc684d224f0e758437519a21745b1475cb3b40b863b5c2d9ad0dd22af10a3b05fda94986f8d9fdef0d696f4bbb6a453059b64be69b288014a6f8d7
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<%= pb_rails("body", props: { text: "Click to disable the Buttons below", id: "toggle-disabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
2
|
+
<%= pb_rails("body", props: { text: "Click to enable the Buttons below", id: "toggle-enabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
|
|
5
|
+
<%= pb_rails("button", props: { text: "I am a Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_right: "lg" }) %>
|
|
6
|
+
<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com"}) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<script>
|
|
9
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
10
|
+
const disableTrigger = document.querySelector('#toggle-disabled-demo')
|
|
11
|
+
const enableTrigger = document.querySelector('#toggle-enabled-demo')
|
|
12
|
+
|
|
13
|
+
// Find the Buttons you want to 'manage'
|
|
14
|
+
const btn = document.querySelector('#normal_managed_button');
|
|
15
|
+
const link = document.querySelector('#a_tag_managed_button');
|
|
16
|
+
|
|
17
|
+
disableTrigger.addEventListener('click', (e) => {
|
|
18
|
+
// Disable default button
|
|
19
|
+
btn.setAttribute('disabled', true)
|
|
20
|
+
// Disable a tag button
|
|
21
|
+
link.setAttribute('aria-disabled', 'true')
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
enableTrigger.addEventListener('click', (e) => {
|
|
25
|
+
// Enable default button
|
|
26
|
+
btn.removeAttribute('disabled')
|
|
27
|
+
// Enable a tag button
|
|
28
|
+
link.removeAttribute('aria-disabled')
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
</script>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
If needing to toggle the disabled state of the Button dynamically (for example, within a Turbo or Stimulus context), you can now do so in rails using the `pb-button-managed` data attribute.
|
|
2
|
+
|
|
3
|
+
1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
|
|
4
|
+
|
|
5
|
+
2) To toggle enabled/disabled state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.
|
|
6
|
+
|
|
7
|
+
Click to enable or disable the buttons above and view the code snippet below for details!
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<%= pb_rails("body", props: { text: "Click to disable the Button below", id: "toggle-disabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
2
|
+
<%= pb_rails("body", props: { text: "Click to enable the Button below", id: "toggle-enabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
3
|
+
<br/>
|
|
4
|
+
<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
|
|
5
|
+
<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
|
|
6
|
+
<% end %>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
10
|
+
const disable = document.querySelector('#toggle-disabled-demo-with-helper')
|
|
11
|
+
const enable = document.querySelector('#toggle-enabled-demo-with-helper')
|
|
12
|
+
|
|
13
|
+
// Find the Button you want to 'manage'
|
|
14
|
+
const demoBtn = document.querySelector('#managed_button_with_helper')
|
|
15
|
+
|
|
16
|
+
// Use the pbButton object created by the kit to call the enable/disable methods
|
|
17
|
+
disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
|
|
18
|
+
enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
|
|
19
|
+
|
|
20
|
+
});
|
|
21
|
+
</script>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute.
|
|
2
|
+
|
|
3
|
+
1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
|
|
4
|
+
|
|
5
|
+
2) Toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shown in the code snippet below.
|
|
6
|
+
|
|
7
|
+
Click to enable or disable the buttons above to see this in action!
|
|
@@ -11,6 +11,8 @@ examples:
|
|
|
11
11
|
- button_options: Button Additional Options
|
|
12
12
|
- button_size: Button Size
|
|
13
13
|
- button_form: Button Form Attribute
|
|
14
|
+
- button_managed_disabled: Button Toggle Disabled State
|
|
15
|
+
- button_managed_disabled_helper: Button Toggle Disabled State Helper
|
|
14
16
|
|
|
15
17
|
react:
|
|
16
18
|
- button_default: Button Variants
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
<%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
<%= pb_rails("dialog", props: {
|
|
7
|
-
id:"dialog-stacked-default",
|
|
6
|
+
<%= pb_rails("dialog", props: {
|
|
7
|
+
id:"dialog-stacked-default",
|
|
8
8
|
status: "default",
|
|
9
|
-
size: "sm",
|
|
10
|
-
title: "Are you sure?",
|
|
11
|
-
text: "Text explaining why there is an alert",
|
|
9
|
+
size: "sm",
|
|
10
|
+
title: "Are you sure?",
|
|
11
|
+
text: "Text explaining why there is an alert",
|
|
12
12
|
}) do %>
|
|
13
13
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
14
14
|
<%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
<% end %>
|
|
19
19
|
<% end %>
|
|
20
20
|
|
|
21
|
-
<%= pb_rails("dialog", props: {
|
|
22
|
-
id:"dialog-stacked-caution",
|
|
21
|
+
<%= pb_rails("dialog", props: {
|
|
22
|
+
id:"dialog-stacked-caution",
|
|
23
23
|
status: "caution",
|
|
24
|
-
size: "sm",
|
|
25
|
-
title: "Are you sure?",
|
|
26
|
-
text: "This is the action you will be taking",
|
|
24
|
+
size: "sm",
|
|
25
|
+
title: "Are you sure?",
|
|
26
|
+
text: "This is the action you will be taking",
|
|
27
27
|
}) do %>
|
|
28
28
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
29
29
|
<%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
|
|
@@ -33,16 +33,16 @@
|
|
|
33
33
|
<% end %>
|
|
34
34
|
<% end %>
|
|
35
35
|
|
|
36
|
-
<%= pb_rails("dialog", props: {
|
|
37
|
-
id:"dialog-stacked-delete",
|
|
36
|
+
<%= pb_rails("dialog", props: {
|
|
37
|
+
id:"dialog-stacked-delete",
|
|
38
38
|
status: "delete",
|
|
39
|
-
size: "sm",
|
|
40
|
-
title: "Delete",
|
|
41
|
-
text: "You are about to delete ...",
|
|
39
|
+
size: "sm",
|
|
40
|
+
title: "Delete",
|
|
41
|
+
text: "You are about to delete ...",
|
|
42
42
|
}) do %>
|
|
43
43
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
44
44
|
<%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
|
|
45
|
-
<%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
|
|
45
|
+
<%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
|
|
46
46
|
<%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
|
|
47
47
|
<% end %>
|
|
48
48
|
<% end %>
|
|
@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
|
|
|
51
51
|
return (
|
|
52
52
|
<div>
|
|
53
53
|
<Flex
|
|
54
|
-
rowGap="xs"
|
|
54
|
+
rowGap="xs"
|
|
55
55
|
wrap
|
|
56
56
|
>
|
|
57
57
|
<Button
|
|
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
|
|
|
93
93
|
<Button
|
|
94
94
|
fullWidth
|
|
95
95
|
onClick={dialog.toggle}
|
|
96
|
+
variant= {dialog.status == "delete" ? "danger" : "primary"}
|
|
96
97
|
>
|
|
97
98
|
{dialog.buttonOneText}
|
|
98
99
|
</Button>
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
<%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
|
|
9
9
|
<% end %>
|
|
10
10
|
|
|
11
|
-
<%= pb_rails("dialog", props: {
|
|
12
|
-
id:"dialog-status-default",
|
|
11
|
+
<%= pb_rails("dialog", props: {
|
|
12
|
+
id:"dialog-status-default",
|
|
13
13
|
status: "default",
|
|
14
|
-
size: "status_size",
|
|
15
|
-
title: "Are you sure?",
|
|
16
|
-
text: "Text explaining why there is an alert",
|
|
14
|
+
size: "status_size",
|
|
15
|
+
title: "Are you sure?",
|
|
16
|
+
text: "Text explaining why there is an alert",
|
|
17
17
|
}) do %>
|
|
18
18
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
19
19
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
<% end %>
|
|
24
24
|
<% end %>
|
|
25
25
|
|
|
26
|
-
<%= pb_rails("dialog", props: {
|
|
27
|
-
id:"dialog-status-info",
|
|
26
|
+
<%= pb_rails("dialog", props: {
|
|
27
|
+
id:"dialog-status-info",
|
|
28
28
|
status: "info",
|
|
29
|
-
size: "status_size",
|
|
30
|
-
title: "Information",
|
|
31
|
-
text: "Text explaining why there is an alert",
|
|
29
|
+
size: "status_size",
|
|
30
|
+
title: "Information",
|
|
31
|
+
text: "Text explaining why there is an alert",
|
|
32
32
|
}) do %>
|
|
33
33
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
34
34
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
<% end %>
|
|
38
38
|
<% end %>
|
|
39
39
|
|
|
40
|
-
<%= pb_rails("dialog", props: {
|
|
41
|
-
id:"dialog-status-caution",
|
|
40
|
+
<%= pb_rails("dialog", props: {
|
|
41
|
+
id:"dialog-status-caution",
|
|
42
42
|
status: "caution",
|
|
43
|
-
size: "status_size",
|
|
44
|
-
title: "Are you Sure?",
|
|
45
|
-
text: "This is the action you will be taking",
|
|
43
|
+
size: "status_size",
|
|
44
|
+
title: "Are you Sure?",
|
|
45
|
+
text: "This is the action you will be taking",
|
|
46
46
|
}) do %>
|
|
47
47
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
48
48
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -52,27 +52,27 @@
|
|
|
52
52
|
<% end %>
|
|
53
53
|
<% end %>
|
|
54
54
|
|
|
55
|
-
<%= pb_rails("dialog", props: {
|
|
56
|
-
id:"dialog-status-delete",
|
|
55
|
+
<%= pb_rails("dialog", props: {
|
|
56
|
+
id:"dialog-status-delete",
|
|
57
57
|
status: "delete",
|
|
58
|
-
size: "status_size",
|
|
59
|
-
title: "Delete",
|
|
60
|
-
text: "You are about to delete ...",
|
|
58
|
+
size: "status_size",
|
|
59
|
+
title: "Delete",
|
|
60
|
+
text: "You are about to delete ...",
|
|
61
61
|
}) do %>
|
|
62
62
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
63
63
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
64
|
-
<%= pb_rails("button", props: { text: "Yes, Delete" }) %>
|
|
64
|
+
<%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
|
|
65
65
|
<%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
|
|
66
66
|
<% end %>
|
|
67
67
|
<% end %>
|
|
68
68
|
<% end %>
|
|
69
69
|
|
|
70
|
-
<%= pb_rails("dialog", props: {
|
|
71
|
-
id:"dialog-status-error",
|
|
70
|
+
<%= pb_rails("dialog", props: {
|
|
71
|
+
id:"dialog-status-error",
|
|
72
72
|
status: "error",
|
|
73
|
-
size: "status_size",
|
|
74
|
-
title: "Error Message",
|
|
75
|
-
text: "Text explaining the error",
|
|
73
|
+
size: "status_size",
|
|
74
|
+
title: "Error Message",
|
|
75
|
+
text: "Text explaining the error",
|
|
76
76
|
}) do %>
|
|
77
77
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
78
78
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -81,12 +81,12 @@
|
|
|
81
81
|
<% end %>
|
|
82
82
|
<% end %>
|
|
83
83
|
|
|
84
|
-
<%= pb_rails("dialog", props: {
|
|
85
|
-
id:"dialog-status-success",
|
|
84
|
+
<%= pb_rails("dialog", props: {
|
|
85
|
+
id:"dialog-status-success",
|
|
86
86
|
status: "success",
|
|
87
|
-
size: "status_size",
|
|
88
|
-
title: "Success!",
|
|
89
|
-
text: "Text explaining what is successful",
|
|
87
|
+
size: "status_size",
|
|
88
|
+
title: "Success!",
|
|
89
|
+
text: "Text explaining what is successful",
|
|
90
90
|
}) do %>
|
|
91
91
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
92
92
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -83,8 +83,8 @@ const DialogStatus = () => {
|
|
|
83
83
|
|
|
84
84
|
return (
|
|
85
85
|
<div>
|
|
86
|
-
<Flex
|
|
87
|
-
rowGap="xs"
|
|
86
|
+
<Flex
|
|
87
|
+
rowGap="xs"
|
|
88
88
|
wrap
|
|
89
89
|
>
|
|
90
90
|
<Button
|
|
@@ -117,7 +117,7 @@ const DialogStatus = () => {
|
|
|
117
117
|
>
|
|
118
118
|
{"Success Status"}
|
|
119
119
|
</Button>
|
|
120
|
-
<Button
|
|
120
|
+
<Button
|
|
121
121
|
marginRight="md"
|
|
122
122
|
onClick={toggleErrorAlert}
|
|
123
123
|
>
|
|
@@ -152,6 +152,7 @@ const DialogStatus = () => {
|
|
|
152
152
|
<Button
|
|
153
153
|
onClick={dialog.toggle}
|
|
154
154
|
paddingRight="xl"
|
|
155
|
+
variant={dialog.status == "delete" ? "danger" : "primary"}
|
|
155
156
|
>
|
|
156
157
|
{dialog.buttonOneText}
|
|
157
158
|
</Button>
|
|
@@ -21,6 +21,15 @@
|
|
|
21
21
|
]
|
|
22
22
|
%>
|
|
23
23
|
|
|
24
|
+
<%
|
|
25
|
+
example_typeahead_options = [
|
|
26
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
27
|
+
{ label: 'Red', value: '#FF0000' },
|
|
28
|
+
{ label: 'Green', value: '#00FF00' },
|
|
29
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
30
|
+
]
|
|
31
|
+
%>
|
|
32
|
+
|
|
24
33
|
<% treeData = [{
|
|
25
34
|
label: "Power Home Remodeling",
|
|
26
35
|
value: "Power Home Remodeling",
|
|
@@ -89,6 +98,8 @@
|
|
|
89
98
|
|
|
90
99
|
<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
|
|
91
100
|
<%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
|
|
101
|
+
<%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
|
|
102
|
+
<%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
|
|
92
103
|
<%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
|
|
93
104
|
<%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
|
|
94
105
|
<%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
popoverButton.onclick = () => {
|
|
29
29
|
buttonClicked = !buttonClicked
|
|
30
30
|
if (buttonClicked) {
|
|
31
|
-
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="
|
|
31
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
|
|
32
32
|
} else {
|
|
33
|
-
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="
|
|
33
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
</script>
|
|
@@ -9,23 +9,27 @@
|
|
|
9
9
|
|
|
10
10
|
<%= pb_rails("text_input", props: {
|
|
11
11
|
label: "Last Name",
|
|
12
|
-
placeholder: "Enter last name"
|
|
12
|
+
placeholder: "Enter last name",
|
|
13
|
+
id: "last-name"
|
|
13
14
|
}) %>
|
|
14
15
|
|
|
15
16
|
<%= pb_rails("text_input", props: {
|
|
16
17
|
label: "Phone Number",
|
|
17
18
|
type: "phone",
|
|
18
|
-
placeholder: "Enter phone number"
|
|
19
|
+
placeholder: "Enter phone number",
|
|
20
|
+
id: "phone"
|
|
19
21
|
}) %>
|
|
20
22
|
|
|
21
23
|
<%= pb_rails("text_input", props: {
|
|
22
24
|
label: "Email Address",
|
|
23
25
|
type: "email",
|
|
24
|
-
placeholder: "Enter email address"
|
|
26
|
+
placeholder: "Enter email address",
|
|
27
|
+
id: "email"
|
|
25
28
|
}) %>
|
|
26
29
|
|
|
27
30
|
<%= pb_rails("text_input", props: {
|
|
28
31
|
label: "Zip Code",
|
|
29
32
|
type: "number",
|
|
30
|
-
placeholder: "Enter zip code"
|
|
33
|
+
placeholder: "Enter zip code",
|
|
34
|
+
id: "zip"
|
|
31
35
|
}) %>
|
|
@@ -38,6 +38,7 @@ const TextInputDefault = (props) => {
|
|
|
38
38
|
{...props}
|
|
39
39
|
/>
|
|
40
40
|
<TextInput
|
|
41
|
+
id="last-name"
|
|
41
42
|
label="Last Name"
|
|
42
43
|
name="lastName"
|
|
43
44
|
onChange={handleOnChangeFormField}
|
|
@@ -46,6 +47,7 @@ const TextInputDefault = (props) => {
|
|
|
46
47
|
{...props}
|
|
47
48
|
/>
|
|
48
49
|
<TextInput
|
|
50
|
+
id="phone"
|
|
49
51
|
label="Phone Number"
|
|
50
52
|
name="phone"
|
|
51
53
|
onChange={handleOnChangeFormField}
|
|
@@ -55,6 +57,7 @@ const TextInputDefault = (props) => {
|
|
|
55
57
|
{...props}
|
|
56
58
|
/>
|
|
57
59
|
<TextInput
|
|
60
|
+
id="email"
|
|
58
61
|
label="Email Address"
|
|
59
62
|
name="email"
|
|
60
63
|
onChange={handleOnChangeFormField}
|
|
@@ -64,6 +67,7 @@ const TextInputDefault = (props) => {
|
|
|
64
67
|
{...props}
|
|
65
68
|
/>
|
|
66
69
|
<TextInput
|
|
70
|
+
id="zip"
|
|
67
71
|
label="Zip Code"
|
|
68
72
|
name="zip"
|
|
69
73
|
onChange={handleOnChangeFormField}
|
|
@@ -84,6 +88,7 @@ const TextInputDefault = (props) => {
|
|
|
84
88
|
<br />
|
|
85
89
|
|
|
86
90
|
<TextInput
|
|
91
|
+
id="first-name"
|
|
87
92
|
label="First Name"
|
|
88
93
|
onChange={handleOnChangeFirstName}
|
|
89
94
|
placeholder="Enter first name"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Add an `id` to your Text Input so that clicking the label will move focus directly to the input.
|