playbook_ui_docs 13.27.0 → 13.28.0.pre.alpha.PBNTR296dropdownwithform2941

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +46 -66
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +8 -29
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +3 -0
  5. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +13 -33
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +48 -67
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
  9. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  10. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +20 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +41 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  15. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  16. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +72 -0
  17. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +3 -0
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +19 -0
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +3 -0
  20. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +73 -0
  21. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +3 -0
  22. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +20 -0
  23. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +3 -0
  24. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -0
  25. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +3 -1
  26. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +61 -0
  27. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +11 -0
  28. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +4 -1
  29. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +32 -0
  30. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +17 -0
  31. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +19 -0
  32. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +10 -0
  33. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +17 -0
  34. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
  35. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +39 -0
  36. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +39 -0
  37. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +15 -0
  38. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +78 -0
  39. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +6 -0
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
  42. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +5 -6
  43. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb} +3 -3
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +6 -0
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -3
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
  47. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb} +11 -6
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +5 -0
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +5 -2
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
  51. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb} +16 -11
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +1 -0
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  54. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  55. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -2
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
  57. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb} +16 -11
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +1 -0
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  60. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
  61. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
  62. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +23 -0
  63. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +7 -0
  64. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +9 -0
  65. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +22 -0
  66. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +9 -0
  67. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +62 -0
  68. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +8 -0
  69. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +9 -0
  70. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +11 -1
  71. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  72. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
  73. data/dist/menu.yml +2 -2
  74. data/dist/playbook-doc.js +9 -9
  75. metadata +41 -9
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c5a0ca4ba49f9761948d5396d862f7a7dca62755280c4a327d8be07578131efa
4
- data.tar.gz: d47839a1a9c0f199291420ecf5d116ce04f79e1154a3f02b69519a667b4496ed
3
+ metadata.gz: f02e743e2bbecb16ca04bf79ae10a2586b38f6e04a132f65a230c423cb4a2910
4
+ data.tar.gz: 8e2257efd28225f8dcaf388aa3f2927e29f8e965db06178658647dd0e7f5293d
5
5
  SHA512:
6
- metadata.gz: 3a8e4c4a70ee7b4c2cf06da4a1215219109050161b27fbee7fbeadfbcb86d23ecd95b3282f2ba3483832553f826343c45116cea1aae33d56a86a055ded39b195
7
- data.tar.gz: 139f88815ff1cbda2ff72a5a4915c3b955f47f32fc4f25e9b52286ea4f764a874eeef219d5906c99bbf338cb1b24cb40de4f85ddfd5c98952fa5513edfbae907
6
+ metadata.gz: 9fe0f38c9e9fd984301178933047053b5a74bd5f28f47416a442f5e19322b3b60cf0b6b7a4cb6be84dfa1050ad9ee75546cb5985a9be58ee6f5cab0fa5bc030a
7
+ data.tar.gz: 959a070dd6af81b899d5b026fe17b91f8d2058f620c4aa09791bdb6942cd425e4171a6067ee80c82388080a45a8e745a6bb8b0a466c63b27dfa9e1d34c25f8ae
@@ -1,71 +1,51 @@
1
- <%= pb_rails("avatar", props: {
2
- component_overlay: {
3
- component: "badge",
4
- text: "12",
5
- placement: "top-left"
6
- },
7
- name: "Terry Johnson",
8
- size: "xxs",
9
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
- margin_bottom: "sm"
11
- }) %>
12
1
 
13
- <%= pb_rails("avatar", props: {
14
- component_overlay: {
15
- component: "badge",
16
- text: "12",
17
- placement: "top-right"
18
- },
19
- name: "Terry Johnson",
20
- size: "xs",
21
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
- margin_bottom: "sm"
23
- }) %>
2
+ <%= pb_rails("avatar", props: {
3
+ component_overlay: {
4
+ component: "badge",
5
+ text: "12",
6
+ placement: "bottom-right"
7
+ },
8
+ name: "Terry Johnson",
9
+ size: "sm",
10
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
11
+ margin_bottom: "sm"
12
+ }) %>
24
13
 
