playbook_ui_docs 13.27.0.pre.alpha.PLAY1250fixTextInpputaddonborderradiusformgroup2862 → 13.27.0.pre.alpha.PLAY11782916
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_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.md +3 -3
- 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.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb} +3 -3
- 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.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb} +3 -3
- 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/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +3 -3
- metadata +12 -6
- /data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 45f2a2a93d837d6e33f621fb7ecefc79ed343cc9b50ea2b98e30a4236ff4ce3d
|
|
4
|
+
data.tar.gz: 4a310adcb59da5abbe1e000765cdcd4ab371c7d81bc9fe56e4728bb9dc6fd7f5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4373c106ebd8baf36bcfd40a122ca86e6e630fdeb26bddabb397c68a99c6b8583f1d81087f2302fff03117375d536cf67c563e7c96dbce91b870bce4170d5a9c
|
|
7
|
+
data.tar.gz: fc5f30cab8685522e73bdb8574d0c75fde4ae358b9d7328d45456925d34a5745c6f2d77b89711dc8528d83ea20736d9be683877b8d5a67b7674e5037d12a5899
|
|
@@ -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>.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: 'United States' },
|
|
4
|
-
{ label: 'Canada', value: 'Canada' },
|
|
5
|
-
{ label: 'Pakistan', value: 'Pakistan' },
|
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
|
6
6
|
]
|
|
7
7
|
|
|
8
8
|
%>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each must contain `label` and `value`.
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
The dropdown
|
|
1
|
+
The dropdown is built using all of the following subcomponents:
|
|
2
2
|
|
|
3
|
-
`Dropdown.
|
|
4
|
-
`Dropdown.Container
|
|
5
|
-
`Dropdown.Option`
|
|
6
|
-
|
|
7
|
-
See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.
|
|
3
|
+
`Dropdown.Trigger` is the UI component that users interact with to toggle the dropdown.
|
|
4
|
+
`Dropdown.Container` is the floating container that wraps the list of dropdown options.
|
|
5
|
+
`Dropdown.Option` renders options that are passed to the container.
|
|
6
|
+
Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: 'United States' },
|
|
4
|
-
{ label: 'Canada', value: 'Canada' },
|
|
5
|
-
{ label: 'Pakistan', value: 'Pakistan' },
|
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
|
6
6
|
]
|
|
7
7
|
|
|
8
8
|
%>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
The dropdown is built using all of the following required subcomponents:
|
|
2
|
+
|
|
3
|
+
`dropdown/dropdown_trigger` is the UI component that users interact with to toggle the dropdown.
|
|
4
|
+
`dropdown/dropdown_container` is the floating container that wraps the list of dropdown options.
|
|
5
|
+
`dropdown/dropdown_option` renders options that are passed to the container.
|
|
6
|
+
Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
|
|
2
2
|
|
|
3
|
-
The `placeholder` prop can also be used to customize the placeholder text for the default Trigger
|
|
3
|
+
The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`.
|
|
4
4
|
|
|
5
|
-
The `onSelect` prop
|
|
5
|
+
The `onSelect` prop returns the selected option as an object to be utilized by the dev. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
|
|
2
|
+
|
|
3
|
+
The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`.
|
|
4
|
+
|
|
5
|
+
The dropdown follows the typical rails pattern of utilizing hidden inputs for form submission. The hidden input value is the selected options' id.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
`Dropdown.Option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.
|