Pragmatic drag and drop
An optional package for Pragmatic drag and drop containing react
components to assist with setting up accessible experiences.
An optional package for Pragmatic drag and drop containing react components to assist with setting up accessible experiences
An optional package for Pragmatic drag and drop containing react
components to assist with setting up accessible experiences.
f135a8d1066c9
-
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.#120533
f1bec731e278f
-
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
#117363
10a0f7f6c2027
-
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
4660ec858a305
-
Update React
from v16 to v18e750fb3633f6e
-
[ux] Enable new icons behind a feature flag.d477c8582713a
-
We are updating drag icon as part of visual refresh behind a feature gate.58941fa1d332a
-
All react
unit tests will now run against react@16
and react@18
on CI.bba5df29ef98
-
ts-ignore css prop error to unblock local consumption in jira66e90d5874ad
-
Shifting icon color from 'color.icon.subtle'
(Neutral700
) to 'color.text'
(Neutral1000
) to
match standard icon button appearance and for improved accessibility.4c87d9b4f0c2
-
The internal composition of this component has changed. There is no expected change in behavior.54e884fd8d96
-
Increasing react
peerDependency
range to include react@17
and react@18
.77694db987fc
-
Public release of Pragmatic drag and drop documentationa1cc31800621
-
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.#83702
4d9e25ab4eaa
-
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
8d4e99057fe0
-
Upgrade Typescript from 4.9.5
to 5.4.2
#70616
42e57ea65fee
-
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
#59748
70d293a2f8b8
-
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>
);
}
3e479ba1a4a
- [ux] The
drag handle icon now uses the color.icon.subtle
token.#41296
ac64412c674
-
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.
ee9aa9b7300
- [ux] The
button now has display: flex
ffb3e727aaf
- The
type
of the DragHandleButton
now defaults to 'button'
(instead of 'submit'
)9f5b56f5677
- The
DragHandleButton
props now extend ButtonHTMLAttributes
(instead of just HTMLAttributes
)