playbook_ui 14.18.0 → 14.18.1.pre.rc.0

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb

@@ -0,0 +1,55 @@
+<% initial_items = [
+  {
+    id: "141",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "142",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "143",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<% next_init_items = [
+  {
+    id: "151",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "152",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "153",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<br/>
+
+<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1 @@
+  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.

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

@@ -17,5 +17,6 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_drop_zones: Draggable Drop Zones
+  - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_event_listeners: Draggable Event Listeners
-

data/app/pb_kits/playbook/pb_draggable/draggable.rb

@@ -5,9 +5,17 @@ module Playbook
     class Draggable < ::Playbook::KitBase
       prop :initial_items, type: Playbook::Props::Array,
                            default: []
+      prop :drop_zone_type, type: Playbook::Props::Enum,
+                            values: %w[ghost shadow outline line],
+                            default: "ghost"
+      prop :drop_zone_color, type: Playbook::Props::Enum,
+                             values: %w[neutral primary purple],
+                             default: "neutral"
 
       def data
-        Hash(prop(:data)).merge(pb_draggable: true)
+        Hash(prop(:data)).merge(pb_draggable: true,
+                                drop_zone_type: drop_zone_type,
+                                drop_zone_color: drop_zone_color)
       end
 
       def classname

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

@@ -1,24 +1,26 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 
-const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
+const DRAGGABLE_SELECTOR  = "[data-pb-draggable]";
 const DRAGGABLE_CONTAINER = ".pb_draggable_container";
+const NEEDS_CLONE         = ["shadow", "outline"];   // clone only for these types
 
 export default class PbDraggable extends PbEnhancedElement {
-  static get selector() {
-    return DRAGGABLE_SELECTOR;
-  }
+  static get selector() { return DRAGGABLE_SELECTOR; }
 
   connect() {
     this.state = {
-      items: [],
-      dragData: { id: "", initialGroup: "" },
-      isDragging: "",
-      activeContainer: ""
+      items:        [],
+      dragData:     { id: "", initialGroup: "" },
+      isDragging:   "",
+      activeContainer: "",
     };
 
-    this.draggedItem = null;
+    this.draggedItem   = null;
     this.draggedItemId = null;
+    this.dragGhost     = null;
     this.hasMultipleContainers = false;
+    this.dragZoneType  = "";
+    this.dragZoneColor = "";
 
     document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
   }
@@ -26,13 +28,12 @@ export default class PbDraggable extends PbEnhancedElement {
   setState(newState) {
     this.state = { ...this.state, ...newState };
     if (newState.items) {
-      const customEvent = new CustomEvent('pb-draggable-reorder', {
+      this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
         detail: {
           reorderedItems: this.state.items,
-          containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
-        }
-      });
-      this.element.dispatchEvent(customEvent);
+          containerId:    this.element.querySelector(DRAGGABLE_CONTAINER).id,
+        },
+      }));
     }
   }
 
@@ -43,71 +44,100 @@ export default class PbDraggable extends PbEnhancedElement {
 
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
-    this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
-      img.setAttribute("draggable", "false");
-    });
-
-    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));
-    });
+    this.element.querySelectorAll(".pb_draggable_item img")
+      .forEach(img => img.setAttribute("draggable", "false"));
+
+    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));
+      });
 
