playbook_ui 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

data/app/pb_kits/playbook/pb_dialog/docs/_playground.overrides.json

@@ -1,95 +1,143 @@
 {
+  "structureModes": {
+    "default": "simple",
+    "modes": {
+      "simple": {
+        "label": "Simple",
+        "template": "<Dialog opened={dialogOpen} onCancel={closeDialog} onClose={closeDialog} onConfirm={closeDialog}{{props}} />",
+        "children": "",
+        "props": {
+          "size": "md",
+          "title": "Header Title is the Title Prop",
+          "text": "Hello Body Text, Nice to meet ya.",
+          "cancelButton": "Cancel Button",
+          "confirmButton": "Okay"
+        },
+        "imports": ["Button"],
+        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
+      },
+      "subcomponents": {
+        "label": "Compound Components",
+        "template": "<Dialog opened={dialogOpen} onClose={closeDialog}{{props}}>\n  <Dialog.Header>Header Title inside Dialog.Header</Dialog.Header>\n  <Dialog.Body>{{children}}</Dialog.Body>\n  <Dialog.Footer>\n    <Button onClick={closeDialog}>Okay</Button>\n    <Button onClick={closeDialog} variant=\"link\">Cancel Button</Button>\n  </Dialog.Footer>\n</Dialog>",
+        "children": "Hello Body Text, Nice to meet ya.",
+        "imports": ["Button"],
+        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
+      }
+    }
+  },
   "children": {
     "default": "Custom dialog content goes here when you are not using the title and text props."
   },
+  "hiddenProps": [
+    "trigger",
+    "portalClassName"
+  ],
+  "defaults": {
+    "closeable": true,
+    "placement": "center",
+    "shouldCloseOnOverlayClick": true,
+    "size": "md",
+    "title": "Header Title is the Title Prop",
+    "text": "Hello Body Text, Nice to meet ya."
+  },
   "groups": [
     {
       "name": "Content",
-      "props": ["title", "text", "cancelButton", "confirmButton"]
+      "props": ["title", "text", "cancelButton", "confirmButton", "onCancel", "onClose", "onConfirm", "opened", "onChange"]
     },
     {
       "name": "Behavior",
       "props": [
-        "opened",
         "placement",
         "shouldCloseOnOverlayClick",
         "closeable",
-        "loading",
-        "trigger",
-        "onClose",
-        "onCancel",
-        "onConfirm",
-        "onChange"
+        "loading"
       ]
     },
     {
       "name": "Appearance",
-      "props": ["size", "status", "fullHeight", "portalClassName"]
+      "props": ["size", "status", "fullHeight"]
     }
   ],
   "presets": [
     {
-      "name": "Small",
+      "name": "Default",
       "props": {
-        "size": "sm",
-        "opened": true,
-        "title": "Small dialog",
-        "text": "Narrow width for short confirmations and alerts."
+        "size": "md",
+        "title": "Header Title is the Title Prop",
+        "text": "Hello Body Text, Nice to meet ya.",
+        "cancelButton": "Cancel Button",
+        "confirmButton": "Okay"
       }
     },
     {
-      "name": "Medium",
+      "name": "Small",
       "props": {
-        "size": "md",
-        "opened": true,
-        "title": "Medium dialog",
-        "text": "Default size for most forms and standard content."
+        "size": "sm",
+        "title": "Small dialog",
+        "text": "Narrow width for short confirmations and alerts."
       }
     },
     {
       "name": "Large",
       "props": {
         "size": "lg",
-        "opened": true,
         "title": "Large dialog",
         "text": "Wider layout for dense content or two-column layouts."
       }
     },
-    {
-      "name": "Extra large",
+        {
+      "name": "Status Alert",
       "props": {
-        "size": "xl",
-        "opened": true,
-        "title": "Extra large dialog",
-        "text": "Maximum width before full-screen patterns."
+        "size": "status_size",
+        "status": "success",
+        "title": "Success",
+        "text": "Compact status layout for confirmations and feedback."
       }
     },
     {
-      "name": "Content width",
+      "name": "Compound components",
+      "structureMode": "subcomponents",
       "props": {
-        "size": "content",
-        "opened": true,
-        "title": "Content-sized dialog",
-        "text": "Width follows the content instead of fixed breakpoints."
-      }
+        "size": "sm"
+      },
+      "children": "Hello Body Text, Nice to meet ya."
     },
     {
-      "name": "Status size",
+      "name": "Full height compound",
+      "structureMode": "subcomponents",
       "props": {
-        "size": "status_size",
-        "opened": true,
-        "status": "success",
-        "title": "Success",
-        "text": "Compact status layout for confirmations and feedback."
-      }
+        "fullHeight": true,
+        "size": "lg"
+      },
+      "children": "Custom dialog content goes here when you need more vertical space."
     }
   ],