25
- <%= pb_rails("avatar", props: {
26
- component_overlay: {
27
- component: "badge",
28
- text: "12",
29
- placement: "bottom-right"
30
- },
31
- name: "Terry Johnson",
32
- size: "sm",
33
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
34
- margin_bottom: "sm"
35
- }) %>
14
+ <%= pb_rails("avatar", props: {
15
+ component_overlay: {
16
+ component: "badge",
17
+ text: "12",
18
+ placement: "top-left"
19
+ },
20
+ name: "Terry Johnson",
21
+ size: "md",
22
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
23
+ margin_bottom: "sm"
24
+ }) %>
36
25
 
37
- <%= pb_rails("avatar", props: {
38
- component_overlay: {
39
- component: "badge",
40
- text: "12",
41
- placement: "bottom-left"
42
- },
43
- name: "Terry Johnson",
44
- size: "md",
45
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
46
- margin_bottom: "sm"
47
- }) %>
26
+ <%= pb_rails("avatar", props: {
27
+ component_overlay: {
28
+ component: "badge",
29
+ text: "On Roadtrip",
30
+ placement: "top-center",
31
+ variant: "info"
32
+ },
33
+ name: "Terry Johnson",
34
+ size: "lg",
35
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
36
+ margin_bottom: "sm"
37
+ }) %>
48
38
 
49
- <%= pb_rails("avatar", props: {
50
- component_overlay: {
51
- component: "badge",
52
- text: "12",
53
- placement: "top-left"
54
- },
55
- name: "Terry Johnson",
56
- size: "lg",
57
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
58
- margin_bottom: "sm"
59
- }) %>
39
+ <%= pb_rails("avatar", props: {
40
+ component_overlay: {
41
+ component: "badge",
42
+ text: "Out of Office",
43
+ placement: "bottom-center",
44
+ variant: "error"
45
+ },
46
+ name: "Terry Johnson",
47
+ size: "xl",
48
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
49
+ margin_bottom: "sm"
50
+ }) %>
60
51
 
61
- <%= pb_rails("avatar", props: {
62
- component_overlay: {
63
- component: "badge",
64
- text: "12",
65
- placement: "top-right"
66
- },
67
- name: "Terry Johnson",
68
- size: "xl",
69
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
- margin_bottom: "sm"
71
- }) %>
@@ -4,28 +4,6 @@ import { Avatar } from '../..'
4
4
  const AvatarBadgeComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
- <Avatar
8
- componentOverlay={{
9
- component: "badge",
10
- placement: "top-left",
11
- text: "12"
12
- }}
13
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
- marginBottom="sm"
15
- size="xxs"
16
- />
17
-
18
- <Avatar
19
- componentOverlay={{
20
- component: "badge",
21
- placement: "top-right",
22
- text: "12"
23
- }}
24
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
- marginBottom="sm"
26
- size="xs"
27
- />
28
-
29
7
  <Avatar
