playbook_ui 14.21.2.pre.alpha.PLAY18938263 → 14.21.2.pre.alpha.PLAY21318324

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 79e1418032e3a7ddebd1c367b0623b34c597d5f3bdd150dcf1b674fc37249634
-  data.tar.gz: 745eed5d73220bcf2599935c70f19a103c52344f640afad7ad9fb0baceba5e79
+  metadata.gz: c17abab576d5fd7c20055de8ccd116937d25c593db8bd741469855415781fe06
+  data.tar.gz: e8150dced7379d9fd97511d3bcbd847b12af8efde286c5810cbfb7a9e656428f
 SHA512:
-  metadata.gz: 3e048fea08b7564b2886bcad5151b1528a92f55e35bd7661fc058582be2b64851353f9c398634021197e860550ea0f7cb13d0bafefc7e5b1a9bc92ee15c7d431
-  data.tar.gz: a34cc6f295dcf69a9315853f1ba9c079154b83cd4f94e49b06ffbb810d405b522850ebd4673843ae580b862522cd038ddc4acfd4f05aeb3917b06ad61ec80225
+  metadata.gz: fec56b58208ddb3cc23e1c614ce43c8ab9bb05e47ed8f2c7a28e4aa851d2e5a1155177229fddca90ecad1950e34729f1b76a9fcae01f407e88841b54d6b47180
+  data.tar.gz: ec52041b049419fd5027839e93e67beb4f006fdfb7dfef230fa9f7d9c6a94f8d6251d4dec33b91afa21aeab56295284229d0bcc55be40c828498f7a845823981

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

