playbook_ui_docs 15.2.0.pre.alpha.toastfixes11417 → 15.2.0.pre.rc.0

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.
Files changed (14) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb +3 -7
  3. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +0 -29
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb +16 -16
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +1 -2
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb +31 -31
  7. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +3 -4
  8. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md +0 -2
  9. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -12
  10. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb +4 -8
  11. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +0 -5
  12. data/dist/playbook-doc.js +2 -2
  13. metadata +2 -3
  14. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 87a9d54deda4ba1e47c4b54432f4a1ef9d1ff6cbe6d03af8f0081139ba5fbc4f
4
- data.tar.gz: 1b8daaa720a4e8b82fb5bb1c78f9394642a9033e7989e2e4bb2ae39a907e6a3e
3
+ metadata.gz: 3425c70d5ef698d30bd025a0a3f76d33e1dfed87d2473f1299e2165f56e70e53
4
+ data.tar.gz: a99c27a93b3e1e8d2d5598ccb105b70cea8b804f61b95fae4d1ea68789d5028e
5
5
  SHA512:
6
- metadata.gz: 44495af5b0ab4efa07d6c57ffc439d58168303fd97e4006526d070f1a3b533ac8b0e6f98a62cdff8a630e56ea332a7b36e0ae8ec9858766a18335b2dbf9543fe
7
- data.tar.gz: e1d879697b83014c1581e8bf68c93f8d28230c507daaa48c8d84c50cd82931a55d396e8dca3df9ddc91889e261f7324b204d6b0184c14126645e19c724aabe1f
6
+ metadata.gz: 108c9e91e516396b04781b343b06123856de8ba3c6c02ec84649205f337483d3e368fd4bf11cc0e890ca52aa3b4532cadde5e4ad7e5c208a5ebbb9939aff99c2
7
+ data.tar.gz: c1e0fb09f83e3afe87d71b6b157955609590376e599aee4b10e3994362076e5eeb1996e2118a4f1d7a9ffb194199d3473f2fd50a3f886d1efde5f470716c4f38
data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb CHANGED
@@ -1,7 +1,3 @@
1
- <%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
2
- <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
3
- <%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
4
- <%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
5
- <%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
6
- <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
7
- <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>
1
+ <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
2
+ <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
3
+ <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>
data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx CHANGED
@@ -1,13 +1,8 @@
1
1
  import React from 'react'
2
2
  import Button from "../../pb_button/_button"
3
- import Caption from "../../pb_caption/_caption"
4
3
 
