@atlaskit/button 16.9.3 → 16.9.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/button
 
+## 16.9.4
+
+### Patch Changes
+
+- [`f204e4e0e55`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f204e4e0e55) - Expose temporary "unsafe" entry point for internal work. It will be removed soon. PLEASE DO NOT USE.
+
 ## 16.9.3
 
 ### Patch Changes

package/dist/cjs/entry-points/button-group.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
     return _buttonGroup.default;
   }
 });
-var _buttonGroup = _interopRequireDefault(require("../button-group"));
+var _buttonGroup = _interopRequireDefault(require("../containers/button-group"));

package/dist/cjs/entry-points/custom-theme-button.js

@@ -16,6 +16,6 @@ Object.defineProperty(exports, "default", {
     return _customThemeButton.default;
   }
 });
-var _customThemeButton = _interopRequireWildcard(require("../custom-theme-button"));
+var _customThemeButton = _interopRequireWildcard(require("../old-button/custom-theme-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; }

package/dist/cjs/entry-points/loading-button.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
     return _loadingButton.default;
   }
 });
-var _loadingButton = _interopRequireDefault(require("../loading-button"));
+var _loadingButton = _interopRequireDefault(require("../old-button/loading-button"));

package/dist/cjs/entry-points/new.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function get() {
+    return _button2.default;
+  }
+});
+Object.defineProperty(exports, "LinkButton", {
+  enumerable: true,
+  get: function get() {
+    return _link.default;
+  }
+});
+Object.defineProperty(exports, "LinkIconButton", {
+  enumerable: true,
+  get: function get() {
+    return _link2.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _button.default;
+  }
+});
+var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
+var _link = _interopRequireDefault(require("../new-button/variants/default/link"));
+var _button2 = _interopRequireDefault(require("../new-button/variants/icon/button"));
+var _link2 = _interopRequireDefault(require("../new-button/variants/icon/link"));

package/dist/cjs/entry-points/standard-button.js

@@ -11,4 +11,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 require("@emotion/react");
-var _button = _interopRequireDefault(require("../button"));
+var _button = _interopRequireDefault(require("../old-button/button"));

