playbook_ui 14.20.0.pre.alpha.PLAY22408048 → 14.20.0.pre.alpha.play2168firstcolumnborderbug7950

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 87bff1055c6b09cbc4779f19f9dabbec88eb15968de35487bff99e9f94a0385c
-  data.tar.gz: a64264b358a91d00ce79688e42ebe1f35c44a5b62e23c5e59a6404a985596385
+  metadata.gz: fcf6c9b4cc1f09fe9f4ad71387108d0a83305a79498d68a455660c8a1d877d9a
+  data.tar.gz: c95645d5f485724ecc9af73bdfd15701be9aac3b11e3626dead28ce4767ec149
 SHA512:
-  metadata.gz: 80d9da8956b81920b2a2847ca764c4b50683eb350b32bd94948d8fcdd4a9560f00a8b6e0d91c8525d95bbf438eb528f3c59b0a71e22af982a79207cd17c77e35
-  data.tar.gz: b8e950da00f3107b3775c7e104999320216c9dd4c922dbd11a0357f60a1b539bc5f287d0300092945f38c7ff082fe5b075d54bade46f712ce535ce50c1512156
+  metadata.gz: a46969b38f920b5c13d33d8f2287a56942f8f20f833734a1c282c36cd8328f693ee134a4af557d03d60cd91be39c099c816c088a070f4041cad0ee4a95d16f15
+  data.tar.gz: 05fae68a0a62be4ec28dec7c2d46b8e16f8998309da8064566003b8b7bc9471cef8f36605dbd475627fcadd1c1988d41acd513f356278d0941ab5da354dfafe9

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

@@ -19,71 +19,6 @@ type RegularTableViewProps = {
   subRowHeaders?: string[]
 }
 
-// Helper function for Table Rendering
-const TableCellRenderer = ({
-  row,
-  collapsibleTrail = true,
-  loading = false,
-  stickyLeftColumn,
-  columnPinning
-}: {
-  row: Row<GenericObject>
-  collapsibleTrail?: boolean
-  loading?: boolean | string
-  stickyLeftColumn?: string[]
-  columnPinning: { left: string[] }
-}) => {
-  return (
-    <>
-      {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
-        const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-        const isLastCell = (() => {
-          const parent = cell.column.parent;
-          if (!parent) {
-            const last = row.getVisibleCells().at(-1);
-            return last?.column.id === cell.column.id;
-          }
-
-          const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
-          return visibleSiblings.at(-1)?.id === cell.column.id;
-        })();
-
-        const { column } = cell;
-        
-        return (
-          <td
-              align="right"
-              className={classnames(
-                `${cell.id}-cell position_relative`,
-                isChrome() ? "chrome-styles" : "",
-                isPinnedLeft && 'pinned-left',
-                stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
-                isLastCell && 'last-cell',
-              )}
-              key={`${cell.id}-data`}
-              style={{
-                left: isPinnedLeft
-                  ? i === 1 // Accounting for set min-width for first column
-                    ? '180px'
-                    : `${column.getStart("left")}px`
-                  : undefined,
-            }}
-          >
-            {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
-            <span id={`${cell.id}-span`}>
-              {loading ? (
-                <LoadingCell />
-              ) : (
-                flexRender(cell.column.columnDef.cell, cell.getContext())
-              )}
-            </span>
-          </td>
-        );
-      })}
-    </>
-  )
-}
-
 export const RegularTableView = ({
   collapsibleTrail = true,
   subRowHeaders,
@@ -93,14 +28,11 @@ export const RegularTableView = ({
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
+    responsive,
     table,
     selectableRows,
     hasAnySubRows,
-    stickyLeftColumn,
-    pinnedRows,
-    headerHeight,
-    rowHeight,
-    sampleRowRef,
+    stickyLeftColumn
   } = useContext(AdvancedTableContext)
 
 
@@ -118,44 +50,9 @@ export const RegularTableView = ({
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
 
-  // Row pinning
-  function PinnedRow({ row }: { row: Row<any> }) {
-    return (
-      <tr
-          className={classnames(
-            `pinned-row`,
-          )}
-          style={{
-            backgroundColor: 'white',
-            position: 'sticky',
-            top:   
-              row.getIsPinned() === 'top'
-                  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
-                  : undefined,
-            zIndex: '3'
-          }}
-      >
-        <TableCellRenderer
-            collapsibleTrail={collapsibleTrail}
-            columnPinning={columnPinning}
-            loading={loading}
-            row={row}
-            stickyLeftColumn={stickyLeftColumn}
-        />
-      </tr>
-    )
-  }
-
-  const totalRows = pinnedRows ? table.getCenterRows() : table.getRowModel().rows
-
   return (
     <>
-      {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
-        <PinnedRow key={row.id} 
-            row={row} 
-        />
-      ))}
-      {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
+      {table.getRowModel().rows.map((row: Row<GenericObject>) => {
         const isExpandable = row.getIsExpanded();
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
@@ -163,7 +60,6 @@ export const RegularTableView = ({
         const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
         const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
-        const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -181,7 +77,6 @@ export const RegularTableView = ({
             <tr
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
-                ref={isFirstRegularRow ? sampleRowRef : null}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -195,13 +90,51 @@ export const RegularTableView = ({
                   />
                 </td>
               )}
-              <TableCellRenderer
-                  collapsibleTrail={collapsibleTrail}
-                  columnPinning={columnPinning}
-                  loading={loading}
-                  row={row}
-                  stickyLeftColumn={stickyLeftColumn}
-              />
+
+              {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
+                const isPinnedLeft = columnPinning.left.includes(cell.column.id);
+                const isLastCell = (() => {
+                  const parent = cell.column.parent;
+                    if (!parent) {
+                      const last = row.getVisibleCells().at(-1);
+                      return last?.column.id === cell.column.id;
+                    }
+                  
+                    const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
+                    return visibleSiblings.at(-1)?.id === cell.column.id;
+                   })();
+
+                const { column } = cell;
+                return (
+                  <td
+                      align="right"
+                      className={classnames(
+                        `${cell.id}-cell position_relative`,
+                        isChrome() ? "chrome-styles" : "",
+                        isPinnedLeft && 'pinned-left',
+                        stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
+                        isLastCell && 'last-cell',
+                      )}
+                      key={`${cell.id}-data`}
+                      style={{
+                        left: isPinnedLeft
+                          ? i === 1 //Accounting for set min-width for first column
+                            ? '180px'
+                            : `${column.getStart("left")}px`
+                          : undefined,
+                      }}
+                  >
+                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+                    <span id={`${cell.id}-span`}>
+                      {loading ? (
+                        <LoadingCell />
+                      ) : (
+                        flexRender(cell.column.columnDef.cell, cell.getContext())
+                      )}
+                    </span>
+                  </td>
+                );
+              })}
             </tr>
 
             {/* Display LoadingInline if Row Data is querying and there are no children already */}
@@ -221,4 +154,4 @@ export const RegularTableView = ({
   );
 }
 
-export default RegularTableView;
+export default RegularTableView;

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useRef, useMemo, useEffect, useState, useCallback } from 'react';
+import React, { createContext, useRef, useMemo, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { Row } from "@tanstack/react-table";
@@ -23,54 +23,6 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   const table = props.table;
   const isVirtualized = props.virtualizedRows || props.enableVirtualization;
-  
-  // Pinned Row: height calculations for Header and Row
-  const headerRef = useRef(null);
-  const sampleRowRef = useRef(null);
-  
-  const [headerHeight, setHeaderHeight] = useState(44);
-  const [rowHeight, setRowHeight] = useState(38);
-
-  const measureHeights = useCallback(() => {
-    if (headerRef.current) {
-      const headerRect = headerRef.current.getBoundingClientRect();
-      if (headerRect.height > 0) {
-        setHeaderHeight(headerRect.height);
-      }
-    }
-    if (sampleRowRef.current) {
-      const rowRect = sampleRowRef.current.getBoundingClientRect();
-      if (rowRect.height > 0) {
-        setRowHeight(rowRect.height);
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      measureHeights();
-    });
-
-    if (headerRef.current) {
-      resizeObserver.observe(headerRef.current);
-    }
-
-    if (sampleRowRef.current) {
-      resizeObserver.observe(sampleRowRef.current);
-    }
-
-    const timeoutId = setTimeout(measureHeights, 100);
-
-    return () => {
-      resizeObserver.disconnect();
-      clearTimeout(timeoutId);
-    };
-  }, [measureHeights]);
-
-  useEffect(() => {
-    measureHeights();
-  }, [table?.getRowModel().rows.length, measureHeights]);
-
 
   // Create a flattened data array that includes ALL components for virtualization
   const flattenedItems = useMemo(() => {
@@ -180,15 +132,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     virtualizer: isVirtualized ? virtualizer : null,
     flattenedItems,
     virtualizedRows: isVirtualized,
-    enableVirtualization: isVirtualized,
-    rowPinning: props.rowPinning,
-    setRowPinning: props.setRowPinning,
-    keepPinnedRows: props.keepPinnedRows,
-    headerHeight,
-    rowHeight,
-    headerRef,
-    sampleRowRef,
-    measureHeights,
+    enableVirtualization: isVirtualized
   };
 
   return (

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { Row, RowPinningState } from "@tanstack/react-table";
+import { Row } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
 

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -6,8 +6,7 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   RowSelectionState,
-  Row,
-  RowPinningState
+  Row
 } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -24,14 +23,11 @@ interface UseTableStateProps {
   loading?: boolean | string;
   pagination?: boolean;
   paginationProps?: GenericObject;
-  pinnedRows?: {
-    value?: RowPinningState;
-    onChange?: (value: RowPinningState) => void;
-  };
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
+
 }
 
 export function useTableState({
@@ -47,24 +43,18 @@ export function useTableState({
   paginationProps,
   virtualizedRows = false,
   tableOptions,
-  columnVisibilityControl,
-  pinnedRows,
+  columnVisibilityControl
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [localColumnVisibility, setLocalColumnVisibility] = useState({});
-  const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
-    top: [],
-  });
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
   const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
   const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
-  const rowPinning = pinnedRows && pinnedRows.value || localRowPinning;
-  const setRowPinning = (pinnedRows && pinnedRows.onChange) ? pinnedRows.onChange : setLocalRowPinning;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -125,7 +115,6 @@ export function useTableState({
       ...(sortControl     && { sorting }),
       ...(selectableRows  && { rowSelection }),
       ...(columnVisibility && { columnVisibility }),
-      ...(pinnedRows && { rowPinning }),
     },
   }), [
     expanded,
@@ -134,7 +123,6 @@ export function useTableState({
     selectableRows,
     rowSelection,
     columnVisibility,
-    rowPinning,
   ]);
 
   // Pagination configuration
@@ -165,7 +153,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
+    getRowId: selectableRows ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions

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

@@ -39,8 +39,7 @@ export const TableHeader = ({
     hasAnySubRows,
     showActionsBar,
     selectableRows,
-    responsive,
-    headerRef
+    responsive
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -63,11 +62,8 @@ export const TableHeader = ({
           id={id}
       >
         {/* Get the header groups (only one in this example) */}
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-          <tr 
-              key={`${headerGroup.id}-headerGroup`}
-              ref={index === 0 ? headerRef : null}
-          >
+        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+          <tr key={`${headerGroup.id}-headerGroup`}>
             {!hasAnySubRows && selectableRows && (
               <th className={customCellClassnames}>
                 <Checkbox

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

@@ -588,11 +588,6 @@
     }
   }
 
-  // Row Pinning - additional inline styles in RegularTableView.tsx
-  .pinned-row {
-    box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
-  }
-
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};

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

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState, useCallback } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
-import { Row, RowSelectionState, RowPinningState } from "@tanstack/react-table";
+import { Row, RowSelectionState } from "@tanstack/react-table";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
@@ -51,11 +51,7 @@ type AdvancedTableProps = {
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
   pagination?: boolean,
-  paginationProps?: GenericObject,
-  pinnedRows?: {
-    value?: RowPinningState;
-    onChange?: (value: RowPinningState) => void;
-  };
+  paginationProps?: GenericObject
   responsive?: "scroll" | "none",
   selectableRows?: boolean,
   showActionsBar?: boolean,
@@ -95,7 +91,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onToggleExpansionClick,
     pagination = false,
     paginationProps,
-    pinnedRows,
     responsive = "scroll",
     showActionsBar = true,
     selectableRows,
@@ -141,7 +136,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableOptions,
     onRowSelectionChange,
     columnVisibilityControl,
-    pinnedRows,
   });
 
   // Initialize table actions
@@ -247,7 +241,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
       'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-allow-fullscreen': allowFullScreen,
+      'advanced-table-allow-fullscreen': allowFullScreen
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
@@ -308,7 +302,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isFullscreen={isFullscreen}
             loading={loading}
             onExpandByDepthClick={onExpandByDepthClick}
-            pinnedRows={pinnedRows}
             responsive={responsive}
             selectableRows={selectableRows}
             setExpanded={setExpanded}

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

@@ -3,12 +3,6 @@ import { render, screen, waitFor } from "../utilities/test-utils"
 
 import { AdvancedTable, Pill } from "playbook-ui"
 
-global.ResizeObserver = class {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-};
-
 const MOCK_DATA = [
   {
     year: "2021",
@@ -78,36 +72,6 @@ const MOCK_DATA_LOADING = [
   },
 ]
 
-const MOCK_DATA_WITH_ID = [
-  {
-    id: "1",
-    year: "2021",
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "20",
-    scheduledMeetings: "10",
-  },
-  {
-    id: "2", 
-    year: "2022",
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "25",
-    scheduledMeetings: "15",
-  },
-  {
-    id: "3",
-    year: "2023", 
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "30",
-    scheduledMeetings: "20",
-  },
-]
-
 const columnDefinitions = [
   {
     accessor: "year",
@@ -548,28 +512,3 @@ test("allowFullScreen prop adds fullscreen class", () => {
   const tableContainer = screen.getByRole("table").closest("div")
   expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
 })
-
-test("pinnedRows prop renders pinned rows at top", () => {
-  const pinnedRowsControl = {
-    value: { top: ["1", "3"] },
-    onChange: jest.fn()
-  }
-
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        pinnedRows={pinnedRowsControl}
-        tableData={MOCK_DATA_WITH_ID}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const pinnedRows = kit.querySelectorAll(".pinned-row")
-  
-  expect(pinnedRows).toHaveLength(2)
-  
-  const firstPinnedRow = pinnedRows[0]
-  expect(firstPinnedRow).toHaveStyle("position: sticky")
-  expect(firstPinnedRow).toHaveStyle("background-color: white")
-})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false }}) %>

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

@@ -52,5 +52,4 @@ examples:
   - advanced_table_column_visibility: Column Visibility Control
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
-  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
-  - advanced_table_pinned_rows: Pinned Rows
+  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns

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

@@ -31,5 +31,4 @@ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_colu
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
 export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
 export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
-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 AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'

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

@@ -569,8 +569,6 @@ class PbAdvancedTableActionBar {
     actionBar.style.height = 'auto';
     actionBar.style.overflow = 'visible';
     actionBar.style.opacity = '1';
-    actionBar.style.transitionProperty = 'all';
-    actionBar.style.transitionTimingFunction = 'ease-in-out';
     actionBar.classList.remove("p_none");
     actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,9 +1,16 @@
 <%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
-  <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
-    <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
-    <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
-  </span>
+  <% if object.indeterminate %>
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
+    </span>
+  <% else %>
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
+    </span>
+  <% end %>
   <span class="pb_checkbox_label">
     <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -5,8 +5,7 @@ module Playbook
     class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_parent
+      prop :indeterminate, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :value
       prop :name
@@ -20,7 +19,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_checkbox_kit", checked_class) + error_class
+        generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end
 
       def input
@@ -31,13 +30,6 @@ module Playbook
         error ? "negative" : nil
       end
 
-      def data
-        Hash(prop(:data)).merge(
-          pb_checkbox_indeterminate_main: indeterminate_main,
-          pb_checkbox_indeterminate_parent: indeterminate_parent
-        )
-      end
-
     private
 
       def error_class
@@ -47,6 +39,10 @@ module Playbook
       def checked_class
         checked ? "on" : "off"
       end
+
+      def indeterminate_class
+        indeterminate ? " indeterminate" : ""
+      end
     end
   end
 end