From e790143faba17283efdcce7951a9d7cce40991d3 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 13 May 2024 10:34:06 -0400 Subject: [PATCH 1/2] feat(DragDropSort): update drag button usage --- .../src/components/DragDrop/DragDropSort.tsx | 8 +- .../__snapshots__/DragDrop.test.tsx.snap | 96 ++++++++++++++++--- .../DragDrop/examples/BasicSorting.tsx | 19 ---- .../examples/BasicSortingWithDragButton.tsx | 1 - .../components/DragDrop/examples/DragDrop.md | 6 -- 5 files changed, 85 insertions(+), 45 deletions(-) delete mode 100644 packages/react-drag-drop/src/components/DragDrop/examples/BasicSorting.tsx diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx index d7bfbfd0ce0..78c37166780 100644 --- 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 varaint 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 = ({ @@ -115,7 +115,7 @@ export const DragDropSort: React.FunctionComponent = ({ break; default: content = ( - + {item.content} ); @@ -153,7 +153,7 @@ export const DragDropSort: React.FunctionComponent = ({ ); default: return ( - + {item.content} ); diff --git a/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap b/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap index a8127357ad8..73d509e5671 100644 --- a/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap +++ b/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap @@ -7,33 +7,99 @@ exports[`renders some divs 1`] = ` >
+ one
+ two
+ three
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/BasicSorting.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/BasicSorting.tsx deleted file mode 100644 index 40021ef9f60..00000000000 --- a/packages/react-drag-drop/src/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([ - { id: 'basic-1', content: 'one' }, - { id: 'basic-2', content: 'two' }, - { id: 'basic-3', content: 'three' } - ]); - - return ( - { - setItems(newItems); - }} - /> - ); -}; diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/BasicSortingWithDragButton.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/BasicSortingWithDragButton.tsx index 0cea4a69962..1988442db7e 100644 --- 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 ( { 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 index 3b0e3116f09..2cf2960cb4d 100644 --- 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" ``` From c85ec9cd27f9fa3a80bbd0e8f734d071b0a57aec Mon Sep 17 00:00:00 2001 From: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Date: Wed, 22 May 2024 15:53:41 -0400 Subject: [PATCH 2/2] Update packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../react-drag-drop/src/components/DragDrop/DragDropSort.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx index 78c37166780..faa64957d8c 100644 --- a/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx +++ b/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx @@ -49,7 +49,7 @@ 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 varaint wraps 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