@atlaskit/button 16.17.0 → 16.17.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 16.17.2
+
+### Patch Changes
+
+- [#43263](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43263) [`09f29df6245`](https://bitbucket.org/atlassian/atlassian-frontend/commits/09f29df6245) - Update IconButton API to be bounded with unsafe fallback for icon sizing
+
+## 16.17.1
+
+### Patch Changes
+
+- [#42681](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42681) [`df138bd3900`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df138bd3900) - [ux] Update to divider colors and height in SplitButton (alpha)
+
 ## 16.17.0
 
 ### Minor Changes

package/dist/cjs/new-button/containers/split-button/split-button.js

@@ -5,18 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 var _splitButtonContext = require("./split-button-context");
 var _utils = require("./utils");
 /** @jsx jsx */
 
-var fontSize = (0, _constants.fontSize)();
-var defaultDividerHeight = 20 / fontSize + 'em';
+var defaultDividerHeight = '16px';
 var defaultDividerStyles = (0, _react.css)({
   height: defaultDividerHeight,
   margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
 });
-var compactDividerHeight = 16 / fontSize + 'em';
+var compactDividerHeight = '12px';
 var compactDividerStyles = (0, _react.css)({
   height: compactDividerHeight,
   margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
@@ -27,27 +25,32 @@ var baseDividerStyles = (0, _react.css)({
   position: 'relative',
   zIndex: 2
 });
-var disabledStyles = (0, _react.css)({
-  backgroundColor: "var(--ds-border, #091E4224)",
+var dividerDisabledStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-text-disabled, #091E4224)",
   cursor: 'not-allowed'
 });
 var navigationDividerStyles = (0, _react.css)({
   height: compactDividerHeight,
   margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
-  backgroundColor: "var(--ds-border, #0052cc)"
+  backgroundColor: "var(--ds-text-subtle, #0052cc)",
+  opacity: 0.62
 });
 var dividerAppearance = {
   default: (0, _react.css)({
-    backgroundColor: "var(--ds-text, #172B4D)"
+    backgroundColor: "var(--ds-text, #172B4D)",
+    opacity: 0.51
   }),
   primary: (0, _react.css)({
-    backgroundColor: "var(--ds-text-inverse, #FFF)"
+    backgroundColor: "var(--ds-text-inverse, #FFF)",
+    opacity: 0.64
   }),
   danger: (0, _react.css)({
-    backgroundColor: "var(--ds-text-inverse, #FFF)"
+    backgroundColor: "var(--ds-text-inverse, #FFF)",
+    opacity: 0.66
   }),
   warning: (0, _react.css)({
-    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
+    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
+    opacity: 0.52
   }),
   navigation: navigationDividerStyles
 };
@@ -66,13 +69,14 @@ var Divider = exports.Divider = function Divider(_ref) {
   return (
     // I find it funny to provide a div for Divider
     (0, _react.jsx)("div", {
-      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
+      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? dividerDisabledStyles : undefined]
     })
   );
 };
 var splitButtonStyles = (0, _react.css)({
   display: 'inline-flex',
   position: 'relative',
+  alignItems: 'center',
   whiteSpace: 'nowrap'
 });
 

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

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId", "UNSAFE_size"];
 /**
  * __Icon Button__
  *
@@ -30,8 +30,8 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     icon = _ref.icon,
-    children = _ref.children,
     interactionName = _ref.interactionName,
+    label = _ref.label,
     overlay = _ref.overlay,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -46,6 +46,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
+    UNSAFE_size = _ref.UNSAFE_size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
@@ -56,11 +57,13 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: 'button',
-    children: children,
+    children: null,
+    // Set in hook.
     icon: icon,
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    label: label,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,
@@ -73,7 +76,8 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     onClickCapture: onClickCapture,
     overlay: overlay,
     ref: ref,
-    spacing: spacing
+    spacing: spacing,
+    UNSAFE_size: UNSAFE_size
   });
   return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, rest, {
     ref: baseProps.ref,

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

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
 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) {
@@ -22,8 +22,8 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     icon = _ref.icon,
-    children = _ref.children,
     interactionName = _ref.interactionName,
+    label = _ref.label,
     overlay = _ref.overlay,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -43,11 +43,13 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: 'link',
-    children: children,
+    children: null,
+    // Set in hook.
     icon: icon,
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    label: label,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _content = _interopRequireDefault(require("../shared/content"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 /**
@@ -22,10 +23,11 @@ var useIconButton = function useIconButton(_ref) {
     appearance = _ref.appearance,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
-    icon = _ref.icon,
+    Icon = _ref.icon,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    label = _ref.label,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
     onMouseUpCapture = _ref.onMouseUpCapture,
@@ -39,7 +41,8 @@ var useIconButton = function useIconButton(_ref) {
     overlay = _ref.overlay,
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
-    spacing = _ref.spacing;
+    spacing = _ref.spacing,
+    UNSAFE_size = _ref.UNSAFE_size;
   var hasOverlay = Boolean(overlay);
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
@@ -53,7 +56,10 @@ var useIconButton = function useIconButton(_ref) {
     children: /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, icon),
+    }, /*#__PURE__*/_react.default.createElement(Icon, {
+      label: "",
+      size: UNSAFE_size
+    }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,

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.17.0",
+    packageVersion: "16.17.2",
     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.17.0",
+    packageVersion: "16.17.2",
     analyticsData: analyticsContext
   });
 

package/dist/cjs/utils/variants.js

@@ -9,16 +9,10 @@ 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 _appearances = require("../utils/appearances");
-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';
+var _appearances = require("./appearances");
+var _excluded = ["href", "children"];
 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; }
 // Add required default props to variants
@@ -32,51 +26,11 @@ var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     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 linkButtonVariants = exports.linkButtonVariants = [{
   name: 'LinkButton',
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: _appearances.linkButtonAppearances
-}, {
-  name: 'LinkIconButton',
-  Component: LinkIconButtonRender,
-  elementType: HTMLAnchorElement,
-  // TODO: Make specific to icon button
-  appearances: _appearances.linkButtonAppearances
 }];
 var variants = [{
   name: 'Button',
@@ -88,17 +42,5 @@ var variants = [{
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: _appearances.linkButtonAppearances
-}
-// 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;

package/dist/es2019/new-button/containers/split-button/split-button.js

@@ -1,16 +1,14 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
-const fontSize = getFontSize();
-const defaultDividerHeight = 20 / fontSize + 'em';
+const defaultDividerHeight = '16px';
 const defaultDividerStyles = css({
   height: defaultDividerHeight,
   margin: `${"var(--ds-space-075, 6px)"} -0.5px`
 });
-const compactDividerHeight = 16 / fontSize + 'em';
+const compactDividerHeight = '12px';
 const compactDividerStyles = css({
   height: compactDividerHeight,
   margin: `${"var(--ds-space-050, 4px)"} -0.5px`
@@ -21,27 +19,32 @@ const baseDividerStyles = css({
   position: 'relative',
   zIndex: 2
 });
-const disabledStyles = css({
-  backgroundColor: "var(--ds-border, #091E4224)",
+const dividerDisabledStyles = css({
+  backgroundColor: "var(--ds-text-disabled, #091E4224)",
   cursor: 'not-allowed'
 });
 const navigationDividerStyles = css({
   height: compactDividerHeight,
   margin: `${"var(--ds-space-100, 8px)"} -0.5px`,
-  backgroundColor: "var(--ds-border, #0052cc)"
+  backgroundColor: "var(--ds-text-subtle, #0052cc)",
+  opacity: 0.62
 });
 const dividerAppearance = {
   default: css({
-    backgroundColor: "var(--ds-text, #172B4D)"
+    backgroundColor: "var(--ds-text, #172B4D)",
+    opacity: 0.51
   }),
   primary: css({
-    backgroundColor: "var(--ds-text-inverse, #FFF)"
+    backgroundColor: "var(--ds-text-inverse, #FFF)",
+    opacity: 0.64
   }),
   danger: css({
-    backgroundColor: "var(--ds-text-inverse, #FFF)"
+    backgroundColor: "var(--ds-text-inverse, #FFF)",
+    opacity: 0.66
   }),
   warning: css({
-    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
+    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
+    opacity: 0.52
   }),
   navigation: navigationDividerStyles
 };
@@ -60,13 +63,14 @@ export const Divider = ({
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
+      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? dividerDisabledStyles : undefined]
     })
   );
 };
 const splitButtonStyles = css({
   display: 'inline-flex',
   position: 'relative',
+  alignItems: 'center',
   whiteSpace: 'nowrap'
 });
 

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

@@ -21,8 +21,8 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   isDisabled,
   isSelected,
   icon,
-  children,
   interactionName,
+  label,
   overlay,
   onClick,
   onMouseDownCapture,
@@ -36,6 +36,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   onClickCapture,
   type = 'button',
   testId,
+  UNSAFE_size,
   ...rest
 }, ref) {
   /**
@@ -47,11 +48,13 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     appearance,
     autoFocus,
     buttonType: 'button',
-    children,
+    children: null,
+    // Set in hook.
     icon,
     interactionName,
     isDisabled,
     isSelected,
+    label,
     onClick,
     onMouseDownCapture,
     onMouseUpCapture,
@@ -64,7 +67,8 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     onClickCapture,
     overlay,
     ref,
-    spacing
+    spacing,
+    UNSAFE_size
   });
   return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE, _extends({}, rest, {
     ref: baseProps.ref,

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

@@ -10,8 +10,8 @@ const LinkIconButtonBase = ({
   isDisabled,
   isSelected,
   icon,
-  children,
   interactionName,
+  label,
   overlay,
   onClick,
   onMouseDownCapture,
@@ -32,11 +32,13 @@ const LinkIconButtonBase = ({
     appearance,
     autoFocus,
     buttonType: 'link',
-    children,
+    children: null,
+    // Set in hook.
     icon,
     interactionName,
     isDisabled,
     isSelected,
+    label,
     onClick,
     onMouseDownCapture,
     onMouseUpCapture,

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -15,12 +16,11 @@ const useIconButton = ({
   appearance,
   autoFocus,
   buttonType,
-  icon,
+  icon: Icon,
   interactionName,
   isDisabled,
   isSelected,
-  // TODO: Will potentially remove children prop from IconButton
-  // children,
+  label,
   onClick,
   onMouseDownCapture,
   onMouseUpCapture,
@@ -34,7 +34,8 @@ const useIconButton = ({
   overlay,
   ref,
   shouldFitContainer,
-  spacing
+  spacing,
+  UNSAFE_size
 }) => {
   const hasOverlay = Boolean(overlay);
   const baseProps = useButtonBase({
@@ -49,7 +50,10 @@ const useIconButton = ({
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, icon),
+    }, /*#__PURE__*/React.createElement(Icon, {
+      label: "",
+      size: UNSAFE_size
+    }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName,
     isDisabled,
     isSelected,

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.17.0",
+    packageVersion: "16.17.2",
     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.17.0",
+    packageVersion: "16.17.2",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/utils/variants.js

@@ -1,15 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-import AddIcon from '@atlaskit/icon/glyph/add';
 import Button from '../new-button/variants/default/button';
 import LinkButton from '../new-button/variants/default/link';
-// import IconButton, {
-//   IconButtonProps,
-// } from '../new-button/variants/icon/button';
-import LinkIconButton from '../new-button/variants/icon/link';
-import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
+import { buttonAppearances, linkButtonAppearances } from './appearances';
 // Add required default props to variants
 const LinkButtonRender = /*#__PURE__*/forwardRef(({
   href = 'home',
@@ -19,48 +12,11 @@ const LinkButtonRender = /*#__PURE__*/forwardRef(({
   ref: ref,
   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>
-//   ),
-// );
-
-const LinkIconButtonRender = /*#__PURE__*/forwardRef(({
-  href = '/home',
-  children,
-  icon = /*#__PURE__*/React.createElement(AddIcon, {
-    label: ""
-  }),
-  ...rest
-}, ref) => /*#__PURE__*/React.createElement(LinkIconButton, _extends({
-  ref: ref,
-  icon: icon,
-  href: href
-}, rest), children));
 export const linkButtonVariants = [{
   name: 'LinkButton',
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: linkButtonAppearances
-}, {
-  name: 'LinkIconButton',
-  Component: LinkIconButtonRender,
-  elementType: HTMLAnchorElement,
-  // TODO: Make specific to icon button
-  appearances: linkButtonAppearances
 }];
 const variants = [{
   name: 'Button',
@@ -72,18 +28,5 @@ const variants = [{
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: linkButtonAppearances
-}
-// TODO: Enable icon buttons in tests once it's ready
-// {
-//   name: 'IconButton',
-//   Component: IconButtonRender,
-//   elementType: HTMLButtonElement,
-// },
-// {
-//   name: 'LinkIconButton',
-//   Component: LinkIconButtonRender,
-//   elementType: HTMLAnchorElement,
-// },
-];
-
+}];
 export default variants;