package/dist/cjs/entry-points/unsafe.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UNSAFE_BUTTON", {
+  enumerable: true,
+  get: function get() {
+    return _button.default;
+  }
+});
+var _button = _interopRequireDefault(require("../new-button/variants/default/button"));

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
+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", "type", "testId"];
+/**
+ * __Button__
+ *
+ * @warning __UNSAFE__ Button is not yet safe for production use.
+ *
+ * A button triggers an event or action.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
+  var analyticsContext = _ref.analyticsContext,
+    autoFocus = _ref.autoFocus,
+    appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    iconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter,
+    children = _ref.children,
+    shouldFitContainer = _ref.shouldFitContainer,
+    interactionName = _ref.interactionName,
+    overlay = _ref.overlay,
+    onClick = _ref.onClick,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
+    onKeyDownCapture = _ref.onKeyDownCapture,
+    onKeyUpCapture = _ref.onKeyUpCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onPointerDownCapture = _ref.onPointerDownCapture,
+    onPointerUpCapture = _ref.onPointerUpCapture,
+    onClickCapture = _ref.onClickCapture,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    testId = _ref.testId,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var baseProps = (0, _useDefaultButton.default)({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: 'button',
+    children: children,
+    iconBefore: iconBefore,
+    iconAfter: iconAfter,
+    interactionName: interactionName,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
+    overlay: overlay,
+    ref: ref,
+    shouldFitContainer: shouldFitContainer,
+    spacing: spacing
+  });
+  return /*#__PURE__*/_react.default.createElement(_pressable.default
+  // TODO: Remove spread props
+  , (0, _extends2.default)({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    isDisabled: baseProps.isDisabled,
+    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,
+    type: type,
+    testId: testId
+  }), baseProps.children);
+}));
+Button.displayName = 'Button';
+var _default = Button;
+exports.default = _default;

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

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _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) {
+  var analyticsContext = _ref.analyticsContext,
+    autoFocus = _ref.autoFocus,
+    appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    iconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter,
+    children = _ref.children,
+    shouldFitContainer = _ref.shouldFitContainer,
+    interactionName = _ref.interactionName,
+    overlay = _ref.overlay,
+    onClick = _ref.onClick,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
+    onKeyDownCapture = _ref.onKeyDownCapture,
+    onKeyUpCapture = _ref.onKeyUpCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onPointerDownCapture = _ref.onPointerDownCapture,
+    onPointerUpCapture = _ref.onPointerUpCapture,
+    onClickCapture = _ref.onClickCapture,
+    testId = _ref.testId,
+    href = _ref.href,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var baseProps = (0, _useDefaultButton.default)({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: 'link',
+    children: children,
+    iconBefore: iconBefore,
+    iconAfter: iconAfter,
+    interactionName: interactionName,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
+    overlay: overlay,
+    ref: ref,
+    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';
+var _default = LinkButton;
+exports.default = _default;

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

@@ -0,0 +1,90 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
+var _xcss = require("../shared/xcss");
+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; }
+/**
+ * __Use default button base__
+ *
+ * A React hook that accepts a set of default Button props,
+ * and processes them to return consistent base props for usage
+ * across Button and LinkButton variants.
+ *
+ * @private
+ */
+var useDefaultButton = function useDefaultButton(_ref) {
+  var analyticsContext = _ref.analyticsContext,
+    appearance = _ref.appearance,
+    autoFocus = _ref.autoFocus,
+    buttonType = _ref.buttonType,
+    iconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter,
+    interactionName = _ref.interactionName,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
+    onKeyDownCapture = _ref.onKeyDownCapture,
+    onKeyUpCapture = _ref.onKeyUpCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onPointerDownCapture = _ref.onPointerDownCapture,
+    onPointerUpCapture = _ref.onPointerUpCapture,
+    onClickCapture = _ref.onClickCapture,
+    overlay = _ref.overlay,
+    ref = _ref.ref,
+    shouldFitContainer = _ref.shouldFitContainer,
+    spacing = _ref.spacing;
+  var fadeStyles = (0, _xcss.getFadingStyles)({
+    hasOverlay: Boolean(overlay)
+  });
+  var baseProps = (0, _useButtonBase.default)({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: buttonType,
+    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      as: "span",
+      xcss: [fadeStyles, _xcss.iconStyles]
+    }, iconBefore), children && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      as: "span",
+      xcss: [fadeStyles, _xcss.contentStyles]
+    }, children), iconAfter && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      as: "span",
+      xcss: [fadeStyles, _xcss.iconStyles]
+    }, iconAfter)),
+    interactionName: interactionName,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
+    overlay: overlay,
+    ref: ref,
+    shouldFitContainer: shouldFitContainer,
+    spacing: spacing,
+    hasIconBefore: Boolean(iconBefore),
+    hasIconAfter: Boolean(iconAfter)
+  });
+  return baseProps;
+};
+var _default = useDefaultButton;
+exports.default = _default;

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

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
+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", "type", "testId"];
+/**
+ * __Icon Button__
+ *
+ * TODO: Description
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
+  var analyticsContext = _ref.analyticsContext,
+    autoFocus = _ref.autoFocus,
+    appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    icon = _ref.icon,
+    children = _ref.children,
+    interactionName = _ref.interactionName,
+    overlay = _ref.overlay,
+    onClick = _ref.onClick,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
+    onKeyDownCapture = _ref.onKeyDownCapture,
+    onKeyUpCapture = _ref.onKeyUpCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onPointerDownCapture = _ref.onPointerDownCapture,
+    onPointerUpCapture = _ref.onPointerUpCapture,
+    onClickCapture = _ref.onClickCapture,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    testId = _ref.testId,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  /**
+   * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
+   * buttons. It's currently duplicated and mostly the same.
+   */
+  var baseProps = (0, _useIconButton.default)({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: 'button',
+    children: children,
+    icon: icon,
+    interactionName: interactionName,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
+    overlay: overlay,
+    ref: ref,
+    spacing: spacing
+  });
+  return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    isDisabled: baseProps.isDisabled,
+    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,
+    type: type,
+    testId: testId
+  }), baseProps.children);
+}));
+IconButton.displayName = 'IconButton';
+var _default = IconButton;
+exports.default = _default;

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

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _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) {
+  var analyticsContext = _ref.analyticsContext,
+    autoFocus = _ref.autoFocus,
+    appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    icon = _ref.icon,
+    children = _ref.children,
+    interactionName = _ref.interactionName,
+    overlay = _ref.overlay,
+    onClick = _ref.onClick,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
+    onKeyDownCapture = _ref.onKeyDownCapture,
+    onKeyUpCapture = _ref.onKeyUpCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onPointerDownCapture = _ref.onPointerDownCapture,
+    onPointerUpCapture = _ref.onPointerUpCapture,
+    onClickCapture = _ref.onClickCapture,
+    testId = _ref.testId,
+    href = _ref.href,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var baseProps = (0, _useIconButton.default)({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: 'link',
+    children: children,
+    icon: icon,
+    interactionName: interactionName,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
+    overlay: overlay,
+    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';
+var _default = LinkIconButton;
+exports.default = _default;

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
+var _xcss = require("../shared/xcss");
+/**
+ * __Use icon button__
+ *
+ * A React hook that accepts a set of icon Button props,
+ * and processes them to return consistent base props for usage
+ * across IconButton and LinkIconButton variants.
+ *
+ * @private
+ */
+var useIconButton = function useIconButton(_ref) {
+  var analyticsContext = _ref.analyticsContext,
+    appearance = _ref.appearance,
+    autoFocus = _ref.autoFocus,
+    buttonType = _ref.buttonType,
+    icon = _ref.icon,
+    interactionName = _ref.interactionName,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
+    onKeyDownCapture = _ref.onKeyDownCapture,
+    onKeyUpCapture = _ref.onKeyUpCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onPointerDownCapture = _ref.onPointerDownCapture,
+    onPointerUpCapture = _ref.onPointerUpCapture,
+    onClickCapture = _ref.onClickCapture,
+    overlay = _ref.overlay,
+    ref = _ref.ref,
+    shouldFitContainer = _ref.shouldFitContainer,
+    spacing = _ref.spacing;
+  var fadeStyles = (0, _xcss.getFadingStyles)({
+    hasOverlay: Boolean(overlay)
+  });
+  var baseProps = (0, _useButtonBase.default)({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: buttonType,
+    /**
+     * TODO: Have not finished IconButton yet. It also needs a required accessible
+     * label - likely implemented using VisuallyHidden
+     */
+    children: /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      as: "span",
+      xcss: [fadeStyles, _xcss.iconStyles]
+    }, icon),
+    interactionName: interactionName,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    isIconButton: true,
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
+    overlay: overlay,
+    ref: ref,
+    shouldFitContainer: shouldFitContainer,
+    spacing: spacing
+  });
+  return baseProps;
+};
+var _default = useIconButton;
+exports.default = _default;