Drag Handle Button

A button styled to look like a drag handle

About Changelog

3.2.1

Patch Changes

Updated dependencies

3.2.0

Minor Changes

bd2c5b0112185, (opens new window) - Remove stale API report artifacts from published Platform packages.

Patch Changes

Updated dependencies

3.1.5

Patch Changes

Updated dependencies

3.1.4

Patch Changes

Updated dependencies

3.1.3

Patch Changes

Updated dependencies

3.1.2

Patch Changes

Updated dependencies

3.1.1

Patch Changes

Updated dependencies

3.1.0

Minor Changes

cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

Patch Changes

Updated dependencies

3.0.1

Patch Changes

ee28cf33718b0, (opens new window) - Add @atlaskit/react-compiler-gating as a runtime dependency to enable React Compiler platform gating.
Updated dependencies

3.0.0

Major Changes

f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

Types are now exclusively via the "types": "dist/types/index.d.ts" property.
- "typesVersions": { - ">=4.5 <4.9": { - "*": [ - "dist/types-ts4.5/*", - "dist/types-ts4.5/index.d.ts" - ] - } - },

Patch Changes

Updated dependencies

2.2.11

Patch Changes

72290778b16ca, (opens new window) - Enrol mixed platform packages into the React Compiler with platform gating via isReactCompilerActivePlatform

2.2.10

Patch Changes

Updated dependencies

2.2.9

Patch Changes

Updated dependencies

2.2.8

Patch Changes

Updated dependencies

2.2.7

Patch Changes

Updated dependencies

2.2.6

Patch Changes

Updated dependencies

2.2.5

Patch Changes

Updated dependencies

2.2.4

Patch Changes

Updated dependencies

2.2.3

Patch Changes

Updated dependencies

2.2.2

Patch Changes

Updated dependencies

2.2.1

Patch Changes

Updated dependencies

2.2.0

Minor Changes

00e69e0b7c839, (opens new window) - Clean up and removal of the platform-visual-refresh-icons feature flag.

2.1.8

Patch Changes

Updated dependencies

2.1.7

Patch Changes

d14ea5f60b689, (opens new window) - chore: migrate platform UI & component libraries icon imports from migration paths to core

2.1.6

Patch Changes

Updated dependencies

2.1.5

Patch Changes

Updated dependencies

2.1.4

Patch Changes

Updated dependencies

2.1.3

Patch Changes

Updated dependencies

2.1.2

Patch Changes

Updated dependencies

2.1.1

Patch Changes

806cfe1c4e6b7, (opens new window) - Internal changes to how border radius is applied.

2.1.0

Minor Changes

3136f686a1929, (opens new window) - Updating DragHandleButton to use our new DragHandleVerticalIcon.

Deprecating DragHandleButtonSmall.

Rationale:
- DragHandleButtonSmall uses a tiny icon size that is no longer supported by our icon system (the smallest icon size is now 12px x 12px)
- Icons smaller than 12px x 12px are not good for visibility and accessibility
- The small hitbox of DragHandleButtonSmall (8px x 16px) is below our 24px x 24px minimum hit target size for accessibility. More details, (opens new window)

Patch Changes

Updated dependencies

2.0.8

Patch Changes

Updated dependencies

2.0.7

Patch Changes

Updated dependencies

2.0.6

Patch Changes

Updated dependencies

2.0.5

Patch Changes

Updated dependencies

2.0.4

Patch Changes

Updated dependencies

2.0.3

Patch Changes

#125534, (opens new window) f135a8d1066c9, (opens new window) - Updates the react peer dependency range to include React 19. While we expect these packages to work with React 19, we do not test against and there is a small risk of issues. If you have any problems, please raise an issue on Github, (opens new window).

2.0.2

Patch Changes

Updated dependencies

2.0.1

Patch Changes

#120533, (opens new window) f1bec731e278f, (opens new window) - Adds a sideEffects field to ensure this package does not have Compiled styles tree-shaken in the future to avoid an accidental regression.

This is related to https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953, (opens new window)

2.0.0

Major Changes

#117363, (opens new window) 10a0f7f6c2027, (opens new window) - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026, (opens new window)

Patch Changes

Updated dependencies

1.3.1

Patch Changes

Updated dependencies

1.3.0

Minor Changes

#109060, (opens new window) 4660ec858a305, (opens new window) - Update React from v16 to v18

Patch Changes

Updated dependencies

1.2.4

Patch Changes

Updated dependencies

1.2.3

Patch Changes

Updated dependencies

1.2.2

Patch Changes

Updated dependencies

1.2.1

Patch Changes

Updated dependencies

1.2.0

Minor Changes

#150481, (opens new window) e750fb3633f6e, (opens new window) - [ux] Enable new icons behind a feature flag.

1.1.13

Patch Changes

Updated dependencies

1.1.12

Patch Changes

#134886, (opens new window) d477c8582713a, (opens new window) - We are updating drag icon as part of visual refresh behind a feature gate.

1.1.11

Patch Changes

Updated dependencies

1.1.10

Patch Changes

