@atlaskit/button 16.17.1 → 16.17.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 16.17.3
+
+### Patch Changes
+
+- [#43714](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43714) [`d4c4a73a30a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4c4a73a30a) - [ux] Updates supported SplitButton (closed beta) appearances to be 'default' or 'primary'. Makes dividers full height to match existing uses outside of navigation contexts.
+
+## 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

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

@@ -5,32 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
 var _react = require("@emotion/react");
+var _xcss = require("../../variants/shared/xcss");
 var _splitButtonContext = require("./split-button-context");
 var _utils = require("./utils");
 /** @jsx jsx */
 
-var defaultDividerHeight = '16px';
-var defaultDividerStyles = (0, _react.css)({
-  height: defaultDividerHeight,
-  margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
-});
-var compactDividerHeight = '12px';
-var compactDividerStyles = (0, _react.css)({
-  height: compactDividerHeight,
-  margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
-});
 var baseDividerStyles = (0, _react.css)({
   display: 'inline-flex',
   width: '1px',
   position: 'relative',
   zIndex: 2
 });
+var defaultDividerStyles = (0, _react.css)({
+  height: _xcss.heights.default
+});
+var compactDividerStyles = (0, _react.css)({
+  height: _xcss.heights.compact
+});
 var dividerDisabledStyles = (0, _react.css)({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",
   cursor: 'not-allowed'
 });
 var navigationDividerStyles = (0, _react.css)({
-  height: compactDividerHeight,
+  height: '16px',
   margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
   backgroundColor: "var(--ds-text-subtle, #0052cc)",
   opacity: 0.62
@@ -44,14 +41,6 @@ var dividerAppearance = {
     backgroundColor: "var(--ds-text-inverse, #FFF)",
     opacity: 0.64
   }),
-  danger: (0, _react.css)({
-    backgroundColor: "var(--ds-text-inverse, #FFF)",
-    opacity: 0.66
-  }),
-  warning: (0, _react.css)({
-    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
-    opacity: 0.52
-  }),
   navigation: navigationDividerStyles
 };
 var dividerHeight = {
@@ -69,7 +58,7 @@ 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 ? dividerDisabledStyles : undefined]
+      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
     })
   );
 };

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.1",
+    packageVersion: "16.17.3",
     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.1",
+    packageVersion: "16.17.3",
     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,30 +1,27 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import { heights } from '../../variants/shared/xcss';
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
-const defaultDividerHeight = '16px';
-const defaultDividerStyles = css({
-  height: defaultDividerHeight,
-  margin: `${"var(--ds-space-075, 6px)"} -0.5px`
-});
-const compactDividerHeight = '12px';
-const compactDividerStyles = css({
-  height: compactDividerHeight,
-  margin: `${"var(--ds-space-050, 4px)"} -0.5px`
-});
 const baseDividerStyles = css({
   display: 'inline-flex',
   width: '1px',
   position: 'relative',
   zIndex: 2
 });
+const defaultDividerStyles = css({
+  height: heights.default
+});
+const compactDividerStyles = css({
+  height: heights.compact
+});
 const dividerDisabledStyles = css({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",
   cursor: 'not-allowed'
 });
 const navigationDividerStyles = css({
-  height: compactDividerHeight,
+  height: '16px',
   margin: `${"var(--ds-space-100, 8px)"} -0.5px`,
   backgroundColor: "var(--ds-text-subtle, #0052cc)",
   opacity: 0.62
@@ -38,14 +35,6 @@ const dividerAppearance = {
     backgroundColor: "var(--ds-text-inverse, #FFF)",
     opacity: 0.64
   }),
-  danger: css({
-    backgroundColor: "var(--ds-text-inverse, #FFF)",
-    opacity: 0.66
-  }),
-  warning: css({
-    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
-    opacity: 0.52
-  }),
   navigation: navigationDividerStyles
 };
 const dividerHeight = {
@@ -63,7 +52,7 @@ export const Divider = ({
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? dividerDisabledStyles : undefined]
+      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
     })
   );
 };

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.1",
+    packageVersion: "16.17.3",
     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.1",
+    packageVersion: "16.17.3",
     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;

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

