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 a16dd3d9c2..52e077abed 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 @@ -3,49 +3,51 @@ id: Drag and drop section: components --- +import '../components.css'; + ## Usage ### Simple list 1. **Draggable area:** The drag and drop interaction can be triggered with click and hold over any part of the item. The `fa-grip` icon is used to show that the drag and drop interaction is available. -Showing the area in which an item can be dragged. +
+![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. 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. -Borders appear around the item and bounding box shows the area in which an item can be dragged. +
+![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. -postDrag drops item into new position and all border highlights are disabled. - -5. **Error state:** If the list item is dragged outside the bounding box the borders on the dragged item will switch to `--pf-v6-global--danger-color--100` and the cursor will change to `not-allowed` to indicate an invalid placement. If the user releases the cursor outside the bounding area the dragged item will return to its default position. +
+![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) +
-Dragging outside the bounding box shows an error state on the dragged item. ### Multiple lists PatternFly drag and drop allows users to move items between different list groups. For example, in a To-Do list scenario users can quickly drag list items from the ”In progress” column to the “Done” column. 1. **Draggable item** -Showing the area in which an item can be dragged. - +
+![An example of multiple data lists with items that can be dragged.](./img/dnd-multi1.svg) +
2. **onDrag event** -Borders appear around the item and bounding boxes shows the area in which an item can be dragged. - +
+![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-multi2.svg) +
3. **postDrag event** -postDrag drops item into new position and all border highlights are disabled. - -4. **Error state** - -When dragging outside the bounding box the border color of the dragged item changes to pf-color-red-100 and the cursor changes to error state. - - - +
+![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-multi3.svg) +
### Draggable cards @@ -53,19 +55,18 @@ In a card view, when the selected card has been dropped the others will repositi 1. **Draggable item** -Showing the area in which an item can be dragged. - +
+![Example of a group of cards that can be dragged.](./img/dnd-cards1.svg) +
2. **onDrag event** -Borders appear around the item and bounding box shows the area in which an item can be dragged. - +
+![Example of what happens when a card is dragged. A blue border appears around the card being dragged and a faded placeholder version stays in the original position.](./img/dnd-cards2.svg) +
3. **postDrag event** -postDrag drops item into new position and all border highlights are disabled. - -4. **Error state** - -When dragging outside the bounding box the border color of the dragged item changes to pf-color-red-100 and the cursor changes to error state. - +
+![Example of what happens after a card is dragged. The card is dropped into the new position and the border color disappears. The faded placeholder card also disappears.](./img/dnd-cards3.svg) +
\ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards1.svg new file mode 100644 index 0000000000..78b2d6f9ad --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards1.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards2.svg new file mode 100644 index 0000000000..356c49c11e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards2.svg @@ -0,0 +1,128 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards3.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards3.svg new file mode 100644 index 0000000000..dc6b71ba22 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards3.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards4.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards4.svg new file mode 100644 index 0000000000..add5a37ab8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards4.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi1.svg new file mode 100644 index 0000000000..3a08cb9f0e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi1.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi2.svg new file mode 100644 index 0000000000..cb9f2fcb5b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi2.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi3.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi3.svg new file mode 100644 index 0000000000..fb3055c1e5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi3.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi4.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi4.svg new file mode 100644 index 0000000000..9346bd8e7d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi4.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple1.svg new file mode 100644 index 0000000000..d7d3bca8dd --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple1.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple23.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple23.svg new file mode 100644 index 0000000000..e56d8585f7 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple23.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple4.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple4.svg new file mode 100644 index 0000000000..742a27c07f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple4.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple5.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple5.svg new file mode 100644 index 0000000000..bb572e7493 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple5.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +