feat(DragDropSort): update drag button usage (#10356)

* feat(DragDropSort): update drag button usage * Update packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx Co-authored-by: Eric Olkowski <[email protected]> --------- Co-authored-by: Eric Olkowski <[email protected]>
patternfly · May 23, 2024 · 679d39c · 679d39c
1 parent 6101cfe
commit 679d39c
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 45 deletions.
diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx
@@ -49,12 +49,12 @@ export interface DragDropSortProps extends DndContextProps {
   /** Callback when use begins dragging a draggable object */
   onDrag?: (event: DragDropSortDragStartEvent, oldIndex: number) => void;
   /** The variant determines which component wraps the draggable object.
-   * Default and defaultWithHandle varaints wrap the draggable object in a div.
+   * Default variant wraps the draggable object in a div.
    * DataList vairant wraps the draggable object in a DataListItem
    * DualListSelectorList variant wraps the draggable objects in a DualListSelectorListItem and a div.pf-c-dual-list-selector__item-text element
    * TableComposable variant wraps the draggable objects in TODO
    * */
-  variant?: 'default' | 'defaultWithHandle' | 'DataList' | 'DualListSelectorList' | 'TableComposable';
+  variant?: 'default' | 'DataList' | 'DualListSelectorList' | 'TableComposable';
 }
 
 export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
@@ -115,7 +115,7 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
         break;
       default:
         content = (
-          <Draggable useDragButton={variant === 'defaultWithHandle'} key={item.id} id={item.id} {...item.props}>
+          <Draggable useDragButton={variant === 'default'} key={item.id} id={item.id} {...item.props}>
             {item.content}
           </Draggable>
         );
@@ -153,7 +153,7 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
             );
           default:
             return (
-              <Draggable useDragButton={variant === 'defaultWithHandle'} key={item.id} id={item.id} {...item.props}>
+              <Draggable useDragButton={variant === 'default'} key={item.id} id={item.id} {...item.props}>
                 {item.content}
               </Draggable>
             );

diff --git a/...es/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap b/...es/react-drag-drop/src/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-v6-c-button pf-m-plain"
+          role="button"
+          tabindex="0"
+        >
+          <span
+            class="pf-v6-c-data-list__item-draggable-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-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-v6-c-button pf-m-plain"
+          role="button"
+          tabindex="0"
+        >
+          <span
+            class="pf-v6-c-data-list__item-draggable-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-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-v6-c-button pf-m-plain"
+          role="button"
+          tabindex="0"
+        >
+          <span
+            class="pf-v6-c-data-list__item-draggable-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-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/components/DragDrop/examples/BasicSorting.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/BasicSorting.tsx
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/BasicSortingWithDragButton.tsx b/packages/react-drag-drop/src/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/components/DragDrop/examples/DragDrop.md b/packages/react-drag-drop/src/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"
 
 ```