#124164, (opens new window) 58941fa1d332a, (opens new window) - All react unit tests will now run against react@16 and react@18 on CI.

1.1.9

Patch Changes

Updated dependencies

1.1.8

Patch Changes

Updated dependencies

1.1.7

Patch Changes

Updated dependencies

1.1.6

Patch Changes

Updated dependencies

1.1.5

Patch Changes

Updated dependencies

1.1.4

Patch Changes

#107125, (opens new window) bba5df29ef98, (opens new window) - ts-ignore css prop error to unblock local consumption in jira

1.1.3

Patch Changes

#106643, (opens new window) 66e90d5874ad, (opens new window) - Shifting icon color from 'color.icon.subtle' (Neutral700) to 'color.text' (Neutral1000) to match standard icon button appearance and for improved accessibility.

1.1.2

Patch Changes

Updated dependencies

1.1.1

Patch Changes

#88354, (opens new window) 4c87d9b4f0c2, (opens new window) - The internal composition of this component has changed. There is no expected change in behavior.

1.1.0

Minor Changes

#87853, (opens new window) 54e884fd8d96, (opens new window) - Increasing react peerDependency range to include react@17 and react@18.

1.0.7

Patch Changes

#84398, (opens new window) 77694db987fc, (opens new window) - Public release of Pragmatic drag and drop documentation

1.0.6

Patch Changes

#84250, (opens new window) a1cc31800621, (opens new window) - Internal refactor: now relying on automatic fallback insertion for token(). This change provides an improved experience for consumers who don't have Atlassian Design tokens enabled.

1.0.5

Patch Changes

#83702, (opens new window) 4d9e25ab4eaa, (opens new window) - Updating the descriptions of Pragmatic drag and drop packages, so they each provide a consistent description to various consumers, and so they are consistently formed amongst each other.
- package.json description
- README.md
- Website documentation

1.0.4

Patch Changes

#83116, (opens new window) 8d4e99057fe0, (opens new window) - Upgrade Typescript from 4.9.5 to 5.4.2

1.0.3

Patch Changes

Updated dependencies

1.0.2

Patch Changes

Updated dependencies

1.0.1

Patch Changes

Updated dependencies

1.0.0

Major Changes

#70616, (opens new window) 42e57ea65fee, (opens new window) - This is our first major release (1.0) for all Pragmatic drag and drop packages.

For a detailed explanation of these changes, and how to upgrade (automatically) to 1.0 please see our 1.0 upgrade guide, (opens new window)

0.5.1

Patch Changes

Updated dependencies

0.5.0

Minor Changes

#59748, (opens new window) 70d293a2f8b8, (opens new window) - Removed the DragHandleDropdownMenu and DragHandleDropdownMenuSmall exports. Composition with DropdownMenu should be used instead.

This decision was made to avoid the risk of mismatched versions of @atlaskit/dropdown-menu, which could occur when this package was bringing in a different version to the main one installed. It is also preferable to encourage composition, which allows for greater flexibility and control for consumers.

Before
import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu'; import { DragHandleDropdownMenu } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-dropdown-menu'; function MyComponent() { const myRef = useRef<HTMLButtonElement>(null); return ( <DragHandleDropdownMenu triggerRef={myRef} label="Reorder"> <DropdownItemGroup> <DropdownItem>Move up</DropdownItem> <DropdownItem>Move down</DropdownItem> </DropdownItemGroup> </DragHandleDropdownMenu> ); }
After
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu'; import mergeRefs from '@atlaskit/ds-lib/merge-refs'; import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button'; function MyComponent() { const myRef = useRef<HTMLButtonElement>(null); return ( <DropdownMenu trigger={({ triggerRef, ...triggerProps }) => ( <DragHandleButton ref={mergeRefs([myRef, triggerRef])} {...triggerProps} label="Reorder" /> )} > <DropdownItemGroup> <DropdownItem>Move up</DropdownItem> <DropdownItem>Move down</DropdownItem> </DropdownItemGroup> </DropdownMenu> ); }

0.4.1

Patch Changes

Updated dependencies

0.4.0

Minor Changes

#41296, (opens new window) 3e479ba1a4a, (opens new window) - [ux] The drag handle icon now uses the color.icon.subtle token.
#41296, (opens new window) ac64412c674, (opens new window) - Introduced small variants of the drag handle button and drag handle dropdown menu.

These are intended for existing experiences with little space available to introduce a drag handle. They are not recommended for general use.

These small variants can be accessed through the /drag-handle-button-small and /drag-handle-dropdown-menu-small entrypoints.

Patch Changes

Updated dependencies

0.3.1

Patch Changes

Updated dependencies

0.3.0

Minor Changes

#38144, (opens new window) ee9aa9b7300, (opens new window) - [ux] The button now has display: flex

0.2.0

Minor Changes

#38115, (opens new window) ffb3e727aaf, (opens new window) - The type of the DragHandleButton now defaults to 'button' (instead of 'submit')
9f5b56f5677, (opens new window) - The DragHandleButton props now extend ButtonHTMLAttributes (instead of just HTMLAttributes)

Was this page helpful?

We use this feedback to improve our documentation.