playbook_ui 14.17.0 → 14.18.0.pre.alpha.play2034zonesandcolors7407

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

@@ -0,0 +1,5 @@
+When using the "line" style, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. The default `color` for "line" is "primary" and "purple" is the only alternative color option.
+
+The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
+
+Additionally, if the parent container of the `DraggableProvider`/`DraggableContainer` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

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

@@ -0,0 +1,5 @@
+  The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
+
+By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
+
+When using the "line" type, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones-line).

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

@@ -0,0 +1,42 @@
+<% initial_items = [
+  {
+    id: "100",
+    url: "https://unsplash.it/500/400/?image=638",
+  },
+  {
+    id: "200",
+    url: "https://unsplash.it/500/400/?image=639",
+  },
+  {
+    id: "300",
+    url: "https://unsplash.it/500/400/?image=640",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex") 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], margin: "xs" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script>
+  const itemIds = ["item_100", "item_200", "item_300"];
+
+  itemIds.forEach((id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.addEventListener("dragstart", (event) => {
+        console.log(`${id} drag start!`);
+      });
+      element.addEventListener("dragend", (event) => {
+        console.log(`${id} drag end!`);
+      });
+    }
+  });
+</script>

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

@@ -0,0 +1 @@
+You can add drag event listeners for `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop`.

data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx}

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import Flex from '../../pb_flex/_flex'
-import { DraggableProvider } from '../../pb_draggable/context'
+import { DraggableProvider } from '../context'
 import Avatar from '../../pb_avatar/_avatar'
 import Body from '../../pb_body/_body'
 import Table from '../../pb_table/_table'

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

@@ -2,4 +2,6 @@ The draggable kit can also be used in conjunction with the table kit to create d
 
 - Wrap the Table with the `DraggableProvider` and manage state as shown. 
 - use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
-- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 
+
+We recommending using the default `dropZone type` with the Table kit.

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

@@ -4,14 +4,19 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_with_table_react: Draggable with Table
+  - 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_drop_zones_line: Draggable Drop Zones Line
 
   rails:
-  - draggable_default_rails: Default
-  - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
-  - draggable_with_cards_rails: Draggable with Cards
+  - draggable_default: Default
+  - draggable_with_list: Draggable with List Kit
+  - draggable_with_selectable_list: Draggable with SelectableList Kit
+  - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
-
+  - 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/docs/index.js

@@ -3,4 +3,7 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
 export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
+export { default as DraggableWithTable } from './_draggable_with_table.jsx'
+export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
+export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
+export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'

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/draggable.test.jsx

@@ -128,6 +128,58 @@ const DraggableKitWithCard = () => {
   );
 };
 
+const DraggableWithLineVertical = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid={testId}>
+      <DraggableProvider
+          dropZone={{ type: "line" }}
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <Draggable>
+          <Draggable.Container>
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item
+                  dragId={id}
+                  key={id}
+              >
+                {text}
+              </Draggable.Item>
+            ))}
+          </Draggable.Container>
+        </Draggable>
+      </DraggableProvider>
+    </div>
+  );
+};
+
+const DraggableWithLineHorizontal = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid={testId}>
+      <DraggableProvider
+          dropZone={{ type: "line", direction: "horizontal" }}
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <Draggable>
+          <Draggable.Container>
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item
+                  dragId={id}
+                  key={id}
+              >
+                {text}
+              </Draggable.Item>
+            ))}
+          </Draggable.Container>
+        </Draggable>
+      </DraggableProvider>
+    </div>
+  );
+};
+
 test("generated default kit and classname", () => {
   render(<DefaultDraggableKit />);
   const kit = screen.getByTestId(testId);
@@ -188,3 +240,19 @@ test("generated dragHandle with Card", () => {
   const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
+
+test("line dropZone with default direction applies 'line_vertical' class to container", () => {
+  render(<DraggableWithLineVertical />);
+  const kit = screen.getByTestId(testId);
+  const container = kit.querySelector(".pb_draggable_container");
+  
+  expect(container).toHaveClass("line_vertical");
+});
+
+test("line dropZone with horizontal direction applies 'line_horizontal' class to container", () => {
+  render(<DraggableWithLineHorizontal />);
+  const kit = screen.getByTestId(testId);
+  const container = kit.querySelector(".pb_draggable_container");
+  
+  expect(container).toHaveClass("line_horizontal");
+});

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_draggable/subcomponents/DraggableContainer.tsx

@@ -31,7 +31,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   } = contextValues;
 
   // Only get direction if dropZone is 'line'
-  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
+  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : null; 
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -41,8 +41,9 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
-    // Only add vertical class if dropZone is 'line' and direction is 'vertical'
-    (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
+    // Line variant gets line_{direction} classname on container no matter what
+    dropZone === 'line' && direction === 'vertical' ? 'line_vertical' : '',
+    dropZone === 'line' && direction === 'horizontal' ? 'line_horizontal' : '',
     globalProps(props),
     className
   );

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -35,7 +35,7 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
-    separators: boolean;
+    separators?: boolean;
     triggerRef?: any;
     variant?: "default" | "subtle";
 };

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",