playbook_ui 11.12.1 → 11.13.0.pre.alpha.fontawesome1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +50 -50
  3. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +3 -0
  4. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx +28 -12
  6. data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts +93 -90
  7. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss +1 -15
  8. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +48 -8
  9. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +22 -8
  10. data/app/pb_kits/playbook/pb_dialog/dialog.rb +32 -0
  11. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +18 -2
  12. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +10 -6
  13. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +6 -3
  14. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb +4 -4
  15. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb +58 -0
  16. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md +1 -2
  18. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb +58 -0
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md +2 -2
  21. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb +11 -0
  22. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.html.erb +12 -0
  23. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb +12 -12
  24. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb +49 -0
  26. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md +1 -1
  27. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb +96 -0
  28. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md +3 -1
  29. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +7 -0
  30. data/app/pb_kits/playbook/pb_enhanced_element/{element_observer.js → element_observer.ts} +27 -19
  31. data/app/pb_kits/playbook/pb_enhanced_element/{index.js → index.ts} +22 -15
  32. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +38 -6
  33. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +71 -0
  34. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +1 -0
  35. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
  36. data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +3 -3
  37. data/app/pb_kits/playbook/pb_selectable_list/_item.jsx +15 -4
  38. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx +24 -2
  39. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +3 -0
  40. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +1 -1
  41. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +6 -0
  42. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +32 -0
  43. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +7 -2
  44. data/lib/playbook/version.rb +2 -2
  45. metadata +13 -8
  46. data/fonts/fontawesome-min.js +0 -5
  47. data/fonts/regular-min.js +0 -5
@@ -1,12 +1,15 @@
1
1
  <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
2
2
 
3
- <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg" }) do %>
3
+ <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
4
4
  <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
5
- <%= pb_rails("caption", props: { text: "This is a complex dialog" }) %>
5
+ <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
6
6
  <% end %>
7
7
  <%= pb_rails("dialog/dialog_body") do %>
8
8
  <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
9
9
  <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
10
+ <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
11
+ <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
12
+
10
13
  <% end %>
11
- <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel", confirm_button: "Confirm", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
14
+ <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
12
15
  <% end %>
@@ -3,9 +3,9 @@
3
3
  <%= pb_rails("dialog", props: {
4
4
  id:"dialog-1",
5
5
  size: "sm",
6
- title: "This is a header",
7
- text: "This is a dialog.",
8
- cancel_button: "Cancel",
9
- confirm_button: "Confirm",
6
+ title: "Header Title is the Title Prop",
7
+ text: "Hello Body Text, Nice to meet ya.",
8
+ cancel_button: "Cancel Button",
9
+ confirm_button: "Okay",
10
10
  confirm_button_id: "confirm-button-1"
11
11
  }) %>
