playbook_ui 15.7.0.pre.rc.1 → 15.7.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf0f6f7571de0cabb66d690a56ce812b601ffbffd443a43235e924f6cca10121
-  data.tar.gz: cfd04ab74ad1162ef71c1ddda6ac4bc7110d3545f93a6668f0639ebaaf01e5b3
+  metadata.gz: 371d5a4b2875ab575224762ed34aef7597086445494a2785824e9bbf9fff417d
+  data.tar.gz: e1738e75556fbb0b0b1682a751adc0d062b0d0bfc9ef02a5aad48f72d0815011
 SHA512:
-  metadata.gz: 1f1a81cc9d32200dfcb1921d8e3d893a13d3c53a1ed2c7713c1e7788c9e2838ae7625e8ee437102b6dac490c513ca32867375229eb5ed673def5d7b44e1c7550
-  data.tar.gz: 3b4d3326a082e1a66ba8cf581d9126a4444be187da61180acbfa732cd6a2cb2dd6662903b76659ba26af2f06b0a211201019467d4eb965a7728f0b96c36a4344
+  metadata.gz: 8e63fe0139eb3b4af379fe345fabcd3bbff1cecf8fef4f166b98d3255da33407a65ae8b8aa87e6584a581a13f88333026255d52e01bda184945ff89527a77231
+  data.tar.gz: 671a72c82ee54d6050bcb1ff5c76b3b18427e96fe68ef813a28df5aab424607c89f557130f3bcfb0b0b00711df63cfa78624f187e6ed6ed1fc43332d15be3b5b

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

@@ -63,10 +63,11 @@ const TableCellRenderer = ({
 
         const { column } = cell;
 
-        // Find the “owning” colDefinition by accessor. Needed for multi column logic
+        // 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 cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 
@@ -88,7 +89,7 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
-                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
+                  backgroundColor: cellBackgroundColor || (i === 0 && customRowStyle?.backgroundColor),
                   color: cellFontColor || customRowStyle?.fontColor,
             }}
           >

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

