playbook_ui 16.2.0 → 16.3.0.pre.alpha.PLAY2779dropdowncustomeventtype14814

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 30bb9f2e6d1d3ac26193857757c26d6e8cdcdd594907f1cb00f66a44d01b06fd
-  data.tar.gz: f3e563f423c8667d56863435a56d6628f2f74c5d1bb36685c77758583feff8d1
+  metadata.gz: 35ea148133e067dd35dfe27d5f662f9e55dd94a8ce5e8413efd8234405e7f6ec
+  data.tar.gz: dd608024f4e264422496a04d6f6946a67b240117359e1f852926f9af7223ecaf
 SHA512:
-  metadata.gz: f3399019b7aea00c3793f9609e6223164845a79400635013acc22826b79e2150be832fe121472cc18d6974d9bb9cb7f03aa3d1ebf73cc7aae79ca7d6fcd4552d
-  data.tar.gz: 758485999cd223ddcf82d780c8684663b32b2a27c90a436ffc71acc416a81ae0a4ae2438b2e47b3f9a3a7dadacdb71ed3296cac0abb1c860aed7175d4b6d7fa2
+  metadata.gz: d5ba6c0803ad1c8e0332b8c639c50eaece52996d7a482754f630a7473ee3b9c1c6d2c3feb5984ab4fe9c96ef6e8afff7d799cfab494bb1f4f340ecebf29fa677
+  data.tar.gz: 49744400d43e8113480de8ca7977b479f1cf59dcda6443546a1535c46ff3577f47e017364571ff7f76cce70b489fbfa44fa84b7f25e2e6446071919fd1d9f15e

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

@@ -11,6 +11,7 @@ import Icon from "../../pb_icon/_icon"
 import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { getDescendantRowIds } from "../Utilities/ExpansionControlHelpers"
 
 interface CustomCellProps {
   getValue?: Getter<string>
@@ -31,13 +32,25 @@ export const CustomCell = ({
   selectableRows,
   customStyle = {},
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-    
-    if (!expandedControl) {
-      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+
+    const willBeExpanded = !row.getIsExpanded();
+    if (willBeExpanded) {
+      if (!expandedControl) {
+        setExpanded({ ...expanded, [row.id]: true });
+      }
+    } else {
+      if (cascadeCollapse) {
+        const idsToRemove = new Set([row.id, ...getDescendantRowIds(row)]);
+        const nextExpanded = { ...expanded };
+        idsToRemove.forEach((id) => delete nextExpanded[id]);
+        setExpanded(nextExpanded);
+      } else if (!expandedControl) {
+        setExpanded({ ...expanded, [row.id]: false });
+      }
     }
   };
 

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

@@ -63,6 +63,7 @@ export const TableHeaderCell = ({
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
+    cascadeCollapse,
   } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -182,7 +183,8 @@ const isToggleExpansionEnabled =
       table.getRowModel(),
       expanded,
       undefined,
-      depth
+      depth,
+      cascadeCollapse
     )
     setExpanded(updated)
   }

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

@@ -12,6 +12,7 @@ interface UseTableActionsProps {
   inlineRowLoading?: boolean;
   localPagination?: { pageIndex: number; pageSize: number };
   setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
+  cascadeCollapse?: boolean;
 }
 
 export function useTableActions({
@@ -22,7 +23,8 @@ export function useTableActions({
   onRowSelectionChange,
   inlineRowLoading = false,
   localPagination,
-  setLocalPagination
+  setLocalPagination,
+  cascadeCollapse = false
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -32,15 +34,25 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     if (onToggleExpansionClick) onToggleExpansionClick(row)
-      const updatedExpandedState = await updateExpandAndCollapseState(
-        table.getRowModel(),
-        expanded,
-        row?.parentId,
-        undefined
-      )
 
-      setExpanded(updatedExpandedState)
-  }, [expanded, setExpanded, onToggleExpansionClick, table]);
+    const anyTopLevelExpanded = table.getRowModel().rows.some((r: Row<GenericObject>) => r.getIsExpanded())
+    const isHeaderCollapseAll = row == null && anyTopLevelExpanded
+
+    if (cascadeCollapse && isHeaderCollapseAll) {
+      setExpanded({})
+      return
+    }
+
+    const updatedExpandedState = await updateExpandAndCollapseState(
+      table.getRowModel(),
+      expanded,
+      row?.parentId,
+      undefined,
+      cascadeCollapse
+    )
+
+    setExpanded(updatedExpandedState)
+  }, [expanded, setExpanded, onToggleExpansionClick, table, cascadeCollapse]);
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -11,11 +11,21 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
   return expandedState
 }
 
+export const getDescendantRowIds = (row: Row<GenericObject>): string[] => {
+  const ids: string[] = []
+  for (const sub of row.subRows || []) {
+    ids.push(sub.id)
+    ids.push(...getDescendantRowIds(sub))
+  }
+  return ids
+}
+
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
   targetParent?: string,
   targetDepth?: number,
+  cascadeCollapse?: boolean,
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
   const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
@@ -51,8 +61,22 @@ export const updateExpandAndCollapseState = (
     }
   }
 
-  return filterExpandableRows({
+  const updatedExpandedState = filterExpandableRows({
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
   });
+
+  if (cascadeCollapse && !isExpandAction) {
+    const idsToRemove = new Set<string>();
+    for (const row of rowsToToggle) {
+      const shouldUpdate =
+        targetDepth === undefined ? true : row.depth === targetDepth;
+      if (shouldUpdate) {
+        getDescendantRowIds(row).forEach((id) => idsToRemove.add(id));
+      }
+    }
+    idsToRemove.forEach((id) => delete updatedExpandedState[id]);
+  }
+
+  return updatedExpandedState;
 };

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

@@ -31,6 +31,7 @@ type FullscreenControls = {
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
+  cascadeCollapse?: boolean
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -80,6 +81,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
     actions,
+    cascadeCollapse = false,
     children,
     className,
     columnDefinitions,
@@ -173,7 +175,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     inlineRowLoading,
     localPagination,
-    setLocalPagination
+    setLocalPagination,
+    cascadeCollapse
   });
 
   // Set table row count for loading state
@@ -339,6 +342,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       >
         {renderFullscreenHeader()}
         <AdvancedTableProvider
+            cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}

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

@@ -1015,4 +1015,77 @@ test("columnStyling.headerFontColor works as excpected", () => {
 
   const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
   expect(firstEnrollmentHeader).toHaveStyle({ color: colors.white });
-});
+});
+
+test("cascadeCollapse=false (default) preserves existing behavior when parent is re-expanded", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
+  const parentButton = getParentExpandButton()
+  expect(parentButton).toBeInTheDocument()
+  parentButton.click()
+  let subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  expect(subRow).toBeInTheDocument()
+  getParentExpandButton().click()
+  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  expect(subRow).not.toBeInTheDocument()
+  getParentExpandButton().click()
+  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  expect(subRow).toBeInTheDocument()
+})
+
+test("cascadeCollapse=true collapses all descendants when parent is collapsed", () => {
+  render(
+    <AdvancedTable
+        cascadeCollapse
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
+  const parentButton = getParentExpandButton()
+  expect(parentButton).toBeInTheDocument()
+  parentButton.click()
+  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+  getParentExpandButton().click()
+  expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
+  getParentExpandButton().click()
+  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+})
+
+test("cascadeCollapse=true with header toggle all: collapse all then expand all shows only direct children", async () => {
+  render(
+    <AdvancedTable
+        cascadeCollapse
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const toggleAllButton = kit.querySelector(".gray-icon.toggle-all-icon")
+  expect(toggleAllButton).toBeInTheDocument()
+  toggleAllButton.click()
+  await waitFor(() => {
+    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+  })
+  toggleAllButton.click()
+  await waitFor(() => {
+    expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
+  })
+  toggleAllButton.click()
+  await waitFor(() => {
+    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,50 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCascadeCollapse = (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>
+      <AdvancedTable
+          cascadeCollapse
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableCascadeCollapse

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

@@ -0,0 +1 @@
+`cascadeCollapse` is an optional prop that is set to 'false' by default. If set to 'true', collapsing any parent row itself or by using the toggle exapansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.

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

@@ -42,6 +42,7 @@ examples:
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
+  - advanced_table_cascade_collapse: Cascade Collapse
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props

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

@@ -48,4 +48,5 @@ export { default as AdvancedTablePaddingControl } from './_advanced_table_paddin
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'

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

@@ -1,5 +1,6 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
+import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -20,10 +21,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.childRowsMap = new Map();
   }
 
+  get table() {
+    return this.cachedTable || (this.cachedTable = this.element.closest("table"));
+  }
+
+  get mainTable() {
+    return this.cachedMainTable || (this.cachedMainTable = this.element.closest(".pb_advanced_table"));
+  }
+
   // Fetch and cache child rows for a given parent row ID
   childRowsFor(parentId) {
     if (!this.childRowsMap.has(parentId)) {
-      const table = this.element.closest("table");
+      const table = this.table;
       const rows = Array.from(
         table.querySelectorAll(`tr[data-row-parent="${parentId}"]`)
       );
@@ -33,7 +42,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   updateTableSelectedRowsAttribute() {
-    const mainTable = this.element.closest(".pb_advanced_table");
+    const mainTable = this.mainTable;
+    if (!mainTable) return;
     mainTable.dataset.selectedRows = JSON.stringify(
       Array.from(PbAdvancedTable.selectedRows)
     );
@@ -41,7 +51,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
   // Recalculate selected count based on all checked checkboxes
   recalculateSelectedCount() {
-    const table = this.element.closest("table");
+    const table = this.table;
+    if (!table) return;
     
     // Get all checkboxes that could be part of the selection
     // This includes row checkboxes and any parent checkboxes that might be programmatically checked
@@ -95,7 +106,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
     
     this.updateTableSelectedRowsAttribute();
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
     
     // Sync header select-all state
     if (selectAllCheckbox) {
@@ -139,7 +150,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     this.updateTableSelectedRowsAttribute();
 
-    const table = checkbox.closest("table");
+    const table = this.table;
     const selectAllCheckbox = table.querySelector("#select-all-rows");
 
     if (selectAllCheckbox) {
@@ -153,7 +164,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       );
       selectAllInput.checked = allChecked;
     }
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
   }
 
   get target() {
@@ -161,10 +172,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   connect() {
-    const table = this.element.closest("table");
+    const table = this.table;
+    if (!table) return;
 
     this.hideCloseIcon();
-    const mainTable = this.element.closest(".pb_advanced_table");
+    const mainTable = this.mainTable;
     
     // This so it is hidden on first render
     if (mainTable) {
@@ -271,9 +283,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       }
 
       // Find direct child rows
-      const childRows = Array.from(
-        table.querySelectorAll(`[data-row-parent="${toggleBtn.id}"]`)
-      );
+      const childRows = this.childRowsFor(toggleBtn.id);
       this.toggleElement(childRows);
 
       // Restore original element context
@@ -284,7 +294,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   addBorderRadiusOnLastVisibleRow() {
-    const parentElement = this.element.closest(".pb_advanced_table");
+    const parentElement = this.mainTable;
+    if (!parentElement) return;
 
     const table = document.getElementById(parentElement.id);
 
@@ -316,11 +327,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     elements.forEach((elem) => {
       elem.style.display = "table-row";
       elem.classList.add("is-visible");
-      const childRowsAll = this.element
-        .closest("table")
-        .querySelectorAll(
-          `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
-        );
+      const childRowsAll = this.table.querySelectorAll(
+        `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+      );
 
       childRowsAll.forEach((childRow) => {
         const dataContent = childRow.dataset.advancedTableContent;
@@ -382,8 +391,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const currentDepth = parseInt(elem.dataset.rowDepth);
       if (childrenArray.length > currentDepth) {
         // Find the child rows corresponding to this parent row
-        const childRows = this.element
-          .closest("table")
+        const childRows = this.table
           .querySelectorAll(
             `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
           );
@@ -401,28 +409,39 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     const isVisible = elements[0].classList.contains("is-visible");
 
-    isVisible ? this.hideElement(elements) : this.showElement(elements);
-    isVisible ? this.displayDownArrow() : this.displayUpArrow();
+    const isExpanded = toggleVisibility({
+      isVisible,
+      onHide: () => this.hideElement(elements),
+      onShow: () => this.showElement(elements),
+    });
+
+    isExpanded ? this.displayUpArrow() : this.displayDownArrow();
 
     const row = this.element.closest("tr");
     if (row) {
-      row.classList.toggle("bg-silver", !isVisible);
-      row.classList.toggle("pb-bg-row-white", isVisible);
+      row.classList.toggle("bg-silver", isExpanded);
+      row.classList.toggle("pb-bg-row-white", !isExpanded);
     }
 
     this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
-      "inline-block";
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
+    setArrowVisibility({
+      rootElement: this.element,
+      downSelector: DOWN_ARROW_SELECTOR,
+      upSelector: UP_ARROW_SELECTOR,
+      showDownArrow: true,
+    });
   }
 
   displayUpArrow() {
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display =
-      "inline-block";
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
+    setArrowVisibility({
+      rootElement: this.element,
+      downSelector: DOWN_ARROW_SELECTOR,
+      upSelector: UP_ARROW_SELECTOR,
+      showDownArrow: false,
+    });
   }
 
   static handleToggleAllHeaders(element) {

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -30,7 +30,7 @@
 .pb_body_kit_error_neutral,
 .pb_body_kit_error_positive,
 .pb_body_kit_error_negative {
-  @include pb_body($text_lt_default);
+  @include pb_body($text_default_color);
   
   b,
   strong {
@@ -38,9 +38,9 @@
   }
 
   a {
-    color: $primary;
+    color: $text_link;
     &:hover {
-      color: $text_lt_default;
+      color: $text_default_color;
     }
   }
 
@@ -110,7 +110,7 @@
   @include pb_body_dark();
   
   a {
-    color: $active_dark;
+    color: $text_link_dark;
   }
 }
 

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -3,38 +3,38 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default: $text_lt_default,
-  light: $text_lt_light,
-  lighter: $text_lt_lighter,
-  link: $primary,
-  error: $error,
-  success: $text_lt_success_sm,
+  default: $text_default_color,
+  light: $text_light,
+  lighter: $text_lighter,
+  link: $text_link,
+  error: $text_error,
+  success: $text_success,
 );
 
 $pb_dark_body_colors: (
-  default: $text_dk_default,
-  light: $text_dk_light,
-  lighter: $text_dk_lighter,
-  link: $active_dark,
-  error: $error,
-  success: $text_dk_success_sm,
+  default: $text_default_dark,
+  light: $text_light_dark,
+  lighter: $text_lighter_dark,
+  link: $text_link_dark,
+  error: $text_error_dark,
+  success: $text_success_dark,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default: $text_lt_default,
-  negative: $error,
-  dark_error: $error_dark_body,
-  positive: $text_lt_success_sm,
+  default: $text_default_color,
+  negative: $text_error,
+  dark_error: $text_error_dark,
+  positive: $text_success,
 );
 
 $pb_dark_body_status: (
-  default: $text_dk_default,
-  negative: $error_dark,
-  positive: $text_dk_success_sm,
+  default: $text_default_dark,
+  negative: $text_error_dark,
+  positive: $text_success_dark,
 );
 
-@mixin pb_body($color: $text_lt_default) {
+@mixin pb_body($color: $text_default_color) {
   line-height: $lh_tight;
   color: $color;
   font-size: $text_default;
@@ -44,34 +44,34 @@ $pb_dark_body_status: (
 
 // Colors ======================
 @mixin pb_body_light {
-  @include pb_body($text_lt_light);
+  @include pb_body($text_light);
 }
 
 @mixin pb_body_lighter {
-  @include pb_body($text_lt_lighter);
+  @include pb_body($text_lighter);
 }
 
 @mixin pb_body_dark {
-  @include pb_body($text_dk_default);
+  @include pb_body($text_default_dark);
 }
 
 @mixin pb_body_light_dark {
-  @include pb_body($text_dk_light);
+  @include pb_body($text_light_dark);
 }
 
 @mixin pb_body_lighter_dark {
-  @include pb_body($text_dk_lighter);
+  @include pb_body($text_lighter_dark);
 }
 
 // Statuses =====================
 @mixin pb_body_negative {
-  @include pb_body($error);
+  @include pb_body($text_error);
 }
 
 @mixin pb_body_dark_error {
-  @include pb_body($error_dark_body);
+  @include pb_body($text_error_dark);
 }
 
 @mixin pb_body_positive {
-  @include pb_body($success);
+  @include pb_body($text_success);
 }

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -115,9 +115,10 @@ $pb_button_sizes: (
 
   // Icon-only button (icon prop set, no text) - square with equal padding
   // Rails: uses .pb_button_icon_only class
-  // React: detects when pb_button_content has an empty text span
+  // React: when pb_button_content is empty (no text). Do not match when content has
+  // text + icon (e.g. "Exit Fullscreen" + FA icon) which can include empty spans.
   &.pb_button_icon_only,
-  &:has(.pb_button_content > span:empty) {
+  &:has(.pb_button_content:empty) {
     aspect-ratio: 1;
     min-width: auto;
     width: auto;