playbook_ui_docs 15.3.0.pre.alpha.PLAY2569advancedtablecolumnstylingfontcolor11977 → 15.3.0.pre.alpha.PLAY2601advancedtablecustomcellmultiheaderrails12030

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.
Files changed (18) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb +0 -4
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +1 -3
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +0 -2
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +2 -16
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb +1 -6
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +0 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +0 -2
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx +1 -9
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md +1 -1
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx +16 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header_rails.html.erb +104 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header_rails.md +1 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +1 -1
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  17. data/dist/playbook-doc.js +1 -1
  18. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1bbe541cd23cbdb3c83e25470bad429eb2d90ef5f75e029e5dc8ef4d4a216da9
4
- data.tar.gz: 167c8062411ce3244b34c131934c740b91fd0a4807c6e8ba825bf5a8fdc7e4a4
3
+ metadata.gz: d824bd157d14a8643cbc18f9ec7676b45fe90e949315e96e191ce66503a6aff7
4
+ data.tar.gz: a64fe3d7ce447ca068d90e46f1ab54a36e07f5f917efd8cb5092ff2c14c20c48
5
5
  SHA512:
6
- metadata.gz: 41437ebe84a75ce49fe57d64fe612391615536e8f1e01461d702e76092ac63afcd8dca944de30e5faf75570d6953752b2af7564e7abb85fe46c87907bfb8e808
7
- data.tar.gz: 3f294b7b0c736b4c164af3635bfce763add23f5ae81f56d7081723cd902db03fb92a00e75a6aa53141e7988d1a5f968037eeaf37b2cbc1c053920a2d4baf4e03
6
+ metadata.gz: 0c7d7dae90ec02263d91fa228845fbe3cd46769a9906be99e0055adacf327486f670e143517d360cc1691f9e2d0c47a8b101c85f54fa9713a35263f5a1621613
7
+ data.tar.gz: da4b5f29eec7b56ff02ba76f154f25182b5d02f9da670f2e211482b6eb856ebf0d665c7d133de8069e46f7c6baa5df02e0c7c2f253ac6cb1a0e86d96670732c2
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb CHANGED
@@ -26,10 +26,6 @@
26
26
  {
27
27
  accessor: "classCompletionRate",
28
28
  label: "Class Completion Rate",
29
- column_styling: {
30
- cell_background_color: "category_1",
31
- font_color: "white"
32
- }
33
29
  },
34
30
  {
35
31
  accessor: "graduatedStudents",
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md CHANGED
@@ -1 +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. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.
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.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx CHANGED
@@ -1,8 +1,7 @@
1
1
  import React from "react"
2
- import { AdvancedTable, colors } from "playbook-ui"
2
+ import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
3
  import MOCK_DATA from "./advanced_table_mock_data.json"
4
4
 
5
-
6
5
  const AdvancedTableColumnStyling = (props) => {
7
6
  const columnDefinitions = [
8
7
  {
@@ -35,7 +34,6 @@ const AdvancedTableColumnStyling = (props) => {
35
34
  {
36
35
  accessor: "graduatedStudents",
37
36
  label: "Graduated Students",
38
- columnStyling:{fontColor: colors.data_8},
39
37
  },
40
38
  ]
41
39
 
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md CHANGED
@@ -4,6 +4,4 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
4
4
 
5
5
  2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
6
6
 
7
- 3) `fontColor`: This will allow you to control the font color for a given column.
8
-
9
7
  `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { AdvancedTable, Background,colors } from "playbook-ui";
2
+ import AdvancedTable from '../../pb_advanced_table/_advanced_table';
3
3
  import MOCK_DATA from "./advanced_table_mock_data.json";
4
4
 
5
5
  const AdvancedTableColumnStylingColumnHeaders = (props) => {
@@ -38,24 +38,11 @@ const AdvancedTableColumnStylingColumnHeaders = (props) => {
38
38
  {
39
39
  accessor: "completedClasses",
40
40
  label: "Completed Classes",
41
- columnStyling:{
42
- headerAlignment: "center",
43
- cellAlignment: "center",
44
- fontColor: colors.success,
45
- },
41
+ columnStyling:{headerAlignment: "center", cellAlignment: "center"},
46
42
  },
47
43
  {
48
44
  accessor: "classCompletionRate",
49
45
  label: "Class Completion Rate",
50
- columnStyling: { cellPadding: "none", fontColor: colors.error },
51
- customRenderer: (row, value) => (
52
- <Background
53
- backgroundColor={"warning_secondary"}
54
- padding="xs"
55
- >
56
- {value}
57
- </Background>
58
- ),
59
46
  },
60
47
  ],
61
48
  },
@@ -65,7 +52,6 @@ const AdvancedTableColumnStylingColumnHeaders = (props) => {
65
52
  {
66
53
  accessor: "attendanceRate",
67
54
  label: "Attendance Rate",
68
- columnStyling: { fontColor: colors.category_1 },
69
55
  },
70
56
  {
71
57
  accessor: "scheduledMeetings",
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb CHANGED
@@ -32,15 +32,11 @@
32
32
  {
33
33
  accessor: "completedClasses",
34
34
  label: "Completed Classes",
35
- column_styling:{header_alignment:"center", cell_alignment:"center", font_color:"#28A745"}
35
+ column_styling:{header_alignment:"center", cell_alignment:"center"}
36
36
  },
37
37
  {
38
38
  accessor: "classCompletionRate",
39
39
  label: "Class Completion Rate",
40
- column_styling: {
41
- cell_background_color: "warning_secondary",
42
- font_color: "red"
43
- }
44
40
  },
45
41
  ],
46
42
  },
@@ -50,7 +46,6 @@
50
46
  {
51
47
  accessor: "attendanceRate",
52
48
  label: "Attendance Rate",
53
- column_styling: { font_color: "#0056CF" }
54
49
  },
55
50
  {
56
51
  accessor: "scheduledMeetings",
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb CHANGED
@@ -29,7 +29,6 @@
29
29
  {
30
30
  accessor: "graduatedStudents",
31
31
  label: "Graduated Students",
32
- column_styling: { font_color: "red" }
33
32
  }
34
33
  ] %>
35
34
 
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md CHANGED
@@ -4,6 +4,4 @@ The `column_styling` prop is an optional item that can be used within `column_de
4
4
 
5
5
  2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
6
6
 
7
- 3) `font_color`: This will allow you to control the font color for a given column.
8
-
9
7
  `column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx CHANGED
@@ -22,6 +22,7 @@ const AdvancedTablePaddingControl = (props) => {
22
22
  {value}
23
23
  </Background>
24
24
  ),
25
+
25
26
  },
26
27
  {
27
28
  accessor: "scheduledMeetings",
@@ -38,15 +39,6 @@ const AdvancedTablePaddingControl = (props) => {
38
39
  {
39
40
  accessor: "classCompletionRate",
40
41
  label: "Class Completion Rate",
41
- columnStyling:{cellPadding: "none", fontColor: "white"},
42
- customRenderer: (row, value) => (
43
- <Background
44
- backgroundColor={"category_1"}
45
- padding="xs"
46
- >
47
- {value}
48
- </Background>
49
- ),
50
42
  },
51
43
  {
52
44
  accessor: "graduatedStudents",
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md CHANGED
@@ -1,3 +1,3 @@
1
1
  `columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.
2
2
 
3
- This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. Use `fontColor` to achieve better contrast between cell content and background for darker backgrounds.
3
+ This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx CHANGED
@@ -76,6 +76,22 @@ const columnDefinitions = [
76
76
  {
77
77
  label: "Attendance",
78
78
  id: "attendance",
79
+ header: () => (
80
+ <Flex alignItems="center"
81
+ justifyContent="center"
82
+ >
83
+ <Caption marginRight="xs">Attendance</Caption>
84
+ <Tooltip placement="top"
85
+ text="Whoa. I'm a Tooltip Too!"
86
+ zIndex={10}
87
+ >
88
+ <Icon cursor="pointer"
89
+ icon="info"
90
+ size="xs"
91
+ />
92
+ </Tooltip>
93
+ </Flex>
94
+ ),
79
95
  columns: [
80
96
  {
81
97
  accessor: "attendanceRate",
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header_rails.html.erb ADDED
@@ -0,0 +1,104 @@
1
+ <%
2
+ column_definitions = [
3
+ {
4
+ accessor: "year",
5
+ label: "Year",
6
+ id: "year",
7
+ cellAccessors: ["quarter", "month", "day"],
8
+ },
9
+ {
10
+ label: "Enrollment Data",
11
+ id: "enrollmentData",
12
+ header: ->(cell, label) {
13
+ capture do
14
+ pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
15
+ pb_rails("caption", props: { margin_right: "xs", text: "Enrollment Data" }) +
16
+ pb_rails("icon", props: { id: "tooltip-interact-multi", icon: "info", size: "xs", cursor: "pointer" }) +
17
+ pb_rails("tooltip", props: {
18
+ trigger_element_id: "tooltip-interact-multi",
19
+ tooltip_id: "example-custom-tooltip-multi",
20
+ position: "top",
21
+ z_index: "10"
22
+ }) do
23
+ "Whoa. I'm a Tooltip"
24
+ end
25
+ end
26
+ end
27
+ },
28
+ columns: [
29
+ {
30
+ label: "Enrollment Stats",
31
+ id: "enrollmentStats",
32
+ columns: [
33
+ {
34
+ accessor: "newEnrollments",
35
+ id: "newEnrollments",
36
+ label: "New Enrollments",
37
+ },
38
+ {
39
+ accessor: "scheduledMeetings",
40
+ id: "scheduledMeetings",
41
+ label: "Scheduled Meetings",
42
+ },
43
+ ],
44
+ },
45
+ ],
46
+ },
47
+ {
48
+ label: "Performance Data",
49
+ id: "performanceData",
50
+ columns: [
51
+ {
52
+ label: "Completion Metrics",
53
+ id: "completionMetrics",
54
+ columns: [
55
+ {
56
+ accessor: "completedClasses",
57
+ id: "completedClasses",
58
+ label: "Completed Classes",
59
+ },
60
+ {
61
+ accessor: "classCompletionRate",
62
+ id: "classCompletionRate",
63
+ label: "Class Completion Rate",
64
+ },
65
+ ],
66
+ },
67
+ {
68
+ label: "Attendance",
69
+ id: "attendance",
70
+ header: ->(cell, label) {
71
+ capture do
72
+ pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
73
+ pb_rails("caption", props: { margin_right: "xs", text: "Attendance" }) +
74
+ pb_rails("icon", props: { id: "tooltip-interact-multi-2", icon: "info", size: "xs", cursor: "pointer" }) +
75
+ pb_rails("tooltip", props: {
76
+ trigger_element_id: "tooltip-interact-multi-2",
77
+ tooltip_id: "example-custom-tooltip-multi-2",
78
+ position: "top",
79
+ z_index: "10"
80
+ }) do
81
+ "Whoa. I'm a Tooltip Too!"
82
+ end
83
+ end
84
+ end
85
+ },
86
+ columns: [
87
+ {
88
+ accessor: "attendanceRate",
89
+ id: "attendanceRate",
90
+ label: "Attendance Rate",
91
+ },
92
+ {
93
+ accessor: "scheduledMeetings",
94
+ id: "scheduledMeetings",
95
+ label: "Scheduled Meetings",
96
+ },
97
+ ],
98
+ },
99
+ ],
100
+ },
101
+ ]
102
+ %>
103
+
104
+ <%= pb_rails("advanced_table", props: { id: "custom_header_multi_header_table", table_data: @table_data, column_definitions: column_definitions }) %>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header_rails.md ADDED
@@ -0,0 +1 @@
1
+ The optional `header` item within `column_definitions` can also be used with multi headers as seen here.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb CHANGED
@@ -12,7 +12,7 @@
12
12
  capture do
13
13
  pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
14
14
  pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
15
- pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
15
+ pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs", cursor: "pointer" }) +
16
16
  pb_rails("tooltip", props: {
17
17
  trigger_element_id: "tooltip-interact",
18
18
  tooltip_id: "example-custom-tooltip",
data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED
@@ -11,6 +11,7 @@ examples:
11
11
  - advanced_table_responsive: Responsive Tables
12
12
  - advanced_table_custom_cell_rails: Custom Components for Cells
13
13
  - advanced_table_with_custom_header_rails: Custom Header Cell
14
+ - advanced_table_with_custom_header_multi_header_rails: Custom Header with Multiple Headers
14
15
  - advanced_table_column_headers: Multi-Header Columns
15
16
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
16
17
  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders