playbook_ui 16.3.0.pre.alpha.PLAY2782RTEPOCs14848 → 16.3.0.pre.alpha.PLAY2791closeonclick14694

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7175900ac38d146fb42e4b8253d51343e8babc661f6cf0618fe73ab9b0a5d09
-  data.tar.gz: 8c492ed57374d3d07c6bf88a3e77ce4e0e2415d28342ddf5f803460082e158cd
+  metadata.gz: fd3f27912f0b549682a35207a8becb10ff8e4a631e6973fd7ce41e08ba29c441
+  data.tar.gz: ff6f8a7c236b63aca629414e40e9cb1863f2b65295abaf3f4e99de4e724564d9
 SHA512:
-  metadata.gz: 143aeafff5f1710f6dcdd24481fe2b41f5235c91007ce824ea5232de45909fbd2f88e79b4d513f2da04fa647be1a610472b9183d7f4397cfcc3499f818c27a79
-  data.tar.gz: 94f681e6de0e59381216a0ba30aef303e77aaf8249aacd24ab0e2540dfd490cbfd007994f39c274470b1e293e97bb0c59003d274c09efc8851ed1bddf1af2cc3
+  metadata.gz: 37b26b7a34ff4f8422740b5f50db284e09a4c2ddb36ae3b60f2f6f66a2aea120937c765a8c3ef9b5cb0922b8f180ea43fc1a6ca16b66824a447afc0bb4d32f6d
+  data.tar.gz: 97d329ee90e4219b1be084961fd50fccd68a4c8948c6a5a1921519dfabfa2ebb2db0f0f57ab705f474e607c8c9305df275af54374f990785bd053daccd5879e2

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

@@ -11,7 +11,6 @@ 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>
@@ -32,25 +31,13 @@ export const CustomCell = ({
   selectableRows,
   customStyle = {},
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-
-    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 });
-      }
+    
+    if (!expandedControl) {
+      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
   };
 

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

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

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

@@ -12,7 +12,6 @@ interface UseTableActionsProps {
   inlineRowLoading?: boolean;
   localPagination?: { pageIndex: number; pageSize: number };
   setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
-  cascadeCollapse?: boolean;
 }
 
 export function useTableActions({
@@ -23,8 +22,7 @@ export function useTableActions({
   onRowSelectionChange,
   inlineRowLoading = false,
   localPagination,
-  setLocalPagination,
-  cascadeCollapse = false
+  setLocalPagination
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -34,25 +32,15 @@ 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
+      )
 
-    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]);
+      setExpanded(updatedExpandedState)
+  }, [expanded, setExpanded, onToggleExpansionClick, table]);
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {

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

@@ -11,21 +11,11 @@ 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;
@@ -61,22 +51,8 @@ export const updateExpandAndCollapseState = (
     }
   }
 
