@atlaskit/pragmatic-drag-and-drop-react-accessibility 2.0.7 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/pragmatic-drag-and-drop-react-accessibility
 
+## 2.1.0
+
+### Minor Changes
+
+- [`3136f686a1929`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3136f686a1929) -
+  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](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.0.7
 
 ### Patch Changes

package/constellation/drag-handle-button/about.mdx

@@ -21,11 +21,24 @@ import DragHandleDropdownMenuExample from '../../examples/drag-handle-dropdown-m
 
 <Example Component={DragHandleButtonExample} />
 
-## Small variant
+## Small variant (deprecated)
+
+<SectionMessage appearance="warning">
+
+The small variant has now been deprecated.
+
+- `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](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
+
+</SectionMessage>
 
 A small variant is available through the `/drag-handle-button-small` entrypoint.
 
-It is intended for experiences with very limited space to accomodate a drag handle. It is not
+It is intended for experiences with very limited space to accommodate a drag handle. It is not
 recommended for general use due to the small target size.
 
 <Example Component={DragHandleButtonSmallExample} />

package/dist/cjs/drag-handle-button-small.js

@@ -24,11 +24,23 @@ var iconSmallStylesNew = (0, _primitives.xcss)({
   display: 'inline-flex'
 });
 
+// TODO: will run full deprecation process later. For now just want people to stop using this.
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
 /**
  * A button with pre-configured styling to look like a drag handle.
  *
  * This component uses a native button because the `@atlaskit/button`
  * cancels `mouseDown` events, which prevents dragging.
+ *
+ * @deprecated Please use `DragHandleButton`.
+ *
+ * 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](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
  */
 var DragHandleButtonSmall = exports.DragHandleButtonSmall = /*#__PURE__*/(0, _react.forwardRef)(function DragHandleButton(_ref, ref) {
   var label = _ref.label,

package/dist/cjs/drag-handle-button.js

@@ -9,7 +9,7 @@ exports.DragHandleButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _dragHandleVerticalDragHandler = _interopRequireDefault(require("@atlaskit/icon/core/migration/drag-handle-vertical--drag-handler"));
+var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
 var _dragHandleButtonBase = require("./drag-handle-button-base");
 var _excluded = ["label"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -24,8 +24,7 @@ var DragHandleButton = exports.DragHandleButton = /*#__PURE__*/(0, _react.forwar
     buttonProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_dragHandleButtonBase.DragHandleButtonBase, (0, _extends2.default)({
     ref: ref
-  }, buttonProps), /*#__PURE__*/_react.default.createElement(_dragHandleVerticalDragHandler.default, {
-    color: "currentColor",
+  }, buttonProps), /*#__PURE__*/_react.default.createElement(_dragHandleVertical.default, {
     spacing: "spacious",
     label: label,
     size: "small"

package/dist/es2019/drag-handle-button-small.js

@@ -14,11 +14,23 @@ const iconSmallStylesNew = xcss({
   display: 'inline-flex'
 });
 
+// TODO: will run full deprecation process later. For now just want people to stop using this.
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
 /**
  * A button with pre-configured styling to look like a drag handle.
  *
  * This component uses a native button because the `@atlaskit/button`
  * cancels `mouseDown` events, which prevents dragging.
+ *
+ * @deprecated Please use `DragHandleButton`.
+ *
+ * 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](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
  */
 export const DragHandleButtonSmall = /*#__PURE__*/forwardRef(function DragHandleButton({
   label,

package/dist/es2019/drag-handle-button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import DragHandleVerticalIcon from '@atlaskit/icon/core/migration/drag-handle-vertical--drag-handler';
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import { DragHandleButtonBase } from './drag-handle-button-base';
 /**
  * A button with pre-configured styling to look like a drag handle.
@@ -15,7 +15,6 @@ export const DragHandleButton = /*#__PURE__*/forwardRef(function DragHandleButto
   return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
     ref: ref
   }, buttonProps), /*#__PURE__*/React.createElement(DragHandleVerticalIcon, {
-    color: "currentColor",
     spacing: "spacious",
     label: label,
     size: "small"

package/dist/esm/drag-handle-button-small.js

@@ -16,11 +16,23 @@ var iconSmallStylesNew = xcss({
   display: 'inline-flex'
 });
 
+// TODO: will run full deprecation process later. For now just want people to stop using this.
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
 /**
  * A button with pre-configured styling to look like a drag handle.
  *
  * This component uses a native button because the `@atlaskit/button`
  * cancels `mouseDown` events, which prevents dragging.
+ *
+ * @deprecated Please use `DragHandleButton`.
+ *
+ * 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](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
  */
 export var DragHandleButtonSmall = /*#__PURE__*/forwardRef(function DragHandleButton(_ref, ref) {
   var label = _ref.label,

package/dist/esm/drag-handle-button.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label"];
 import React, { forwardRef } from 'react';
-import DragHandleVerticalIcon from '@atlaskit/icon/core/migration/drag-handle-vertical--drag-handler';
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import { DragHandleButtonBase } from './drag-handle-button-base';
 /**
  * A button with pre-configured styling to look like a drag handle.
@@ -16,7 +16,6 @@ export var DragHandleButton = /*#__PURE__*/forwardRef(function DragHandleButton(
   return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
     ref: ref
   }, buttonProps), /*#__PURE__*/React.createElement(DragHandleVerticalIcon, {
-    color: "currentColor",
     spacing: "spacious",
     label: label,
     size: "small"

package/dist/types/drag-handle-button-base.d.ts

@@ -2,7 +2,6 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/// <reference types="react" />
 import type { DragHandleButtonProps } from './types';
 export type DragHandleButtonAppearance = 'default' | 'subtle' | 'selected';
 /**

package/dist/types/drag-handle-button-small.d.ts

@@ -4,10 +4,20 @@ import React from 'react';
  *
  * This component uses a native button because the `@atlaskit/button`
  * cancels `mouseDown` events, which prevents dragging.
+ *
+ * @deprecated Please use `DragHandleButton`.
+ *
+ * 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](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
  */
 export declare const DragHandleButtonSmall: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    appearance?: import("./types").DragHandleButtonAppearance | undefined;
+    appearance?: import("./types").DragHandleButtonAppearance;
     label: string;
-    isSelected?: boolean | undefined;
-    testId?: string | undefined;
+    isSelected?: boolean;
+    testId?: string;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/drag-handle-button.d.ts

@@ -6,8 +6,8 @@ import React from 'react';
  * cancels `mouseDown` events, which prevents dragging.
  */
 export declare const DragHandleButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    appearance?: import("./types").DragHandleButtonAppearance | undefined;
+    appearance?: import("./types").DragHandleButtonAppearance;
     label: string;
-    isSelected?: boolean | undefined;
-    testId?: string | undefined;
+    isSelected?: boolean;
+    testId?: string;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/types-ts4.5/drag-handle-button-base.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx

package/dist/types-ts4.5/drag-handle-button-small.d.ts

@@ -4,10 +4,20 @@ import React from 'react';
  *
  * This component uses a native button because the `@atlaskit/button`
  * cancels `mouseDown` events, which prevents dragging.
+ *
+ * @deprecated Please use `DragHandleButton`.
+ *
+ * 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](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
  */
 export declare const DragHandleButtonSmall: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    appearance?: import("./types").DragHandleButtonAppearance | undefined;
+    appearance?: import("./types").DragHandleButtonAppearance;
     label: string;
-    isSelected?: boolean | undefined;
-    testId?: string | undefined;
+    isSelected?: boolean;
+    testId?: string;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/types-ts4.5/drag-handle-button.d.ts

@@ -6,8 +6,8 @@ import React from 'react';
  * cancels `mouseDown` events, which prevents dragging.
  */
 export declare const DragHandleButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    appearance?: import("./types").DragHandleButtonAppearance | undefined;
+    appearance?: import("./types").DragHandleButtonAppearance;
     label: string;
-    isSelected?: boolean | undefined;
-    testId?: string | undefined;
+    isSelected?: boolean;
+    testId?: string;
 } & React.RefAttributes<HTMLButtonElement>>;

package/drag-handle-button/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/drag-handle-button.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/drag-handle-button.d.ts"
       ]

package/drag-handle-button-small/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/drag-handle-button-small.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/drag-handle-button-small.d.ts"
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility",
-	"version": "2.0.7",
+	"version": "2.1.0",
 	"description": "An optional package for Pragmatic drag and drop containing react components to assist with setting up accessible experiences",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/focus-ring": "^3.0.0",
-		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/icon": "^28.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^6.0.0",
@@ -51,11 +51,9 @@
 	"devDependencies": {
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/visual-regression": "workspace:^",
-		"@atlassian/ssr-tests": "^0.2.0",
+		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0",
-		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
 	"techstack": {