playbook_ui_docs 13.26.0 → 13.27.0.pre.alpha.PBNTR294paginationstylingfix2899
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +24 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +51 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +56 -0
- 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 +51 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +58 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_avatar/docs/index.js +2 -0
- 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 +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +9 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +13 -0
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +26 -0
- data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb} +2 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx} +2 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +4 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +2 -1
- data/dist/app/components/playbook/pb_docs/advanced_table_mock_data.json +278 -0
- data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
- data/dist/menu.yml +1 -1
- data/dist/playbook-doc.js +9 -9
- metadata +25 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: aac9bebd5ccfd82e70b7a5c68491f35e66e7cd347e971953e0b79392781e4cb2
|
|
4
|
+
data.tar.gz: 2b68f77188be927ab32d06291c37a96738c0a2a078b2f819eb1a245afeb1e79c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a5bab51458f976f922effba6470ca2f0bb762e9a8bc64a53d30f862bdd1dad5a5a1ccc110919af8d4873fb1dccd9159e101df7a33ecf524347ca5b159ba73223
|
|
7
|
+
data.tar.gz: 28d87274cd6370d874146f60a7f9d5b594e51bc3a848c68767323941645c32288c38b52c7123f6b3452d4ff6dcf2c780e83a2b274c81f6ac6d203f3a43ae6557
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<% column_definitions = [
|
|
2
|
+
{
|
|
3
|
+
accessor: "year",
|
|
4
|
+
label: "Year",
|
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
accessor: "newEnrollments",
|
|
9
|
+
label: "New Enrollments",
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
accessor: "scheduledMeetings",
|
|
13
|
+
label: "Scheduled Meetings",
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
accessor: "attendanceRate",
|
|
17
|
+
label: "Attendance Rate",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
accessor: "completedClasses",
|
|
21
|
+
label: "Completed Classes",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
accessor: "classCompletionRate",
|
|
25
|
+
label: "Class Completion Rate",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "graduatedStudents",
|
|
29
|
+
label: "Graduated Students",
|
|
30
|
+
}
|
|
31
|
+
] %>
|
|
32
|
+
|
|
33
|
+
<%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
**BETA VERSION**
|
|
2
|
+
This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
|
|
3
|
+
<br />
|
|
4
|
+
<br />
|
|
5
|
+
<br />
|
|
6
|
+
|
|
7
|
+
The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
|
|
8
|
+
|
|
9
|
+
### table_data
|
|
10
|
+
|
|
11
|
+
`table_data` accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row.
|
|
12
|
+
|
|
13
|
+
For a visual of the data structure needed for `table_data`, see [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme).
|
|
14
|
+
|
|
15
|
+
### column_definitions
|
|
16
|
+
|
|
17
|
+
Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `column_definitions` in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
|
|
18
|
+
|
|
19
|
+
- `accessor`: this is the key from your data for the value you want rendered in that column
|
|
20
|
+
- `label`: this is what will be rendered as the column header label
|
|
21
|
+
|
|
22
|
+
There is also one optional item that is only required if the table has nested data:
|
|
23
|
+
|
|
24
|
+
- `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
**NOTE:** The Advanced Table kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options.
|
|
2
|
+
<br />
|
|
3
|
+
<br />
|
|
4
|
+
<br />
|
|
5
|
+
|
|
1
6
|
The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
|
|
2
7
|
|
|
3
8
|
### tableData
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
|
|
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
|
+
}) %>
|
|
13
|
+
|
|
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
|
+
}) %>
|
|
25
|
+
|
|
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
|
+
}) %>
|
|
38
|
+
|
|
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
|
+
}) %>
|
|
51
|
+
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Avatar } from '../..'
|
|
3
|
+
|
|
4
|
+
const AvatarBadgeComponentOverlay = () => {
|
|
5
|
+
return (
|
|
6
|
+
<div>
|
|
7
|
+
<Avatar
|
|
8
|
+
componentOverlay={{
|
|
9
|
+
component: "badge",
|
|
10
|
+
placement: "bottom-right",
|
|
11
|
+
text: "12"
|
|
12
|
+
}}
|
|
13
|
+
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
14
|
+
marginBottom="sm"
|
|
15
|
+
size="sm"
|
|
16
|
+
/>
|
|
17
|
+
|
|
18
|
+
<Avatar
|
|
19
|
+
componentOverlay={{
|
|
20
|
+
component: "badge",
|
|
21
|
+
placement: "top-left",
|
|
22
|
+
text: "12"
|
|
23
|
+
}}
|
|
24
|
+
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
25
|
+
marginBottom="sm"
|
|
26
|
+
size="md"
|
|
27
|
+
/>
|
|
28
|
+
|
|
29
|
+
<Avatar
|
|
30
|
+
componentOverlay={{
|
|
31
|
+
component: "badge",
|
|
32
|
+
placement: "top-center",
|
|
33
|
+
text: "On Roadtip",
|
|
34
|
+
variant: "info"
|
|
35
|
+
}}
|
|
36
|
+
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
37
|
+
marginBottom="sm"
|
|
38
|
+
size="lg"
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
<Avatar
|
|
42
|
+
componentOverlay={{
|
|
43
|
+
component: "badge",
|
|
44
|
+
placement: "bottom-center",
|
|
45
|
+
text: "Out of Office",
|
|
46
|
+
variant: "error"
|
|
47
|
+
}}
|
|
48
|
+
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
49
|
+
marginBottom="sm"
|
|
50
|
+
size="xl"
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export default AvatarBadgeComponentOverlay
|
|
@@ -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`.
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<%= pb_rails("avatar", props: {
|
|
2
|
+
component_overlay: {
|
|
3
|
+
component: "icon_circle",
|
|
4
|
+
icon: "shield",
|
|
5
|
+
placement: "bottom-right",
|
|
6
|
+
variant: "royal"
|
|
7
|
+
},
|
|
8
|
+
name: "Terry Johnson",
|
|
9
|
+
size: "sm",
|
|
10
|
+
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
|
11
|
+
margin_bottom: "sm"
|
|
12
|
+
}) %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("avatar", props: {
|
|
15
|
+
component_overlay: {
|
|
16
|
+
component: "icon_circle",
|
|
17
|
+
icon: "check",
|
|
18
|
+
placement: "top-right",
|
|
19
|
+
variant: "green"
|
|
20
|
+
},
|
|
21
|
+
name: "Terry Johnson",
|
|
22
|
+
size: "md",
|
|
23
|
+
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
|
24
|
+
margin_bottom: "sm"
|
|
25
|
+
}) %>
|
|
26
|
+
|
|
27
|
+
<%= pb_rails("avatar", props: {
|
|
28
|
+
component_overlay: {
|
|
29
|
+
component: "icon_circle",
|
|
30
|
+
icon: "lock",
|
|
31
|
+
placement: "top-left",
|
|
32
|
+
variant: "red"
|
|
33
|
+
},
|
|
34
|
+
name: "Terry Johnson",
|
|
35
|
+
size: "lg",
|
|
36
|
+
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
|
37
|
+
margin_bottom: "sm"
|
|
38
|
+
}) %>
|
|
39
|
+
|
|
40
|
+
<%= pb_rails("avatar", props: {
|
|
41
|
+
component_overlay: {
|
|
42
|
+
component: "icon_circle",
|
|
43
|
+
icon: "star",
|
|
44
|
+
placement: "left-center",
|
|
45
|
+
variant: "yellow"
|
|
46
|
+
},
|
|
47
|
+
name: "Terry Johnson",
|
|
48
|
+
size: "xl",
|
|
49
|
+
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
|
50
|
+
margin_bottom: "sm"
|
|
51
|
+
}) %>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Avatar } from '../..'
|
|
3
|
+
|
|
4
|
+
const AvatarCircleIconComponentOverlay = () => {
|
|
5
|
+
return (
|
|
6
|
+
<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>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export default AvatarCircleIconComponentOverlay
|
|
@@ -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`.
|
|
@@ -4,11 +4,15 @@ 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: Icon Circle Component Overlay
|
|
8
|
+
- avatar_badge_component_overlay: Badge Component Overlay
|
|
7
9
|
react:
|
|
8
10
|
- avatar_default: Default
|
|
9
11
|
- avatar_monogram: Monogram
|
|
10
12
|
- avatar_no_image: "Bad Image Link"
|
|
11
13
|
- avatar_status: Status
|
|
14
|
+
- avatar_circle_icon_component_overlay: Icon Circle Component Overlay
|
|
15
|
+
- avatar_badge_component_overlay: Badge Component Overlay
|
|
12
16
|
swift:
|
|
13
17
|
- avatar_default_swift: Default
|
|
14
18
|
- avatar_monogram_swift: Monogram
|
|
@@ -2,3 +2,5 @@ export { default as AvatarDefault } from './_avatar_default.jsx'
|
|
|
2
2
|
export { default as AvatarMonogram } from './_avatar_monogram.jsx'
|
|
3
3
|
export { default as AvatarStatus } from './_avatar_status.jsx'
|
|
4
4
|
export { default as AvatarNoImage } from './_avatar_no_image.jsx'
|
|
5
|
+
export { default as AvatarCircleIconComponentOverlay } from './_avatar_circle_icon_component_overlay.jsx'
|
|
6
|
+
export { default as AvatarBadgeComponentOverlay } from './_avatar_badge_component_overlay.jsx'
|
|
@@ -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,17 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
|
6
|
+
]
|
|
7
|
+
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
11
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
12
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
13
|
+
<% options.each do |option| %>
|
|
14
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
|
|
2
2
|
|
|
3
|
-
`Dropdown. Trigger`
|
|
4
|
-
`Dropdown.Container`
|
|
5
|
-
`Dropdown.Option`
|
|
3
|
+
`Dropdown. Trigger` / `dropdown/dropdown_trigger`
|
|
4
|
+
`Dropdown.Container`/ `dropdown/dropdown_container`
|
|
5
|
+
`Dropdown.Option` / `dropdown/dropdown_option`
|
|
6
6
|
|
|
7
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.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "Jasper Furniss",
|
|
5
|
+
value: "Jasper Furniss",
|
|
6
|
+
territory: "PHL",
|
|
7
|
+
title: "Senior UX Engineer",
|
|
8
|
+
id: "jasper-furniss",
|
|
9
|
+
status: "Offline"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
label: "Ramon Ruiz",
|
|
13
|
+
value: "Ramon Ruiz",
|
|
14
|
+
territory: "PHL",
|
|
15
|
+
title: "Senior UX Designer",
|
|
16
|
+
id: "ramon-ruiz",
|
|
17
|
+
status: "Away"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Jason Cypret",
|
|
21
|
+
value: "Jason Cypret",
|
|
22
|
+
territory: "PHL",
|
|
23
|
+
title: "VP of User Experience",
|
|
24
|
+
id: "jason-cypret",
|
|
25
|
+
status: "Online"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: "Courtney Long",
|
|
29
|
+
value: "Courtney Long",
|
|
30
|
+
territory: "PHL",
|
|
31
|
+
title: "UX Design Mentor",
|
|
32
|
+
id: "courtney-long",
|
|
33
|
+
status: "Online"
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
|
|
37
|
+
%>
|
|
38
|
+
|
|
39
|
+
<%
|
|
40
|
+
custom_display = capture do
|
|
41
|
+
pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
|
|
42
|
+
end
|
|
43
|
+
%>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
47
|
+
<%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
|
|
48
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
49
|
+
<% options.each do |option| %>
|
|
50
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
51
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
52
|
+
<%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
|
|
53
|
+
<% end %>
|
|
54
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
55
|
+
<%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
|
56
|
+
<% end %>
|
|
57
|
+
<% end %>
|
|
58
|
+
<% end %>
|
|
59
|
+
<% end %>
|
|
60
|
+
<% end %>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "United States",
|
|
6
|
+
areaCode: "+1",
|
|
7
|
+
icon: "🇺🇸",
|
|
8
|
+
id: "us"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "Canada",
|
|
12
|
+
value: "Canada",
|
|
13
|
+
areaCode: "+1",
|
|
14
|
+
icon: "🇨🇦",
|
|
15
|
+
id: "ca"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "Pakistan",
|
|
20
|
+
areaCode: "+92",
|
|
21
|
+
icon: "🇵🇰",
|
|
22
|
+
id: "pk"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
29
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
30
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
31
|
+
<% options.each do |option| %>
|
|
32
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
33
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
34
|
+
<%= pb_rails("flex") do %>
|
|
35
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
36
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
40
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
41
|
+
<% end %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
|
6
|
+
]
|
|
7
|
+
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
11
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
12
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
13
|
+
<% options.each do |option| %>
|
|
14
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option, padding:"sm"}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|