playbook_ui 15.6.0.pre.alpha.play261013050 → 15.6.0.pre.alpha.play263913015

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3d89ee926ed30d6e2b557a56d47ef4c4224fc2f5f9d0ec7e91c6fcc32789e0e
-  data.tar.gz: 7f354c72614822bace8289b4fb2e2e7039a00172eab31a203b2894298b5d64a2
+  metadata.gz: 526e2a456a333473009406a753d4a9513b99a33bef1a69e92410d94cdc23c3aa
+  data.tar.gz: 0b7ef7af65efedfcf5f2f1da554acd8e9d04ab95361feaf3425d5285171946b8
 SHA512:
-  metadata.gz: 85c0d2ad40ed0c74d43db5df10f1ca3e7159864fc300a1922773ad927510b1f4dc0b8bf756e3571abe5386ac51c46f804b61f04fd2349fadef32cb59ffc60a34
-  data.tar.gz: 184cbc2c3abc572492ef22ecedbc22f2cedf1217c06be4259396edbb00153e9dcf7c51154e24ae13cdb45b0a0a4e97b0e9cf32a578461f0ef7e45c35e897576a
+  metadata.gz: 1775155366eab8937dfac61095faa4a4281dfe3981a6839c97e7e35fb233716da18b8b1285d1a88ff8529c0a0560858c22808e0ba0df43102ff6cbdb02efc38e
+  data.tar.gz: 36ae7bbfcd1182ff97a85c018ecef7232877fabf931d30428fa8ac7b69890fd31e714f0bd9e644698665a644f5d14d2eaf8dcf2f88788050a6665fdec2aad9d4

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

@@ -63,11 +63,10 @@ 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
 
@@ -89,7 +88,7 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
-                  backgroundColor: cellBackgroundColor || (i === 0 && customRowStyle?.backgroundColor),
+                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
                   color: cellFontColor || customRowStyle?.fontColor,
             }}
           >

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

@@ -90,8 +90,6 @@ 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 &&
@@ -196,8 +194,6 @@ 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,98 +888,3 @@ 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_control_rails.html.erb

@@ -8,26 +8,16 @@
       accessor: "newEnrollments",
       label: "New Enrollments",
       column_styling: { 
-        cell_background_color: "error_subtle",
-        header_background_color: "error_subtle"
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
       }
     },
     {
       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",
@@ -36,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,7 +1 @@
-`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.
-
+`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/example.yml

@@ -26,8 +26,7 @@ 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: Column Styling Background Color
-  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
+  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 
@@ -76,8 +75,6 @@ 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,6 +45,4 @@ 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 AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.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_component = object.header_component_info(cell, cell_index, row_index) %>
-        <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
+        <% 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 %>
           <%= 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,59 +119,6 @@ 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
@@ -216,8 +163,6 @@ 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 = {
@@ -227,8 +172,6 @@ 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_timeline/_item.tsx

@@ -18,7 +18,6 @@ type ItemProps = {
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
-  showCurrentYear?: boolean,
 } & GlobalProps
 
 function isElementOfType<P>(
@@ -36,7 +35,6 @@ const TimelineItem = ({
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
-  showCurrentYear = false,
   ...props
 }: ItemProps): React.ReactElement => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
@@ -75,7 +73,6 @@ const TimelineItem = ({
               <DateStacked
                   align="center"
                   date={date}
-                  showCurrentYear={showCurrentYear}
                   size="sm"
               />
             )}

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

@@ -1 +1 @@
-Use the optional `showDate` prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.
+Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.

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

@@ -5,7 +5,6 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap
 
 
@@ -14,5 +13,4 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap

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

@@ -3,5 +3,4 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
 export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
-export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'
 

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -2,7 +2,7 @@
   <% if label %>
     <%= label %>
   <% else %>
-    <%= pb_rails("timeline/label", props: { date: date, show_current_year: show_current_year }) %>
+    <%= pb_rails("timeline/label", props: { date: date }) %>
   <% end %>
 
   <% if step %>

data/app/pb_kits/playbook/pb_timeline/item.rb

@@ -12,8 +12,6 @@ module Playbook
       prop :line_style, type: Playbook::Props::Enum,
                         values: %w[solid dotted],
                         default: "solid"
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
 
       renders_one :label
       renders_one :step

data/app/pb_kits/playbook/pb_timeline/label.html.erb

@@ -3,8 +3,7 @@
     <%= pb_rails("date_stacked", props: {
         date: object.date,
         size: "sm",
-        align: "center",
-        show_current_year: object.show_current_year
+        align: "center"
     }) %>
   <% else %>
     <%= content.presence %>

data/app/pb_kits/playbook/pb_timeline/label.rb

@@ -4,8 +4,6 @@ module Playbook
   module PbTimeline
     class Label < Playbook::KitBase
       prop :date
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
 
       def classname
         generate_classname("pb_timeline_item_left_block")

data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx

@@ -9,7 +9,6 @@ type TimelineLabelProps = {
   children?: React.ReactNode,
   className?: string,
   htmlOptions?: { [key: string]: any },
-  showCurrentYear?: boolean,
 } & GlobalProps
 
 const TimelineLabel: React.FC<TimelineLabelProps> = ({
@@ -17,7 +16,6 @@ const TimelineLabel: React.FC<TimelineLabelProps> = ({
   children,
   className,
   htmlOptions = {},
-  showCurrentYear = false,
   ...props
 }) => {
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -30,7 +28,6 @@ const TimelineLabel: React.FC<TimelineLabelProps> = ({
       {date && (
         <DateStacked align="center"
             date={date}
-            showCurrentYear={showCurrentYear}
             size="sm"
         />
       )}

data/app/pb_kits/playbook/pb_timeline/timeline.test.js

@@ -170,54 +170,3 @@ test('should pass showDate prop with Children', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('pb_timeline_kit_horizontal_with_date')
 })
-
-test('should pass showCurrentYear prop to items with date', () => {
-    const currentYear = new Date().getFullYear().toString()
-    render(
-        <Timeline
-            data={{ testid: testId }}
-            showDate
-        >
-            <Timeline.Item
-                date={new Date()}
-                icon="user"
-                iconColor="royal"
-                showCurrentYear
-            >
-                <TitleDetail
-                    detail="37-27 74th Street"
-                    title="Jackson Heights"
-                />
-            </Timeline.Item>
-        </Timeline>
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toBeInTheDocument()
-    const yearCaption = kit.querySelector('.pb_caption_kit_xs')
-    expect(yearCaption).toBeInTheDocument()
-    expect(yearCaption.textContent).toEqual(currentYear)
-})
-
-test('should not show current year by default', () => {
-    const currentYear = new Date().getFullYear().toString()
-    render(
-        <Timeline
-            data={{ testid: testId }}
-            showDate
-        >
-            <Timeline.Item
-                date={new Date()}
-                icon="user"
-                iconColor="royal"
-            >
-                <TitleDetail
-                    detail="37-27 74th Street"
-                    title="Jackson Heights"
-                />
-            </Timeline.Item>
-        </Timeline>
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toBeInTheDocument()
-    expect(kit).not.toHaveTextContent(currentYear)
-})