playbook_ui 14.21.2.pre.alpha.PLAY2005useClickpropreact8411 → 14.21.2.pre.alpha.PLAY2018verticalBordertableheaderborders8316

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

@@ -63,30 +63,11 @@
     width: 100%;
   }
 
-  // Virtualized Table and Rows for Infinite Scroll
-  scrollbar-gutter: stable right-edges;
-  .virtualized-header-row-header {
-    width: 100% !important;
-    .table-header-cells:first-child {
-      min-width: 180px;
-    }
-  }
-
-  .virtualized-footer {
-    width: 100% !important;
-    td {
-      border-bottom-left-radius: 4px !important;
-      border-bottom-right-radius: 4px !important;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
+  // Virtualized table styles
   .virtualized-table-row {
     display: table !important;
     table-layout: fixed !important;
-    box-sizing: border-box !important;
+    width: 100% !important;
 
     td {
       display: table-cell !important;
@@ -123,7 +104,7 @@
 
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
-  }
+    }
   
 
   .row-selection-actions-card {
@@ -212,6 +193,7 @@
 
     // Fix virtualized row borders
     tr.virtualized-table-row {
+      border-bottom: 1px solid $border_light;
 
       &.bg-silver {
         td:first-child {
@@ -624,16 +606,6 @@
         td.sticky-left {
           border-right: 1px solid $border_light !important;
         }
-        // Virtualized Table in Responsive Styles
-        .virtualized-header,
-        .virtualized-header-row-header,
-        .virtualized-table-row,
-        .virtualized-footer {
-          border-right: 1px solid $border_light !important;
-          .table-header-cells:first-child {
-            box-shadow: 0 0 10px 0 rgba($shadow, 0.16) !important;
-          }
-        }
       }
     }
   }

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

@@ -57,7 +57,6 @@ type AdvancedTableProps = {
     onChange?: (value: RowPinningState) => void;
   };
   responsive?: "scroll" | "none",
-  rowStyling?: GenericObject[],
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
@@ -99,7 +98,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     pinnedRows,
     responsive = "scroll",
-    rowStyling,
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
@@ -146,7 +144,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
-    rowStyling
   });
 
   // Initialize table actions
@@ -269,29 +266,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   // Visibility flag for action bar
   const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
 
-  // The actual Main <Table /> element
-  const tableElement = (
-    <Table
-        className={`${loading ? "content-loading" : ""}`}
-        dark={dark}
-        dataTable
-        numberSpacing="tabular"
-        responsive="none"
-        {...tableProps}
-    >
-      {children ? (
-        children
-      ) : (
-        <>
-          <TableHeader />
-          <TableBody   
-              isFetching={isFetching}
-          />
-        </>
-      )}
-    </Table>
-  )
-
   return (
     <>
       {/* Top Pagination */}
@@ -339,7 +313,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}
-            rowStyling={rowStyling}
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}
@@ -349,7 +322,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             table={table}
             tableContainerRef={tableWrapperRef}
             toggleExpansionIcon={toggleExpansionIcon}
-            totalAvailableCount={fullData.length}
             virtualizedRows={virtualizedRows}
         >
           <React.Fragment>
@@ -361,14 +333,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
-            {/* Virtualized wrapper div only if virtualizedRows is true */}
-            {virtualizedRows ? (
-              <div style={{ overflow: 'auto', width: '100%' }}>
-                {tableElement}
-              </div>
-            ) : (
-              tableElement
-            )}
+            {/* Main Table */}
+            <Table
+                className={`${loading ? "content-loading" : ""}`}
+                dark={dark}
+                dataTable
+                numberSpacing="tabular"
+                responsive="none"
+                {...tableProps}
+            >
+              {children ? (
+                children
+              ) : (
+                <>
+                  <TableHeader />
+                  <TableBody />
+                </>
+              )}
+            </Table>
           </React.Fragment>
         </AdvancedTableProvider>
 

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, colors } from "playbook-ui"
+import { AdvancedTable, Pill } from "playbook-ui"
 
 global.ResizeObserver = class {
   observe() {}
@@ -632,47 +632,4 @@ test("columnStyling.cellAlignment sets each <td> align attribute as expected", (
 
   const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
   expect(firstEnrollmentCell).toHaveAttribute("align", "left");
-});
-
-test("renders virtualized table rows and header", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA_WITH_ID}
-        virtualizedRows
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const virtualizedHeader = kit.querySelector('.virtualized-header-row-header')
-  expect(virtualizedHeader).toBeInTheDocument()
-
-  const virtualizedRows = kit.querySelectorAll('.virtualized-table-row')
-  expect(virtualizedRows.length).toBeLessThan(MOCK_DATA_WITH_ID.length)
-})
-
-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_pinned_rows.jsx

@@ -35,7 +35,7 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
+  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
 
   return (
     <div>

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

@@ -1,7 +1,5 @@
-Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
 
-**NOTE:** 
+**NOTE:** This prop is in Beta. Current Requirements for V1:
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
-- Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
-- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
-- For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 
+- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually

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

@@ -59,7 +59,5 @@ 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
-  - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -34,7 +34,5 @@ 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 AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
+export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -5,20 +5,17 @@ const DropdownBlankSelection = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     }
-  ];  
+  ];
 
   return (
   <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx

@@ -6,18 +6,15 @@ import Dropdown from '../../pb_dropdown/_dropdown'
 const options = [
     {
         label: "United States",
-        value: "unitedStates",
-        id: "us"
+        value: "United States",
     },
     {
         label: "Canada",
-        value: "canada",
-        id: "ca"
+        value: "Canada",
     },
     {
         label: "Pakistan",
-        value: "pakistan",
-        id: "pk"
+        value: "Pakistan",
     }
 ]
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -6,18 +6,15 @@ const DropdownDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx

@@ -5,20 +5,17 @@ const DropdownDefaultValue = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     }
-  ];
+  ];  
 
   return (
   <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -10,20 +10,17 @@ const DropdownError = (props) => {
     const options = [
         {
             label: "United States",
-            value: "unitedStates",
-            id: "us"
+            value: "United States",
         },
         {
             label: "Canada",
-            value: "canada",
-            id: "ca"
+            value: "Canada",
         },
         {
             label: "Pakistan",
-            value: "pakistan",
-            id: "pk"
+            value: "Pakistan",
         }
-    ];  
+    ]
 
     return (
         <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx

@@ -6,48 +6,39 @@ const DropdownMultiSelect = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
+        label: "United Kingdom",
+        value: "United Kingdom",
     },  
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     },
     {
       label: "India",
-      value: "india",
-      id: "in"
+      value: "India",
     },
     {
       label: "Australia",
-      value: "australia",
-      id: "au"
+      value: "Australia",
     },
     {
       label: "New Zealand",
-      value: "new Zealand",
-      id: "nz"
+      value: "New Zealand",
     },
     {
       label: "Italy",
-      value: "italy",
-      id: "it"
+      value: "Italy",
     },
     {
       label: "Spain",
-      value: "spain",
-      id: "es"
+      value: "Spain",
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx

@@ -6,48 +6,39 @@ const DropdownMultiSelectDisplay = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
+        label: "United Kingdom",
+        value: "United Kingdom",
     },  
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     },
     {
       label: "India",
-      value: "india",
-      id: "in"
+      value: "India",
     },
     {
       label: "Australia",
-      value: "australia",
-      id: "au"
+      value: "Australia",
     },
     {
       label: "New Zealand",
-      value: "new Zealand",
-      id: "nz"
+      value: "New Zealand",
     },
     {
       label: "Italy",
-      value: "italy",
-      id: "it"
+      value: "Italy",
     },
     {
       label: "Spain",
-      value: "spain",
-      id: "es"
+      value: "Spain",
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'unitedsStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
-    { label: 'India', value: 'india', id: 'in' },
-    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
-    { label: 'Australia', value: 'australia', id: 'au' },
-    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
-    { label: 'Germany', value: 'germany', id: 'de' },
-    { label: 'France', value: 'france', id: 'fr' },
-    { label: 'Italy', value: 'italy', id: 'it' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'unitedsStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
-    { label: 'India', value: 'india', id: 'in' },
-    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
-    { label: 'Australia', value: 'australia', id: 'au' },
-    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
-    { label: 'Germany', value: 'germany', id: 'de' },
-    { label: 'France', value: 'france', id: 'fr' },
-    { label: 'Italy', value: 'italy', id: 'it' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'unitedsStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
-    { label: 'India', value: 'india', id: 'in' },
-    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
-    { label: 'Australia', value: 'australia', id: 'au' },
-    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
-    { label: 'Germany', value: 'germany', id: 'de' },
-    { label: 'France', value: 'france', id: 'fr' },
-    { label: 'Italy', value: 'italy', id: 'it' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
   ]
 %>