5
4
  const ButtonLoading = (props) => (
6
5
  <div>
7
- <Caption
8
- marginY="md"
9
- text="Button variants with loading"
10
- />
11
6
  <Button
12
7
  aria={{ label: 'Loading' }}
13
8
  loading
@@ -36,30 +31,6 @@ const ButtonLoading = (props) => (
36
31
  variant="link"
37
32
  {...props}
38
33
  />
39
- <br/>
40
- <Caption
41
- marginY="md"
42
- text="Button sizes with loading"
43
- />
44
- <Button
45
- aria={{ label: 'Loading' }}
46
- loading
47
- marginRight='lg'
48
- size="sm"
49
- tabIndex={0}
50
- text="Small Button"
51
- {...props}
52
- />
53
- {' '}
54
- <Button
55
- aria={{ label: 'Loading' }}
56
- loading
57
- marginRight='lg'
58
- size="lg"
59
- tabIndex={0}
60
- text="Small Button"
61
- {...props}
62
- />
63
34
  </div>
64
35
  )
65
36
 
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb CHANGED
@@ -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", variant: "danger", full_width: true }) %>
45
+ <%= pb_rails("button", props: { text: "Yes, Action", 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 %>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx CHANGED
@@ -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,7 +93,6 @@ const DialogStackedAlert = () => {
93
93
  <Button
94
94
  fullWidth
95
95
  onClick={dialog.toggle}
96
- variant= {dialog.status == "delete" ? "danger" : "primary"}
97
96
  >
98
97
  {dialog.buttonOneText}
99
98
  </Button>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb CHANGED
@@ -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", variant: "danger" }) %>
64
+ <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
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 %>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx CHANGED
@@ -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,7 +152,6 @@ const DialogStatus = () => {
152
152
  <Button
153
153
  onClick={dialog.toggle}
154
154
  paddingRight="xl"
155
- variant={dialog.status == "delete" ? "danger" : "primary"}
156
155
  >
157
156
  {dialog.buttonOneText}
158
157
  </Button>
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md CHANGED
@@ -1,4 +1,2 @@
1
1
 
2
2
  Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
3
-
4
- **NOTE**: z index for Fixed Confirmation Toast is set to 'max' by default which has the value of `999999`. the z Index global prop can be used to override this if you want to set it to a different value.
data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED
@@ -21,15 +21,6 @@
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
-
33
24
  <% treeData = [{
34
25
  label: "Power Home Remodeling",
35
26
  value: "Power Home Remodeling",
@@ -98,10 +89,8 @@
98
89
 
99
90
  <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
100
91
  <%= 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 } %>
103
92
  <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
104
- <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
93
+ <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
105
94
  <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
106
95
  <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
107
96
  <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb CHANGED
@@ -9,27 +9,23 @@
9
9
 
10
10
  <%= pb_rails("text_input", props: {
11
11
  label: "Last Name",
12
- placeholder: "Enter last name",
13
- id: "last-name"
12
+ placeholder: "Enter last name"
14
13
  }) %>
15
14
 
16
15
  <%= pb_rails("text_input", props: {
17
16
  label: "Phone Number",
18
17
  type: "phone",
19
- placeholder: "Enter phone number",
20
- id: "phone"
18
+ placeholder: "Enter phone number"
21
19
  }) %>
22
20
 
23
21
  <%= pb_rails("text_input", props: {
24
22
  label: "Email Address",
25
23
  type: "email",
26
- placeholder: "Enter email address",
27
- id: "email"
24
+ placeholder: "Enter email address"
28
25
  }) %>
29
26
 
30
27
  <%= pb_rails("text_input", props: {
31
28
  label: "Zip Code",
32
29
  type: "number",
33
- placeholder: "Enter zip code",
34
- id: "zip"
30
+ placeholder: "Enter zip code"
35
31
  }) %>
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx CHANGED
@@ -38,7 +38,6 @@ const TextInputDefault = (props) => {
38
38
  {...props}
39
39
  />
40
40
  <TextInput
41
- id="last-name"
42
41
  label="Last Name"
43
42
  name="lastName"
44
43
  onChange={handleOnChangeFormField}
@@ -47,7 +46,6 @@ const TextInputDefault = (props) => {
47
46
  {...props}
48
47
  />
49
48
  <TextInput
50
- id="phone"
51
49
  label="Phone Number"
52
50
  name="phone"
53
51
  onChange={handleOnChangeFormField}
@@ -57,7 +55,6 @@ const TextInputDefault = (props) => {
57
55
  {...props}
58
56
  />
59
57
  <TextInput
60
- id="email"
61
58
  label="Email Address"
62
59
  name="email"
63
60
  onChange={handleOnChangeFormField}
@@ -67,7 +64,6 @@ const TextInputDefault = (props) => {
67
64
  {...props}
68
65
  />
69
66
  <TextInput
70
- id="zip"
71
67
  label="Zip Code"
72
68
  name="zip"
73
69
  onChange={handleOnChangeFormField}
@@ -88,7 +84,6 @@ const TextInputDefault = (props) => {
88
84
  <br />
89
85
 
90
86
  <TextInput
91
- id="first-name"
92
87
  label="First Name"
93
88
  onChange={handleOnChangeFirstName}
94
89
  placeholder="Enter first name"