playbook_ui 13.34.1.pre.alpha.powerfontsexternal3403 → 14.0.0.pre.alpha.PLAY14113475

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba1baf1e9d06dc610570c22314d7876c1aa4bc553e1f75833ae12b0cce35b9c9
-  data.tar.gz: 3b5cd6d469096228dca0e4584be3f9f77cfa495d571705dbc4149ea202ad96f8
+  metadata.gz: 256935cc0094e0047461f73eb8aa9a359414951eade45a2a3c82507ba9430d19
+  data.tar.gz: 7d173634a0c2134da2756f3c16435c48662570980fa226a0bbe8bb256950620e
 SHA512:
-  metadata.gz: db5fc0981967fe16c7e4f3ac72a143273d256b74c0b5f2f1e6385d9bf4728ac4f8111919852233f3e9b53f12b57edda9437cb8e428fd43f73a3429004e85f916
-  data.tar.gz: e668b958bf78cf16f01d852d5bf26706af6316f8c30ef088945a0afc06e3e57a9ede1f8034da8492f45057e15a4089f29060d7cd7d10809bf2a8c47afe7c1ebd
+  metadata.gz: 6861772c1549b55563f7d3c79026f56cb930297ef756e02a5b9adc7df3300b31dc8286df6188b800023c23870eb90a62e4b7fc14f0fcfecdc1aa3769deb77a2f
+  data.tar.gz: 5b80990b1a26b4aa82392837d1c1a8c54304f3371e527beb8e7786ce54bb1620dab12804798855b9d43e4958f7586c10fd5e338d8f2b2adbccb26fe1d691c376

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

@@ -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,12 @@
     color: $white;
   }
 
+
+  &[class*=_notification_error] {
+    background: $error;
+    color: $white;
+  }
+
   &.dark {
     border-width: 0;
 

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

@@ -25,7 +25,7 @@ type BadgeProps = {
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
   text?: string,
-  variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
+  variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
 const Badge = (props: BadgeProps): React.ReactElement => {
   const {
@@ -45,7 +45,9 @@ const Badge = (props: BadgeProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
-    buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
+    buildCss('pb_badge_kit',
+      variant === "success" ? "success_sm" : variant === "notificationError" ? "notification_error" : variant,
+      rounded ? 'rounded' : ''),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -6,7 +6,7 @@ module Playbook
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[success warning error info neutral notification primary],
+                     values: %w[success warning error info neutral notification notification_error primary],
                      default: "neutral"
 
       def classname

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -94,15 +94,21 @@ test('displays success variant', () => {
 
 })
 
-test('displays notification variant', () => {
-  render(
-    <Badge
-        data={{ testid: testId }}
-        text="1"
-        variant="notification"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`pb_badge_kit_notification`)
-  cleanup()
+test('displays notification variants', () => {
+  [
+    "notification",
+    "notificationError"
+  ].forEach((colorVariant) => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={colorVariant}
+          variant={colorVariant}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_${colorVariant === "notificationError" ? "notification_error" : "notification"}`)
+
+    cleanup()
+  })
 })