playbook_ui_docs 15.2.0.pre.alpha.PLAY1978bugiconauto11317 → 15.2.0.pre.alpha.PLAY2428advancedtablerailscellpadding11387
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_advanced_table/docs/_advanced_table_background_control_rails.html.erb +113 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.html.erb +51 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb +40 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb +7 -3
- data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +29 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +2 -2
- data/dist/playbook-doc.js +1 -1
- metadata +8 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c331b6a0e3fd532e88183ff4203fd035222484d8a8cb2aecc9825dc7a78edfa5
|
|
4
|
+
data.tar.gz: aac480a99b070036ce93b1496180c260e432e8c17d6d3f49f53d18a6e690196b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4f82ea570c17e9a72f4869751ef5efad1768a27e5e30061ff97ef7dbdd2c6d411acd4c0f7e4f7b75810be716ac352f785d138e1acd8d095df051a0a3a6f436f0
|
|
7
|
+
data.tar.gz: 1ba14446258a8d9f07cfe64dc4b745ac1bf9bcef7119b0ffe9e2d41284cadabd4131b8042202019c25d0ac8f8837f33774b9250c105a2f73fc6b95be8c5cf230
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
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
|
+
column_styling: {
|
|
11
|
+
cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
accessor: "scheduledMeetings",
|
|
16
|
+
label: "Scheduled Meetings",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
accessor: "attendanceRate",
|
|
20
|
+
label: "Attendance Rate",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
accessor: "completedClasses",
|
|
24
|
+
label: "Completed Classes",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
accessor: "classCompletionRate",
|
|
28
|
+
label: "Class Completion Rate",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
accessor: "graduatedStudents",
|
|
32
|
+
label: "Graduated Students",
|
|
33
|
+
}
|
|
34
|
+
] %>
|
|
35
|
+
|
|
36
|
+
<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
37
|
+
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
|
38
|
+
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
|
|
39
|
+
<% end %>
|
|
40
|
+
|
|
41
|
+
<% multi_header_column_definitions = [
|
|
42
|
+
{
|
|
43
|
+
accessor: "year",
|
|
44
|
+
label: "Year",
|
|
45
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: "Enrollment Data",
|
|
49
|
+
columns: [
|
|
50
|
+
{
|
|
51
|
+
label: "Enrollment Stats",
|
|
52
|
+
columns: [
|
|
53
|
+
{
|
|
54
|
+
accessor: "newEnrollments",
|
|
55
|
+
label: "New Enrollments",
|
|
56
|
+
column_styling: {
|
|
57
|
+
cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
accessor: "scheduledMeetings",
|
|
62
|
+
label: "Scheduled Meetings",
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
label: "Performance Data",
|
|
70
|
+
columns: [
|
|
71
|
+
{
|
|
72
|
+
label: "Completion Metrics",
|
|
73
|
+
columns: [
|
|
74
|
+
{
|
|
75
|
+
accessor: "completedClasses",
|
|
76
|
+
label: "Completed Classes",
|
|
77
|
+
column_styling: {
|
|
78
|
+
cell_background_color: ->(row) { row[:completedClasses].to_i > 15 ? "info_secondary" : "neutral_secondary" }
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
accessor: "classCompletionRate",
|
|
83
|
+
label: "Class Completion Rate",
|
|
84
|
+
column_styling: {
|
|
85
|
+
cell_background_color: ->(row) { row[:completedClasses].to_i > 15 ? "neutral_secondary" : "info_secondary" }
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
],
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
label: "Attendance",
|
|
92
|
+
columns: [
|
|
93
|
+
{
|
|
94
|
+
accessor: "attendanceRate",
|
|
95
|
+
label: "Attendance Rate",
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
accessor: "graduatedStudents",
|
|
99
|
+
label: "Graduated Students",
|
|
100
|
+
column_styling: {
|
|
101
|
+
cell_background_color: ->(row) { row[:graduatedStudents].to_i > 10 ? "primary_secondary" : "error_secondary" }
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
},
|
|
106
|
+
],
|
|
107
|
+
},
|
|
108
|
+
] %>
|
|
109
|
+
|
|
110
|
+
<%= pb_rails("advanced_table", props: { id: "padding-control-multi-header", table_data: @table_data, column_definitions: multi_header_column_definitions, padding_top: "lg" }) do %>
|
|
111
|
+
<%= pb_rails("advanced_table/table_header", props: { column_definitions: multi_header_column_definitions }) %>
|
|
112
|
+
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: multi_header_column_definitions }) %>
|
|
113
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has
|
|
1
|
+
The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
|
|
2
2
|
|
|
3
3
|
1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below.
|
|
1
|
+
The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
|
|
2
2
|
|
|
3
3
|
1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
|
|
4
4
|
|
|
@@ -0,0 +1,51 @@
|
|
|
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
|
+
<% row_styling = [
|
|
34
|
+
{
|
|
35
|
+
row_id: "1",
|
|
36
|
+
cell_padding: "md"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
row_id: "3",
|
|
40
|
+
cell_padding: "lg"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
row_id: "5",
|
|
44
|
+
cell_padding: "none"
|
|
45
|
+
},
|
|
46
|
+
] %>
|
|
47
|
+
|
|
48
|
+
<%= pb_rails("advanced_table", props: { id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) do %>
|
|
49
|
+
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
|
50
|
+
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
|
|
51
|
+
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`row_styling` can also be used to control padding on all cells in a given row via the use of the `cell_padding` key/value pair as shown here. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
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
|
+
column_styling: {
|
|
11
|
+
cell_padding: "none",
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
accessor: "scheduledMeetings",
|
|
16
|
+
label: "Scheduled Meetings",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
accessor: "attendanceRate",
|
|
20
|
+
label: "Attendance Rate",
|
|
21
|
+
column_styling: { cell_padding: "md" },
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
accessor: "completedClasses",
|
|
25
|
+
label: "Completed Classes",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "classCompletionRate",
|
|
29
|
+
label: "Class Completion Rate",
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
accessor: "graduatedStudents",
|
|
33
|
+
label: "Graduated Students",
|
|
34
|
+
}
|
|
35
|
+
] %>
|
|
36
|
+
|
|
37
|
+
<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
38
|
+
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
|
39
|
+
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
|
|
40
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`column_styling` can also be used to control padding on all cells in a given column via the use of the `cell_padding` key/value pair. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows.
|
|
1
|
+
The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
|
|
2
2
|
|
|
3
3
|
- `background_color` : use this to control the background color of the row
|
|
4
4
|
- `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows.
|
|
1
|
+
The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
|
|
2
2
|
|
|
3
3
|
- `backgroundColor` : use this to control the background color of the row
|
|
4
4
|
- `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
|
|
@@ -21,8 +21,11 @@ examples:
|
|
|
21
21
|
- advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
|
|
22
22
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
|
23
23
|
- advanced_table_row_styling: Row Styling
|
|
24
|
+
- advanced_table_padding_control_per_row_rails: Padding Control using Row Styling
|
|
24
25
|
- advanced_table_column_styling_rails: Column Styling
|
|
25
26
|
- advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
|
|
27
|
+
- advanced_table_padding_control_rails: Padding Control using Column Styling
|
|
28
|
+
- advanced_table_background_control_rails: Background Control using Column Styling
|
|
26
29
|
- advanced_table_column_border_color_rails: Column Group Border Color
|
|
27
30
|
|
|
28
31
|
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
<%= pb_rails("
|
|
2
|
-
<%= pb_rails("button", props: { aria: { label: "Loading" },
|
|
3
|
-
<%= pb_rails("button", props: { aria: { label: "Loading" },
|
|
1
|
+
<%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
|
|
2
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
|
|
3
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
|
|
4
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
|
|
5
|
+
<%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
|
|
6
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
|
|
7
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import Button from "../../pb_button/_button"
|
|
3
|
+
import Caption from "../../pb_caption/_caption"
|
|
3
4
|
|
|
4
5
|
const ButtonLoading = (props) => (
|
|
5
6
|
<div>
|
|
7
|
+
<Caption
|
|
8
|
+
marginY="md"
|
|
9
|
+
text="Button variants with loading"
|
|
10
|
+
/>
|
|
6
11
|
<Button
|
|
7
12
|
aria={{ label: 'Loading' }}
|
|
8
13
|
loading
|
|
@@ -31,6 +36,30 @@ const ButtonLoading = (props) => (
|
|
|
31
36
|
variant="link"
|
|
32
37
|
{...props}
|
|
33
38
|
/>
|
|
39
|
+
<br/>
|
|
40
|
+
<Caption
|
|
41
|
+
marginY="md"
|
|
42
|
+
text="Button sizes with loading"
|
|
43
|
+
/>
|
|
44
|
+
<Button
|
|
45
|
+
aria={{ label: 'Loading' }}
|
|
46
|
+
loading
|
|
47
|
+
marginRight='lg'
|
|
48
|
+
size="sm"
|
|
49
|
+
tabIndex={0}
|
|
50
|
+
text="Small Button"
|
|
51
|
+
{...props}
|
|
52
|
+
/>
|
|
53
|
+
{' '}
|
|
54
|
+
<Button
|
|
55
|
+
aria={{ label: 'Loading' }}
|
|
56
|
+
loading
|
|
57
|
+
marginRight='lg'
|
|
58
|
+
size="lg"
|
|
59
|
+
tabIndex={0}
|
|
60
|
+
text="Small Button"
|
|
61
|
+
{...props}
|
|
62
|
+
/>
|
|
34
63
|
</div>
|
|
35
64
|
)
|
|
36
65
|
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
<%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
|
|
102
102
|
<%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
|
|
103
103
|
<%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
|
|
104
|
-
<%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
|
|
104
|
+
<%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
|
|
105
105
|
<%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
|
|
106
106
|
<%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
|
|
107
107
|
<%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
popoverButton.onclick = () => {
|
|
29
29
|
buttonClicked = !buttonClicked
|
|
30
30
|
if (buttonClicked) {
|
|
31
|
-
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="
|
|
31
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
|
|
32
32
|
} else {
|
|
33
|
-
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="
|
|
33
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
</script>
|