playbook_ui 13.34.1 → 14.0.0.pre.alpha.PLAY14113475

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 73aa3f12a7f31e66a21a5928c062ef1c6438b8009d9466efce235eb93c791b55
-  data.tar.gz: b8cabf7a1af7192953baeb1b4dee1266124f6a74f67a073286463f6f6bd290f3
+  metadata.gz: 256935cc0094e0047461f73eb8aa9a359414951eade45a2a3c82507ba9430d19
+  data.tar.gz: 7d173634a0c2134da2756f3c16435c48662570980fa226a0bbe8bb256950620e
 SHA512:
-  metadata.gz: '0038ea68527eeb338f99aee1b485aab9671625b24ebf9f8493d291669e7d0d6423e2166f19651f752fc2895c3ff09ccc35f2479981fd641a6c83647394213da2'
-  data.tar.gz: 0f14caa5502511778773d8857e2c1c8f1780efa0a716f7970b7fde2f3340f119ff77fd36ff3daa85cc7bb510807e471b40ffca22efbe0a6de8f776d861f511f3
+  metadata.gz: 6861772c1549b55563f7d3c79026f56cb930297ef756e02a5b9adc7df3300b31dc8286df6188b800023c23870eb90a62e4b7fc14f0fcfecdc1aa3769deb77a2f
+  data.tar.gz: 5b80990b1a26b4aa82392837d1c1a8c54304f3371e527beb8e7786ce54bb1620dab12804798855b9d43e4958f7586c10fd5e338d8f2b2adbccb26fe1d691c376

data/app/pb_kits/playbook/_playbook.scss

@@ -104,20 +104,20 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import './utilities/mixins';
-@import './utilities/spacing';
-@import './utilities/cursor';
-@import './utilities/max_width';
-@import './utilities/positioning';
-@import './utilities/number_spacing';
-@import './utilities/shadow';
-@import './utilities/line_height';
-@import './utilities/display';
-@import './utilities/flexbox';
-@import './utilities/focus';
-@import './utilities/border_radius';
-@import './utilities/hover';
-@import './utilities/text_align';
-@import './utilities/overflow';
-@import './utilities/truncate';
-@import './utilities/vertical_align';
+@import 'utilities/mixins';
+@import 'utilities/spacing';
+@import 'utilities/cursor';
+@import 'utilities/max_width';
+@import 'utilities/positioning';
+@import 'utilities/number_spacing';
+@import 'utilities/shadow';
+@import 'utilities/line_height';
+@import 'utilities/display';
+@import 'utilities/flexbox';
+@import 'utilities/focus';
+@import 'utilities/border_radius';
+@import 'utilities/hover';
+@import 'utilities/text_align';
+@import 'utilities/overflow';
+@import 'utilities/truncate';
+@import 'utilities/vertical_align';

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

