playbook_ui 15.4.0.pre.rc.1 → 15.4.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3228eb0eef8bd4c6ea21b1f728bf755c02819ca51a26f88b47c2b18b94a20f7d
-  data.tar.gz: 6cbedab0cc40f9a3aaa1bfd67faab03675b5936db81a2afc82c25b184d201b02
+  metadata.gz: 7a975771e592077ab2a8652b98d0c50e77edd015d6e5c964d2c3e7fe0d890e09
+  data.tar.gz: 4c8a3c69a78fa1d417f713593e5faa75e9010845cccd8f5be2dad9a5af238743
 SHA512:
-  metadata.gz: 0c6875620df77729995d251dd5cbfc9b2ddc73273aaeb7299644dd723d80133eb8a052a503a521eb5fe1e3f8acc4542a7994ef124d4d27dacaa17bad75bb436b
-  data.tar.gz: 35dade6af63d802f74790efe9c45282641f6160d6b7202b08e081bbb75b51bb6426cf185380e48479e2112c0d2c83225221115d3c1e162214fd68539695237a1
+  metadata.gz: a36fe08a2d86ba2bb19c793924278976be3cad2c41ef906d1cac3e5a141be6ed88aadae46cbc15e1a3f47da0d98ccd3cb2b7a7deba78d262a3bbe9568884e6b5
+  data.tar.gz: 9b75de07f0692daa2d4a8e72187c3b13f877442be7237853589fda95ad1b27c27f978bed809e40c83947c3e2d224cf9dac6edefc44cf7c83d0610d21d4fe14b3

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -66,6 +66,7 @@ const TableCellRenderer = ({
         // Find the “owning” colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
+        const cellFontColor = colDef?.columnStyling?.fontColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 
@@ -88,7 +89,7 @@ const TableCellRenderer = ({
                     : `${column.getStart("left")}px`
                   : undefined,
                   backgroundColor: i === 0 && customRowStyle?.backgroundColor,
-                  color: customRowStyle?.fontColor,
+                  color: cellFontColor || customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -740,6 +740,69 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
+test("columnStyling.fontColor sets cell font color", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { fontColor: colors.category_1 },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
+  expect(firstEnrollmentCell).toHaveStyle({ color: colors.category_1 });
+});
+
+test("columnStyling.fontColor works with background color", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { 
+        cellBackgroundColor: (row) => row.newEnrollments > 20 ? "success_secondary" : "warning_secondary",
+        fontColor: colors.white 
+      },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
+  expect(firstEnrollmentCell).toHaveStyle({ color: colors.white });
+});
+
 test("renders virtualized table rows and header", () => {
   render(
     <AdvancedTable

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -26,6 +26,10 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
     },
     {
       accessor: "graduatedStudents",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md

@@ -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.
+`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.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop.  In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -1,7 +1,8 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable, colors } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
+
 const AdvancedTableColumnStyling = (props) => {
   const columnDefinitions = [
     {
@@ -34,6 +35,7 @@ const AdvancedTableColumnStyling = (props) => {
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
+      columnStyling:{fontColor: colors.data_8},
     },
   ]
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md

@@ -4,4 +4,6 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 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`.
 
+3) `fontColor`: This will allow you to control the font color for a given column.
+
 `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

@@ -1,5 +1,5 @@
 import React from "react";
-import AdvancedTable from '../../pb_advanced_table/_advanced_table';
+import { AdvancedTable } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb

@@ -29,6 +29,7 @@
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
+      column_styling: { font_color: "red" }
     }
 ] %>
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md

@@ -4,4 +4,6 @@ The `column_styling` prop is an optional item that can be used within `column_de
 
 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`.
 
+3) `font_color`: This will allow you to control the font color for a given column.
+
 `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

@@ -22,7 +22,6 @@ const AdvancedTablePaddingControl = (props) => {
          {value}
         </Background>
       ), 
-
     },
     {
       accessor: "scheduledMeetings",
@@ -39,6 +38,15 @@ const AdvancedTablePaddingControl = (props) => {
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      columnStyling:{cellPadding: "none", fontColor: "white"},
+      customRenderer: (row, value) => (
+        <Background 
+            backgroundColor={"category_1"}
+            padding="xs" 
+        >
+         {value}
+        </Background>
+      ), 
     },
     {
       accessor: "graduatedStudents",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md

@@ -1,3 +1,3 @@
 `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'.  
 
-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. 
+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.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md

@@ -1,7 +1,7 @@
 To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
 
 - Set `sticky: true` via `tableProps`
-- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
+- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud//global_props/max_height) global prop. 
 
 **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md

@@ -1,4 +1,4 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md

@@ -1,4 +1,4 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
 
 **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx

@@ -76,6 +76,22 @@ const columnDefinitions = [
         {
           label: "Attendance",
           id: "attendance",
+          header: () => (
+            <Flex alignItems="center" 
+                justifyContent="center"
+            >
+              <Caption marginRight="xs">Attendance</Caption>
+              <Tooltip placement="top" 
+                  text="Whoa. I'm a Tooltip Too!" 
+                  zIndex={10}
+              >
+                <Icon cursor="pointer" 
+                    icon="info"
+                    size="xs" 
+                />
+              </Tooltip>
+            </Flex>
+          ),  
           columns: [
             {
               accessor: "attendanceRate",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header_rails.html.erb

@@ -0,0 +1,104 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      id: "enrollmentData",
+      header: ->(cell, label) {
+        capture do
+          pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
+            pb_rails("caption", props: { margin_right: "xs", text: "Enrollment Data" }) +
+            pb_rails("icon", props: { id: "tooltip-interact-multi", icon: "info", size: "xs", cursor: "pointer" }) +
+            pb_rails("tooltip", props: {
+              trigger_element_id: "tooltip-interact-multi",
+              tooltip_id: "example-custom-tooltip-multi",
+              position: "top",
+              z_index: "10"
+            }) do
+              "Whoa. I'm a Tooltip"
+            end
+          end
+        end
+      },
+      columns: [
+        {
+          label: "Enrollment Stats",
+          id: "enrollmentStats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              id: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              id: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      id: "performanceData",
+      columns: [
+        {
+          label: "Completion Metrics",
+          id: "completionMetrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              id: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              id: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          id: "attendance",
+          header: ->(cell, label) {
+            capture do
+              pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
+                pb_rails("caption", props: { margin_right: "xs", text: "Attendance" }) +
+                pb_rails("icon", props: { id: "tooltip-interact-multi-2", icon: "info", size: "xs", cursor: "pointer" }) +
+                pb_rails("tooltip", props: {
+                  trigger_element_id: "tooltip-interact-multi-2",
+                  tooltip_id: "example-custom-tooltip-multi-2",
+                  position: "top",
+                  z_index: "10"
+                }) do
+                  "Whoa. I'm a Tooltip Too!"
+                end
+              end
+            end
+          },
+          columns: [
+            {
+              accessor: "attendanceRate",
+              id: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              id: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ]
+%>
+
+<%= 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

@@ -0,0 +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

@@ -12,7 +12,7 @@
         capture do
           pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
             pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
-            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
+            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs", cursor: "pointer" }) +
             pb_rails("tooltip", props: {
               trigger_element_id: "tooltip-interact",
               tooltip_id: "example-custom-tooltip",

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -11,6 +11,7 @@ examples:
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_with_custom_header_rails: Custom Header Cell
+  - advanced_table_with_custom_header_multi_header_rails: Custom Header with Multiple Headers
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -82,32 +82,62 @@ module Playbook
         end
       end
 
-      # Get original column definition for custom rendering
+      # Get original column definition for custom rendering by accessor
       def find_original_column_def(accessor)
         find_column_def_by_accessor(column_definitions, accessor)
       end
 
+      # Get original column definition for custom rendering by id
+      def find_original_column_def_by_id(id)
+        find_column_def_by_id(column_definitions, id)
+      end
+
       # Check if a header cell has a custom renderer
       def has_header_renderer?(cell)
-        return false unless cell[:accessor].present?
-
-        original_def = find_original_column_def(cell[:accessor])
-        original_def && original_def[:header].present?
+        original_def = find_original_column_def_for_cell(cell)
+        original_def&.dig(:header).present?
+      rescue
+        false
       end
 
       # Render custom header content
       def render_header(cell)
         return cell[:label] unless has_header_renderer?(cell)
 
-        original_def = find_original_column_def(cell[:accessor])
+        original_def = find_original_column_def_for_cell(cell)
+        return cell[:label] unless original_def
+
         custom_renderer = original_def[:header]
+        return cell[:label] unless custom_renderer
 
         # Call the custom renderer with the cell data and label
-        custom_renderer.call(cell, cell[:label])
+        begin
+          result = custom_renderer.call(cell, cell[:label])
+          result.present? ? result.to_s : cell[:label]
+        rescue
+          cell[:label]
+        end
       end
 
     private
 
+      # Find the original column definition for a cell
+      def find_original_column_def_for_cell(cell)
+        # Try accessor first (for leaf columns)
+        if cell[:accessor].present?
+          found = find_original_column_def(cell[:accessor])
+          return found if found
+        end
+
+        # Try id if accessor lookup didn't find it (for grouped columns or leaf columns with id)
+        if cell[:id].present?
+          found = find_original_column_def_by_id(cell[:id])
+          return found if found
+        end
+
+        nil
+      end
+
       def compute_max_depth(columns)
         columns.map do |col|
           col[:columns] ? 1 + compute_max_depth(col[:columns]) : 1
@@ -118,21 +148,24 @@ module Playbook
         total_columns = columns.size
         columns.each_with_index do |col, index|
           is_last = index == total_columns - 1
-          if col[:columns]
-            colspan = compute_leaf_columns(col[:columns])
-            rows[current_depth] << {
+          nested_columns = col[:columns]
+          if nested_columns
+            colspan = compute_leaf_columns(nested_columns)
+            cell_hash = {
               label: col[:label],
               colspan: colspan,
               is_last_in_group: is_last && current_depth.positive?,
             }
+            cell_hash[:id] = col[:id] if col[:id].present?
+            rows[current_depth] << cell_hash
 
-            process_columns(col[:columns], rows, current_depth + 1, max_depth)
+            process_columns(nested_columns, rows, current_depth + 1, max_depth)
           else
-            raw_styling       = col[:column_styling] || {}
-            header_alignment  = raw_styling[:header_alignment]
+            raw_styling = col[:column_styling] || {}
+            header_alignment = raw_styling[:header_alignment]
 
             colspan = 1
-            rows[current_depth] << {
+            cell_hash = {
               label: col[:label],
               colspan: colspan,
               accessor: col[:accessor],
@@ -140,6 +173,8 @@ module Playbook
               is_last_in_group: is_last && current_depth.positive?,
               header_alignment: header_alignment,
             }
+            cell_hash[:id] = col[:id] if col[:id].present?
+            rows[current_depth] << cell_hash
           end
         end
       end
@@ -154,11 +189,15 @@ module Playbook
         max_depth = compute_max_depth(column_definitions)
 
         column_definitions.map do |col|
-          if col.key?(:columns)
-            {
+          if col[:columns]
+            nested_columns = col[:columns]
+            wrapped = {
               label: col[:label],
-              columns: wrap_leaf_columns(col[:columns]),
+              columns: wrap_leaf_columns(nested_columns),
             }
+            wrapped[:id] = col[:id] if col[:id].present?
+            wrapped[:header] = col[:header] if col[:header].present?
+            wrapped
           else
             # For leaf columns, wrap with empty labels up to max depth to get proper structure
             wrap_leaf_column(col, max_depth)
@@ -173,6 +212,7 @@ module Playbook
           sort_menu: col[:sort_menu] || nil,
           column_styling: col[:column_styling] || {},
         }
+        wrapped[:id] = col[:id] if col[:id].present?
         (max_depth - 1).times do
           wrapped = { label: "", columns: [wrapped] }
         end
@@ -180,11 +220,41 @@ module Playbook
       end
 
       def find_column_def_by_accessor(defs, target_accessor)
+        return nil if target_accessor.blank?
+
         defs.each do |col|
-          return col if col[:accessor] == target_accessor
+          col_accessor = col[:accessor]
+          next if col_accessor.blank?
+
+          return col if col_accessor.to_s == target_accessor.to_s
+
+          nested_columns = col[:columns]
+          if nested_columns.is_a?(Array)
+            found = find_column_def_by_accessor(nested_columns, target_accessor)
+            return found if found
+          end
+        end
+        nil
+      end
+
+      def find_column_def_by_id(defs, target_id)
+        return nil if target_id.blank?
+
+        defs.each do |col|
+          col_id = col[:id]
+
+          return col if col_id.present? && col_id.to_s == target_id.to_s
+
+          # Recursively search nested columns, even if current col has no id or doesn't match
+          nested_columns = col[:columns]
+
+          next unless nested_columns.present?
+
+          # Convert to array if needed (for edge cases where is_a?(Array) might fail)
+          array_columns = Array(nested_columns)
 
-          if col[:columns].is_a?(Array)
-            found = find_column_def_by_accessor(col[:columns], target_accessor)
+          if array_columns.any?
+            found = find_column_def_by_id(array_columns, target_id)
             return found if found
           end
         end

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -79,15 +79,44 @@ module Playbook
         cell_background_color(column).present?
       end
 
+      def cell_font_color(column)
+        return nil unless column[:accessor].present?
+
+        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
+        if orig_def && orig_def[:column_styling].is_a?(Hash) && orig_def[:column_styling][:font_color].present?
+          font_color = orig_def[:column_styling][:font_color]
+          if font_color.respond_to?(:call)
+            font_color.call(row)
+          else
+            font_color
+          end
+        end
+      end
+
       # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
       def cell_component_info(column, index, bg_color, font_color)
+        column_font_color = cell_font_color(column)
+        effective_font_color = column_font_color || font_color
+
         if has_custom_background_color?(column)
           custom_bg_color = cell_background_color(column)
           component_name = "background"
-          component_props = { background_color: custom_bg_color, tag: "td", classname: td_classname(column, index) }
+          component_props = {
+            background_color: custom_bg_color,
+            tag: "td",
+            classname: td_classname(column, index),
+          }
+          component_props[:html_options] = { style: { color: effective_font_color } } if effective_font_color.present?
         else
           component_name = "table/table_cell"
-          component_props = { html_options: { style: { "background-color": bg_color, color: font_color } }, classname: td_classname(column, index) }
+          style_hash = { "background-color": bg_color }
+          style_hash[:color] = effective_font_color if effective_font_color.present?
+          component_props = {
+            html_options: {
+              style: style_hash,
+            },
+            classname: td_classname(column, index),
+          }
         end
 
         { name: component_name, props: component_props }

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,3 +1,11 @@
+<% 
+  html_options_style = ""
+  if object.html_options[:style].is_a?(Hash)
+    html_options_style = object.html_options[:style].map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
+  elsif object.html_options[:style].is_a?(String)
+    html_options_style = object.html_options[:style]
+  end
+%>
 <% if object.image_url.present? %>
   <%= pb_content_tag(object.tag,
       style: "background-image: url('#{object.image_url}');
@@ -9,8 +17,8 @@
   <% end %>
 <% else %>
   <%= pb_content_tag(object.tag,
-      style: object.custom_background_color
+      style: "#{object.custom_background_color}#{html_options_style.present? ? "; #{html_options_style}" : ""}"
   ) do %>
     <%= content.presence %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_category.md

@@ -1 +1 @@
-Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.
+Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.