@@ -1,30 +1,27 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import { heights } from '../../variants/shared/xcss';
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
-var defaultDividerHeight = '16px';
-var defaultDividerStyles = css({
-  height: defaultDividerHeight,
-  margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
-});
-var compactDividerHeight = '12px';
-var compactDividerStyles = css({
-  height: compactDividerHeight,
-  margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
-});
 var baseDividerStyles = css({
   display: 'inline-flex',
   width: '1px',
   position: 'relative',
   zIndex: 2
 });
+var defaultDividerStyles = css({
+  height: heights.default
+});
+var compactDividerStyles = css({
+  height: heights.compact
+});
 var dividerDisabledStyles = css({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",
   cursor: 'not-allowed'
 });
 var navigationDividerStyles = css({
-  height: compactDividerHeight,
+  height: '16px',
   margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
   backgroundColor: "var(--ds-text-subtle, #0052cc)",
   opacity: 0.62
@@ -38,14 +35,6 @@ var dividerAppearance = {
     backgroundColor: "var(--ds-text-inverse, #FFF)",
     opacity: 0.64
   }),
-  danger: css({
-    backgroundColor: "var(--ds-text-inverse, #FFF)",
-    opacity: 0.66
-  }),
-  warning: css({
-    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
-    opacity: 0.52
-  }),
   navigation: navigationDividerStyles
 };
 var dividerHeight = {
@@ -63,7 +52,7 @@ export var Divider = function Divider(_ref) {
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? dividerDisabledStyles : undefined]
+      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
     })
   );
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
 import useIconButton from './use-icon-button';
@@ -23,8 +23,8 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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,
@@ -39,6 +39,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
+    UNSAFE_size = _ref.UNSAFE_size,
     rest = _objectWithoutProperties(_ref, _excluded);
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
@@ -49,11 +50,13 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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,
@@ -66,7 +69,8 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onClickCapture: onClickCapture,
     overlay: overlay,
     ref: ref,
