@atlaskit/button 16.11.0 → 16.12.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/button
 
+## 16.12.0
+
+### Minor Changes
+
+- [#42305](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42305) [`4c9d4a7be34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c9d4a7be34) - - Link button variants (still in Alpha) `<LinkButton>` and `<LinkIconButton>` now support router link components through use of an app provider
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.11.0
 
 ### Minor Changes

package/dist/cjs/new-button/variants/default/link.js

@@ -1,26 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireWildcard(require("react"));
+var _link = _interopRequireDefault(require("@atlaskit/primitives/link"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
 var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "iconAfter", "children", "shouldFitContainer", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-var LinkButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function LinkButton(_ref, ref) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var LinkButtonBase = function LinkButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     autoFocus = _ref.autoFocus,
     appearance = _ref.appearance,
@@ -72,34 +66,45 @@ var LinkButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     shouldFitContainer: shouldFitContainer,
     spacing: spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Use Link primitive to allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    _react.default.createElement(_primitives.Box, (0, _extends2.default)({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      onMouseDownCapture: baseProps.onMouseDownCapture,
-      onMouseUpCapture: baseProps.onMouseUpCapture,
-      onKeyDownCapture: baseProps.onKeyDownCapture,
-      onKeyUpCapture: baseProps.onKeyUpCapture,
-      onTouchStartCapture: baseProps.onTouchStartCapture,
-      onTouchEndCapture: baseProps.onTouchEndCapture,
-      onPointerDownCapture: baseProps.onPointerDownCapture,
-      onPointerUpCapture: baseProps.onPointerUpCapture,
-      onClickCapture: baseProps.onClickCapture,
-      as: "a",
-      testId: testId
-      /**
-       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
-       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkButton.displayName = 'LinkButton';
+  return /*#__PURE__*/_react.default.createElement(_link.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    testId: testId
+    /**
+     * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+     * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+     */
+    // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+    ,
+    href: baseProps.isDisabled ? undefined : href,
+    role: baseProps.isDisabled ? 'link' : undefined,
+    "aria-disabled": baseProps.isDisabled === true ? true : undefined
+  }), baseProps.children);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+var WithRef = /*#__PURE__*/(0, _react.forwardRef)(LinkButtonBase);
+
+/**
+ * __Link Button__
+ *
+ * Renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var LinkButton = /*#__PURE__*/(0, _react.memo)(WithRef);
 var _default = exports.default = LinkButton;

package/dist/cjs/new-button/variants/icon/link.js

@@ -1,26 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireWildcard(require("react"));
+var _link = _interopRequireDefault(require("@atlaskit/primitives/link"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
 var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "children", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-var LinkIconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function LinkIconButton(_ref, ref) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     autoFocus = _ref.autoFocus,
     appearance = _ref.appearance,
@@ -68,34 +62,45 @@ var LinkIconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     ref: ref,
     spacing: spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    _react.default.createElement(_primitives.Box, (0, _extends2.default)({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      onMouseDownCapture: baseProps.onMouseDownCapture,
-      onMouseUpCapture: baseProps.onMouseUpCapture,
-      onKeyDownCapture: baseProps.onKeyDownCapture,
-      onKeyUpCapture: baseProps.onKeyUpCapture,
-      onTouchStartCapture: baseProps.onTouchStartCapture,
-      onTouchEndCapture: baseProps.onTouchEndCapture,
-      onPointerDownCapture: baseProps.onPointerDownCapture,
-      onPointerUpCapture: baseProps.onPointerUpCapture,
-      onClickCapture: baseProps.onClickCapture,
-      as: "a",
-      testId: testId
-      /**
-       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
-       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkIconButton.displayName = 'LinkIconButton';
+  return /*#__PURE__*/_react.default.createElement(_link.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    testId: testId
+    /**
+     * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+     * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+     */
+    // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+    ,
+    href: baseProps.isDisabled ? undefined : href,
+    role: baseProps.isDisabled ? 'link' : undefined,
+    "aria-disabled": baseProps.isDisabled === true ? true : undefined
+  }), baseProps.children);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+var WithRef = /*#__PURE__*/(0, _react.forwardRef)(LinkIconButtonBase);
+
+/**
+ * __Link Icon Button__
+ *
+ * Renders a link in the style of an icon button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var LinkIconButton = /*#__PURE__*/(0, _react.memo)(WithRef);
 var _default = exports.default = LinkIconButton;

package/dist/cjs/new-button/variants/shared/use-button-base.js

@@ -115,7 +115,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.11.0",
+    packageVersion: "16.12.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/cjs/old-button/shared/button-base.js

@@ -118,7 +118,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.11.0",
+    packageVersion: "16.12.0",
     analyticsData: analyticsContext
   });
 

package/dist/cjs/utils/variants.js

@@ -5,21 +5,65 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.variants = exports.default = void 0;
+exports.variants = exports.linkButtonVariants = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
 var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
 var _link = _interopRequireDefault(require("../new-button/variants/default/link"));
+var _link2 = _interopRequireDefault(require("../new-button/variants/icon/link"));
+var _excluded = ["href", "children"],
+  _excluded2 = ["href", "children", "icon"]; // eslint-disable-next-line import/no-extraneous-dependencies
+// import IconButton, {
+//   IconButtonProps,
+// } from '../new-button/variants/icon/button';
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable @repo/internal/react/no-unsafe-spread-props */
-
 // Add required default props to variants
-var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$href = _ref.href,
+    href = _ref$href === void 0 ? 'home' : _ref$href,
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_link.default, (0, _extends2.default)({
     ref: ref,
-    href: "#"
-  }, props), props.children);
+    href: href
+  }, rest), children);
+});
+
+// TODO: Enable icon button in tests once it's ready
+// const IconButtonRender = forwardRef(
+//   (
+//     {
+//       children,
+//       icon = <AddIcon label="" />,
+//       ...rest
+//     }: Omit<IconButtonProps, 'icon'> & {
+//       icon?: IconButtonProps['icon'];
+//     },
+//     ref: React.Ref<HTMLButtonElement>,
+//   ) => (
+//     <IconButton ref={ref} icon={icon} {...rest}>
+//       {children}
+//     </IconButton>
+//   ),
+// );
+
+var LinkIconButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var _ref2$href = _ref2.href,
+    href = _ref2$href === void 0 ? '/home' : _ref2$href,
+    children = _ref2.children,
+    _ref2$icon = _ref2.icon,
+    icon = _ref2$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_add.default, {
+      label: ""
+    }) : _ref2$icon,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/_react.default.createElement(_link2.default, (0, _extends2.default)({
+    ref: ref,
+    icon: icon,
+    href: href
+  }, rest), children);
 });
 var variants = exports.variants = [{
   name: 'Button',
@@ -29,5 +73,26 @@ var variants = exports.variants = [{
   name: 'LinkButton',
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement
-}];
-var _default = exports.default = variants;
+}
+// TODO: Enable icon buttons in tests once it's ready
+// {
+//   name: 'IconButton',
+//   Component: IconButtonRender,
+//   elementType: HTMLButtonElement,
+// },
+// {
+//   name: 'LinkIconButton',
+//   Component: LinkIconButtonRender,
+//   elementType: HTMLAnchorElement,
+// },
+];
+var _default = exports.default = variants;
+var linkButtonVariants = exports.linkButtonVariants = [{
+  name: 'LinkButton',
+  Component: LinkButtonRender,
+  elementType: HTMLAnchorElement
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement
+}];

