From 6a96a5702eb61675f0e89fa3d7f056ab779e7aa9 Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Fri, 9 May 2025 14:36:20 -0400 Subject: [PATCH] docs(drag-and-drop): Updates design guidelines for accuracy. --- .../design-guidelines/components/drag-and-drop/drag.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/drag.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/drag.md index 52e077abed..a7fce53d0f 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/drag.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/drag.md @@ -13,15 +13,15 @@ import '../components.css'; ![Example of a data list with items that can be dragged.](./img/dnd-simple1.svg) -2. **Bounding box:** Upon click & hold a `--pf-v6-global--active-color--100` border will show the draggable area that is available. +2. **Ghost item:** Upon click and hold, a duplicate "ghost" item with a `--pf-v6-global--active-color--100` border will appear "on top" of the list. This ghost item represents the initial item being moved. -3. **onDrag event:** The list item being dragged will also use a `--pf-v6-global--active-color--100` border to highlight it as the item being dragged and all other list items will switch to a disabled state. The space where the item is being dragged from will remain empty to indicate its original position in the list. +3. **onDrag event:** While a ghost item is being dragged, the original item will move its position in the list to align with the hovered position.
![Example of what happens when an item is dragged. A blue border appears around the item being dragged and a faded placeholder version stays in the original position.](./img/dnd-simple23.svg)
-4. **postDrag event:** Once dropped, the items will be reordered based on the user’s action. The space left empty is then filled by the next item in the list. +4. **postDrag event:** Once dropped, the ghost item will become an item in the list, which will be reordered based on the user’s action.
![Example of what happens after an item is dragged. The item is dropped into the new position and the border color disappears. The faded placeholder item also disappears.](./img/dnd-simple4.svg)