playbook_ui 14.22.0.pre.alpha.customheaderat8564 → 14.22.0.pre.alpha.play2253rowlevelcoloringadvancedtablerails8971

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 (100) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +6 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +2 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb +46 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +7 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +11 -8
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  13. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +3 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +13 -4
  15. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +2 -0
  16. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
  17. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  27. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  28. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  29. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  30. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  31. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  32. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  33. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  34. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  35. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
  36. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
  47. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
  55. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +12 -4
  56. data/app/pb_kits/playbook/pb_draggable/context/types.ts +5 -2
  57. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
  58. data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
  59. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
  60. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
  61. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
  62. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
  63. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
  64. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
  65. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  66. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
  67. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  68. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  69. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  70. data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
  71. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
  72. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
  73. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
  74. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  75. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
  76. data/dist/chunks/_circle_chart-BZmlhBs2.js +1 -0
  77. data/dist/chunks/{_typeahead-B7FRYVtS.js → _typeahead-B1tu_vWi.js} +3 -3
  78. data/dist/chunks/_weekday_stacked-CKk0dR5s.js +45 -0
  79. data/dist/chunks/{lib-Carqm8Ip.js → lib-DYpq0k8j.js} +1 -1
  80. data/dist/chunks/{pb_form_validation-DqRmTS8m.js → pb_form_validation-BUOKwfvW.js} +1 -1
  81. data/dist/chunks/vendor.js +1 -1
  82. data/dist/menu.yml +68 -8
  83. data/dist/playbook-doc.js +2 -2
  84. data/dist/playbook-rails-react-bindings.js +1 -1
  85. data/dist/playbook-rails.js +1 -1
  86. data/dist/playbook.css +1 -1
  87. data/lib/playbook/version.rb +1 -1
  88. metadata +27 -18
  89. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  90. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  91. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  92. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  93. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  94. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  95. data/dist/chunks/_weekday_stacked-CEJcIpjK.js +0 -45
  96. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_row_styling.md → _advanced_table_row_styling_react.md} +0 -0
  97. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
  98. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
  99. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
  100. /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ae6b3ef179ba514261a9c3f24c44b3609980ad8295193eca7bf5ea78599e3f32
4
- data.tar.gz: 59f4da05e7dc18142518d658c9dcb6e02938972abce9ca14af52a725839bf150
3
+ metadata.gz: c1951f86a585c70927101907cbfa6aa6d83d222baafc563fa470eeb490fb4439
4
+ data.tar.gz: ac23e64cf6d33417c71e6f4282e441b249b934808abc397679f1988f6d2f19f1
5
5
  SHA512:
6
- metadata.gz: e891d0c03d22b2b4d0ae5faeac636fb884e54619f00b236a6cba2988a4432880f305f1d894f06005c4aa45dfefd83a440bf13395d43303cb875d129a140b6d24
7
- data.tar.gz: 72d84a27a4f5ec1c18d7f7b1da0d093336282250ebf56351639b7da26ee64593ae9ac79caa56a8a15df148e7091642afb56f390860a9a97c095c6e964128b178
6
+ metadata.gz: adfb1539088a12f382b08121237037bbf7b9d89ea1acbaa74aeb6e34df20c84bd57fc0c6c73f696d513651948d3cd138d9132a2164132c4d7074bfee8c97312c
7
+ data.tar.gz: 0a457e8d1e1abce99a8228ec489d17bbfc84e66789153d865ea391fc044777546e9761645d16d31ad43a315362262aaa698a020588d004766fdf184b62d69665
@@ -20,7 +20,7 @@ interface CustomCellProps {
20
20
  customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
21
21
  selectableRows?: boolean
22
22
  customStyle?: GenericObject
23
- }
23
+ }
24
24
 
