playbook_ui_docs 15.1.0.pre.alpha.multipleusersstackedscss11047 → 15.1.0.pre.alpha.play252710946

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 61531e433adeb00670fbf3842f7d8a2f85165faf1061148bcbb109898847908b
4
- data.tar.gz: 25831dc59814d2ade1004e3fd70047b33d0651008030c337d229629b4aa12069
3
+ metadata.gz: ba871c739875f28a67034dae55927445ea665ca0c4b6908c850bda1bc4305bfb
4
+ data.tar.gz: 90773204906e130d004f324ff0ab9fe1122bf4448c5a74e34bb2e91e8e5770c5
5
5
  SHA512:
6
- metadata.gz: 10687ef23c1b0514b8b65d0f991ad939bf48d0ba16b08b3120616dbaf35b8eaf2d44547d64f4c15c0ff86725190676fe45e0dd1d973d83f26aa9428a943c8b4e
7
- data.tar.gz: f75eeb7e5a40e6f69ef2635cb9329a56e71a59525f51a62d5a9e54dd3f0ad0690e3161823f73efdbd524e7c9e4ffdeb600d2061adfcb724e00bbdbc8a02c117d
6
+ metadata.gz: a5a0308f5d22f4761dcb2fffaa577580091dfed97208923423149078f53f2c6bca01227c33887ed3db590a31f5d5ca1007fea5ff24909be184468690a53df911
7
+ data.tar.gz: e52fddeaa05e7a315349f954f00e647ab94d58f00973b6b181c1330d668cc7c2a0b26c73d80381948d2552c2dd933f645496f448ddc7fb05d9dc9c4fcd678b1e
@@ -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 %>
@@ -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>
@@ -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 %>
@@ -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>
@@ -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",
@@ -88,7 +97,9 @@
88
97
  }] %>
89
98
 
90
99
  <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
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." } } %>
100
+ <%= form.typeahead :example_typeahead_validation_rails, 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, 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_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 } %>
@@ -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
  }) %>
@@ -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"