package/dist/es2019/new-button/variants/default/button.js

@@ -14,7 +14,6 @@ import useDefaultButton from './use-default-button';
  * - [Usage](https://atlassian.design/components/button/usage)
  */
 const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
-  // Button base
   analyticsContext,
   autoFocus,
   appearance,

package/dist/es2019/new-button/variants/default/link.js

@@ -1,18 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Box } from '@atlaskit/primitives';
+import React, { forwardRef, memo } from 'react';
+import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useDefaultButton from './use-default-button';
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-const LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkButton({
-  // Button base
+const LinkButtonBase = ({
   analyticsContext,
   autoFocus,
   appearance,
@@ -38,7 +28,7 @@ const LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   testId,
   href,
   ...rest
-}, ref) {
+}, ref) => {
   const baseProps = useDefaultButton({
     analyticsContext,
     appearance,
@@ -65,34 +55,45 @@ const LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     shouldFitContainer,
     spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Use Link primitive to allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    React.createElement(Box, _extends({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      onMouseDownCapture: baseProps.onMouseDownCapture,
-      onMouseUpCapture: baseProps.onMouseUpCapture,
-      onKeyDownCapture: baseProps.onKeyDownCapture,
-      onKeyUpCapture: baseProps.onKeyUpCapture,
-      onTouchStartCapture: baseProps.onTouchStartCapture,
-      onTouchEndCapture: baseProps.onTouchEndCapture,
-      onPointerDownCapture: baseProps.onPointerDownCapture,
-      onPointerUpCapture: baseProps.onPointerUpCapture,
-      onClickCapture: baseProps.onClickCapture,
-      as: "a",
-      testId: testId
-      /**
-       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
-       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkButton.displayName = 'LinkButton';
+  return /*#__PURE__*/React.createElement(UNSAFE_LINK
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    testId: testId
+    /**
+     * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+     * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+     */
+    // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+    ,
+    href: baseProps.isDisabled ? undefined : href,
+    role: baseProps.isDisabled ? 'link' : undefined,
+    "aria-disabled": baseProps.isDisabled === true ? true : undefined
+  }), baseProps.children);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+const WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
+
+/**
+ * __Link Button__
+ *
+ * Renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+const LinkButton = /*#__PURE__*/memo(WithRef);
 export default LinkButton;

package/dist/es2019/new-button/variants/icon/button.js

@@ -12,7 +12,6 @@ import useIconButton from './use-icon-button';
  * - [Usage](https://atlassian.design/components/button/usage)
  */
 const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
-  // Button base
   analyticsContext,
   autoFocus,
   appearance,

package/dist/es2019/new-button/variants/icon/link.js

@@ -1,18 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Box } from '@atlaskit/primitives';
+import React, { forwardRef, memo } from 'react';
+import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useIconButton from './use-icon-button';
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-const LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkIconButton({
-  // Button base
+const LinkIconButtonBase = ({
   analyticsContext,
   autoFocus,
   appearance,
@@ -36,7 +26,7 @@ const LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
   testId,
   href,
   ...rest
-}, ref) {
+}, ref) => {
   const baseProps = useIconButton({
     analyticsContext,
     appearance,
@@ -61,34 +51,45 @@ const LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
     ref,
     spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    React.createElement(Box, _extends({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      onMouseDownCapture: baseProps.onMouseDownCapture,
-      onMouseUpCapture: baseProps.onMouseUpCapture,
-      onKeyDownCapture: baseProps.onKeyDownCapture,
-      onKeyUpCapture: baseProps.onKeyUpCapture,
-      onTouchStartCapture: baseProps.onTouchStartCapture,
-      onTouchEndCapture: baseProps.onTouchEndCapture,
-      onPointerDownCapture: baseProps.onPointerDownCapture,
-      onPointerUpCapture: baseProps.onPointerUpCapture,
-      onClickCapture: baseProps.onClickCapture,
-      as: "a",
-      testId: testId
-      /**
-       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
-       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkIconButton.displayName = 'LinkIconButton';
+  return /*#__PURE__*/React.createElement(UNSAFE_LINK
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    testId: testId
+    /**
+     * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+     * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+     */
+    // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+    ,
+    href: baseProps.isDisabled ? undefined : href,
+    role: baseProps.isDisabled ? 'link' : undefined,
+    "aria-disabled": baseProps.isDisabled === true ? true : undefined
+  }), baseProps.children);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+const WithRef = /*#__PURE__*/forwardRef(LinkIconButtonBase);
+
+/**
+ * __Link Icon Button__
+ *
+ * Renders a link in the style of an icon button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+const LinkIconButton = /*#__PURE__*/memo(WithRef);
 export default LinkIconButton;

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -97,7 +97,7 @@ const useButtonBase = ({
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.11.0",
+    packageVersion: "16.12.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/es2019/old-button/shared/button-base.js

@@ -103,7 +103,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.11.0",
+    packageVersion: "16.12.0",
     analyticsData: analyticsContext
   });