From f9d7fff67d4f32f9dd777240f736d0c232ebb7f0 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Thu, 24 Apr 2025 14:35:12 -0400 Subject: [PATCH 1/3] docs(drag and drop): Updates images for v6. --- .../components/drag-and-drop/drag.md | 58 +++++--- .../drag-and-drop/img/dnd-cards1.svg | 93 +++++++++++++ .../drag-and-drop/img/dnd-cards2.svg | 128 ++++++++++++++++++ .../drag-and-drop/img/dnd-cards3.svg | 93 +++++++++++++ .../drag-and-drop/img/dnd-cards4.svg | 102 ++++++++++++++ .../drag-and-drop/img/dnd-multi1.svg | 71 ++++++++++ .../drag-and-drop/img/dnd-multi2.svg | 95 +++++++++++++ .../drag-and-drop/img/dnd-multi3.svg | 71 ++++++++++ .../drag-and-drop/img/dnd-multi4.svg | 88 ++++++++++++ .../drag-and-drop/img/dnd-simple1.svg | 38 ++++++ .../drag-and-drop/img/dnd-simple23.svg | 48 +++++++ .../drag-and-drop/img/dnd-simple4.svg | 38 ++++++ .../drag-and-drop/img/dnd-simple5.svg | 40 ++++++ 13 files changed, 943 insertions(+), 20 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards1.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards2.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards3.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-cards4.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi1.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi2.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi3.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-multi4.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple1.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple23.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple4.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/drag-and-drop/img/dnd-simple5.svg 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..5d0ebb7446 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,62 @@ 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. +
+![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) +
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. -Dragging outside the bounding box shows an error state on the dragged item. +
+![Dragging outside of the draggable area results in an error state on the item being dragged. The border color changes to red.](./img/dnd-simple5.svg) +
### 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. +
+![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) +
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. - - - +
+![Dragging outside of the draggable area results in an error state on the item being dragged. The border color changes to red.](./img/dnd-multi4.svg) +
### Draggable cards @@ -53,19 +66,24 @@ 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. +
+![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) +
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. - +
+![Dragging outside of the draggable area results in an error state on the card being dragged. The border color changes to red.](./img/dnd-cards4.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..aaa3f3eb47 --- /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..e2be59aa16 --- /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..64461f241a --- /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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 20c02013d06adc3b8ad9cf436eabc929b78d0022 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Mon, 5 May 2025 16:26:42 -0400 Subject: [PATCH 2/3] Removing error state guidelines until a design decision is made for v6. --- .../components/drag-and-drop/drag.md | 17 ----------------- 1 file changed, 17 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 5d0ebb7446..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 @@ -27,11 +27,6 @@ import '../components.css'; ![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) -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. - -
-![Dragging outside of the draggable area results in an error state on the item being dragged. The border color changes to red.](./img/dnd-simple5.svg) -
### 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. @@ -54,12 +49,6 @@ PatternFly drag and drop allows users to move items between different list group ![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) -4. **Error state** - -
-![Dragging outside of the draggable area results in an error state on the item being dragged. The border color changes to red.](./img/dnd-multi4.svg) -
- ### Draggable cards In a card view, when the selected card has been dropped the others will reposition following a left-to-right flow by default. @@ -80,10 +69,4 @@ In a card view, when the selected card has been dropped the others will repositi
![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) -
- -4. **Error state** - -
-![Dragging outside of the draggable area results in an error state on the card being dragged. The border color changes to red.](./img/dnd-cards4.svg)
\ No newline at end of file From aa5e98c20531e2654c1c97e60d654042bce0405d Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Thu, 8 May 2025 11:01:05 -0400 Subject: [PATCH 3/3] Updating images to show proper placement of drag cursor. --- .../drag-and-drop/img/dnd-cards2.svg | 54 +++++++++---------- .../drag-and-drop/img/dnd-multi2.svg | 32 +++++------ .../drag-and-drop/img/dnd-simple23.svg | 14 ++--- 3 files changed, 50 insertions(+), 50 deletions(-) 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 index aaa3f3eb47..356c49c11e 100644 --- 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 @@ -7,9 +7,9 @@ - + - + @@ -18,9 +18,9 @@ - + - + @@ -28,9 +28,9 @@ - + - + @@ -38,9 +38,9 @@ - + - + @@ -48,9 +48,9 @@ - + - + @@ -59,9 +59,9 @@ - + - + @@ -70,9 +70,9 @@ - + - + @@ -80,9 +80,9 @@ - + - + @@ -90,9 +90,9 @@ - + - + @@ -100,20 +100,20 @@ - + - + - + - - - - - - + + + + + + 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 index e2be59aa16..cb9f2fcb5b 100644 --- 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 @@ -11,21 +11,21 @@ - + - + - + @@ -40,7 +40,7 @@ - + @@ -53,43 +53,43 @@ - + - + - + - + - + - + - - - - - - + + + + + + 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 index 64461f241a..e56d8585f7 100644 --- 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 @@ -37,12 +37,12 @@ - + - - - - - - + + + + + +