playbook_ui_docs 13.27.0.pre.alpha.PLAY1250fixTextInpputaddonborderradiusformgroup2862 → 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936
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_avatar/docs/_avatar_badge_component_overlay.html.erb +46 -66
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +8 -29
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +3 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +13 -33
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +48 -67
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +20 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +41 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +72 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +73 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +61 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +11 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +32 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +17 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +19 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +10 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +17 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +39 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +39 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +15 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +78 -0
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +5 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb} +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +6 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb} +11 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb} +16 -11
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb} +16 -11
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +23 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +7 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +22 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +62 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +8 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +6 -6
- metadata +38 -6
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4134036f740bcd4977836fb024499446a1a8f826088b89aeb20e7fab3ffa24e1
|
4
|
+
data.tar.gz: c327257a2aa21f0d845b7df2d7bcee6e46413035db0c74f88426388d63ef3586
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c58fc52783e5868c1db19e94fd6234349875e998b7a8fd6a8232abf6ffc991e6fe16226e42acf3002b817021a440d8114a3d0add292d7e6c5f8b1e317ee08c9d
|
7
|
+
data.tar.gz: 33b8b3632e0aa675f0f7ba71904c2e3a458a89cdbeedb623a8aa412badd5cd7e159e6d1bb6ab6c63c9ca3cbacfb124d2dbd5895d9a8b81304584a437716d7650
|
@@ -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
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
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
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
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
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
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
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
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: "
|
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-
|
55
|
-
text: "
|
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: "
|
66
|
-
text: "
|
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: "
|
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: "
|
41
|
-
placement: "
|
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: "
|
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: "
|
65
|
-
placement: "
|
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
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
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
|
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
|
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.
|
@@ -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/
|
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/
|
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.
|