@@ -0,0 +1,58 @@
1
+ <%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-fullheight-sm"}, margin_right: "md" }) %>
2
+ <%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-fullheight-md"}, margin_right: "md" }) %>
3
+ <%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-fullheight-lg"}, margin_right: "md" }) %>
4
+
5
+ <%= pb_rails("dialog", props: {
6
+ id:"dialog-fullheight-sm",
7
+ size: "sm",
8
+ full_height: true,
9
+ }) do %>
10
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-sm" } ) do %>
11
+ <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
12
+ <% end %>
13
+ <%= pb_rails("dialog/dialog_body") do %>
14
+ <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
15
+ <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
16
+ <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
17
+ <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
18
+
19
+ <% end %>
20
+ <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-sm"}) %>
21
+ <% end %>
22
+
23
+
24
+ <%= pb_rails("dialog", props: {
25
+ id:"dialog-fullheight-md",
26
+ size: "md",
27
+ full_height: true,
28
+ }) do %>
29
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-md" } ) do %>
30
+ <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
31
+ <% end %>
32
+ <%= pb_rails("dialog/dialog_body") do %>
33
+ <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
34
+ <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
35
+ <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
36
+ <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
37
+
38
+ <% end %>
39
+ <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-md"}) %>
40
+ <% end %>
41
+
42
+ <%= pb_rails("dialog", props: {
43
+ id:"dialog-fullheight-lg",
44
+ size: "lg",
45
+ full_height: true,
46
+ }) do %>
47
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-lg" } ) do %>
48
+ <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
49
+ <% end %>
50
+ <%= pb_rails("dialog/dialog_body") do %>
51
+ <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
52
+ <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
53
+ <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
54
+ <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
55
+
56
+ <% end %>
57
+ <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-lg"}) %>
58
+ <% end %>
@@ -48,7 +48,7 @@ const DialogFullHeight = () => {
48
48
  <>
49
49
  <Flex wrap>
50
50
  <Button id="sm"
51
- marginRight="xl"
51
+ marginRight="md"
52
52
  onClick={toggleHeaderSeparatorDialog}>
53
53
  {"Small Dialog"}
54
54
  </Button>
@@ -1,2 +1 @@
1
- The full height dialog can be size small, medium, and large
2
- They may be left, center or right aligned. Except for the Xlarge dialog which should only be center aligned.
1
+ To render a full height Dialog, use the `fullHeight` (react) or `full_height` (rails) prop. A full height Dialog can be size small, medium, or large. By default it will be center aligned.
@@ -0,0 +1,58 @@
1
+ <%= pb_rails("button", props: { text: "Left Dialog", data:{"open-dialog": "dialog-fullheight-left"}, margin_right: "md" }) %>
2
+ <%= pb_rails("button", props: { text: "Center Dialog", data:{"open-dialog": "dialog-fullheight-center"}, margin_right: "md" }) %>
3
+ <%= pb_rails("button", props: { text: "Right Dialog", data:{"open-dialog": "dialog-fullheight-right"}, margin_right: "md" }) %>
4
+
5
+ <%= pb_rails("dialog", props: {
6
+ id:"dialog-fullheight-left",
7
+ size: "md",
8
+ full_height: true,
9
+ placement: "left",
10
+ }) do %>
11
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-left" } ) do %>
12
+ <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
13
+ <% end %>
14
+ <%= pb_rails("dialog/dialog_body") do %>
15
+ <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
16
+ <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
17
+ <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
18
+ <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
19
+ <% end %>
20
+ <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-left"}) %>
21
+ <% end %>
22
+
23
+
24
+ <%= pb_rails("dialog", props: {
25
+ id:"dialog-fullheight-center",
26
+ size: "md",
27
+ full_height: true,
28
+ placement: "center",
29
+ }) do %>
30
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-center" } ) do %>
31
+ <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
32
+ <% end %>
33
+ <%= pb_rails("dialog/dialog_body") do %>
34
+ <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
35
+ <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
36
+ <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
37
+ <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
38
+ <% end %>
39
+ <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-center"}) %>
40
+ <% end %>
41
+
42
+ <%= pb_rails("dialog", props: {
43
+ id:"dialog-fullheight-right",
44
+ size: "md",
45
+ full_height: true,
46
+ placement: "right",
47
+ }) do %>
48
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-right" } ) do %>
49
+ <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
50
+ <% end %>
51
+ <%= pb_rails("dialog/dialog_body") do %>
52
+ <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
53
+ <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
54
+ <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
55
+ <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
56
+ <% end %>
57
+ <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-right"}) %>
58
+ <% end %>
@@ -47,7 +47,7 @@ const DialogFullHeightPlacement = () => {
47
47
  <>
48
48
  <Flex wrap>
49
49
  <Button id="sm"
50
- marginRight="xl"
50
+ marginRight="md"
51
51
  onClick={toggleHeaderSeparatorDialog}>
52
52
  {"Left Dialog"}
53
53
  </Button>
@@ -1,5 +1,5 @@
1
- The full height dialog is centered by default, but the placement can changed via `placement` prop with one of the following values: `left`, `center`, `right`.
1
+ The full height dialog is centered by default, but the placement can be changed via the `placement` prop with one of the following values: `left`, `center`, `right`.
2
2
 
3
- The `large` variant will allways be centered even sending a preferred placement.
3
+ The `large` variant however will always be centered, even if the `placement` prop is used.
4
4
 
5
5
  All dialogs with the `fullHeight` prop will be displayed full-width on mobile screens.
@@ -0,0 +1,11 @@
1
+ <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"} }) %>
2
+
3
+ <%= pb_rails("dialog", props: {
4
+ id:"dialog-scroll",
5
+ size: "md",
6
+ title: "Header Title is the Title Prop",
7
+ text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.",
8
+ cancel_button: "Cancel",
9
+ confirm_button: "Confirm",
10
+ confirm_button_id: "confirm-button-1"
11
+ }) %>
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-overlay-click"} }) %>
2
+
3
+ <%= pb_rails("dialog", props: {
4
+ id:"dialog-overlay-click",
5
+ size: "sm",
6
+ title: "Neat Header",
7
+ text: "Click on the overlay all day. I will stay open.",
8
+ cancel_button: "Cancel",
9
+ confirm_button: "Okay",
10
+ confirm_button_id: "confirm-button-1",
11
+ should_close_on_overlay_click: false,
12
+ }) %>
@@ -1,29 +1,29 @@
1
- <%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"} }) %>
2
- <%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"} }) %>
3
- <%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"} }) %>
1
+ <%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"}, margin_right: "md" }) %>
2
+ <%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"}, margin_right: "md" }) %>
3
+ <%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"}, margin_right: "md" }) %>
4
4
 
5
5
  <%= pb_rails("dialog", props: {
6
6
  id:"dialog-sm",
7
7
  size: "sm",
8
- title: "This is a header",
9
- text: "I am a small dialog",
8
+ title: "Header on small dialog",
9
+ text: "Body on small dialog",
10
10
  cancel_button: "Cancel",
11
- confirm_button: "Confirm",
11
+ confirm_button: "Okay",
12
12
  }) %>
13
13
 
14
14
 
15
15
  <%= pb_rails("dialog", props: {
16
16
  id:"dialog-md",
17
17
  size: "md",
18
- title: "This is a header",
19
- text: "I am a medium dialog",
20
- cancel_button: "Cancel", confirm_button: "Confirm",
18
+ title: "Title on medium dialog",
19
+ text: "Body on medium dialog",
20
+ cancel_button: "Cancel", confirm_button: "Okay",
21
21
  }) %>
22
22
 
23
23
  <%= pb_rails("dialog", props: {
24
24
  id:"dialog-lg", size: "lg",
25
- title: "This is a header",
26
- text: "I am a large dialog",
25
+ title: "Header on large dialog",
26
+ text: "Body on large dialog",
27
27
  cancel_button: "Cancel",
28
- confirm_button: "Confirm"
28
+ confirm_button: "Okay"
29
29
  }) %>
@@ -49,7 +49,7 @@ const DialogSizes = () => {
49
49
  >
50
50
  <Button
51
51
  id="sm"
52
- marginRight="xl"
52
+ marginRight="md"
53
53
  onClick={toggleSmDialog}
54
54
  >
55
55
  {'Small Dialog'}
@@ -0,0 +1,49 @@
1
+ <%= pb_rails("button", props: { text: "Default Status", data: {"open-dialog": "dialog-stacked-default"}, margin_right: "md" }) %>
2
+ <%= pb_rails("button", props: { text: "Caution Status", data: {"open-dialog": "dialog-stacked-caution"}, margin_right: "md" }) %>
3
+ <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
4
+
5
+
6
+ <%= pb_rails("dialog", props: {
7
+ id:"dialog-stacked-default",
8
+ status: "default",
9
+ size: "sm",
10
+ title: "Are you sure?",
11
+ text: "Text explaining why there is an alert",
12
+ }) do %>
13
+ <%= pb_rails("dialog/dialog_footer") do %>
14
+ <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
15
+ <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
16
+ <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-default" } }) %>
17
+ <% end %>
18
+ <% end %>
19
+ <% end %>
20
+
21
+ <%= pb_rails("dialog", props: {
22
+ id:"dialog-stacked-caution",
23
+ status: "caution",
24
+ size: "sm",
25
+ title: "Are you sure?",
26
+ text: "This is the action you will be taking",
27
+ }) do %>
28
+ <%= pb_rails("dialog/dialog_footer") do %>
29
+ <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
30
+ <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
31
+ <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-caution" } }) %>
32
+ <% end %>
33
+ <% end %>
34
+ <% end %>
35
+
36
+ <%= pb_rails("dialog", props: {
37
+ id:"dialog-stacked-delete",
38
+ status: "delete",
39
+ size: "sm",
40
+ title: "Delete",
41
+ text: "You are about to delete ...",
42
+ }) do %>
43
+ <%= pb_rails("dialog/dialog_footer") do %>
44
+ <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
45
+ <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
46
+ <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
47
+ <% end %>
48
+ <% end %>
49
+ <% end %>
@@ -1 +1 @@
1
- This is designed to show you how the buttons can stack with different alert styles. It also has a link style for the buttons for the mobile views.
1
+ These examples highlight how the buttons within the Dialog can be stacked when using the Status Alert variant. It also has a link style for the buttons for the mobile views.
@@ -0,0 +1,96 @@
1
+
2
+ <%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
3
+ <%= pb_rails("button", props: { text: "Default Status", data: {"open-dialog": "dialog-status-default"}, margin_right: "md" }) %>
4
+ <%= pb_rails("button", props: { text: "Caution Status", data: {"open-dialog": "dialog-status-caution"}, margin_right: "md" }) %>
5
+ <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-status-delete"}, margin_right: "md" }) %>
6
+ <%= pb_rails("button", props: { text: "Information Status", data: {"open-dialog": "dialog-status-info"}, margin_right: "md" }) %>
7
+ <%= pb_rails("button", props: { text: "Error Status", data: {"open-dialog": "dialog-status-error"}, margin_right: "md" }) %>
8
+ <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
9
+ <% end %>
10
+
11
+ <%= pb_rails("dialog", props: {
12
+ id:"dialog-status-default",
13
+ status: "default",
14
+ size: "status_size",
15
+ title: "Are you sure?",
16
+ text: "Text explaining why there is an alert",
17
+ }) do %>
18
+ <%= pb_rails("dialog/dialog_footer") do %>
19
+ <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
20
+ <%= pb_rails("button", props: { text: "Yes, Action" }) %>
21
+ <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-default" } }) %>
22
+ <% end %>
23
+ <% end %>
24
+ <% end %>
25
+
26
+ <%= pb_rails("dialog", props: {
27
+ id:"dialog-status-info",
28
+ status: "info",
29
+ size: "status_size",
30
+ title: "Information",
31
+ text: "Text explaining why there is an alert",
32
+ }) do %>
33
+ <%= pb_rails("dialog/dialog_footer") do %>
34
+ <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
35
+ <%= pb_rails("button", props: { text: "Ok, Thanks!", full_width: true, data: {"close-dialog": "dialog-status-info" } }) %>
36
+ <% end %>
37
+ <% end %>
38
+ <% end %>
39
+
40
+ <%= pb_rails("dialog", props: {
41
+ id:"dialog-status-caution",
42
+ status: "caution",
43
+ size: "status_size",
44
+ title: "Are you Sure?",
45
+ text: "This is the action you will be taking",
46
+ }) do %>
47
+ <%= pb_rails("dialog/dialog_footer") do %>
48
+ <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
49
+ <%= pb_rails("button", props: { text: "Yes, Action" }) %>
50
+ <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-caution" } }) %>
51
+ <% end %>
52
+ <% end %>
53
+ <% end %>
54
+
55
+ <%= pb_rails("dialog", props: {
56
+ id:"dialog-status-delete",
57
+ status: "delete",
58
+ size: "status_size",
59
+ title: "Delete",
60
+ text: "You are about to delete ...",
61
+ }) do %>
62
+ <%= pb_rails("dialog/dialog_footer") do %>
63
+ <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
64
+ <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
65
+ <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
66
+ <% end %>
67
+ <% end %>
68
+ <% end %>
69
+
70
+ <%= pb_rails("dialog", props: {
71
+ id:"dialog-status-error",
72
+ status: "error",
73
+ size: "status_size",
74
+ title: "Error Message",
75
+ text: "Text explaining the error",
76
+ }) do %>
77
+ <%= pb_rails("dialog/dialog_footer") do %>
78
+ <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
79
+ <%= pb_rails("button", props: { text: "Oh no!", full_width: true, data: {"close-dialog": "dialog-status-error" } }) %>
80
+ <% end %>
81
+ <% end %>
82
+ <% end %>
83
+
84
+ <%= pb_rails("dialog", props: {
85
+ id:"dialog-status-success",
86
+ status: "success",
87
+ size: "status_size",
88
+ title: "Success!",
89
+ text: "Text explaining what is successful",
90
+ }) do %>
91
+ <%= pb_rails("dialog/dialog_footer") do %>
92
+ <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
93
+ <%= pb_rails("button", props: { text: "Great!", full_width: true, data: {"close-dialog": "dialog-status-success" } }) %>
94
+ <% end %>
95
+ <% end %>
96
+ <% end %>
@@ -1 +1,3 @@
1
- This shows the different alert statuses that can be used for dialog boxes. These all have two buttons which is a default
1
+ The Dialog kit also offers customizable Status Alert options as seen here.
2
+
3
+ For the rails version of the kit, when using custom confirm and cancel buttons as shown in these examples, the 'cancel' button must be given a `close-dialog` data attribute with a value that is the same as the id given to the dialog itself.
@@ -4,6 +4,13 @@ examples:
4
4
  - dialog_default: Simple
5
5
  - dialog_compound_components: Complex
6
6
  - dialog_sizes: Sizes
7
+ - dialog_scrollable: Scrollable
8
+ - dialog_should_close_on_overlay: Overlay Click
9
+ - dialog_status: Status Alert
10
+ - dialog_stacked_alert: Stacked Button Alert
11
+ - dialog_full_height: Full Height
12
+ - dialog_full_height_placement: Full Height Placement
13
+
7
14
 
8
15
  react:
9
16
  - dialog_default: Simple
@@ -1,34 +1,47 @@
1
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2
+ // @ts-nocheck
3
+ import PbEnhancedElement from "./index"
4
+
1
5
  export default class ElementObserver {
2
- constructor(matchDelegate, target = document) {
6
+ matchDelegate: PbEnhancedElement
7
+ target: Document
8
+ _mutationObserver: MutationObserver
9
+
10
+ constructor(matchDelegate: PbEnhancedElement, target = document) {
3
11
  this.matchDelegate = matchDelegate
4
12
  this.target = target
5
13
  }
6
14
 
7
- start() {
15
+ get mutationObserver(): MutationObserver {
16
+ return this._mutationObserver =
17
+ this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
18
+ }
19
+
20
+ start(): void {
8
21
  this.mutationObserver.observe(this.target, { attributes: true, childList: true, subtree: true })
9
22
  this.catchup()
10
23
  }
11
24
 
12
- stop() {
25
+ stop(): void {
13
26
  this.mutationObserverdisconnect()
14
27
  }
15
28
 
16
- catchup() {
17
- this.handleAdditions(this.matchDelegate.matches(this.target))
29
+ catchup(): void {
30
+ this.handleAdditions(this.matchDelegate.matches(this.target as unknown as Element))
18
31
  }
19
32
 
20
- processMutationList(mutationList) {
33
+ processMutationList(mutationList: Array<MutationRecord>): void {
21
34
  for (const mutation of mutationList) {
22
35
  if (mutation.type == 'attributes') {
23
- this.processAttributeChange(mutation.target)
36
+ this.processAttributeChange(mutation.target as Element)
24
37
  } else if (mutation.type == 'childList') {
25
- this.processRemovedNodes(Array.from(mutation.removedNodes))
26
- this.processAddedNodes(Array.from(mutation.addedNodes))
38
+ this.processRemovedNodes(Array.from(mutation.removedNodes) as Array<Element>)
39
+ this.processAddedNodes(Array.from(mutation.addedNodes) as Array<Element>)
27
40
  }
28
41
  }
29
42
  }
30
43
 
31
- processAttributeChange(node) {
44
+ processAttributeChange(node: Element): void | Array<Element> {
32
45
  if (node.nodeType !== Node.ELEMENT_NODE) return
33
46
 
34
47
  const matches = this.matchDelegate.matches(node)
@@ -38,30 +51,25 @@ export default class ElementObserver {
38
51
  this.handleAdditions(matches)
39
52
  }
40
53
 
41
- processRemovedNodes(nodes) {
54
+ processRemovedNodes(nodes: Array<Element>): void {
42
55
  for (const node of nodes) {
43
56
  if (node.nodeType !== Node.ELEMENT_NODE) continue
44
57
  this.handleRemovals(this.matchDelegate.matches(node))
45
58
  }
46
59
  }
47
60
 
48
- processAddedNodes(nodes) {
61
+ processAddedNodes(nodes: Array<Element>): void {
49
62
  for (const node of nodes) {
50
63
  if (node.nodeType !== Node.ELEMENT_NODE) continue
51
64
  this.handleAdditions(this.matchDelegate.matches(node))
52
65
  }
53
66
  }
54
67
 
55
- handleRemovals(elements) {
68
+ handleRemovals(elements: Array<Element>): void {
56
69
  for (const element of elements) this.matchDelegate.removeMatch(element)
57
70
  }
58
71
 
59
- handleAdditions(elements) {
72
+ handleAdditions(elements: Array<Element>): void {
60
73
  for (const element of elements) this.matchDelegate.addMatch(element)
61
74
  }
62
-
63
- get mutationObserver() {
64
- return this._mutationObserver =
65
- this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
66
- }
67
75
  }
@@ -1,21 +1,31 @@
1
- import ElementObserver from './element_observer.js'
1
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2
+ // @ts-nocheck
3
+ import ElementObserver from './element_observer'
2
4
 
3
5
  export default class PbEnhancedElement {
4
- static get elements() {
6
+ static _elements: Map<Element, PbEnhancedElement>
7
+ static _observer: ElementObserver
8
+ element: Element
9
+
10
+ constructor(element: Element) {
11
+ this.element = element
12
+ }
13
+
14
+ static get elements(): Map<Element, PbEnhancedElement> {
5
15
  return this._elements = (this._elements || new Map)
6
16
  }
7
17
 
8
- static get observer() {
18
+ static get observer(): ElementObserver {
9
19
  return this._observer = (this._observer || new ElementObserver(this))
10
20
  }
11
21
 
12
- static get selector() {
22
+ static get selector(): string {
13
23
  // eslint-disable-next-line no-console
14
24
  console.warn('Define a static property for selector or redefine the matches function in a subclass.', this)
15
25
  return null
16
26
  }
17
27
 
18
- static matches(node) {
28
+ static matches(node: Element): Array<Element> {
19
29
  if (!this.selector) return []
20
30
 
21
31
  const matches = []
@@ -25,7 +35,7 @@ export default class PbEnhancedElement {
25
35
  return (matches)
26
36
  }
27
37
 
28
- static addMatch(element) {
38
+ static addMatch(element: Element): void {
29
39
  if (element._pbEnhanced || this.elements.has(element)) return
30
40
 
31
41
  const enhansedElement = new this(element)
@@ -34,7 +44,7 @@ export default class PbEnhancedElement {
34
44
  element._pbEnhanced = enhansedElement
35
45
  }
36
46
 
37
- static removeMatch(element) {
47
+ static removeMatch(element: Element): void {
38
48
  if (!this.elements.has(element)) return
39
49
 
40
50
  const enhansedElement = this.elements.get(element)
@@ -42,22 +52,19 @@ export default class PbEnhancedElement {
42
52
  this.elements.delete(element)
43
53
  }
44
54
 
45
- static start() {
55
+ static start(): void {
46
56
  this.observer.start()
47
57
  }
48
58
 
49
- static stop() {
59
+ static stop(): void {
50
60
  this.mutationObserver.stop()
51
61
  }
52
62
 
53
- constructor(element) {
54
- this.element = element
55
- }
56
-
57
- connect() {
63
+ connect(): void {
58
64
  // eslint-disable-next-line no-console
59
65
  console.warn('Redefine the connect function in a subclass.', this)
60
66
  }
61
67
 
62
- disconnect() { }
68
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
69
+ disconnect(): void {}
63
70
  }