@@ -21,6 +21,7 @@ type TableHeaderCellProps = {
   handleExpandOrCollapse?: () => void
   header?: Header<GenericObject, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
+  isPinnedLeft?: boolean
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -31,10 +32,11 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
+  isPinnedLeft = false,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
-  const { sortControl } = useContext(AdvancedTableContext)
+  const { sortControl, responsive } = useContext(AdvancedTableContext)
 
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
@@ -49,7 +51,8 @@ export const TableHeaderCell = ({
 
 const cellClassName = classnames("table-header-cells", 
   `${isChrome() ? "chrome-styles" : ""}`, 
-  `${enableSorting ? "table-header-cells-active" : ""}`
+  `${enableSorting ? "table-header-cells-active" : ""}`,
+  { 'pinned-left': responsive === "scroll" && isPinnedLeft },
 )
 
 const cellId = `${loading ? 

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -37,17 +37,22 @@ export const TableBody = ({
     columnDefinitions,
     enableToggleExpansion,
     handleExpandOrCollapse,
+    isPinnedLeft = false,
     inlineRowLoading,
     loading,
+    responsive,
     table,
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
     buildCss("pb_advanced_table_body"),
+    { 'pinned-left': responsive === "scroll" && isPinnedLeft },
     globalProps(props),
     className
   )
 
+  const columnPinning = table.getState().columnPinning;
+
   return (
     <>
       <tbody className={classes} 
@@ -73,38 +78,37 @@ export const TableBody = ({
                     table={table}
                 />
               )}
+            <tr
+                className={`${rowBackground ? "bg-silver" : "bg-white"} ${
+                  row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
+              }`}
+                id={`${row.index}-${row.id}-${row.depth}-row`}
+            >
+              {row.getVisibleCells().map((cell, i) => {
+                const isPinnedLeft = columnPinning.left.includes(cell.column.id)
 
-              <tr
-                  className={`${rowBackground ? "bg-silver" : "bg-white"} ${
-                    row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
-                  }`}
-                  id={`${row.index}-${row.id}-${row.depth}-row`}
-              >
-                {row.getVisibleCells().map((cell, i) => (
+                return (
                   <td
                       align="right"
-                      className={`${cell.id}-cell position_relative ${
-                      isChrome() ? "chrome-styles" : ""
-                      }`}
+                      className={classnames(
+                        `${cell.id}-cell position_relative`,
+                        isChrome() ? "chrome-styles" : "",
+                        isPinnedLeft && 'pinned-left'
+                      )}
                       key={`${cell.id}-data`}
                   >
-                    {collapsibleTrail &&
-                      i === 0 &&
-                      row.depth > 0 &&
-                      renderCollapsibleTrail(row.depth)}
+                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>
                       {loading ? (
                         <LoadingCell />
                       ) : (
-                        flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )
+                        flexRender(cell.column.columnDef.cell, cell.getContext())
                       )}
                     </span>
                   </td>
-                ))}
-              </tr>
+                )
+              })}
+            </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
               {isDataLoading ? (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -42,6 +42,7 @@ export const TableHeader = ({
     className
   )
 
+  const columnPinning = table.getState().columnPinning;
 
   return (
     <>
@@ -51,18 +52,22 @@ export const TableHeader = ({
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
-            {headerGroup.headers.map(header => (
-              <TableHeaderCell
-                  enableSorting={enableSorting}
-                  enableToggleExpansion={enableToggleExpansion}
-                  handleExpandOrCollapse={handleExpandOrCollapse}
-                  header={header}
-                  headerChildren={children}
-                  key={`${header.id}-header`}
-                  loading={loading}
-                  sortIcon={sortIcon}
-              />
-            ))}
+            {headerGroup.headers.map(header => {
+              const isPinnedLeft = columnPinning.left.includes(header.id)
+              return (
+                <TableHeaderCell
+                    enableSorting={enableSorting}
+                    enableToggleExpansion={enableToggleExpansion}
+                    handleExpandOrCollapse={handleExpandOrCollapse}
+                    header={header}
+                    headerChildren={children}
+                    isPinnedLeft={isPinnedLeft}
+                    key={`${header.id}-header`}
+                    loading={loading}
+                    sortIcon={sortIcon}
+                />
+              )
+            })}
           </tr>
         ))}
       </thead>

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

@@ -5,9 +5,11 @@
 @import "./scss_partials/loading";
 @import "./scss_partials/pseudo_states";
 @import "./scss_partials/chrome_styles";
+@import "../tokens/screen_sizes";
+@import "../tokens/shadows";
 
 .pb_advanced_table {
-  $border-color: 1px solid $border_light !important;
+  $border-color: 1px solid $border_light;
 
   [id$="-span"] {
     word-wrap: normal;
@@ -108,6 +110,51 @@
     height: auto;
   }
 
+  // Responsive Styles
+  @media only screen and (max-width: $screen-xl-min) {  
+    &[class*="table-responsive-scroll"] {
+      border-radius: 4px;
+      box-shadow: 1px 0 0 0px $border_light,
+                  -1px 0 0 0px $border_light;
+      display: block;
+      overflow-x: auto;
+      width: 100%;
+      [class^=pb_table].table-sm.table-card thead tr th:first-child,
+      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
+        border-left-width: 0px;
+      }
+      [class^=pb_table].table-sm.table-card thead tr th:last-child,
+      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+        border-right-width: 0px;
+      }
+      [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
+      [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
+          border-radius: 0 0 0 0;
+        }
+      .table-header-cells:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      [class*="pinned-left"] {
+          background-color: $white;
+          box-shadow: $shadow_deep !important;
+          position: sticky !important;
+          left: 0;
+          z-index: 2;
+      }
+      .bg-silver td:first-child {
+        background-color: lighten($silver, $opacity_7);
+      }
+      .bg-white td:first-child {
+          background-color: $white;
+      }
+    }
+  }
+  @media only screen and (min-width: $screen-xl-min) {
+    &[class*="table-responsive-scroll"] {
+      overflow-x: visible;
+    }
+  }
+
   &.dark {
     .bg-white {
       background: $bg_dark_card;
@@ -151,5 +198,43 @@
         ) !important;
       }
     }
+    // Dark Mode Responsive Styles
+    @media only screen and (max-width: $screen-xl-min) {
+      &[class*="table-responsive-scroll"] {
+        border-radius: 4px;
+        box-shadow: 1px 0 0 0px $border_dark,
+                    -1px 0 0 0px $border_dark;
+        display: block;
+        overflow-x: scroll;
+        width: 100%;
+        [class^=pb_table].table-sm.table-card thead tr th:first-child,
+        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
+          border-left-width: 0px;
+        }
+        [class^=pb_table].table-sm.table-card thead tr th:last-child,
+        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+          border-right-width: 0px;
+        }
+        [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
+        [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
+            border-radius: 0 0 0 0;
+        }
+        .table-header-cells:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        [class*="pinned-left"] {
+          background: $bg_dark_card;
+          border-right: $border_dark;
+          box-shadow: $shadow_deep !important;
+          position: sticky !important;
+        }
+        .bg-silver td:first-child {
+          background-color: $bg_dark;
+        }
+        .bg-white td:first-child {
+          background-color: $bg_dark_card;
+        }
+      }
+    }
   }
 }

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

@@ -42,6 +42,7 @@ type AdvancedTableProps = {
   loading?: boolean | string
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
+  responsive?: "scroll" | "none",
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
@@ -66,6 +67,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
+    responsive = "scroll",
     sortControl,
     tableData,
     tableOptions,
@@ -132,7 +134,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-    columnDefinitions.map((column) => {
+      columnDefinitions.map((column) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
@@ -209,6 +211,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
+    `table-responsive-${responsive}`,
     globalProps(props),
     className
   )
@@ -229,6 +232,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             handleExpandOrCollapse,
             inlineRowLoading,
             loading,
+            responsive,
             setExpanded,
             sortControl,
             table,

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 } from "../"
+import { AdvancedTable } from "playbook-ui"
 
 const MOCK_DATA = [
   {
@@ -432,4 +432,34 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   rowButton.click()
   const inlineLoading = kit.querySelector(".fa-spinner")
   expect(inlineLoading).toBeInTheDocument()
+})
+
+test("responsive prop functions as expected", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        responsive="scroll"
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
+})
+
+test("responsive none prop functions as expected", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        responsive="none"
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "../../"
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCollapsibleTrail = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "../../"
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableDefault = (props) => {

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "../../"
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableExpandedControl = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "../.."
+import { AdvancedTable } from "playbook-ui"
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
 
 const AdvancedTableInlineRowLoading = (props) => {

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "../../"
-import { Button } from "../../"
+import { AdvancedTable } from "playbook-ui"
+import { Button } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableLoading = (props) => {

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

@@ -0,0 +1,67 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import Title from '../../pb_title/_title'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableResponsive = (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",
+    },
+  ]
+
+  return (
+    <div>
+      <Title
+          size={4}
+          text="Not Responsive"
+          {...props}
+      />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          responsive="none"
+          tableData={MOCK_DATA}
+          {...props}
+      />
+      <Title
+          paddingTop="sm"
+          size={4}
+          text="Responsive as Default"
+          {...props}
+      />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableResponsive

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

@@ -0,0 +1 @@
+The `responsive` prop can be set to "scroll" or "none", and is set to "scroll" by default to make Advanced Tables responsive. To disable, set `responsive="none"`.

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "../.."
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSort = (props) => {

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "../.."
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSortControl = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "../.."
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSubrowHeaders = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "../../"
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableOptions = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "../../"
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableProps = (props) => {

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

@@ -14,3 +14,4 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
+  - advanced_table_responsive: Responsive Tables

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

@@ -7,4 +7,5 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
 export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
 export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
-export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
+export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
+export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -78,36 +78,6 @@ $avatar-sizes: (
           display: block;
         }
       }
-      [class^=pb_online_status] {
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: auto;
-        left: auto;
-
-        &.size_xxs {
-          right: -5px;
-        }
-
-        &.size_xs {
-          right: -4px;
-        }
-
-        &.size_md {
-          top: auto;
-          bottom: 6px;
-        }
-
-        &.size_lg {
-          top: auto;
-          bottom: 14px;
-        }
-
-        &.size_xl {
-          top: auto;
-          bottom: 22px;
-        }
-      }
     }
   }
 }

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -71,6 +71,22 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
 
   const canShowImage = imageUrl && !error
 
+  const onlineStatusSize = 
+    ['xxs', 'xs'].includes(size) ? 'sm' :
+      ['sm', 'md'].includes(size) ? 'md' :
+        ['lg', 'xl'].includes(size) ? 'lg' :
+          'sm';
+
+  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? 
+    {
+      top: { inset: true, value: "0" },
+      right: { inset: false, value: "xxs" }
+    }
+    : {
+      bottom: { inset: true, value: "0" },
+      right: { inset: true, value: size === "xl" ? "sm" : size === "lg" ? "xs" : "xxs" }
+    };
+
   return (
     <div
         {...ariaProps}
@@ -142,9 +158,11 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
           </div>
           {status && (
             <OnlineStatus
-                className={`size_${size}`}
                 dark={dark}
+                position="absolute"
+                size={onlineStatusSize}
                 status={status}
+                {...onlineStatusPositionProps}
             />
           )}
         </>