-    containers.forEach(container => {
-      container.addEventListener("dragover", this.handleDragOver.bind(this));
-      container.addEventListener("drop", this.handleDrop.bind(this));
+    containers.forEach(c => {
+      c.addEventListener("dragover", this.handleDragOver.bind(this));
+      c.addEventListener("drop",     this.handleDrop.bind(this));
     });
   }
 
+  /* ---------------- DRAG START ---------------- */
   handleDragStart(event) {
     // 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') {
+    if (event.target.tagName.toLowerCase() === "img") {
       event.preventDefault();
       return;
     }
 
-    const container = event.target.closest(DRAGGABLE_CONTAINER);
-    this.draggedItem = event.target;
+    const container    = event.target.closest(DRAGGABLE_CONTAINER);
+    this.draggedItem   = event.target;
     this.draggedItemId = event.target.id;
+    this.dragZoneType  = this.element.dataset.dropZoneType  || "";
+    this.dragZoneColor = this.element.dataset.dropZoneColor || "";
 
     this.setState({
-      dragData: { id: this.draggedItemId, initialGroup: container.id },
-      isDragging: this.draggedItemId
+      dragData:   { id: this.draggedItemId, initialGroup: container.id },
+      isDragging: this.draggedItemId,
     });
 
-    event.target.classList.add("is_dragging");
+    this.draggedItem.classList.add(
+      "is_dragging",
+      `drop_zone_${this.dragZoneType}`,
+      `drop_zone_color_${this.dragZoneColor}`,
+    );
+
     if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('text/plain', this.draggedItemId);
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", this.draggedItemId);
+
+      /* ---------- custom ghost clone (shadow + outline only) ---------- */
+      if (NEEDS_CLONE.includes(this.dragZoneType)) {
+        const ghost = this.draggedItem.cloneNode(true);
+        ghost.classList.remove(
+          "is_dragging",
+          `drop_zone_${this.dragZoneType}`,
+          `drop_zone_color_${this.dragZoneColor}`,
+        );
+        const { width, height } = this.draggedItem.getBoundingClientRect();
+        Object.assign(ghost.style, {
+          border:    "none",
+          width:     `${width}px`,
+          height:    `${height}px`,
+          position:  "absolute",
+          top:      "-9999px",
+          left:     "-9999px",
+          boxSizing: "border-box",
+          zIndex:    "9999",
+        });
+        document.body.appendChild(ghost);
+        this.dragGhost = ghost;
+        event.dataTransfer.setDragImage(ghost, width / 2, height / 2);
+      }
+      /* ---------------------------------------------------------------- */
     }
 
-    setTimeout(() => {
-      event.target.style.opacity = '0.5';
-    }, 0);
+    requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
   }
 