-    spacing: spacing
+    spacing: spacing,
+    UNSAFE_size: UNSAFE_size
   });
   return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE, _extends({}, rest, {
     ref: baseProps.ref,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 import React, { forwardRef, memo } from 'react';
 import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useIconButton from './use-icon-button';
@@ -12,8 +12,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,
@@ -33,11 +33,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/esm/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,10 +16,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,
@@ -32,7 +34,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 = useButtonBase({
     analyticsContext: analyticsContext,
@@ -46,7 +49,10 @@ var useIconButton = function useIconButton(_ref) {
     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: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,

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

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

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

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

package/dist/esm/utils/variants.js

@@ -1,18 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "children"],
-  _excluded2 = ["href", "children", "icon"];
+var _excluded = ["href", "children"];
 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
 var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
@@ -24,51 +16,11 @@ var LinkButtonRender = /*#__PURE__*/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__*/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.createElement(AddIcon, {
-      label: ""
-    }) : _ref2$icon,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(LinkIconButton, _extends({
-    ref: ref,
-    icon: icon,
-    href: href
-  }, rest), children);
-});
 export var linkButtonVariants = [{
   name: 'LinkButton',
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: linkButtonAppearances
-}, {
-  name: 'LinkIconButton',
-  Component: LinkIconButtonRender,
-  elementType: HTMLAnchorElement,
-  // TODO: Make specific to icon button
-  appearances: linkButtonAppearances
 }];
 var variants = [{
   name: 'Button',
@@ -80,18 +32,5 @@ var 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;

package/dist/types/new-button/containers/split-button/types.d.ts

@@ -1,4 +1,4 @@
 import type { Appearance, Spacing } from '../../variants/types';
-export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary' | 'danger' | 'warning'>;
+export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary'>;
 export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
 export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;

package/dist/types/new-button/variants/icon/button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type CommonButtonVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
+export type IconButtonProps = CommonIconButtonProps & Omit<CommonButtonVariantProps, 'children' | 'appearance'>;
 /**
  * __Icon Button__
  *
@@ -13,5 +13,5 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<CommonButtonVariantProps, "children" | "appearance"> & React.RefAttributes<HTMLButtonElement>>>;
 export default IconButton;

package/dist/types/new-button/variants/icon/link.d.ts

@@ -1,8 +1,8 @@
 import React, { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, icon, children, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & Omit<CommonLinkVariantProps<RouterLinkConfig>, 'children' | 'appearance'>;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, icon, interactionName, label, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *
@@ -14,7 +14,7 @@ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any>
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & import("../types").AdditionalLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
+declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & Omit<CommonLinkVariantProps<RouterLinkConfig>, "children" | "appearance"> & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
 }) => ReturnType<typeof LinkIconButtonBase>;
 export default LinkIconButton;

package/dist/types/new-button/variants/icon/types.d.ts

@@ -1,8 +1,23 @@
-/// <reference types="react" />
+import React from 'react';
+import { type IconProps, type Size } from '@atlaskit/icon/types';
+import { type IconButtonAppearance } from '../types';
 export type CommonIconButtonProps = {
     /**
-     * TODO: Consider locking-down icon props by converting from slot props to component props
-     * Places an icon within the button, after the button's text
+     * The button style variation
      */
-    icon: React.ReactChild;
+    appearance?: IconButtonAppearance;
+    /**
+     * Places an icon within the button
+     */
+    icon: React.ComponentType<IconProps>;
+    /**
+     * Provide an accessible label, often used by screen readers
+     */
+    label: string;
+    /**
+     * Set the size of the icon
+     *
+     * Set to UNSAFE as it will be removed in future in favour of a 100% bounded API
+     */
+    UNSAFE_size?: Size;
 };

package/dist/types/new-button/variants/icon/use-icon-button.d.ts

@@ -11,5 +11,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon, interactionName, isDisabled, isSelected, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon: Icon, interactionName, isDisabled, isSelected, label, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types/new-button/variants/types.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
 export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
-export type Appearance = ButtonAppearance | LinkButtonAppearance;
+export type IconButtonAppearance = 'default' | 'primary' | 'subtle';
+export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
 export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
@@ -39,11 +40,11 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     spacing?: Spacing;
     /**
-     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
+     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button
      */
     children: React.ReactNode;
     /**
-     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      */
     testId?: string;
     /**
@@ -71,7 +72,7 @@ export type AdditionalButtonVariantProps = {
     appearance?: ButtonAppearance;
 };
 /**
- * Combines common button props with additional HTML attributes.
+ * Combines common button props with additional HTML attributes
  */
 export type CombinedButtonProps<TagName extends HTMLElement, HTMLAttributes extends SupportedElementAttributes> = Combine<HTMLAttributes, CommonButtonProps<TagName>>;
 /**

package/dist/types/utils/variants.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import Button from '../new-button/variants/default/button';
 import { LinkButtonProps } from '../new-button/variants/default/link';
-import { LinkIconButtonProps } from '../new-button/variants/icon/link';
-import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
+import { buttonAppearances, linkButtonAppearances } from './appearances';
 export type Variant = {
     name: 'Button';
     Component: typeof Button;
@@ -17,7 +16,7 @@ export type Variant = {
 declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
-export declare const linkButtonVariants: ({
+export declare const linkButtonVariants: {
     name: string;
     Component: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
         href?: string | undefined;
@@ -27,17 +26,6 @@ export declare const linkButtonVariants: ({
         prototype: HTMLAnchorElement;
     };
     appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-} | {
-    name: string;
-    Component: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "href" | "icon"> & {
-        href?: string | undefined;
-        icon?: React.ReactChild | undefined;
-    } & React.RefAttributes<HTMLAnchorElement>>;
-    elementType: {
-        new (): HTMLAnchorElement;
-        prototype: HTMLAnchorElement;
-    };
-    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-})[];
+}[];
 declare const variants: Variant[];
 export default variants;

package/dist/types-ts4.5/new-button/containers/split-button/types.d.ts

@@ -1,4 +1,4 @@
 import type { Appearance, Spacing } from '../../variants/types';
-export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary' | 'danger' | 'warning'>;
+export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary'>;
 export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
 export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;

package/dist/types-ts4.5/new-button/variants/icon/button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type CommonButtonVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
+export type IconButtonProps = CommonIconButtonProps & Omit<CommonButtonVariantProps, 'children' | 'appearance'>;
 /**
  * __Icon Button__
  *
@@ -13,5 +13,5 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<CommonButtonVariantProps, "children" | "appearance"> & React.RefAttributes<HTMLButtonElement>>>;
 export default IconButton;

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -1,8 +1,8 @@
 import React, { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, icon, children, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & Omit<CommonLinkVariantProps<RouterLinkConfig>, 'children' | 'appearance'>;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, icon, interactionName, label, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *
@@ -14,7 +14,7 @@ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any>
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & import("../types").AdditionalLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
+declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & Omit<CommonLinkVariantProps<RouterLinkConfig>, "children" | "appearance"> & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
 }) => ReturnType<typeof LinkIconButtonBase>;
 export default LinkIconButton;

package/dist/types-ts4.5/new-button/variants/icon/types.d.ts

@@ -1,8 +1,23 @@
-/// <reference types="react" />
+import React from 'react';
+import { type IconProps, type Size } from '@atlaskit/icon/types';
+import { type IconButtonAppearance } from '../types';
 export type CommonIconButtonProps = {
     /**
-     * TODO: Consider locking-down icon props by converting from slot props to component props
-     * Places an icon within the button, after the button's text
+     * The button style variation
      */
-    icon: React.ReactChild;
+    appearance?: IconButtonAppearance;
+    /**
+     * Places an icon within the button
+     */
+    icon: React.ComponentType<IconProps>;
+    /**
+     * Provide an accessible label, often used by screen readers
+     */
+    label: string;
+    /**
+     * Set the size of the icon
+     *
+     * Set to UNSAFE as it will be removed in future in favour of a 100% bounded API
+     */
+    UNSAFE_size?: Size;
 };

package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts

@@ -11,5 +11,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon, interactionName, isDisabled, isSelected, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon: Icon, interactionName, isDisabled, isSelected, label, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types-ts4.5/new-button/variants/types.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
 export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
-export type Appearance = ButtonAppearance | LinkButtonAppearance;
+export type IconButtonAppearance = 'default' | 'primary' | 'subtle';
+export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
 export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
@@ -39,11 +40,11 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     spacing?: Spacing;
     /**
-     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
+     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button
      */
     children: React.ReactNode;
     /**
-     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      */
     testId?: string;
     /**
@@ -71,7 +72,7 @@ export type AdditionalButtonVariantProps = {
     appearance?: ButtonAppearance;
 };
 /**
- * Combines common button props with additional HTML attributes.
+ * Combines common button props with additional HTML attributes
  */
 export type CombinedButtonProps<TagName extends HTMLElement, HTMLAttributes extends SupportedElementAttributes> = Combine<HTMLAttributes, CommonButtonProps<TagName>>;
 /**

package/dist/types-ts4.5/utils/variants.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import Button from '../new-button/variants/default/button';
 import { LinkButtonProps } from '../new-button/variants/default/link';
-import { LinkIconButtonProps } from '../new-button/variants/icon/link';
-import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
+import { buttonAppearances, linkButtonAppearances } from './appearances';
 export type Variant = {
     name: 'Button';
     Component: typeof Button;
@@ -17,7 +16,7 @@ export type Variant = {
 declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
-export declare const linkButtonVariants: ({
+export declare const linkButtonVariants: {
     name: string;
     Component: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
         href?: string | undefined;
@@ -27,17 +26,6 @@ export declare const linkButtonVariants: ({
         prototype: HTMLAnchorElement;
     };
     appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-} | {
-    name: string;
-    Component: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "href" | "icon"> & {
-        href?: string | undefined;
-        icon?: React.ReactChild | undefined;
-    } & React.RefAttributes<HTMLAnchorElement>>;
-    elementType: {
-        new (): HTMLAnchorElement;
-        prototype: HTMLAnchorElement;
-    };
-    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-})[];
+}[];
 declare const variants: Variant[];
 export default variants;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.17.1",
+  "version": "16.17.3",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -79,9 +79,10 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
+    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/interaction-context": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.11.0",
+    "@atlaskit/primitives": "^1.12.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
@@ -97,7 +98,6 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/app-provider": "^0.4.0",
-    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",