From 871ba54ff5cf95f9194a00a43ce07922f7226ac4 Mon Sep 17 00:00:00 2001
From: kmcfaul <45077788+kmcfaul@users.noreply.github.com>
Date: Mon, 3 Jun 2024 10:07:09 -0400
Subject: [PATCH] feat(DragDropSort): update drag button usage v5 (#10357)

---
 .../next/components/DragDrop/DragDropSort.tsx | 14 ++-
 .../__snapshots__/DragDrop.test.tsx.snap      | 96 ++++++++++++++++---
 .../DragDrop/examples/BasicSorting.tsx        | 19 ----
 .../examples/BasicSortingWithDragButton.tsx   |  1 -
 .../components/DragDrop/examples/DragDrop.md  |  6 --
 5 files changed, 93 insertions(+), 43 deletions(-)
 delete mode 100644 packages/react-drag-drop/src/next/components/DragDrop/examples/BasicSorting.tsx

diff --git a/packages/react-drag-drop/src/next/components/DragDrop/DragDropSort.tsx b/packages/react-drag-drop/src/next/components/DragDrop/DragDropSort.tsx
index 615533711d8..af2d950e0c6 100644
--- a/packages/react-drag-drop/src/next/components/DragDrop/DragDropSort.tsx
+++ b/packages/react-drag-drop/src/next/components/DragDrop/DragDropSort.tsx
@@ -117,7 +117,12 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
         break;
       default:
         content = (
-          <Draggable useDragButton={variant === 'defaultWithHandle'} key={item.id} id={item.id} {...item.props}>
+          <Draggable
+            useDragButton={variant === 'defaultWithHandle' || variant === 'default'}
+            key={item.id}
+            id={item.id}
+            {...item.props}
+          >
             {item.content}
           </Draggable>
         );
@@ -157,7 +162,12 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
             );
           default:
             return (
-              <Draggable useDragButton={variant === 'defaultWithHandle'} key={item.id} id={item.id} {...item.props}>
+              <Draggable
+                useDragButton={variant === 'defaultWithHandle' || variant === 'default'}
+                key={item.id}
+                id={item.id}
+                {...item.props}
+              >
                 {item.content}
               </Draggable>
             );
diff --git a/packages/react-drag-drop/src/next/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap b/packages/react-drag-drop/src/next/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap
index a8127357ad8..88ada1c9acc 100644
--- a/packages/react-drag-drop/src/next/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap
+++ b/packages/react-drag-drop/src/next/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap
@@ -7,33 +7,99 @@ exports[`renders some divs 1`] = `
   >
     <div>
       <div
-        aria-describedby="DndDescribedBy-0"
-        aria-disabled="false"
-        aria-roledescription="sortable"
         class=""
-        role="button"
-        tabindex="0"
       >
+        <button
+          aria-describedby="DndDescribedBy-0"
+          aria-disabled="false"
+          aria-label="Drag button"
+          aria-roledescription="sortable"
+          class="pf-v5-c-button pf-m-plain"
+          role="button"
+          tabindex="0"
+        >
+          <span
+            class="pf-v5-c-data-list__item-draggable-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 320 512"
+              width="1em"
+            >
+              <path
+                d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
         one
       </div>
       <div
-        aria-describedby="DndDescribedBy-0"
-        aria-disabled="false"
-        aria-roledescription="sortable"
         class=""
-        role="button"
-        tabindex="0"
       >
+        <button
+          aria-describedby="DndDescribedBy-0"
+          aria-disabled="false"
+          aria-label="Drag button"
+          aria-roledescription="sortable"
+          class="pf-v5-c-button pf-m-plain"
+          role="button"
+          tabindex="0"
+        >
+          <span
+            class="pf-v5-c-data-list__item-draggable-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 320 512"
+              width="1em"
+            >
+              <path
+                d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
         two
       </div>
       <div
-        aria-describedby="DndDescribedBy-0"
-        aria-disabled="false"
-        aria-roledescription="sortable"
         class=""
-        role="button"
-        tabindex="0"
       >
+        <button
+          aria-describedby="DndDescribedBy-0"
+          aria-disabled="false"
+          aria-label="Drag button"
+          aria-roledescription="sortable"
+          class="pf-v5-c-button pf-m-plain"
+          role="button"
+          tabindex="0"
+        >
+          <span
+            class="pf-v5-c-data-list__item-draggable-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 320 512"
+              width="1em"
+            >
+              <path
+                d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
         three
       </div>
     </div>
diff --git a/packages/react-drag-drop/src/next/components/DragDrop/examples/BasicSorting.tsx b/packages/react-drag-drop/src/next/components/DragDrop/examples/BasicSorting.tsx
deleted file mode 100644
index 40021ef9f60..00000000000
--- a/packages/react-drag-drop/src/next/components/DragDrop/examples/BasicSorting.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { DragDropSort, DraggableObject } from '@patternfly/react-drag-drop';
-
-export const BasicSorting: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState<DraggableObject[]>([
-    { id: 'basic-1', content: 'one' },
-    { id: 'basic-2', content: 'two' },
-    { id: 'basic-3', content: 'three' }
-  ]);
-
-  return (
-    <DragDropSort
-      items={items}
-      onDrop={(_, newItems) => {
-        setItems(newItems);
-      }}
-    />
-  );
-};
diff --git a/packages/react-drag-drop/src/next/components/DragDrop/examples/BasicSortingWithDragButton.tsx b/packages/react-drag-drop/src/next/components/DragDrop/examples/BasicSortingWithDragButton.tsx
index 0cea4a69962..1988442db7e 100644
--- a/packages/react-drag-drop/src/next/components/DragDrop/examples/BasicSortingWithDragButton.tsx
+++ b/packages/react-drag-drop/src/next/components/DragDrop/examples/BasicSortingWithDragButton.tsx
@@ -11,7 +11,6 @@ export const BasicSortingWithDragButton: React.FunctionComponent = () => {
   return (
     <DragDropSort
       items={items}
-      variant="defaultWithHandle"
       onDrop={(_, newItems) => {
         setItems(newItems);
       }}
diff --git a/packages/react-drag-drop/src/next/components/DragDrop/examples/DragDrop.md b/packages/react-drag-drop/src/next/components/DragDrop/examples/DragDrop.md
index 3b0e3116f09..2cf2960cb4d 100644
--- a/packages/react-drag-drop/src/next/components/DragDrop/examples/DragDrop.md
+++ b/packages/react-drag-drop/src/next/components/DragDrop/examples/DragDrop.md
@@ -21,12 +21,6 @@ import { DragDropSort } from '@patternfly/react-drag-drop';
 
 ### Basic drag and drop sorting
 
-```ts file="./BasicSorting.tsx"
-
-```
-
-### Basic drag and drop sorting with drag button
-
 ```ts file="./BasicSortingWithDragButton.tsx"
 
 ```