+  /* ---------------- DRAG ENTER ---------------- */
   handleDragEnter(event) {
     if (!this.draggedItem || event.target === this.draggedItem) return;
-
-    if (this.hasMultipleContainers) {
-      this.handleMultiContainerDragEnter(event);
-    } else {
-      this.handleSingleContainerDragEnter(event);
-    }
+    this.hasMultipleContainers
+      ? this.handleMultiContainerDragEnter(event)
+      : this.handleSingleContainerDragEnter(event);
   }
 
   handleSingleContainerDragEnter(event) {
-    const targetItem = event.target.closest('.pb_draggable_item');
+    const targetItem = event.target.closest(".pb_draggable_item");
+    // If we're entering a container directly or there's no target item
     if (!targetItem) return;
 
     const container = targetItem.parentNode;
-    const items = Array.from(container.children);
+    const items     = Array.from(container.children);
+    const fromIdx   = items.indexOf(this.draggedItem);
+    const toIdx     = items.indexOf(targetItem);
 
-    const draggedIndex = items.indexOf(this.draggedItem);
-    const targetIndex = items.indexOf(targetItem);
-
-    if (draggedIndex > targetIndex) {
+    if (fromIdx > toIdx) {
       container.insertBefore(this.draggedItem, targetItem);
     } else {
       container.insertBefore(this.draggedItem, targetItem.nextSibling);
@@ -116,146 +146,113 @@ export default class PbDraggable extends PbEnhancedElement {
 
   handleMultiContainerDragEnter(event) {
     const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
-    const targetItem = event.target.closest('.pb_draggable_item');
-
+    const targetItem      = event.target.closest(".pb_draggable_item");
     if (!targetContainer) return;
 
-    // If we're entering a container directly or there's no target item
     if (!targetItem) {
-      const lastItem = targetContainer.querySelector('.pb_draggable_item:last-child');
-      if (lastItem) {
-        targetContainer.insertBefore(this.draggedItem, lastItem.nextSibling);
-      } else {
-        targetContainer.appendChild(this.draggedItem);
-      }
+      const last = targetContainer.querySelector(".pb_draggable_item:last-child");
+      last
+        ? targetContainer.insertBefore(this.draggedItem, last.nextSibling)
+        : targetContainer.appendChild(this.draggedItem);
       return;
     }
 
-    const container = targetItem.parentNode;
-    const items = Array.from(container.children);
-
-    const newItems = [...items].map(item => ({
-      id: item.id,
-      container: container.id
-    }));
-
-    this.setState({ items: newItems });
+    const items = Array.from(targetContainer.children);
+    this.setState({ items: items.map(i => ({ id: i.id, container: targetContainer.id })) });
 
-    const rect = targetItem.getBoundingClientRect();
-    const middleY = rect.top + rect.height / 2;
+    const midY = targetItem.getBoundingClientRect().top +
+                 targetItem.getBoundingClientRect().height / 2;
 
-    if (event.clientY < middleY) {
-      container.insertBefore(this.draggedItem, targetItem);
+    if (event.clientY < midY) {
+      targetContainer.insertBefore(this.draggedItem, targetItem);
     } else {
-      container.insertBefore(this.draggedItem, targetItem.nextSibling);
+      targetContainer.insertBefore(this.draggedItem, targetItem.nextSibling);
     }
   }
 
+  /* ---------------- DRAG OVER ---------------- */
   handleDragOver(event) {
     event.preventDefault();
     event.stopPropagation();
-
-    if (this.hasMultipleContainers) {
-      this.handleMultiContainerDragOver(event);
-    } else {
-      this.handleSingleContainerDragOver(event);
-    }
+    this.hasMultipleContainers
+      ? this.handleMultiContainerDragOver(event)
+      : this.handleSingleContainerDragOver(event);
   }
 
   handleSingleContainerDragOver(event) {
     const container = event.target.closest(DRAGGABLE_CONTAINER);
-    if (container) {
-      container.classList.add("active_container");
-    }
+    if (container) container.classList.add("active_container");
   }
 
   handleMultiContainerDragOver(event) {
-    let container;
-    if (event.target.matches(DRAGGABLE_CONTAINER)) {
-      container = event.target;
-    } else {
-      container = event.target.closest(DRAGGABLE_CONTAINER);
-    }
-
-    if (container) {
-      this.setState({ activeContainer: container.id });
-      container.classList.add("active_container");
-
-      // If dragging over empty container or below last item
-      const lastItem = container.querySelector('.pb_draggable_item:last-child');
-      if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
-        if (this.draggedItem && this.draggedItem.parentNode !== container) {
-          container.appendChild(this.draggedItem);
-        }
+    const container = event.target.matches(DRAGGABLE_CONTAINER)
+      ? event.target
+      : event.target.closest(DRAGGABLE_CONTAINER);
+    if (!container) return;
+
+    this.setState({ activeContainer: container.id });
+    container.classList.add("active_container");
+
+    const last = container.querySelector(".pb_draggable_item:last-child");
+    if (!last || event.clientY > last.getBoundingClientRect().bottom) {
+      if (this.draggedItem && this.draggedItem.parentNode !== container) {
+        container.appendChild(this.draggedItem);
       }
     }
   }
 
+  /* ---------------- DROP ---------------- */
   handleDrop(event) {
     event.preventDefault();
     event.stopPropagation();
 
-    let container;
-    if (event.target.matches(DRAGGABLE_CONTAINER)) {
-      container = event.target;
-    } else {
-      container = event.target.closest(DRAGGABLE_CONTAINER);
-    }
-
+    const container = event.target.matches(DRAGGABLE_CONTAINER)
+      ? event.target
+      : event.target.closest(DRAGGABLE_CONTAINER);
     if (!container || !this.draggedItem) return;
 
     container.classList.remove("active_container");
-    this.draggedItem.style.opacity = '1';
+    this.draggedItem.style.opacity = "1";
 
     // Handle empty containers
-    if (this.hasMultipleContainers && !container.querySelector('.pb_draggable_item')) {
+    if (this.hasMultipleContainers && !container.querySelector(".pb_draggable_item")) {
       container.appendChild(this.draggedItem);
     }
 
     // Updated order of items as an array of item IDs
-    const reorderedItems = Array.from(
-      this.element.querySelectorAll('.pb_draggable_item')
-    ).map(item => ({
-      id: item.id,
-      container: item.closest(DRAGGABLE_CONTAINER).id
-    }));
-
-    // Store reordered items in a data attribute on the container
-    container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
-
-    const customEvent = new CustomEvent('pb-draggable-reorder', {
-      detail: {
-        reorderedItems,
-        containerId: container.id,
-      }
-    });
-
-    this.element.dispatchEvent(customEvent);
+    const reorderedItems = Array.from(this.element.querySelectorAll(".pb_draggable_item"))
+      .map(i => ({ id: i.id, container: i.closest(DRAGGABLE_CONTAINER).id }));
 
-    this.setState({
-      items: reorderedItems,
-      isDragging: "",
-      activeContainer: ""
-    });
+    container.dataset.reorderedItems = JSON.stringify(reorderedItems);
+    this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
+      detail: { reorderedItems, containerId: container.id },
+    }));
 
-    this.draggedItem = null;
+    this.setState({ items: reorderedItems, isDragging: "", activeContainer: "" });
+    this.draggedItem   = null;
     this.draggedItemId = null;
   }
 
+  /* ---------------- DRAG END ---------------- */
   handleDragEnd(event) {
-    event.target.classList.remove("is_dragging");
-    event.target.style.opacity = '1';
+    event.target.classList.remove(
+      "is_dragging",
+      `drop_zone_${this.dragZoneType}`,
+      `drop_zone_color_${this.dragZoneColor}`,
+    );
+    event.target.style.opacity = "1";
+
+    if (this.dragGhost) {
+      document.body.removeChild(this.dragGhost);
+      this.dragGhost = null;
+    }
 
-    this.setState({
-      isDragging: "",
-      activeContainer: ""
-    });
+    this.setState({ isDragging: "", activeContainer: "" });
 
-    this.draggedItem = null;
-    this.draggedItemId = null;
+    this.element.querySelectorAll(DRAGGABLE_CONTAINER)
+      .forEach(c => c.classList.remove("active_container"));
 
-    this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach(container => {
-      container.classList.remove("active_container");
-    });
+    this.draggedItem   = null;
+    this.draggedItemId = null;
   }
 }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react'
 import Dropdown from '../../pb_dropdown/_dropdown'
+import Icon from '../../pb_icon/_icon'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()
-    const error = selectedOption?.value ? null : "Please make a valid selection"
+    const error = selectedOption?.value ? null : (<>
+        <Icon icon="warning" /> Please make a valid selection
+    </>)
     const options = [
         {
             label: "United States",

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb

@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_within_trubo_frames",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+    popover_props: { append_to: "parent"  },
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md

@@ -0,0 +1 @@
+By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -11,6 +11,7 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_within_turbo_frames: Within Turbo Frames
 
   react:
   - filter_default: Default

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -23,35 +23,39 @@
 @mixin error-state-right-side-select-kit {
   &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
   &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    align-items: flex-start;
-
-    .pb_select_kit_wrapper {
-      padding-top: $space_md;
-      margin-top: 2px;
+    &:not(:has(.pb_phone_number_input)) {
+      align-items: flex-start;
 
-      .pb_select_kit_caret {
+      .pb_select_kit_wrapper {
         padding-top: $space_md;
+        margin-top: 2px;
+
+        .pb_select_kit_caret {
+          padding-top: $space_md;
+        }
       }
-    }
 
-    .pb_select_kit_wrapper.error {
-      padding-top: $space_md;
-      margin-top: 2px;
+      .pb_select_kit_wrapper.error {
+        padding-top: $space_md;
+        margin-top: 2px;
 
-      .pb_select_kit_caret {
-        padding-top: $space_xl;
+        .pb_select_kit_caret {
+          padding-top: $space_xl;
+        }
       }
     }
   }
 }
 
 @mixin error-state-left-side-select-kit {
-  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
-    align-items: flex-start;
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
+    &:not(:has(.pb_phone_number_input)) {
+      align-items: flex-start;
 
-    .pb_text_input_kit.error {
-      padding-top: $space_md;
-      margin-top: 2px;
+      .pb_text_input_kit.error {
+        padding-top: $space_md;
+        margin-top: 2px;
+      }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx

@@ -11,7 +11,6 @@ SolidGauge(Highcharts);
 const data = [{ name: "Name", y: 45 }]
 
 const baseOptions = {
-  title: { text: "" },
   series: [{ data: data }],
 };
 

data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts

@@ -2,6 +2,7 @@ import colors from '../tokens/exports/_colors.module.scss'
 import typography from '../tokens/exports/_typography.module.scss'
 
 const gaugeTheme = {
+  title: { text: "" },
   chart: {
     type: "solidgauge",
     events: {
@@ -77,7 +78,8 @@ const gaugeTheme = {
         y: -26,
       },
     },
-  }
+  },
+  credits: { enabled: false }
 }
 
 export default gaugeTheme;