feat(DragDropSort): update drag button usage v5 (#10357)

patternfly · Jun 3, 2024 · 871ba54 · 871ba54
1 parent 4cb0f76
commit 871ba54
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 43 deletions.
diff --git 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/...act-drag-drop/src/next/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap b/...act-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
diff --git a/...ages/react-drag-drop/src/next/components/DragDrop/examples/BasicSortingWithDragButton.tsx b/...ages/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
@@ -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"
 
 ```