playbook_ui 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3601

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e0b8c603b0b4f4c71fd994ae5fb34628441b8b6d79e7b0995d52ee6eb2244cd1
-  data.tar.gz: 66abcf68e967f3e108752d9986ecbe171cf2e6519e004da35969c7c063c3a21b
+  metadata.gz: b32c41e2625eea89ee6d671ece56d4d4924876e36e62147d4d084e8437a979b6
+  data.tar.gz: fa213c730648a601b22a7bce64ce0fbb280f69b17b37bb16f2bb2ce8350a2747
 SHA512:
-  metadata.gz: 8b1946c68440d581a88ab423422ee820721f90654e8102a007b9cf25df953fa7d7128e3a1eb5a6a053d651c568c5e2b341fccf6ef01a600f4c55041ec3fc5ead
-  data.tar.gz: 71c868e78a015e782f2631bf95c87b182a805b659d35e1b6df4a41ce264a9ec58ffbe05393389b421919cd23f5f6f5b34d1a020784c3fcef1845cf8c6b2008c0
+  metadata.gz: 829ba2957858c5ab84f149c949b772fe19be179440ea1f8bf86cda41dbf2b91b6100fbd8c9b3c562b7766f6e6711e8a65db97b83603ab3e1ec940f584f36e1c5
+  data.tar.gz: 654fa901ba9fc4136daf62d5daf0c160bebb1462b56f28c5e990e3405b0d9393f48fdd08794cf205925e3dd5390aaaca59054bce941d500a1e9a2440264876a9

data/app/pb_kits/playbook/_playbook.scss

@@ -37,6 +37,7 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
+@import 'pb_gantt_chart/gantt_chart';
 @import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
@@ -107,6 +108,7 @@
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';
+@import 'utilities/min_width';
 @import 'utilities/max_width';
 @import 'utilities/positioning';
 @import 'utilities/number_spacing';

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;
@@ -117,7 +164,7 @@
       background: $bg_dark;
     }
 
-    .table-header-cells:first-child, td:first-child {
+    .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
 
@@ -125,7 +172,7 @@
       background-color: $border_dark !important;
     }
 
-    .sort-button-icon, .header-sort-button > div {
+    .sort-button-icon, .header-sort-button > div, .pb_th_link {
       color: $white !important;
     }
 
@@ -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.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
+        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>

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

@@ -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_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/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}
             />
           )}
         </>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbAvatar
     class Avatar < Playbook::KitBase
       prop :component_overlay
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
       prop :image_url, type: Playbook::Props::String
       prop :image_alt, type: Playbook::Props::String,
                        default: ""
@@ -23,7 +25,22 @@ module Playbook
       end
 
       def online_status_props
-        { status: status, classname: "size_#{size}" }
+        props = {
+          dark: dark,
+          status: status,
+          size: online_status_size,
+          position: "absolute",
+          right: online_status_right_position,
+        }
+
+        case size
+        when "xxs", "xs", "sm"
+          props[:top] = { value: "0", inset: true }
+        else
+          props[:bottom] = { value: "0", inset: true }
+        end
+
+        props
       end
 
       def alt_text
@@ -57,6 +74,32 @@ module Playbook
         }
       end
 
+      def online_status_size
+        case size
+        when "xxs", "xs"
+          "sm"
+        when "sm", "md"
+          "md"
+        when "lg", "xl"
+          "lg"
+        else
+          "sm"
+        end
+      end
+
+      def online_status_right_position
+        case size
+        when "xxs", "xs", "sm"
+          "xxs"
+        when "md"
+          { value: "xxs", inset: true }
+        when "lg"
+          { value: "xs", inset: true }
+        when "xl"
+          { value: "sm", inset: true }
+        end
+      end
+
       def placement_styles(offset)
         top_bottom_offset = if offset == "xs"
                               "xs"

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -89,3 +89,20 @@ test('renders with iconCircle overlay', () => {
   expect(iconCircleOverlay).toBeInTheDocument();
   expect(iconCircleOverlay).toHaveClass('pb_avatar_kit_size_md');
 });
+
+
+test('renders with online status', () => {
+  render(
+    <Avatar
+        data={{ testid: testId }}
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        name={name}
+        status="online"
+    />
+  );
+
+  const onlineStatusAvatar = screen.getByTestId(testId);
+  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit_online_size_md')
+  expect(onlineStatus).toBeInTheDocument();
+});

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -42,6 +42,10 @@
     color: $white;
   }
 
+  &[class*=_notification_error] {
+    background: $error;
+  }
+
   &.dark {
     border-width: 0;
 
@@ -51,5 +55,10 @@
         color: map-get($status_color_text_dark, $color_name);
       }
     }
+
+    &[class*=_notification_error]  {
+      background: $error_dark;
+      color: $white;
+    }
   }
 }