Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { css } from '@patternfly/react-styles';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';

## Examples

Expand Down Expand Up @@ -86,7 +87,7 @@ Note: There is a new recommended drag and drop implementation with full keyboard

Previously, draggable data lists had their own API for the [drag and drop component](/components/drag-and-drop), which wasn't flexible enough to allow custom styling for items as they are dragged. To address this disparity, `<DragDrop>`, `<Draggable>`, and `<Droppable>` components were added to replace our now deprecated HTML5-based API. Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.

```ts isBeta file="./DataListDraggable.tsx"
```ts isDeprecated file="./DataListDraggable.tsx"

```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@ import {
DataListControl,
DataListDragButton,
DataListItemCells,
DragDrop,
Draggable,
Droppable,
getUniqueId
} from '@patternfly/react-core';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';

interface ItemType {
id: string;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';

## Examples

Expand Down Expand Up @@ -103,7 +104,7 @@ This example only allows reordering the contents of the "chosen" pane with drag

Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.

```ts file="DualListSelectorComposableDragDrop.tsx"
```ts isDeprecated file="DualListSelectorComposableDragDrop.tsx"

```

Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import React from 'react';
import {
DragDrop,
Droppable,
Draggable,
DualListSelector,
DualListSelectorPane,
DualListSelectorList,
DualListSelectorListItem,
DualListSelectorControlsWrapper,
DualListSelectorControl,
DraggableItemPosition
DualListSelectorControl
} from '@patternfly/react-core';
import { DragDrop, Draggable, Droppable, DraggableItemPosition } from '@patternfly/react-core/deprecated';
import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
Expand Down
1 change: 0 additions & 1 deletion packages/react-core/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export * from './DataList';
export * from './DatePicker';
export * from './DescriptionList';
export * from './Divider';
export * from './DragDrop';
export * from './Drawer';
export * from './Dropdown';
export * from './DualListSelector';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ id: Drag and drop
section: components
propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
title: Drag and drop
deprecated: true
---

You can use the `<DragDrop>` component to move items in or between lists. The `<DragDrop>` component should contain `<Droppable>` components which contain `<Draggable>` components.

```ts noLive
import React from 'react';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';

const DragDropCodeSample: React.FunctionComponent = () => (
<DragDrop>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';

interface ItemType {
id: string;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
import { Split, SplitItem } from '@patternfly/react-core';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';

interface ItemType {
id: string;
Expand Down
1 change: 1 addition & 0 deletions packages/react-core/src/deprecated/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export * from './ApplicationLauncher';
export * from './Chip';
export * from './ContextSelector';
export * from './DragDrop';
export * from './Dropdown';
export * from './OptionsMenu';
export * from './PageHeader';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';

## Examples

Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import React from 'react';
import {
DragDrop,
Droppable,
Draggable,
DualListSelector,
DualListSelectorPane,
DualListSelectorList,
DualListSelectorListItem,
DualListSelectorControlsWrapper,
DualListSelectorControl,
DraggableItemPosition
DualListSelectorControl
} from '@patternfly/react-core';
import { DragDrop, Draggable, Droppable, DraggableItemPosition } from '@patternfly/react-core/deprecated';
import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
Expand Down