-  "conditionals": {},
+  "conditionals": {
+    "title": { "structureMode": "simple" },
+    "text": { "structureMode": "simple" },
+    "cancelButton": { "structureMode": "simple" },
+    "confirmButton": { "structureMode": "simple" },
+    "onCancel": { "structureMode": "simple" },
+    "onClose": { "structureMode": "simple" },
+    "onConfirm": { "structureMode": "simple" },
+    "opened": { "structureMode": "simple" }
+  },
   "hints": {
     "status_dialog": {
       "when": { "status": "success" },
       "message": "Status dialogs show an icon, title, and body copy in a centered layout.",
       "type": "info"
+    },
+    "compound_components_info": {
+      "presetName": "Compound components",
+      "message": "Use Compound Components when you need custom header, body, or footer content instead of the simple title/text/button props API.",
+      "type": "info"
+    },
+    "full_height_info": {
+      "presetName": "Full height compound",
+      "message": "fullHeight is most useful with the compound structure when the dialog contains richer or scrollable content.",
+      "type": "info"
     }
   }
 }

data/app/pb_kits/playbook/pb_distribution_bar/docs/_playground.json

@@ -2,24 +2,82 @@
   "template": "<DistributionBar{{props}} />",
   "propTargets": {},
   "defaults": {
-    "size": "lg"
+    "size": "lg",
+    "colors": [
+      "data_7",
+      "data_1",
+      "neutral"
+    ]
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Data",
       "props": [
-        "colors",
-        "size",
-        "widths"
+        "widths",
+        "colors"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "widths": [
+          1,
+          2,
+          3,
+          4,
+          5,
+          3,
+          3,
+          7
+        ]
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "widths": [
+          1,
+          2,
+          3,
+          4,
+          5,
+          3,
+          3,
+          7
+        ],
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Custom colors",
+      "props": {
+        "colors": [
+          "data_7",
+          "data_1",
+          "neutral"
+        ],
+        "widths": [
+          4,
+          5,
+          3
+        ]
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "custom_colors": {
+      "presetName": "Custom colors",
+      "message": "Use the colors prop to change the colors of the distribution bar. Currently only the data and status colors will work for DistributionBar.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_distribution_bar/docs/_playground.overrides.json

@@ -0,0 +1,45 @@
+{
+  "defaults": {
+    "colors": ["data_7", "data_1", "neutral"]
+  },
+  "groups": [
+    {
+      "name": "Data",
+      "props": ["widths", "colors"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "widths": [1, 2, 3, 4, 5, 3, 3, 7]
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "widths": [1, 2, 3, 4, 5, 3, 3, 7],
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Custom colors",
+      "props": {
+        "colors": ["data_7", "data_1", "neutral"],
+        "widths": [4, 5, 3]
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "custom_colors": {
+      "presetName": "Custom colors",
+      "message": "Use the colors prop to change the colors of the distribution bar. Currently only the data and status colors will work for DistributionBar.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -8,6 +8,25 @@
       cursor: grab;
     }
 
+    &.is_touch_active {
+      .pb_draggable_handle,
+      .card_draggable_handle {
+        color: $text_lt_default;
+      }
+    }
+
+    .pb_draggable_handle,
+    .card_draggable_handle {
+      touch-action: none;
+      -webkit-touch-callout: none;
+      user-select: none;
+      cursor: grab;
+
+      &:active {
+        color: $text_lt_default;
+      }
+    }
+
     &.is_dragging {
       position: relative;
 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md

@@ -5,3 +5,5 @@ Use the `draggable` kit and manage state as shown.
 `draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md

@@ -6,4 +6,5 @@ Use `DraggableProvider` and manage state as shown.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
 
+On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md

@@ -3,3 +3,5 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
 
 An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md

@@ -2,4 +2,6 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 
 Use `DraggableProvider` and manage state as shown.
 
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on ListItem to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md

@@ -1,3 +1,5 @@
 For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md

@@ -2,4 +2,6 @@ For a simplified version of the Draggable API for the SelectableList kit, you ca
 
 Use `DraggableProvider` and manage state as shown.
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -211,6 +211,14 @@ test("Attached draggable HTML attributes", () => {
   expect(item).toHaveAttribute("draggable");
 });
 
+test("draggable items expose data-pb-drag-id for touch reordering", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+
+  const item = kit.querySelector(".pb_draggable_item");
+  expect(item).toHaveAttribute("data-pb-drag-id", "1");
+});
+
 test("generated dragHandle with List", () => {
   render(<DraggableKitWithList />);
   const kit = screen.getByTestId(testId);
@@ -302,6 +310,14 @@ const DraggableMultipleContainers = () => {
   );
 };
 
+test("draggable containers expose data-pb-drag-container when provided", () => {
+  render(<DraggableMultipleContainers />);
+  const kit = screen.getByTestId(testId);
+
+  const container = kit.querySelector('[data-testid="container-To Do"]');
+  expect(container).toHaveAttribute("data-pb-drag-container", "To Do");
+});
+
 test("renders multiple containers with correct items", () => {
   render(<DraggableMultipleContainers />);
   

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,3 +1,5 @@
-<%= pb_content_tag(object.tag) do %>
+<%= pb_content_tag(object.tag, {
+  "data-pb-drag-container": object.container.presence
+}) do %>
     <%= content.presence %>
   <% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb

@@ -1,5 +1,6 @@
 <%= pb_content_tag(object.tag, {
 id: "item_#{object.drag_id}",
+"data-pb-drag-id": object.drag_id,
 draggable: true
 }) do %>
     <%= content.presence %>

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

@@ -2,7 +2,32 @@ import PbEnhancedElement from "../pb_enhanced_element";
 
 const DRAGGABLE_SELECTOR  = "[data-pb-draggable]";
 const DRAGGABLE_CONTAINER = ".pb_draggable_container";
+const DRAG_HANDLE_SELECTOR = ".pb_draggable_handle, .card_draggable_handle";
 const NEEDS_CLONE         = ["shadow", "outline", "line"];   // clone only for these types
+const DRAG_THRESHOLD_PX   = 5;
+
+const isTouchDragDevice = () => {
+  const hasTouch = "ontouchstart" in window;
+  const hasCoarsePointer =
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+
+  return hasTouch || hasCoarsePointer;
+};
+
+const getDragIdFromElement = (element) => {
+  const item = element?.closest(".pb_draggable_item");
+  if (!item) return null;
+
+  return item.getAttribute("data-pb-drag-id") || item.id;
+};
+
+const getContainerFromElement = (element) => {
+  const container = element?.closest(DRAGGABLE_CONTAINER);
+  if (!container) return null;
+
+  return container.getAttribute("data-pb-drag-container") || container.id;
+};
 
 export default class PbDraggable extends PbEnhancedElement {
   static get selector() { return DRAGGABLE_SELECTOR; }
@@ -21,6 +46,8 @@ export default class PbDraggable extends PbEnhancedElement {
     this.hasMultipleContainers = false;
     this.dragZoneType  = "";
     this.dragZoneColor = "";
+    this.useTouchDrag = isTouchDragDevice();
+    this.touchCleanups = [];
 
     // If DOM is already loaded, bind immediately; otherwise wait for DOMContentLoaded
     if (document.readyState === "loading") {
@@ -54,9 +81,14 @@ export default class PbDraggable extends PbEnhancedElement {
 
     this.element.querySelectorAll(".pb_draggable_item")
       .forEach(item => {
-        item.addEventListener("dragstart", this.handleDragStart.bind(this));
-        item.addEventListener("dragend",   this.handleDragEnd.bind(this));
-        item.addEventListener("dragenter", this.handleDragEnter.bind(this));
+        if (this.useTouchDrag) {
+          item.setAttribute("draggable", "false");
+          this.touchCleanups.push(this.bindTouchDragForItem(item));
+        } else {
+          item.addEventListener("dragstart", this.handleDragStart.bind(this));
+          item.addEventListener("dragend",   this.handleDragEnd.bind(this));
+          item.addEventListener("dragenter", this.handleDragEnter.bind(this));
+        }
       });
 
     containers.forEach(c => {
@@ -65,8 +97,118 @@ export default class PbDraggable extends PbEnhancedElement {
     });
   }
 
+  bindTouchDragForItem(item) {
+    const handle = item.querySelector(DRAG_HANDLE_SELECTOR);
+    const dragTarget = handle || item;
+    const state = {
+      active: false,
+      dragging: false,
+      startX: 0,
+      startY: 0,
+      lastTargetDragId: null,
+    };
+
+    const resetState = () => {
+      state.active = false;
+      state.dragging = false;
+      state.lastTargetDragId = null;
+      item.classList.remove("is_touch_active");
+    };
+
+    const pointerEventFromTouch = (touch, target) => ({
+      target,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      preventDefault: () => undefined,
+      stopPropagation: () => undefined,
+    });
+
+    const onTouchStart = (event) => {
+      if (handle && !handle.contains(event.target)) return;
+
+      const touch = event.touches[0];
+      if (!touch) return;
+
+      state.active = true;
+      state.startX = touch.clientX;
+      state.startY = touch.clientY;
+      item.classList.add("is_touch_active");
+    };
+
+    const onTouchMove = (event) => {
+      if (!state.active) return;
+
+      const touch = event.touches[0];
+      if (!touch) return;
+
+      if (!state.dragging) {
+        const deltaX = touch.clientX - state.startX;
+        const deltaY = touch.clientY - state.startY;
+
+        if (Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD_PX) return;
+
+        state.dragging = true;
+        this.handleDragStart(pointerEventFromTouch(touch, item));
+      }
+
+      event.preventDefault();
+
+      const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+      const targetItem = elementBelow?.closest(".pb_draggable_item");
+      const targetDragId = getDragIdFromElement(elementBelow);
+
+      if (targetItem && targetItem !== item && targetDragId !== state.lastTargetDragId) {
+        state.lastTargetDragId = targetDragId;
+        this.handleDragEnter(pointerEventFromTouch(touch, targetItem));
+      }
+
+      const targetContainer = getContainerFromElement(elementBelow);
+      if (targetContainer) {
+        const containerElement = elementBelow.closest(DRAGGABLE_CONTAINER);
+        if (containerElement) {
+          this.handleDragOver(pointerEventFromTouch(touch, containerElement));
+        }
+      }
+    };
+
+    const finishTouchDrag = (touch) => {
+      if (!state.active) return;
+
+      if (state.dragging && touch) {
+        const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+        const containerElement = elementBelow?.closest(DRAGGABLE_CONTAINER);
+
+        if (containerElement) {
+          this.handleDrop(pointerEventFromTouch(touch, containerElement));
+        }
+
+        this.handleDragEnd({ target: item });
+      }
+
+      resetState();
+    };
+
+    const onTouchEnd = (event) => finishTouchDrag(event.changedTouches[0]);
+    const onTouchCancel = (event) => finishTouchDrag(event.changedTouches[0]);
+
+    dragTarget.addEventListener("touchstart", onTouchStart, { passive: true });
+    dragTarget.addEventListener("touchmove", onTouchMove, { passive: false });
+    dragTarget.addEventListener("touchend", onTouchEnd, { passive: true });
+    dragTarget.addEventListener("touchcancel", onTouchCancel, { passive: true });
+
+    return () => {
+      dragTarget.removeEventListener("touchstart", onTouchStart);
+      dragTarget.removeEventListener("touchmove", onTouchMove);
+      dragTarget.removeEventListener("touchend", onTouchEnd);
+      dragTarget.removeEventListener("touchcancel", onTouchCancel);
+    };
+  }
+
   /* ---------------- DRAG START ---------------- */
   handleDragStart(event) {
+    const item = event.target.closest(".pb_draggable_item");
+    if (!item) return;
+
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
     if (event.target.tagName.toLowerCase() === "img") {
@@ -74,9 +216,9 @@ export default class PbDraggable extends PbEnhancedElement {
       return;
     }
 
-    const container    = event.target.closest(DRAGGABLE_CONTAINER);
-    this.draggedItem   = event.target;
-    this.draggedItemId = event.target.id;
+    const container    = item.closest(DRAGGABLE_CONTAINER);
+    this.draggedItem   = item;
+    this.draggedItemId = getDragIdFromElement(item);
     this.dragZoneType  = this.element.dataset.dropZoneType  || "";
     this.dragZoneColor = this.element.dataset.dropZoneColor || "";
 
@@ -122,7 +264,7 @@ export default class PbDraggable extends PbEnhancedElement {
     }
 
     if (this.dragZoneType !== "line") {
-      requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
+      requestAnimationFrame(() => (item.style.opacity = "0.5"));
     }
   }
 

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -54,6 +54,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
         {...dataProps}
         {...htmlProps}
         className={classes}
+        data-pb-drag-container={container}
         id={id}
         key={container}
         onDragOver={(e: Event) => handleDragOver(e, container)}