playbook_ui 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

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

@@ -4,17 +4,14 @@ 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: Draggable with Table
+  - draggable_with_table_react: 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: Default
-  - draggable_with_list: Draggable with List Kit
-  - draggable_with_selectable_list: Draggable with SelectableList Kit
-  - draggable_with_cards: Draggable with Cards
+  - 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_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
 

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

@@ -3,7 +3,4 @@ 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 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'
+export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

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

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