@@ -90,6 +90,8 @@ export const TableHeaderCell = ({
    : undefined
 
  const headerAlignment =   colDef?.columnStyling?.headerAlignment ?? colDef?.columnStyling?.headerAligment
+ const headerBackgroundColor = colDef?.columnStyling?.headerBackgroundColor
+ const headerFontColor = colDef?.columnStyling?.headerFontColor
 
   const isLeafColumn =
   header?.column.getLeafColumns().length === 1 &&
@@ -194,6 +196,8 @@ const isToggleExpansionEnabled =
         id={cellId}
         key={`${header?.id}-header`}
         style={{
+          backgroundColor: headerBackgroundColor,
+          color: headerFontColor,
           left: isPinnedLeft
             ? header?.index === 1 //Accounting for set min-width for first column
               ? '180px'

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

@@ -888,3 +888,98 @@ test("Sort icon renders with enableSort on individual columns", () => {
   expect(sortButton).toBeInTheDocument();
 });
 
+test("columnStyling.backgroundColor works as excpected", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { 
+        cellBackgroundColor: colors.error_subtle,
+      },
+    },
+    {
+      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({ backgroundColor: colors.error_subtle });
+});
+
+test("columnStyling.headerBackgroundColor works as excpected", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { 
+        headerBackgroundColor: colors.error_subtle,
+      },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
+  expect(firstEnrollmentHeader).toHaveStyle({ backgroundColor: colors.error_subtle });
+});
+
+test("columnStyling.headerFontColor works as excpected", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { 
+        headerFontColor: colors.white,
+      },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
+  expect(firstEnrollmentHeader).toHaveStyle({ color: colors.white });
+});

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

@@ -0,0 +1,43 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      column_styling: { 
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
+      }
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

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

@@ -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_background_control_rails.html.erb

@@ -8,16 +8,26 @@
       accessor: "newEnrollments",
       label: "New Enrollments",
       column_styling: { 
-        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
+        cell_background_color: "error_subtle",
+        header_background_color: "error_subtle"
       }
     },
     {
       accessor: "scheduledMeetings",
       label: "Scheduled Meetings",
+      column_styling: { 
+        cell_background_color: "info_subtle",
+      }
     },
     {
       accessor: "attendanceRate",
       label: "Attendance Rate",
+      column_styling: { 
+        cell_background_color: "info",
+        header_background_color: "info",
+        header_font_color: "white",
+        font_color: "white"
+      }
     },
     {
       accessor: "completedClasses",
@@ -26,10 +36,6 @@
     {
       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,7 @@
-`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.
+`column_styling` can also be used to control the background color on all cells in a given column. Use the following key/values pairs to achieve this:
+
+1)  `cell_background_color`:  use this to control the background color of all cells in the given column
+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
+3) `header_background_color`: use this to control the background color of the column header
+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.
+

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

@@ -0,0 +1,54 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+
+const AdvancedTableColumnStylingBackground = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      columnStyling:{cellBackgroundColor: colors.info_subtle},
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnStylingBackground

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

@@ -0,0 +1,9 @@
+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:
+
+1) `cellBackgroundColor`: use this to control the background color of all cells in the given column
+2) `headerBackgroundColor`: use this to control the background color of the column header
+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.
+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.
+
+
+

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

@@ -0,0 +1,80 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+
+const AdvancedTableColumnStylingBackgroundMulti = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+              columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+              columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+              columnStyling:{cellBackgroundColor: colors.info_subtle},
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnStylingBackgroundMulti

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

@@ -0,0 +1,3 @@
+The `columnStyling` prop can also be used to set background color for entire columns for the multi header variant as well. 
+
+It should be noted that `headerFontColor` and `headerBackgroundColor` in the multi header variant will only apply to the immediate header for the given column as shown here.

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

@@ -26,7 +26,8 @@ examples:
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Background Control using Column Styling
+  - advanced_table_background_control_rails: Column Styling Background Color
+  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 
@@ -75,6 +76,8 @@ examples:
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
+  - advanced_table_column_styling_background: Column Styling Background Color
+  - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -45,4 +45,6 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -5,8 +5,8 @@
         <%= object.render_select_all_header %>
       <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
-        <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
-        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
+        <% header_component = object.header_component_info(cell, cell_index, row_index) %>
+        <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>

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

@@ -119,6 +119,59 @@ module Playbook
         end
       end
 
+      # Get header background color from column styling
+      def header_background_color(cell)
+        original_def = find_original_column_def_for_cell(cell)
+        return nil unless original_def
+
+        original_def.dig(:column_styling, :header_background_color)
+      end
+
+      # Get header font color from column styling
+      def header_font_color(cell)
+        original_def = find_original_column_def_for_cell(cell)
+        return nil unless original_def
+
+        original_def.dig(:column_styling, :header_font_color)
+      end
+
+      # Check if header has custom background color
+      def has_custom_header_background_color?(cell)
+        cell[:header_background_color].present?
+      end
+
+      # Returns component info for header cell (uses background kit if custom bg color)
+      def header_component_info(cell, cell_index, row_index)
+        header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}"
+        classname = [th_classname(is_first_column: cell_index.zero?), ("last-header-cell" if cell[:is_last_in_group] && cell_index != 0)].compact.join(" ")
+
+        if has_custom_header_background_color?(cell)
+          component_name = "background"
+          component_props = {
+            background_color: cell[:header_background_color],
+            tag: "th",
+            classname: classname,
+          }
+          component_props[:html_options] = {
+            id: header_id,
+            colspan: cell[:colspan],
+            style: { color: cell[:header_font_color] },
+          }
+          component_props[:html_options][:style].delete(:color) unless cell[:header_font_color].present?
+        else
+          component_name = "table/table_header"
+          component_props = {
+            id: header_id,
+            colspan: cell[:colspan],
+            classname: classname,
+            sort_menu: cell[:accessor] ? cell[:sort_menu] : nil,
+          }
+          component_props[:html_options] = { style: { color: cell[:header_font_color] } } if cell[:header_font_color].present?
+        end
+
+        { name: component_name, props: component_props }
+      end
+
     private
 
       # Find the original column definition for a cell
@@ -163,6 +216,8 @@ module Playbook
           else
             raw_styling = col[:column_styling] || {}
             header_alignment = raw_styling[:header_alignment]
+            header_background_color = raw_styling[:header_background_color]
+            header_font_color = raw_styling[:header_font_color]
 
             colspan = 1
             cell_hash = {
@@ -172,6 +227,8 @@ module Playbook
               sort_menu: col[:sort_menu],
               is_last_in_group: is_last && current_depth.positive?,
               header_alignment: header_alignment,
+              header_background_color: header_background_color,
+              header_font_color: header_font_color,
             }
             cell_hash[:id] = col[:id] if col[:id].present?
             rows[current_depth] << cell_hash

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -61,7 +61,9 @@ type ContactProps = {
   data?: { [key: string]: string }
   dark?: boolean
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  iconEnabled?: boolean
   id?: string
+  unstyled?: boolean
 }
 
 const Contact = (props: ContactProps): React.ReactElement => {
@@ -74,7 +76,9 @@ const Contact = (props: ContactProps): React.ReactElement => {
     data = {},
     dark = false,
     htmlOptions = {},
+    iconEnabled = true,
     id,
+    unstyled = false,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -85,6 +89,51 @@ const Contact = (props: ContactProps): React.ReactElement => {
     className
   )
 
+  const formattedValue = formatContact(contactValue, contactType)
+  const content = (
+    <>
+      {iconEnabled && (contactType === 'email' ? (
+        <Icon 
+            className="svg-inline--fa envelope"
+            customIcon={envelopeIcon} 
+            dark={dark} 
+            fixedWidth 
+        />
+      ) : (
+        <Icon
+            dark={dark}
+            fixedWidth
+            icon={contactTypeMap[contactType] || 'phone'}
+        />
+      ))}
+      {iconEnabled ? ` ${formattedValue} ` : formattedValue}
+      {contactDetail && (
+        <Caption
+            dark={dark}
+            size="xs"
+            tag="span"
+            text={contactDetail}
+        />
+      )}
+    </>
+  )
+
+  // When unstyled, render just the content without Body wrapper
+  if (unstyled) {
+    return (
+      <span
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          id={id}
+      >
+        {content}
+      </span>
+    )
+  }
+
+  // Default styled mode with Body wrapper
   return (
     <div
         {...ariaProps}
@@ -95,33 +144,11 @@ const Contact = (props: ContactProps): React.ReactElement => {
     >
       <Body
           className="pb_contact_kit"
-          color={"light"} 
+          color="light" 
           dark={dark}
           tag="span"
       >
-          {contactType === 'email' ? (
-            <Icon 
-                className="svg-inline--fa envelope"
-                customIcon={envelopeIcon} 
-                dark={dark} 
-                fixedWidth 
-            />
-          ) : (
-            <Icon
-                dark={dark}
-                fixedWidth
-                icon={contactTypeMap[contactType] || 'phone'}
-            />
-          )}
-        {` ${formatContact(contactValue, contactType)} `}
-        {contactDetail && (
-          <Caption
-              dark={dark}
-              size="xs"
-              tag="span"
-              text={contactDetail}
-          />
-        )}
+        {content}
       </Body>
     </div>
   )