playbook_ui_docs 15.7.0.pre.alpha.play263313229 → 15.7.0.pre.rc.0
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 +5 -11
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md +1 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -3
- data/app/pb_kits/playbook/pb_contact/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_contact/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +14 -23
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +1 -1
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +5 -7
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +1 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -5
- 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 -2
- data/app/pb_kits/playbook/pb_form/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md +1 -1
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
- metadata +2 -70
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.html.erb +0 -43
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx +0 -54
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md +0 -9
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx +0 -80
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md +0 -3
- data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb +0 -33
- data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx +0 -46
- data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md +0 -2
- data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md +0 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.html.erb +0 -24
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx +0 -60
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md +0 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.html.erb +0 -71
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.jsx +0 -57
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_rails.md +0 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_react.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb +0 -19
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.html.erb +0 -12
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md +0 -26
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.html.erb +0 -19
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.html.erb +0 -30
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md +0 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb +0 -29
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md +0 -13
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +0 -14
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx +0 -134
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.html.erb +0 -101
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md +0 -33
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.jsx +0 -180
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb +0 -122
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.html.erb +0 -6
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.jsx +0 -25
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.html.erb +0 -2
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.jsx +0 -16
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.md +0 -1
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.jsx +0 -13
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.md +0 -1
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.html.erb +0 -4
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.jsx +0 -29
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.md +0 -1
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_disabled.html.erb +0 -13
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_disabled.jsx +0 -23
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_error.html.erb +0 -5
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_error.jsx +0 -15
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_input_options.html.erb +0 -14
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_label.html.erb +0 -2
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_label.jsx +0 -15
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.html.erb +0 -42
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.jsx +0 -52
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md +0 -1
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx +0 -45
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md +0 -1
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb +0 -3
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx +0 -21
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md +0 -1
- data/app/pb_kits/playbook/pb_time_picker/docs/example.yml +0 -24
- data/app/pb_kits/playbook/pb_time_picker/docs/index.js +0 -9
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb +0 -60
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx +0 -118
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.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: 86cac1b084d7644b08a83ccc30d77d6e5a072b03f702bc39fbe54fca2375c0ef
|
|
4
|
+
data.tar.gz: a657791558e817dded0e0ed774d9c8bc1fa9877fc3c0df7c2bda5e675d0c430d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 86ea32ba5c989798a00cb54e2ac00b5f8533651b0d63914125f88a11b9955c42bd42183647ead80a3b5669749d340f1ecf9e7f8b3e3894ac27142549c3219fdb
|
|
7
|
+
data.tar.gz: ee6e185fac0c4b613ac121cfd6dec2b9329f03393281002fc27e45c46fdc097b7aa72da2ad1a34370a13d857dd1d2ad3b37661689187908497a36bc622b7d073
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb
CHANGED
|
@@ -8,26 +8,16 @@
|
|
|
8
8
|
accessor: "newEnrollments",
|
|
9
9
|
label: "New Enrollments",
|
|
10
10
|
column_styling: {
|
|
11
|
-
cell_background_color: "
|
|
12
|
-
header_background_color: "error_subtle"
|
|
11
|
+
cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
|
|
13
12
|
}
|
|
14
13
|
},
|
|
15
14
|
{
|
|
16
15
|
accessor: "scheduledMeetings",
|
|
17
16
|
label: "Scheduled Meetings",
|
|
18
|
-
column_styling: {
|
|
19
|
-
cell_background_color: "info_subtle",
|
|
20
|
-
}
|
|
21
17
|
},
|
|
22
18
|
{
|
|
23
19
|
accessor: "attendanceRate",
|
|
24
20
|
label: "Attendance Rate",
|
|
25
|
-
column_styling: {
|
|
26
|
-
cell_background_color: "info",
|
|
27
|
-
header_background_color: "info",
|
|
28
|
-
header_font_color: "white",
|
|
29
|
-
font_color: "white"
|
|
30
|
-
}
|
|
31
21
|
},
|
|
32
22
|
{
|
|
33
23
|
accessor: "completedClasses",
|
|
@@ -36,6 +26,10 @@
|
|
|
36
26
|
{
|
|
37
27
|
accessor: "classCompletionRate",
|
|
38
28
|
label: "Class Completion Rate",
|
|
29
|
+
column_styling: {
|
|
30
|
+
cell_background_color: "category_1",
|
|
31
|
+
font_color: "white"
|
|
32
|
+
}
|
|
39
33
|
},
|
|
40
34
|
{
|
|
41
35
|
accessor: "graduatedStudents",
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
`column_styling` can also be used to control the background color on all cells in a given column
|
|
2
|
-
|
|
3
|
-
1) `cell_background_color`: use this to control the background color of all cells in the given column
|
|
4
|
-
2) `font_color`: use this to control font color for all cells in the given column if needed, for example if using a darker background color
|
|
5
|
-
3) `header_background_color`: use this to control the background color of the column header
|
|
6
|
-
4) `header_font_color`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
|
|
7
|
-
|
|
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. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.
|
|
@@ -26,8 +26,7 @@ examples:
|
|
|
26
26
|
- advanced_table_column_styling_rails: Column Styling
|
|
27
27
|
- advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
|
|
28
28
|
- advanced_table_padding_control_rails: Padding Control using Column Styling
|
|
29
|
-
- advanced_table_background_control_rails: Column Styling
|
|
30
|
-
- advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
|
|
29
|
+
- advanced_table_background_control_rails: Background Control using Column Styling
|
|
31
30
|
- advanced_table_column_border_color_rails: Column Group Border Color
|
|
32
31
|
|
|
33
32
|
|
|
@@ -76,8 +75,6 @@ examples:
|
|
|
76
75
|
- advanced_table_padding_control_per_row: Padding Control using Row Styling
|
|
77
76
|
- advanced_table_column_styling: Column Styling
|
|
78
77
|
- advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
|
|
79
|
-
- advanced_table_column_styling_background: Column Styling Background Color
|
|
80
|
-
- advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
|
|
81
78
|
- advanced_table_padding_control: Padding Control using Column Styling
|
|
82
79
|
- advanced_table_column_border_color: Column Group Border Color
|
|
83
80
|
- advanced_table_fullscreen: Fullscreen
|
|
@@ -45,6 +45,4 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
|
|
|
45
45
|
export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
|
|
46
46
|
export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
|
|
47
47
|
export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
|
|
48
|
-
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
|
49
|
-
export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
|
|
50
|
-
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
48
|
+
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
|
@@ -3,13 +3,11 @@ examples:
|
|
|
3
3
|
rails:
|
|
4
4
|
- contact_default: Default
|
|
5
5
|
- contact_with_detail: Detail Indicator
|
|
6
|
-
- contact_unstyled: Unstyled
|
|
7
6
|
|
|
8
7
|
|
|
9
8
|
react:
|
|
10
9
|
- contact_default: Default
|
|
11
10
|
- contact_with_detail: Detail Indicator
|
|
12
|
-
- contact_unstyled: Unstyled
|
|
13
11
|
|
|
14
12
|
|
|
15
13
|
swift:
|
|
@@ -1,29 +1,20 @@
|
|
|
1
|
-
<%= pb_rails("
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
controls_start_id: "
|
|
8
|
-
controls_end_id: "end-date-picker-1",
|
|
9
|
-
start_date_id: "quickpick_start_date_1",
|
|
10
|
-
start_date_name: "start_date",
|
|
11
|
-
end_date_id: "quickpick_end_date_1",
|
|
12
|
-
end_date_name: "end_date"
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
|
2
|
+
mode: "range",
|
|
3
|
+
picker_id: "quick-pick-date-range",
|
|
4
|
+
placeholder: "Select a Date Range",
|
|
5
|
+
selection_type: "quickpick",
|
|
6
|
+
controls_end_id: "quick-pick-date-range-end",
|
|
7
|
+
controls_start_id: "quick-pick-date-range-start",
|
|
13
8
|
}) %>
|
|
14
9
|
|
|
15
10
|
<%= pb_rails("date_picker", props: {
|
|
16
|
-
picker_id: "
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
placeholder: "Select Start Date",
|
|
20
|
-
sync_start_with: "dropdown-quickpick-with-date-pickers-1"
|
|
11
|
+
picker_id: "quick-pick-date-range-start",
|
|
12
|
+
placeholder: "Select a Start Date",
|
|
13
|
+
sync_start_with:"quick-pick-date-range",
|
|
21
14
|
}) %>
|
|
22
15
|
|
|
23
16
|
<%= pb_rails("date_picker", props: {
|
|
24
|
-
picker_id: "
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
sync_end_with: "dropdown-quickpick-with-date-pickers-1"
|
|
29
|
-
}) %>
|
|
17
|
+
picker_id: "quick-pick-date-range-end",
|
|
18
|
+
placeholder: "Select an End Date",
|
|
19
|
+
sync_end_with:"quick-pick-date-range",
|
|
20
|
+
}) %>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
You can link a Quickpick
|
|
1
|
+
You can link a Quickpick DatePicker to standard DatePickers using the following props:
|
|
2
2
|
|
|
3
3
|
**For the Quickpick DatePicker**:
|
|
4
4
|
`controls_start_id`: ID of the DatePicker that should receive the start date.
|
|
@@ -12,8 +12,6 @@ examples:
|
|
|
12
12
|
- dialog_full_height_placement: Full Height Placement
|
|
13
13
|
- dialog_loading: Loading
|
|
14
14
|
- dialog_turbo_frames: Within Turbo Frames
|
|
15
|
-
- dialog_overflow_visible: Overflow Visible
|
|
16
|
-
- dialog_closeable: Close Button in Header
|
|
17
15
|
|
|
18
16
|
|
|
19
17
|
react:
|
|
@@ -27,8 +25,6 @@ examples:
|
|
|
27
25
|
- dialog_full_height: Full Height
|
|
28
26
|
- dialog_full_height_placement: Full Height Placement
|
|
29
27
|
- dialog_loading: Loading
|
|
30
|
-
- dialog_overflow_visible: Overflow Visible
|
|
31
|
-
- dialog_closeable: Close Button in Header
|
|
32
28
|
|
|
33
29
|
swift:
|
|
34
30
|
- dialog_default_swift: Simple
|
|
@@ -8,6 +8,4 @@ export { default as DialogStatus } from './_dialog_status.jsx'
|
|
|
8
8
|
export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
|
|
9
9
|
export { default as DialogFullHeight } from './_dialog_full_height.jsx'
|
|
10
10
|
export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
|
|
11
|
-
export { default as DialogLoading } from './_dialog_loading.jsx'
|
|
12
|
-
export { default as DialogOverflowVisible } from './_dialog_overflow_visible.jsx'
|
|
13
|
-
export { default as DialogCloseable } from './_dialog_closeable.jsx'
|
|
11
|
+
export { default as DialogLoading } from './_dialog_loading.jsx'
|
|
@@ -20,14 +20,12 @@
|
|
|
20
20
|
|
|
21
21
|
%>
|
|
22
22
|
|
|
23
|
-
<%= pb_rails("dropdown", props: {
|
|
23
|
+
<%= pb_rails("dropdown", props: {options: options}) %>
|
|
24
24
|
|
|
25
25
|
<script>
|
|
26
26
|
document.addEventListener("pb:dropdown:selected", (e) => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
});
|
|
27
|
+
const option = e.detail;
|
|
28
|
+
const dropdown = e.target;
|
|
29
|
+
console.log("Selected option:", option);
|
|
30
|
+
})
|
|
33
31
|
</script>
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
%>
|
|
48
48
|
|
|
49
49
|
|
|
50
|
-
<%= pb_rails("dropdown", props: {
|
|
50
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
51
51
|
<%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
|
|
52
52
|
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
53
53
|
<% options.each do |option| %>
|
|
@@ -71,8 +71,6 @@
|
|
|
71
71
|
|
|
72
72
|
<script>
|
|
73
73
|
document.addEventListener("pb:dropdown:selected", (e) => {
|
|
74
|
-
if (e.target.id !== "user-dropdown") return;
|
|
75
|
-
|
|
76
74
|
const option = e.detail;
|
|
77
75
|
const dropdown = e.target;
|
|
78
76
|
|
|
@@ -22,11 +22,6 @@ examples:
|
|
|
22
22
|
- dropdown_multi_select_with_default: Multi Select Default Value
|
|
23
23
|
- dropdown_blank_selection: Blank Selection
|
|
24
24
|
- dropdown_separators_hidden: Separators Hidden
|
|
25
|
-
- dropdown_quickpick_rails: Quick Pick Variant
|
|
26
|
-
- dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
|
|
27
|
-
- dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
|
|
28
|
-
- dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
|
|
29
|
-
- dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
|
|
30
25
|
|
|
31
26
|
react:
|
|
32
27
|
- dropdown_default: Default
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
<%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
|
|
117
117
|
<%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
|
|
118
118
|
<%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
|
|
119
|
-
|
|
119
|
+
|
|
120
120
|
<%= form.actions do |action| %>
|
|
121
121
|
<%= action.submit %>
|
|
122
122
|
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
|
@@ -117,8 +117,7 @@
|
|
|
117
117
|
<%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
|
|
118
118
|
<%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
|
|
119
119
|
<%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
|
|
120
|
-
|
|
121
|
-
|
|
120
|
+
|
|
122
121
|
<%= form.actions do |action| %>
|
|
123
122
|
<%= action.submit %>
|
|
124
123
|
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
|
@@ -40,8 +40,6 @@ examples:
|
|
|
40
40
|
- table_with_selectable_rows: Table with Selectable Rows
|
|
41
41
|
- table_with_header_style_borderless: Header Style Borderless
|
|
42
42
|
- table_with_header_style_floating: Header Style Floating
|
|
43
|
-
- table_with_filter_variant_rails: Variant with Filter
|
|
44
|
-
- table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
|
|
45
43
|
|
|
46
44
|
react:
|
|
47
45
|
- table_sm: Small
|
|
@@ -83,5 +81,3 @@ examples:
|
|
|
83
81
|
- table_with_selectable_rows: Table with Selectable Rows
|
|
84
82
|
- table_with_header_style_borderless: Header Style Borderless
|
|
85
83
|
- table_with_header_style_floating: Header Style Floating
|
|
86
|
-
- table_with_filter_variant: Variant with Filter
|
|
87
|
-
- table_with_filter_variant_with_pagination: Variant with Filter and Pagination
|
|
@@ -38,5 +38,3 @@ export { default as TableWithSelectableRows } from './_table_with_selectable_row
|
|
|
38
38
|
export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
|
|
39
39
|
export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
|
|
40
40
|
export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
|
|
41
|
-
export { default as TableWithFilterVariant } from './_table_with_filter_variant.jsx'
|
|
42
|
-
export { default as TableWithFilterVariantWithPagination } from './_table_with_filter_variant_with_pagination.jsx'
|
|
@@ -10,8 +10,6 @@ examples:
|
|
|
10
10
|
- text_input_options: Input Options
|
|
11
11
|
- text_input_mask: Mask
|
|
12
12
|
- text_input_autocomplete: Autocomplete
|
|
13
|
-
- text_input_required_indicator: Required Indicator
|
|
14
|
-
|
|
15
13
|
|
|
16
14
|
react:
|
|
17
15
|
- text_input_default: Default
|
|
@@ -24,7 +22,6 @@ examples:
|
|
|
24
22
|
- text_input_mask: Mask
|
|
25
23
|
- text_input_sanitize: Sanitized Masked Input
|
|
26
24
|
- text_input_autocomplete: Autocomplete
|
|
27
|
-
- text_input_required_indicator: Required Indicator
|
|
28
25
|
|
|
29
26
|
|
|
30
27
|
swift:
|
|
@@ -8,4 +8,3 @@ export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
|
|
|
8
8
|
export { default as TextInputMask } from './_text_input_mask.jsx'
|
|
9
9
|
export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
|
|
10
10
|
export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'
|
|
11
|
-
export { default as TextInputRequiredIndicator } from './_text_input_required_indicator.jsx'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use the optional `showDate` prop to render the timeline kit with a visible date.
|
|
1
|
+
Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.
|
|
@@ -5,7 +5,6 @@ examples:
|
|
|
5
5
|
- timeline_vertical: Vertical
|
|
6
6
|
- timeline_with_date: With Date
|
|
7
7
|
- timeline_with_children: With Children
|
|
8
|
-
- timeline_show_current_year: Show Current Year
|
|
9
8
|
- timeline_with_gap: With Gap
|
|
10
9
|
|
|
11
10
|
|
|
@@ -14,5 +13,4 @@ examples:
|
|
|
14
13
|
- timeline_vertical: Vertical
|
|
15
14
|
- timeline_with_date: With Date
|
|
16
15
|
- timeline_with_children: With Children
|
|
17
|
-
- timeline_show_current_year: Show Current Year
|
|
18
16
|
- timeline_with_gap: With Gap
|
|
@@ -3,5 +3,4 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
|
|
|
3
3
|
export { default as TimelineWithDate } from './_timeline_with_date.jsx'
|
|
4
4
|
export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
|
|
5
5
|
export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
|
|
6
|
-
export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'
|
|
7
6
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 15.7.0.pre.
|
|
4
|
+
version: 15.7.0.pre.rc.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-12-
|
|
12
|
+
date: 2025-12-09 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -33,8 +33,6 @@ executables: []
|
|
|
33
33
|
extensions: []
|
|
34
34
|
extra_rdoc_files: []
|
|
35
35
|
files:
|
|
36
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.html.erb
|
|
37
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.md
|
|
38
36
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb
|
|
39
37
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md
|
|
40
38
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
|
|
@@ -62,10 +60,6 @@ files:
|
|
|
62
60
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
|
|
63
61
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
|
|
64
62
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
|
|
65
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx
|
|
66
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
|
|
67
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx
|
|
68
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md
|
|
69
63
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
|
|
70
64
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md
|
|
71
65
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb
|
|
@@ -534,10 +528,6 @@ files:
|
|
|
534
528
|
- app/pb_kits/playbook/pb_contact/docs/_contact_default.md
|
|
535
529
|
- app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md
|
|
536
530
|
- app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md
|
|
537
|
-
- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb
|
|
538
|
-
- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx
|
|
539
|
-
- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md
|
|
540
|
-
- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md
|
|
541
531
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
|
|
542
532
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx
|
|
543
533
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail_swift.md
|
|
@@ -797,9 +787,6 @@ files:
|
|
|
797
787
|
- app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx
|
|
798
788
|
- app/pb_kits/playbook/pb_detail/docs/example.yml
|
|
799
789
|
- app/pb_kits/playbook/pb_detail/docs/index.js
|
|
800
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.html.erb
|
|
801
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx
|
|
802
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md
|
|
803
790
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
|
|
804
791
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
|
|
805
792
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
|
|
@@ -816,10 +803,6 @@ files:
|
|
|
816
803
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb
|
|
817
804
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx
|
|
818
805
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md
|
|
819
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.html.erb
|
|
820
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.jsx
|
|
821
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_rails.md
|
|
822
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_react.md
|
|
823
806
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_props_swift.md
|
|
824
807
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
|
|
825
808
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
|
|
@@ -924,21 +907,12 @@ files:
|
|
|
924
907
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx
|
|
925
908
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx
|
|
926
909
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md
|
|
927
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb
|
|
928
910
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx
|
|
929
911
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md
|
|
930
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.html.erb
|
|
931
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md
|
|
932
912
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.jsx
|
|
933
913
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.md
|
|
934
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.html.erb
|
|
935
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.md
|
|
936
914
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.jsx
|
|
937
915
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.md
|
|
938
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.html.erb
|
|
939
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md
|
|
940
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb
|
|
941
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md
|
|
942
916
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
|
|
943
917
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
|
|
944
918
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
|
|
@@ -1123,8 +1097,6 @@ files:
|
|
|
1123
1097
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
|
|
1124
1098
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb
|
|
1125
1099
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.md
|
|
1126
|
-
- app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb
|
|
1127
|
-
- app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.md
|
|
1128
1100
|
- app/pb_kits/playbook/pb_form/docs/example.yml
|
|
1129
1101
|
- app/pb_kits/playbook/pb_form_group/docs/_form_group_button.html.erb
|
|
1130
1102
|
- app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx
|
|
@@ -2335,14 +2307,6 @@ files:
|
|
|
2335
2307
|
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx
|
|
2336
2308
|
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md
|
|
2337
2309
|
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md
|
|
2338
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx
|
|
2339
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md
|
|
2340
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.html.erb
|
|
2341
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md
|
|
2342
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.jsx
|
|
2343
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md
|
|
2344
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb
|
|
2345
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md
|
|
2346
2310
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
|
|
2347
2311
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
|
|
2348
2312
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
|
|
@@ -2393,9 +2357,6 @@ files:
|
|
|
2393
2357
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
|
|
2394
2358
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb
|
|
2395
2359
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md
|
|
2396
|
-
- app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.html.erb
|
|
2397
|
-
- app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.jsx
|
|
2398
|
-
- app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.md
|
|
2399
2360
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx
|
|
2400
2361
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md
|
|
2401
2362
|
- app/pb_kits/playbook/pb_text_input/docs/example.yml
|
|
@@ -2439,32 +2400,6 @@ files:
|
|
|
2439
2400
|
- app/pb_kits/playbook/pb_time/docs/_time_unstyled.md
|
|
2440
2401
|
- app/pb_kits/playbook/pb_time/docs/example.yml
|
|
2441
2402
|
- app/pb_kits/playbook/pb_time/docs/index.js
|
|
2442
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.html.erb
|
|
2443
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.jsx
|
|
2444
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.md
|
|
2445
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.html.erb
|
|
2446
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.jsx
|
|
2447
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.md
|
|
2448
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.html.erb
|
|
2449
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.jsx
|
|
2450
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.md
|
|
2451
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_disabled.html.erb
|
|
2452
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_disabled.jsx
|
|
2453
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_error.html.erb
|
|
2454
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_error.jsx
|
|
2455
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_input_options.html.erb
|
|
2456
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_label.html.erb
|
|
2457
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_label.jsx
|
|
2458
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.html.erb
|
|
2459
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.jsx
|
|
2460
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
|
|
2461
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
|
|
2462
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
|
|
2463
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
|
|
2464
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
|
|
2465
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md
|
|
2466
|
-
- app/pb_kits/playbook/pb_time_picker/docs/example.yml
|
|
2467
|
-
- app/pb_kits/playbook/pb_time_picker/docs/index.js
|
|
2468
2403
|
- app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.html.erb
|
|
2469
2404
|
- app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx
|
|
2470
2405
|
- app/pb_kits/playbook/pb_time_range_inline/docs/example.yml
|
|
@@ -2476,9 +2411,6 @@ files:
|
|
|
2476
2411
|
- app/pb_kits/playbook/pb_timeline/docs/_description.md
|
|
2477
2412
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
|
|
2478
2413
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
|
|
2479
|
-
- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb
|
|
2480
|
-
- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx
|
|
2481
|
-
- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md
|
|
2482
2414
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
|
|
2483
2415
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
|
|
2484
2416
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.html.erb
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
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
|
-
column_styling: {
|
|
30
|
-
cell_background_color: "category_1",
|
|
31
|
-
font_color: "white"
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
accessor: "graduatedStudents",
|
|
36
|
-
label: "Graduated Students",
|
|
37
|
-
}
|
|
38
|
-
] %>
|
|
39
|
-
|
|
40
|
-
<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
41
|
-
<%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
|
|
42
|
-
<%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
|
|
43
|
-
<% end %>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
`column_styling` can also be used to control the background color on individual cells in a given column as shown here.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
import AdvancedTable from '../_advanced_table'
|
|
3
|
-
import colors from '../../tokens/exports/_colors.module.scss'
|
|
4
|
-
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const AdvancedTableColumnStylingBackground = (props) => {
|
|
8
|
-
const columnDefinitions = [
|
|
9
|
-
{
|
|
10
|
-
accessor: "year",
|
|
11
|
-
label: "Year",
|
|
12
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
accessor: "newEnrollments",
|
|
16
|
-
label: "New Enrollments",
|
|
17
|
-
columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
accessor: "scheduledMeetings",
|
|
21
|
-
label: "Scheduled Meetings",
|
|
22
|
-
columnStyling:{cellBackgroundColor: colors.info_subtle},
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
accessor: "attendanceRate",
|
|
26
|
-
label: "Attendance Rate",
|
|
27
|
-
columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
accessor: "completedClasses",
|
|
31
|
-
label: "Completed Classes",
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
accessor: "classCompletionRate",
|
|
35
|
-
label: "Class Completion Rate",
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
accessor: "graduatedStudents",
|
|
39
|
-
label: "Graduated Students",
|
|
40
|
-
},
|
|
41
|
-
]
|
|
42
|
-
|
|
43
|
-
return (
|
|
44
|
-
<div>
|
|
45
|
-
<AdvancedTable
|
|
46
|
-
columnDefinitions={columnDefinitions}
|
|
47
|
-
tableData={MOCK_DATA}
|
|
48
|
-
{...props}
|
|
49
|
-
/>
|
|
50
|
-
</div>
|
|
51
|
-
)
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
export default AdvancedTableColumnStylingBackground
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
The `columnStyling` prop can also be used to set background color for entire columns.As stated above, `columnStyling` is an object that has several optional key/value pairs, here are the options highlighted in this doc:
|
|
2
|
-
|
|
3
|
-
1) `cellBackgroundColor`: use this to control the background color of all cells in the given column
|
|
4
|
-
2) `headerBackgroundColor`: use this to control the background color of the column header
|
|
5
|
-
3) `fontColor`: use this to control font color for all cells in the given column if needed, for example if using a darker background color.
|
|
6
|
-
4) `headerFontColor`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|