playbook_ui 14.24.0.pre.alpha.PLAY19989342 → 14.24.0.pre.alpha.PLAY23139411

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 59c17882526a3b72d9fc83804b03d9b16990cb101e1862b0e52b86302f1d2910
-  data.tar.gz: 2a8bcde09ad5af23d054ddba72d05dd55d18a592e84748435269a933456942ed
+  metadata.gz: e3d762bec279ed08c6f2c32e62d81d19ff9309898bd898b64b5ebbafa042746c
+  data.tar.gz: 9e9e7d6f94777f1770757559c95bb1e12ac8b4016cc48d84236278a9d8ab15dd
 SHA512:
-  metadata.gz: f6e0c7da6c2b966bef964121f3f25a0c4d5f141be242d977d173e14f063dd7c3dd96cb81eedd14bf6cfa06838719ad76470b5e76d5c9b8818d5314b7a4234e13
-  data.tar.gz: 95e0c86be7672a3370c39a60ccdcb2cd5e31112c921b407cea885baf651560869bef742c89716510a5f714f1b768b30472895da6f8f04ac2ac101839ce41082b
+  metadata.gz: 50d7e0dd26c65b9bbf45ecb7132b46deb8507e5d06d6c9e3c8ee0d3f49f26844184f69fdef2ee7baccda44f490c13cc2a4232d8d2f73c0ec35dea88f10149aed
+  data.tar.gz: 4709d36e634964f8a1a9b9fb1b7d8fe0893951a5b5fc2d2b83d55fcbe2e966a7a95e03be098891c6e7811704f9db4c54d1eb903e891d4cf0b1f8d71348ddef14

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

@@ -58,7 +58,9 @@ 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 paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
+        const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
+        
         return (
           <td
               align={cellAlignment}
@@ -68,6 +70,7 @@ const TableCellRenderer = ({
                 isPinnedLeft && 'pinned-left',
                 stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
                 isLastCell && 'last-cell',
+                paddingClass
               )}
               key={`${cell.id}-data`}
               style={{

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

@@ -113,7 +113,6 @@ export const TableHeaderCell = ({
     return visibleSiblings.at(-1) === header.column;
   })();
 
-
 const cellClassName = classnames(
   "table-header-cells",
   `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
@@ -122,7 +121,7 @@ const cellClassName = classnames(
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
    isLastHeaderCell ? "last-header-cell" : "",
   stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
-
+  colDef?.columnStyling?.headerPadding && `p_${colDef?.columnStyling?.headerPadding}`
 ); 
 
 const cellId = `${loading ? 

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

@@ -651,6 +651,36 @@ test("columnStyling.cellAlignment sets each <td> align attribute as expected", (
   expect(firstEnrollmentCell).toHaveAttribute("align", "left");
 });
 
+test("columnStyling.cellPadding sets cell padding", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { cellPadding: "none" },
+    },
+    {
+      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).toHaveClass('p_none')
+});
+
 test("renders virtualized table rows and header", () => {
   render(
     <AdvancedTable
@@ -694,6 +724,32 @@ test("rowStyling prop works as expected", () => {
   expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
 })
 
+test("rowStyling prop to allow padding control", () => {
+  const rowStyling = [
+  {
+    rowId: "1",
+    cellPadding: "lg"
+  },
+];
+
+  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)') 
+   const cells = row1.querySelectorAll("td");
+  cells.forEach((cell) => {
+    expect(cell.classList.contains("p_lg")).toBe(true);
+  });
+})
+
 test("Sort icon renders with enableSort on individual columns", () => {
   render(
     <AdvancedTable

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

@@ -0,0 +1,60 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import Background from '../../pb_background/_background'
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTablePaddingControl = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{cellPadding: "none"},
+      customRenderer: (row, value) => (
+        <Background 
+            backgroundColor={row.original.newEnrollments > 20 ? "success_secondary" : "warning_secondary"}
+            padding="xs" 
+        >
+         {value}
+        </Background>
+      ), 
+
+    },
+    {
+      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",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTablePaddingControl

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

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

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

@@ -0,0 +1,57 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTablePaddingControlPerRow = (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",
+    cellPadding:"md"
+  },
+];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          rowStyling={rowStyling}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTablePaddingControlPerRow

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

@@ -0,0 +1 @@
+`rowStyling` can also be used to control padding on all cells in a given row via the use of the `cellPadding` key/value pair as shown here. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

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

@@ -66,8 +66,10 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
+  - 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_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -42,4 +42,6 @@ export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_c
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
 export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
 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 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'

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -19,7 +19,6 @@ type PbDateProps = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   showDayOfWeek?: boolean;
-  showCurrentYear?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
@@ -36,7 +35,6 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     htmlOptions = {},
     id,
     showDayOfWeek = false,
-    showCurrentYear = false,
     showIcon = false,
     size = "md",
     unstyled = false,
@@ -92,7 +90,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 {month} {day}
               </span>
 
-              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
+              {currentYear != year && <span>{`, ${year}`}</span>}
             </span>
           </>
         : size == "md" || size == "lg"
@@ -126,7 +124,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <span>
                 {month} {day}
               </span>
-              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
+              {currentYear != year && <span>{`, ${year}`}</span>}
             </Title>
             )
           : (
@@ -160,7 +158,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 <Caption dark={dark}
                     tag="span">
                   {month} {day}
-                  {(currentYear !== year || showCurrentYear) && <>{`, ${year}`}</>}
+                  {currentYear != year && <>{`, ${year}`}</>}
                 </Caption>
               </>
             )}

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -13,8 +13,8 @@
     <% end %>
 
     <!-- month day, year -->
-    <%# if not current year or show_current_year is false %>
-    <% if object.year.to_s == DateTime.now.year.to_s && !object.show_current_year %>
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
       <span><%= "#{object.month} #{object.day}" %></span>
     <%# if is current year %>
     <% else %>
@@ -44,8 +44,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year or show_current_year is false %>
-    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year  %>
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
       <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
     <%# if is current year %>
     <% else %>
@@ -74,8 +74,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year or show_current_year is false %>
-    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year %>
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
       <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
     <%# if is current year %>
     <% else %>

data/app/pb_kits/playbook/pb_date/date.rb

@@ -11,8 +11,6 @@ module Playbook
                        default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean,
                               default: false
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg md sm xs],
                   default: "md"

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

@@ -5,14 +5,12 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
-  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
-  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   swift:

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

@@ -2,4 +2,3 @@ export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
 export { default as DateUnstyled } from './_date_unstyled.jsx'
-export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'