25
25
  export const CustomCell = ({
26
26
  getValue,
@@ -35,7 +35,7 @@ export const CustomCell = ({
35
35
 
36
36
  const handleOnExpand = (row: Row<GenericObject>) => {
37
37
  onRowToggleClick && onRowToggleClick(row);
38
-
38
+
39
39
  if (!expandedControl) {
40
40
  setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
41
41
  }
@@ -46,8 +46,8 @@ export const CustomCell = ({
46
46
 
47
47
  return (
48
48
  <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
49
- <Flex
50
- alignItems="center"
49
+ <Flex
50
+ alignItems="center"
51
51
  columnGap="xs"
52
52
  justify="start"
53
53
  orientation="row"
@@ -71,12 +71,11 @@ export const CustomCell = ({
71
71
  >
72
72
  {row.getIsExpanded() ? (
73
73
  <Icon cursor="pointer"
74
- icon="circle-play"
75
- rotation={90}
74
+ icon="circle-play-down"
76
75
  />
77
76
  ) : (
78
77
  <Icon cursor="pointer"
79
- icon="circle-play"
78
+ icon="circle-play"
80
79
  />
81
80
  )}
82
81
  </button>
@@ -7,6 +7,7 @@ import { GlobalProps } from "../../utilities/globalProps"
7
7
 
8
8
  import Flex from "../../pb_flex/_flex"
9
9
  import Caption from "../../pb_caption/_caption"
10
+ import Icon from "../../pb_icon/_icon"
10
11
 
11
12
  import { ToggleIconButton } from "./ToggleIconButton"
12
13
  import { renderCollapsibleTrail } from "./CollapsibleTrail"
@@ -32,17 +33,19 @@ export const SubRowHeaderRow = ({
32
33
  subRowHeaders,
33
34
  table,
34
35
  }: SubRowHeaderRowProps & GlobalProps) => {
35
- const { inlineRowLoading } = useContext(AdvancedTableContext)
36
+ const { inlineRowLoading, customSort, onCustomSortClick } = useContext(AdvancedTableContext)
36
37
 
37
38
  const numberOfColumns = table.getAllFlatColumns().length
38
39
  const rowHasChildren = row.original.children ? true : false
39
40
  const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
41
+ const hasSubrowsToSort = row.getParentRow()?.subRows
42
+
40
43
 
41
44
  return (
42
45
  <tr className="custom-row bg-silver">
43
46
  <td
44
47
  className={`custom-row-first-column ${
45
- isChrome() ? "chrome-styles" : ""
48
+ isChrome() ? "chrome-styles" : ""
46
49
  }`}
47
50
  colSpan={1}
48
51
  >
@@ -50,21 +53,39 @@ export const SubRowHeaderRow = ({
50
53
  <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
51
54
  <Flex align="center"
52
55
  columnGap="xs"
56
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
57
+ //@ts-ignore
58
+ justifyContent={customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 ? "between" : undefined}
53
59
  >
54
- {enableToggleExpansion === "all" && canExpand ? (
55
- <ToggleIconButton onClick={onClick}
56
- row={row}
60
+ <Flex columnGap="xs">
61
+ {enableToggleExpansion === "all" && canExpand ? (
62
+ <ToggleIconButton onClick={onClick}
63
+ row={row}
64
+ />
65
+ ) : null}
66
+ <Caption
67
+ marginLeft={canExpand ? "none" : "xs"}
68
+ text={subRowHeaders[row.depth - 1]}
57
69
  />
58
- ) : null}
59
- <Caption
60
- marginLeft={canExpand ? "none" : "xs"}
61
- text={subRowHeaders[row.depth - 1]}
62
- />
70
+ </Flex>
71
+ {customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 && (
72
+ <button
73
+ aria-label="Sort this group"
74
+ className="sort-button-icon gray-icon"
75
+ onClick={() => { onCustomSortClick && onCustomSortClick(row.getParentRow()?.subRows)}}
76
+ >
77
+ <Icon
78
+ cursor="pointer"
79
+ fixedWidth
80
+ icon="sort"
81
+ />
82
+ </button>
83
+ )}
63
84
  </Flex>
64
85
  </div>
65
86
  </td>
66
87
 
67
88
  <td colSpan={numberOfColumns - 1} />
68
89
  </tr>
69
- )
90
+ );
70
91
  }
@@ -36,6 +36,7 @@ type AdvancedTableProps = {
36
36
  columnDefinitions: GenericObject[]
37
37
  columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
38
38
  columnVisibilityControl?: GenericObject
39
+ customSort?:boolean;
39
40
  dark?: boolean
40
41
  data?: { [key: string]: string }
41
42
  enableToggleExpansion?: "all" | "header" | "none"
@@ -67,6 +68,7 @@ type AdvancedTableProps = {
67
68
  tableProps?: GenericObject
68
69
  toggleExpansionIcon?: string | string[]
69
70
  onRowSelectionChange?: (arg: RowSelectionState) => void
71
+ onCustomSortClick?: (arg: GenericObject[]) => void
70
72
  virtualizedRows?: boolean
71
73
  allowFullScreen?: boolean
72
74
  fullScreenControl?: (controls: FullscreenControls) => void
@@ -81,6 +83,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
81
83
  columnDefinitions,
82
84
  columnGroupBorderColor,
83
85
  columnVisibilityControl,
86
+ customSort,
84
87
  dark = false,
85
88
  data = {},
86
89
  enableToggleExpansion = "header",
@@ -95,6 +98,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
95
98
  maxHeight,
96
99
  onRowToggleClick,
97
100
  onToggleExpansionClick,
101
+ onCustomSortClick,
98
102
  pagination = false,
99
103
  paginationProps,
100
104
  pinnedRows,
@@ -325,6 +329,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
325
329
  columnDefinitions={columnDefinitions}
326
330
  columnGroupBorderColor={columnGroupBorderColor}
327
331
  columnVisibilityControl={columnVisibilityControl}
332
+ customSort={customSort}
328
333
  enableToggleExpansion={enableToggleExpansion}
329
334
  enableVirtualization={virtualizedRows}
330
335
  expandByDepth={expandByDepth}
@@ -336,6 +341,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
336
341
  isActionBarVisible={isActionBarVisible}
337
342
  isFullscreen={isFullscreen}
338
343
  loading={loading}
344
+ onCustomSortClick={onCustomSortClick}
339
345
  onExpandByDepthClick={onExpandByDepthClick}
340
346
  pinnedRows={pinnedRows}
341
347
  responsive={responsive}
@@ -12,7 +12,7 @@
12
12
  <% content.presence %>
13
13
  <% else %>
14
14
  <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
15
- <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
15
+ <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
16
16
  <% end %>
17
17
  <% end %>
18
18
  <% end %>
@@ -31,6 +31,8 @@ module Playbook
31
31
  default: []
32
32
  prop :scroll_bar_none, type: Playbook::Props::Boolean,
33
33
  default: false
34
+ prop :row_styling, type: Playbook::Props::Array,
35
+ default: []
34
36
 
35
37
  def classname
36
38
  additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
@@ -0,0 +1,65 @@
1
+ import React from "react"
2
+ import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
+ import MOCK_DATA from "./advanced_table_mock_data.json"
4
+
5
+ const AdvancedTableCustomSort = (props) => {
6
+ const columnDefinitions = [
7
+ {
8
+ accessor: "year",
9
+ label: "Year",
10
+ id: "year",
11
+ cellAccessors: ["quarter", "month", "day"],
12
+ },
13
+ {
14
+ accessor: "newEnrollments",
15
+ id: "newEnrollments",
16
+ label: "New Enrollments",
17
+ },
18
+ {
19
+ accessor: "scheduledMeetings",
20
+ id: "scheduledMeetings",
21
+ label: "Scheduled Meetings",
22
+ },
23
+ {
24
+ accessor: "attendanceRate",
25
+ id: "attendanceRate",
26
+ label: "Attendance Rate",
27
+ },
28
+ {
29
+ accessor: "completedClasses",
30
+ id: "completedClasses",
31
+ label: "Completed Classes",
32
+ },
33
+ {
34
+ accessor: "classCompletionRate",
35
+ id: "classCompletionRate",
36
+ label: "Class Completion Rate",
37
+ },
38
+ {
39
+ accessor: "graduatedStudents",
40
+ id: "graduatedStudents",
41
+ label: "Graduated Students",
42
+ },
43
+ ]
44
+
45
+ //Render the subRow header rows
46
+ const subRowHeaders = ["Quarter", "Month", "Day"]
47
+
48
+ return (
49
+ <div>
50
+ <AdvancedTable
51
+ columnDefinitions={columnDefinitions}
52
+ customSort
53
+ enableToggleExpansion="all"
54
+ onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
55
+ tableData={MOCK_DATA}
56
+ {...props}
57
+ >
58
+ <AdvancedTable.Header enableSorting />
59
+ <AdvancedTable.Body subRowHeaders={subRowHeaders} />
60
+ </AdvancedTable>
61
+ </div>
62
+ )
63
+ }
64
+
65
+ export default AdvancedTableCustomSort
@@ -0,0 +1,5 @@
1
+ The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
2
+
3
+ The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table.
4
+
5
+ __NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided.
@@ -0,0 +1,46 @@
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
+ background_color: "#F9BB00",
37
+ },
38
+ {
39
+ row_id: "8",
40
+ background_color: "#0056CF",
41
+ font_color: "white",
42
+ expand_button_color: "white",
43
+ },
44
+ ] %>
45
+
46
+ <%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
@@ -0,0 +1,7 @@
1
+ The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
2
+
3
+ - `background_color` : use this to control the background color of the row
4
+ - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
5
+ - `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
6
+
7
+ **NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.
@@ -12,21 +12,23 @@ examples:
12
12
  - advanced_table_custom_cell_rails: Custom Components for Cells
13
13
  - advanced_table_column_headers: Multi-Header Columns
14
14
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
15
- - advanced_table_column_border_color_rails: Column Group Border Color
16
15
  - advanced_table_no_subrows: Table with No Subrows or Expansion
17
16
  - advanced_table_selectable_rows_rails: Selectable Rows
18
17
  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
19
18
  - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
20
19
  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
21
20
  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
22
- # - advanced_table_column_styling_rails: Column Styling
23
- # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
21
+ - advanced_table_row_styling: Row Styling
22
+ - advanced_table_column_styling_rails: Column Styling
23
+ - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
24
+ - advanced_table_column_border_color_rails: Column Group Border Color
25
+
24
26
 
25
27
  react:
26
28
  - advanced_table_default: Default (Required Props)
27
- - advanced_table_loading: Loading State
28
29
  - advanced_table_sort: Enable Sorting
29
30
  - advanced_table_sort_control: Sort Control
31
+ - advanced_table_custom_sort: Custom Sort
30
32
  - advanced_table_expanded_control: Expanded Control
31
33
  - advanced_table_expand_by_depth: Expand by Depth
32
34
  - advanced_table_subrow_headers: SubRow Headers
@@ -37,30 +39,31 @@ examples:
37
39
  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
38
40
  - advanced_table_sticky_columns: Sticky Columns
39
41
  - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
40
- - advanced_table_inline_row_loading: Inline Row Loading
41
42
  - advanced_table_responsive: Responsive Tables
42
43
  - advanced_table_custom_cell: Custom Components for Cells
43
44
  - advanced_table_with_custom_header: Custom Header Cell
44
45
  - advanced_table_pagination: Pagination
45
46
  - advanced_table_pagination_with_props: Pagination Props
47
+ - advanced_table_loading: Loading State
48
+ - advanced_table_inline_row_loading: Inline Row Loading
46
49
  - advanced_table_column_headers: Multi-Header Columns
47
50
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
48
51
  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
49
- - advanced_table_column_border_color: Column Group Border Color
50
52
  - advanced_table_no_subrows: Table with No Subrows or Expansion
53
+ - advanced_table_pinned_rows: Pinned Rows
51
54
  - advanced_table_selectable_rows: Selectable Rows
52
55
  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
53
56
  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
54
57
  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
55
58
  - advanced_table_inline_editing: Inline Cell Editing
56
- - advanced_table_fullscreen: Fullscreen
57
59
  - advanced_table_column_visibility: Column Visibility Control
58
60
  - advanced_table_column_visibility_with_state: Column Visibility Control With State
59
61
  - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
60
62
  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
61
- - advanced_table_pinned_rows: Pinned Rows
62
63
  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
63
64
  - advanced_table_row_styling: Row Styling
64
65
  - advanced_table_column_styling: Column Styling
65
66
  - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
67
+ - advanced_table_column_border_color: Column Group Border Color
68
+ - advanced_table_fullscreen: Fullscreen
66
69
  - advanced_table_infinite_scroll: Infinite Scroll
@@ -38,4 +38,5 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
38
38
  export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
39
39
  export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
40
40
  export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
41
- export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
41
+ export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
42
+ export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
@@ -23,6 +23,8 @@ module Playbook
23
23
  default: "scroll"
24
24
  prop :selectable_rows, type: Playbook::Props::Boolean,
25
25
  default: false
26
+ prop :row_styling, type: Playbook::Props::Array,
27
+ default: []
26
28
 
27
29
  def flatten_columns(columns)
28
30
  columns.flat_map do |col|
@@ -66,7 +68,7 @@ module Playbook
66
68
  end
67
69
 
68
70
  # Additional class and data attributes needed for toggle logic
69
- output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
71
+ output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling })
70
72
 
71
73
  if row[:children].present?
72
74
  row[:children].each do |child_row|
@@ -1,3 +1,10 @@
1
+ <%
2
+ row_style = object.row_styling.find { |style| style[:row_id].to_s == object.row_id.to_s }
3
+ button_color = row_style&.[](:expand_button_color)
4
+ bg_color = row_style&.[](:background_color)
5
+ font_color = row_style&.[](:font_color)
6
+ %>
7
+
1
8
  <%= pb_content_tag(:tr) do %>
2
9
  <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
3
10
  <% if has_separate_checkbox %>
@@ -5,7 +12,7 @@
5
12
  <% end %>
6
13
  <% object.column_definitions.each_with_index do |column, index| %>
7
14
  <% next unless column[:accessor].present? %>
8
- <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
15
+ <%= pb_rails("table/table_cell", props: { html_options: { style: { "background-color": bg_color, color: font_color } }, classname:object.td_classname(column, index)}) do %>
9
16
  <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
10
17
  <% if collapsible_trail && index.zero? %>
11
18
  <% (1..depth).each do |i| %>
@@ -28,13 +35,15 @@
28
35
  <button
29
36
  id="<%= "#{object.id}_#{object.row.object_id}" %>"
30
37
  class="gray-icon expand-toggle-icon"
31
- data-advanced-table="true">
38
+ data-advanced-table="true"
39
+ style="color: <%= button_color %>"
40
+ >
32
41
  <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
33
- <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
42
+ <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
34
43
  </button>
35
44
  <% end %>
36
45
  <% end %>
37
- <%= pb_rails("flex/flex_item") do %>
46
+ <%= pb_rails("flex/flex_item") do %>
38
47
  <% if column[:custom_renderer].present? %>
39
48
  <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
40
49
  <% elsif index.zero? %>
@@ -27,6 +27,8 @@ module Playbook
27
27
  prop :enable_toggle_expansion, type: Playbook::Props::Enum,
28
28
  values: %w[all header none],
29
29
  default: "header"
30
+ prop :row_styling, type: Playbook::Props::Array,
31
+ default: []
30
32
 
31
33
  def data
32
34
  Hash(prop(:data)).merge(table_data_attributes)
@@ -5,7 +5,7 @@
5
5
  @import "../tokens/typography";
6
6
 
7
7
  [class^=pb_badge_kit] {
8
- $pb_badge_height: 18px;
8
+ $pb_badge_height_rounded: 16px;
9
9
 
10
10
  display: inline-flex;
11
11
  align-items: center;
@@ -13,7 +13,6 @@
13
13
  border-radius: $border_rad_light;
14
14
  padding: 0 $space_xs/2;
15
15
  border-width: 1px;
16
- border-style: solid;
17
16
  border-color: $card_light;
18
17
  white-space: nowrap;
19
18
 
@@ -31,10 +30,10 @@
31
30
  }
32
31
 
33
32
  &[class*=_rounded] {
34
- height: $pb_badge_height;
35
- min-height: $pb_badge_height;
36
- min-width: $pb_badge_height;
37
- border-radius: $pb_badge_height / 2;
33
+ height: $pb_badge_height_rounded;
34
+ min-height: $pb_badge_height_rounded;
35
+ min-width: $pb_badge_height_rounded;
36
+ border-radius: $pb_badge_height_rounded / 2;
38
37
  }
39
38
 
40
39
  &[class*=_notification] {
@@ -0,0 +1,106 @@
1
+ import colors from '../tokens/exports/_colors.module.scss'
2
+ import typography from '../tokens/exports/_typography.module.scss'
3
+
4
+ const barGraphTheme = {
5
+ title: {
6
+ text: "",
7
+ style: {
8
+ color: colors.text_lt_default,
9
+ fontFamily: typography.font_family_base,
10
+ fontWeight: typography.bold,
11
+ fontSize: typography.heading_3,
12
+ },
13
+ },
14
+ subtitle: {
15
+ text: "",
16
+ style: {
17
+ fontFamily: typography.font_family_base,
18
+ color: colors.text_lt_light,
19
+ fontWeight: typography.regular,
20
+ fontSize: typography.text_base,
21
+ },
22
+ },
23
+ chart: {
24
+ type: "column",
25
+ },
26
+ tooltip: {
27
+ backgroundColor: {
28
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
29
+ stops: [
30
+ [0, colors.bg_dark],
31
+ [1, colors.bg_dark],
32
+ ],
33
+ },
34
+ style: {
35
+ fontFamily: typography.font_family_base,
36
+ color: colors.text_dk_default,
37
+ fontWeight: typography.regular,
38
+ fontSize: typography.text_smaller,
39
+ },
40
+ },
41
+ colors: [
42
+ colors.data_1,
43
+ colors.data_2,
44
+ colors.data_3,
45
+ colors.data_4,
46
+ colors.data_5,
47
+ colors.data_6,
48
+ colors.data_7,
49
+ ],
50
+ credits: { enabled: false },
51
+ legend: {
52
+ enabled: false,
53
+ itemStyle: {
54
+ color: colors.text_lt_light,
55
+ fill: colors.text_lt_light,
56
+ fontSize: typography.text_smaller,
57
+ },
58
+ },
59
+ xAxis: {
60
+ gridLineWidth: 0,
61
+ lineColor: colors.border_light,
62
+ tickColor: colors.border_light,
63
+ labels: {
64
+ style: {
65
+ fontFamily: typography.font_family_base,
66
+ color: colors.text_lt_lighter,
67
+ fontWeight: typography.bold,
68
+ fontSize: typography.text_smaller,
69
+ },
70
+ },
71
+ title: {
72
+ style: {
73
+ color: colors.text_lt_default,
74
+ fontFamily: typography.font_family_base,
75
+ fontWeight: typography.regular,
76
+ fontSize: typography.heading_4,
77
+ },
78
+ },
79
+ },
80
+ yAxis: {
81
+ alternateGridColor: undefined as string | undefined,
82
+ minorTickInterval: null as number | null,
83
+ gridLineColor: colors.border_light,
84
+ minorGridLineColor: colors.border_light,
85
+ lineWidth: 0,
86
+ tickWidth: 0,
87
+ labels: {
88
+ style: {
89
+ fontFamily: typography.font_family_base,
90
+ color: colors.text_lt_lighter,
91
+ fontWeight: typography.bold,
92
+ fontSize: typography.text_smaller,
93
+ },
94
+ },
95
+ title: {
96
+ style: {
97
+ fontFamily: typography.font_family_base,
98
+ color: colors.text_lt_lighter,
99
+ fontWeight: typography.bold,
100
+ fontSize: typography.text_smaller,
101
+ },
102
+ },
103
+ },
104
+ }
105
+
106
+ export default barGraphTheme;