30
8
  componentOverlay={{
31
9
  component: "badge",
@@ -40,7 +18,7 @@ const AvatarBadgeComponentOverlay = () => {
40
18
  <Avatar
41
19
  componentOverlay={{
42
20
  component: "badge",
43
- placement: "bottom-left",
21
+ placement: "top-left",
44
22
  text: "12"
45
23
  }}
46
24
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -51,8 +29,9 @@ const AvatarBadgeComponentOverlay = () => {
51
29
  <Avatar
52
30
  componentOverlay={{
53
31
  component: "badge",
54
- placement: "top-left",
55
- text: "12"
32
+ placement: "top-center",
33
+ text: "On Roadtip",
34
+ variant: "info"
56
35
  }}
57
36
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
37
  marginBottom="sm"
@@ -62,14 +41,14 @@ const AvatarBadgeComponentOverlay = () => {
62
41
  <Avatar
63
42
  componentOverlay={{
64
43
  component: "badge",
65
- placement: "top-right",
66
- text: "12"
44
+ placement: "bottom-center",
45
+ text: "Out of Office",
46
+ variant: "error"
67
47
  }}
68
48
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
49
  marginBottom="sm"
70
50
  size="xl"
71
- />
72
-
51
+ />
73
52
  </div>
74
53
  )
75
54
  }
@@ -0,0 +1,3 @@
1
+ NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
+
3
+ When passing the `badge` component as an overlay, you must also specify its text content,and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/badge#colors) as a `variant`.
@@ -1,32 +1,9 @@
1
- <%= pb_rails("avatar", props: {
2
- component_overlay: {
3
- component: "icon_circle",
4
- icon: "plus",
5
- placement: "top-left"
6
- },
7
- name: "Terry Johnson",
8
- size: "xxs",
9
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
- margin_bottom: "sm"
11
- }) %>
12
-
13
- <%= pb_rails("avatar", props: {
14
- component_overlay: {
15
- component: "icon_circle",
16
- icon: "plus",
17
- placement: "top-right"
18
- },
19
- name: "Terry Johnson",
20
- size: "xs",
21
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
- margin_bottom: "sm"
23
- }) %>
24
-
25
1
  <%= pb_rails("avatar", props: {
26
2
  component_overlay: {
27
3
  component: "icon_circle",
28
- icon: "plus",
29
- placement: "bottom-right"
4
+ icon: "shield",
5
+ placement: "bottom-right",
6
+ variant: "royal"
30
7
  },
31
8
  name: "Terry Johnson",
32
9
  size: "sm",
@@ -37,8 +14,9 @@
37
14
  <%= pb_rails("avatar", props: {
38
15
  component_overlay: {
39
16
  component: "icon_circle",
40
- icon: "plus",
41
- placement: "bottom-left"
17
+ icon: "check",
18
+ placement: "top-right",
19
+ variant: "green"
42
20
  },
43
21
  name: "Terry Johnson",
44
22
  size: "md",
@@ -49,8 +27,9 @@
49
27
  <%= pb_rails("avatar", props: {
50
28
  component_overlay: {
51
29
  component: "icon_circle",
52
- icon: "plus",
53
- placement: "top-left"
30
+ icon: "lock",
31
+ placement: "top-left",
32
+ variant: "red"
54
33
  },
55
34
  name: "Terry Johnson",
56
35
  size: "lg",
@@ -61,11 +40,12 @@
61
40
  <%= pb_rails("avatar", props: {
62
41
  component_overlay: {
63
42
  component: "icon_circle",
64
- icon: "plus",
65
- placement: "top-right"
43
+ icon: "star",
44
+ placement: "left-center",
45
+ variant: "yellow"
66
46
  },
67
47
  name: "Terry Johnson",
68
48
  size: "xl",
69
49
  image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
50
  margin_bottom: "sm"
71
- }) %>
51
+ }) %>
@@ -4,73 +4,54 @@ import { Avatar } from '../..'
4
4
  const AvatarCircleIconComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
- <Avatar
8
- componentOverlay={{
9
- component: "iconCircle",
10
- icon: "plus",
11
- placement: "top-left"
12
- }}
13
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
- marginBottom="sm"
15
- size="xxs"
16
- />
17
-
18
- <Avatar
19
- componentOverlay={{
20
- component: "iconCircle",
21
- icon: "plus",
22
- placement: "top-right"
23
- }}
24
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
- marginBottom="sm"
26
- size="xs"
27
- />
28
-
29
- <Avatar
30
- componentOverlay={{
31
- component: "iconCircle",
32
- icon: "plus",
33
- placement: "bottom-right",
34
- }}
35
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
36
- marginBottom="sm"
37
- size="sm"
38
- />
39
-
40
- <Avatar
41
- componentOverlay={{
42
- component: "iconCircle",
43
- icon: "plus",
44
- placement: "bottom-left"
45
- }}
46
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
47
- marginBottom="sm"
48
- size="md"
49
- />
50
-
51
- <Avatar
52
- componentOverlay={{
53
- component: "iconCircle",
54
- icon: "plus",
55
- placement: "top-left"
56
- }}
57
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
- marginBottom="sm"
59
- size="lg"
60
- />
61
-
62
- <Avatar
63
- componentOverlay={{
64
- component: "iconCircle",
65
- icon: "plus",
66
- placement: "top-right"
67
- }}
68
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
- marginBottom="sm"
70
- size="xl"
71
- />
72
-
73
- </div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "iconCircle",
10
+ placement: "bottom-right",
11
+ icon: "shield",
12
+ variant: "royal"
13
+ }}
14
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
15
+ marginBottom="sm"
16
+ size="sm"
17
+ />
18
+
19
+ <Avatar
20
+ componentOverlay={{
21
+ component: "iconCircle",
22
+ placement: "bottom-right",
23
+ icon: "check",
24
+ variant: "green"
25
+ }}
26
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
27
+ marginBottom="sm"
28
+ size="md"
29
+ />
30
+
31
+ <Avatar
32
+ componentOverlay={{
33
+ component: "iconCircle",
34
+ placement: "top-left",
35
+ icon: "lock",
36
+ variant: "red"
37
+ }}
38
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
39
+ marginBottom="sm"
40
+ size="lg"
41
+ />
42
+
43
+ <Avatar
44
+ componentOverlay={{
45
+ component: "iconCircle",
46
+ placement: "left-center",
47
+ icon: "star",
48
+ variant: "yellow"
49
+ }}
50
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
51
+ marginBottom="sm"
52
+ size="xl"
53
+ />
54
+ </div>
74
55
  )
75
56
  }
76
57
 
@@ -0,0 +1,3 @@
1
+ NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
+
3
+ When passing the `iconCircle` component as an overlay, you must also specify an `icon`, and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/icon_circle/rails#color) as a `variant`.
@@ -57,26 +57,6 @@ const AvatarDefault = (props) => {
57
57
  status="offline"
58
58
  {...props}
59
59
  />
60
- <br/>
61
- <Avatar
62
- imageAlt="Terry Johnson Standing"
63
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
64
- name="Terry Johnson"
65
- overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
66
- size="lg"
67
- status="offline"
68
- {...props}
69
- />
70
- <br/>
71
- <Avatar
72
- imageAlt="Terry Johnson Standing"
73
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
74
- name="Terry Johnson"
75
- overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
76
- size="xl"
77
- status="offline"
78
- {...props}
79
- />
80
60
  </div>
81
61
  )
82
62
  }
@@ -4,14 +4,14 @@ examples:
4
4
  - avatar_monogram: Monogram
5
5
  - avatar_no_image: "Bad Image Link"
6
6
  - avatar_status: Status
7
- - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
7
+ - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
8
8
  - avatar_badge_component_overlay: Badge Component Overlay
9
9
  react:
10
10
  - avatar_default: Default
11
11
  - avatar_monogram: Monogram
12
12
  - avatar_no_image: "Bad Image Link"
13
13
  - avatar_status: Status
14
- - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
14
+ - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
15
15
  - avatar_badge_component_overlay: Badge Component Overlay
16
16
  swift:
17
17
  - avatar_default_swift: Default
@@ -42,3 +42,23 @@
42
42
  dark: true
43
43
  }) %>
44
44
  <% end %>
45
+
46
+ <%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
47
+
48
+ <%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" }) do %>
49
+ <%= pb_rails("body", props: {
50
+ text: "Success Subtle"
51
+ }) %>
52
+ <% end %>
53
+
54
+ <%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" }) do %>
55
+ <%= pb_rails("body", props: {
56
+ text: "Warning Subtle"
57
+ }) %>
58
+ <% end %>
59
+
60
+ <%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" }) do %>
61
+ <%= pb_rails("body", props: {
62
+ text: "Info Subtle"
63
+ }) %>
64
+ <% end %>
@@ -90,7 +90,47 @@ const CardBackground = (props) => {
90
90
  />
91
91
  </Card>
92
92
 
93
-
93
+
94
+ <Title
95
+ {...props}
96
+ marginBottom="sm"
97
+ size={4}
98
+ tag="h4"
99
+ text="Subtle Status Colors"
100
+ />
101
+
102
+ <Card
103
+ background="success_subtle"
104
+ marginBottom="sm"
105
+ {...props}
106
+ >
107
+ <Body
108
+ text="Success Subtle"
109
+ {...props}
110
+ />
111
+ </Card>
112
+
113
+ <Card
114
+ background="warning_subtle"
115
+ marginBottom="sm"
116
+ {...props}
117
+ >
118
+ <Body
119
+ text="Warning Subtle"
120
+ {...props}
121
+ />
122
+ </Card>
123
+
124
+ <Card
125
+ background="info_subtle"
126
+ marginBottom="sm"
127
+ {...props}
128
+ >
129
+ <Body
130
+ text="Info Subtle"
131
+ {...props}
132
+ />
133
+ </Card>
94
134
  </div>
95
135
  )
96
136
  }
@@ -1 +1 @@
1
- Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.
1
+ Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
@@ -67,4 +67,4 @@
67
67
  <%= pb_rails("card/card_body", props: { padding: "md", }) do %>
68
68
  Body
69
69
  <% end %>
70
- <% end %>
70
+ <% end %>
@@ -1 +1 @@
1
- Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
1
+ Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
@@ -1 +1 @@
1
- Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
1
+ Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
@@ -0,0 +1,72 @@
1
+ import React from 'react'
2
+ import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
3
+
4
+ const CollapsibleCustomMain = () => {
5
+ const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
+
7
+ return (
8
+ <>
9
+ <Collapsible
10
+ collapsed={isCollapsed}
11
+ >
12
+ <Background
13
+ backgroundColor="white"
14
+ cursor="pointer"
15
+ htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
+ position="sticky"
17
+ top="0"
18
+ >
19
+ <Flex
20
+ align="center"
21
+ gap="sm"
22
+ justify="between"
23
+ >
24
+ <Title
25
+ size={4}
26
+ text="Custom Main Section"
27
+ />
28
+ </Flex>
29
+ </Background>
30
+ <Collapsible.Content padding="none">
31
+ <div>
32
+ <List>
33
+ <ListItem
34
+ align="stretch"
35
+ flexDirection="column"
36
+ >
37
+ Checklist item
38
+ </ListItem>
39
+ <ListItem
40
+ align="stretch"
41
+ flexDirection="column"
42
+ >
43
+ Checklist item
44
+ </ListItem>
45
+ <ListItem
46
+ align="stretch"
47
+ flexDirection="column"
48
+ >
49
+ Checklist item
50
+ </ListItem>
51
+ <ListItem
52
+ align="stretch"
53
+ flexDirection="column"
54
+ >
55
+ Checklist item
56
+ </ListItem>
57
+ <ListItem
58
+ align="stretch"
59
+ flexDirection="column"
60
+ >
61
+ Checklist item
62
+ </ListItem>
63
+ </List>
64
+ </div>
65
+ </Collapsible.Content>
66
+ </Collapsible>
67
+
68
+ </>
69
+ )
70
+ }
71
+
72
+ export default CollapsibleCustomMain
@@ -0,0 +1,3 @@
1
+ Optionally replace your `Collapsible.Main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
2
+
3
+ __NOTE__: Custom main sections requires the `useCollapsible` hook to ensure the collapsible's toggle action works correctly.
@@ -0,0 +1,19 @@
1
+ <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
+ <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
3
+ <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
+ <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
+ <% end %>
6
+ <% end %>
7
+ <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
8
+ <% end %>
9
+ <%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
10
+ <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
11
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
12
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
13
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
14
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
15
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
16
+ <% end %>
17
+ <% end %>
18
+ <% end %>
19
+
@@ -0,0 +1,3 @@
1
+ Optionally replace your `collapsible/collapsible_main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
2
+
3
+ __NOTE__: Custom main sections require `data: {"collapsible-main": "true"}` to ensure the collapsible's toggle action works correctly.