-  const updatedExpandedState = filterExpandableRows({
+  return 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,7 +31,6 @@ type FullscreenControls = {
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
-  cascadeCollapse?: boolean
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -81,7 +80,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
     actions,
-    cascadeCollapse = false,
     children,
     className,
     columnDefinitions,
@@ -175,8 +173,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     inlineRowLoading,
     localPagination,
-    setLocalPagination,
-    cascadeCollapse
+    setLocalPagination
   });
 
   // Set table row count for loading state
@@ -342,7 +339,6 @@ 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,77 +1015,4 @@ 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/example.yml

@@ -42,7 +42,6 @@ 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,5 +48,4 @@ 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 AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'

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

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

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

@@ -57,7 +57,7 @@ $pb_button_border_width: 0px;
   }
 
   .loading-icon {
-    position: static;
+    position: absolute;
     display: none;
   }
   .pb_button_content {
@@ -158,15 +158,10 @@ $pb_button_border_width: 0px;
 // Loading =====================
 @mixin pb_button_loading($loading: false) {
   @if $loading == true {
-    display: inline-grid;
-    place-items: center;
-
     .loading-icon {
-      grid-area: 1 / 1;
       display: block;
     }
     .pb_button_content {
-      grid-area: 1 / 1;
       visibility: hidden;
     }
   }

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

@@ -1,5 +1,4 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { getElementHeight, setArrowVisibility, toggleVisibility } from '../utilities/domHelpers'
 
 const MAIN_SELECTOR = '[data-collapsible-main]'
 const CONTENT_SELECTOR = '[data-collapsible-content]'
@@ -44,7 +43,15 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   showElement(elem) {
-    const height = getElementHeight(elem)
+  // Get the natural height of the element
+    const getHeight = () => {
+      elem.style.display = 'block'
+      const height = elem.scrollHeight + 'px' // Get it's height
+      elem.style.display = '' //  Hide it again
+      return height
+    }
+
+    const height = getHeight()
     elem.classList.add('is-visible')
     elem.style.height = height // Update the max-height
     elem.style.overflow = "hidden"
@@ -75,22 +82,26 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   toggleElement(elem) {
-    const isExpanded = toggleVisibility({
-      isVisible: elem.classList.contains('is-visible'),
-      onHide: () => this.hideElement(elem),
-      onShow: () => this.showElement(elem),
-    })
-
-    isExpanded ? this.displayUpArrow() : this.displayDownArrow()
+    if (elem.classList.contains('is-visible')) {
+      this.hideElement(elem)
+      this.displayDownArrow()
+      return
+    }
+    // Otherwise, show it
+    this.showElement(elem)
+    this.displayUpArrow()
   }
 
   toggleArrows(showDownArrow) {
-    setArrowVisibility({
-      rootElement: this.element,
-      downSelector: DOWN_ARROW_SELECTOR,
-      upSelector: UP_ARROW_SELECTOR,
-      showDownArrow,
-    })
+    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
+    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
+  
+    if (downArrow) {
+      downArrow.style.display = showDownArrow ? 'inline-block' : 'none';
+    }
+    if (upArrow) {
+      upArrow.style.display = showDownArrow ? 'none' : 'inline-block';
+    }
   }
   
   displayDownArrow() {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -1,20 +1,11 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
 
-<%= pb_rails("dialog", props: {
-        id:"dialog-1",
-        size: "md",
-        title: "Header Title is the Title Prop"
-}) do %>
-    <%= pb_rails("dialog/dialog_body") do %>
-        <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg", text: "Button Primary" }) %>
-        <div style="height: 800px; background-color: lightgray;"></div>
-        <%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
-    <% end %>
-
-    <%= pb_rails("dialog/dialog_footer") do %>
-        <%= pb_rails("flex", props: { spacing: "between", padding_x: "md", padding_bottom: "md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { loading: true, text: "Send My Issue" }) %>
-            <%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
-        <% end %>
-    <% end %>
-<% end %>
+<%= pb_rails("dialog", props: { 
+    id:"dialog-1", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    text: "Hello Body Text, Nice to meet ya.", 
+    cancel_button: "Cancel Button", 
+    confirm_button: "Okay", 
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -12,35 +12,16 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
+          cancelButton="Cancel Button"
+          confirmButton="Okay"
           onCancel={close}
           onClose={close}
           onConfirm={close}
           opened={isOpen}
-          size="md"
+          size="sm"
+          text="Hello Body Text, Nice to meet ya."
           title="Header Title is the Title Prop"
-      >
-        <Dialog.Body>
-            <Button
-                aria={{ label: 'Loading' }}
-                loading
-                text="Button Primary"
-            />
-            <div style={{height: '800px', backgroundColor: 'lightgray'}} />
-            <Button
-                loading
-                text="Loading..."
-            />
-          </Dialog.Body>
-          <Dialog.Footer>
-            <Button
-                loading
-                text="Send My Issue"
-            />
-            <Button  variant="link">
-              {"Back"}
-            </Button>
-          </Dialog.Footer>
-        </Dialog>
+      />
     </>
   )
 }