@@ -19,6 +19,7 @@ interface CustomCellProps {
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
+  customStyle?: GenericObject
 } 
 
 export const CustomCell = ({
@@ -28,6 +29,7 @@ export const CustomCell = ({
   value,
   customRenderer,
   selectableRows,
+  customStyle = {},
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
@@ -43,7 +45,7 @@ export const CustomCell = ({
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
-    <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
+    <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
       <Flex 
           alignItems="center" 
           columnGap="xs"
@@ -65,6 +67,7 @@ export const CustomCell = ({
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
+              style={{ color: customStyle?.expandButtonColor }}
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"

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

@@ -27,6 +27,7 @@ const TableCellRenderer = ({
   loading = false,
   stickyLeftColumn,
   columnPinning,
+  customRowStyle,
   columnDefinitions,
 }: {
   row: Row<GenericObject>
@@ -34,6 +35,7 @@ const TableCellRenderer = ({
   loading?: boolean | string
   stickyLeftColumn?: string[]
   columnPinning: { left: string[] }
+  customRowStyle?: GenericObject
   columnDefinitions?: {[key:string]:any}[]
 }) => {
   return (
@@ -74,6 +76,8 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
+                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
+                  color: customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -107,6 +111,7 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
+    rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
 
@@ -171,6 +176,7 @@ export const RegularTableView = ({
         const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
+        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -189,6 +195,7 @@ export const RegularTableView = ({
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
+                style={{backgroundColor: customRowStyle?.backgroundColor, color: customRowStyle?.fontColor}}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -206,6 +213,7 @@ export const RegularTableView = ({
                   collapsibleTrail={collapsibleTrail}
                   columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
+                  customRowStyle={customRowStyle}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -32,6 +32,7 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
+  rowStyling?: GenericObject;
 }
 
 export function useTableState({
@@ -49,6 +50,7 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
+  rowStyling
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
@@ -102,7 +104,8 @@ export function useTableState({
           column.customRenderer,
           isFirstColumn,
           onRowToggleClick,
-          selectableRows
+          selectableRows,
+          rowStyling
         );
       }
 
@@ -165,7 +168,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
+    getRowId: (selectableRows || pinnedRows || rowStyling) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -17,7 +17,8 @@ export const createCellFunction = (
   customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element,
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
-  selectableRows?: boolean
+  selectableRows?: boolean,
+  rowStyling?: GenericObject
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -28,6 +29,7 @@ export const createCellFunction = (
     getValue: Getter<string>
   }) => {
     const rowData = row.original;
+    const customStyle = rowStyling?.length > 0 && rowStyling?.find((s:GenericObject) => s?.rowId === row.id);
 
     if (isFirstColumn) {
       switch (row.depth) {
@@ -35,6 +37,7 @@ export const createCellFunction = (
           return (
             <CustomCell
                 customRenderer={customRenderer}
+                customStyle={customStyle}
                 getValue={getValue}
                 onRowToggleClick={onRowToggleClick}
                 row={row}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -621,6 +621,23 @@
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }
 
+  // For Rails, we can't target the &:last-child since collapsed rows are display: none;
+  // With JS, we add a .last-visible-row class and add rounded corners to bottom row
+  .last-visible-row {
+    td, .pb_table_td {
+      border-width: 0 0 1px 0;
+
+      &:first-child {
+        border-radius: 0 0 0 4px;
+        border-width: 0 0 1px 1px;
+      }
+      &:last-child {
+        border-radius: 0 0 4px 0;
+        border-width: 0 1px 1px 0;
+      }
+    }
+  }
+
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -57,6 +57,7 @@ type AdvancedTableProps = {
     onChange?: (value: RowPinningState) => void;
   };
   responsive?: "scroll" | "none",
+  rowStyling?: GenericObject[],
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
@@ -98,6 +99,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     pinnedRows,
     responsive = "scroll",
+    rowStyling,
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
@@ -144,6 +146,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
+    rowStyling
   });
 
   // Initialize table actions
@@ -313,6 +316,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}
+            rowStyling={rowStyling}
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}

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

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable, Pill } from "playbook-ui"
+import { AdvancedTable, Pill, colors } from "playbook-ui"
 
 global.ResizeObserver = class {
   observe() {}
@@ -632,4 +632,28 @@ test("columnStyling.cellAlignment sets each <td> align attribute as expected", (
 
   const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
   expect(firstEnrollmentCell).toHaveAttribute("align", "left");
-});
+});
+
+test("rowStyling prop works as expected", () => {
+  const rowStyling = [
+  {
+    rowId: "1",
+    backgroundColor: colors.white,
+    fontColor: colors.black
+  },
+];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        rowStyling={rowStyling}
+        tableData={MOCK_DATA_WITH_ID}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const tableBody = kit.querySelector('tbody')
+  const row1 = tableBody.querySelector('tr:nth-child(1)') 
+  expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
+})

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

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -55,4 +55,4 @@
   },
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
+<%= pb_rails("advanced_table", props: { id: "loading_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>

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

@@ -0,0 +1,64 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+import { colors } from "playbook-ui"
+
+const AdvancedTableRowStyling = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+const rowStyling = [
+  {
+    rowId: "1",
+    backgroundColor: colors.warning,
+  },
+  {
+    rowId: "8",
+    backgroundColor: colors.category_1,
+    fontColor: colors.white,
+    expandButtonColor: colors.white,
+  },
+];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          rowStyling={rowStyling}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableRowStyling

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

@@ -0,0 +1,7 @@
+The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `rowStyling` gives you 3 optional controls:
+
+- `backgroundColor` : use this to control the background color of the row.
+- `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
+- `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+
+**NOTE:** Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.

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

@@ -47,14 +47,14 @@ const CustomActions = () => {
       <CircleIconButton
           icon="file-csv"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be exported!`)
+            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be exported!')
           }
           variant="link"
       />
       <CircleIconButton
           icon="trash-alt"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be deleted!`)
+            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be deleted!')
           }
           variant="link"
         />

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

@@ -88,10 +88,11 @@ actions = [
     if (!selectedRowIds || selectedRowIds.length === 0) {
       alert('No Selection Made');
     } else {
+      const selectedRowsString = selectedRowIds.join(', ');
       if (actionType === 'export') {
-        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
+        alert('Row ids ' + selectedRowsString + ' will be exported!');
       } else if (actionType === 'delete') {
-        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
+        alert('Row ids ' + selectedRowsString + ' will be deleted!');
       }
     }
   };

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

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

@@ -59,5 +59,6 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers

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

@@ -34,5 +34,6 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
+export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
-export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
+export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'

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

@@ -266,6 +266,25 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.updateTableSelectedRowsAttribute();
       });
     }
+    this.addBorderRadiusOnLastVisibleRow()
+  }
+
+  addBorderRadiusOnLastVisibleRow() {
+    const parentElement = this.element.closest('.pb_advanced_table');
+    
+    const table = document.getElementById(parentElement.id);
+
+    if (table) {
+      const visibleRows = table.querySelectorAll('tr.is-visible, tr:not(.toggle-content)');
+  
+      visibleRows.forEach(row => row.classList.remove('last-visible-row'));
+  
+      const lastVisibleRow = visibleRows[visibleRows.length - 1];
+
+      if (lastVisibleRow) {
+        lastVisibleRow.classList.add('last-visible-row');
+      }
+    }
   }
 
 
@@ -367,6 +386,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       row.classList.toggle("bg-silver", !isVisible);
       row.classList.toggle("bg-white", isVisible);
     }
+
+    this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {