@atlaskit/button 16.17.2 → 16.17.4

package/CHANGELOG.md

@@ -1,10 +1,22 @@
 # @atlaskit/button
 
+## 16.17.4
+
+### Patch Changes
+
+- [#43835](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43835) [`eba86990eef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eba86990eef) - Update new Button (in closed beta) API for `iconBefore` and `iconAfter` to be bounded with unsafe fallbacks for icon sizing
+
+## 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
+- [#43263](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43263) [`09f29df6245`](https://bitbucket.org/atlassian/atlassian-frontend/commits/09f29df6245) - Update IconButton (in closed beta) API to be bounded with unsafe fallback for icon sizing
 
 ## 16.17.1
 

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/default/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 _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"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "UNSAFE_iconAfter_size", "iconAfter", "UNSAFE_iconBefore_size", "children", "shouldFitContainer", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
 /**
  * __Button__
  *
@@ -30,7 +30,9 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     iconBefore = _ref.iconBefore,
+    UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     iconAfter = _ref.iconAfter,
+    UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
     children = _ref.children,
     shouldFitContainer = _ref.shouldFitContainer,
     interactionName = _ref.interactionName,
@@ -56,7 +58,9 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     buttonType: 'button',
     children: children,
     iconBefore: iconBefore,
+    UNSAFE_iconBefore_size: UNSAFE_iconBefore_size,
     iconAfter: iconAfter,
+    UNSAFE_iconAfter_size: UNSAFE_iconAfter_size,
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,

package/dist/cjs/new-button/variants/default/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 _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"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "UNSAFE_iconBefore_size", "iconAfter", "UNSAFE_iconAfter_size", "children", "shouldFitContainer", "interactionName", "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 LinkButtonBase = function LinkButtonBase(_ref, ref) {
@@ -22,7 +22,9 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     iconBefore = _ref.iconBefore,
+    UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
     iconAfter = _ref.iconAfter,
+    UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     children = _ref.children,
     shouldFitContainer = _ref.shouldFitContainer,
     interactionName = _ref.interactionName,
@@ -47,7 +49,9 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     buttonType: 'link',
     children: children,
     iconBefore: iconBefore,
+    UNSAFE_iconBefore_size: UNSAFE_iconBefore_size,
     iconAfter: iconAfter,
+    UNSAFE_iconAfter_size: UNSAFE_iconAfter_size,
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,

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

@@ -25,8 +25,10 @@ var useDefaultButton = function useDefaultButton(_ref) {
     appearance = _ref.appearance,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
-    iconBefore = _ref.iconBefore,
-    iconAfter = _ref.iconAfter,
+    IconBefore = _ref.iconBefore,
+    UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
+    IconAfter = _ref.iconAfter,
+    UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
@@ -51,15 +53,21 @@ var useDefaultButton = function useDefaultButton(_ref) {
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: buttonType,
-    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
+    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, IconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, iconBefore), children && /*#__PURE__*/_react.default.createElement(_content.default, {
+    }, /*#__PURE__*/_react.default.createElement(IconBefore, {
+      label: "",
+      size: UNSAFE_iconBefore_size
+    })), children && /*#__PURE__*/_react.default.createElement(_content.default, {
       hasOverlay: hasOverlay
-    }, children), iconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
+    }, children), IconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, iconAfter)),
+    }, /*#__PURE__*/_react.default.createElement(IconAfter, {
+      label: "",
+      size: UNSAFE_iconAfter_size
+    }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
@@ -77,8 +85,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
-    hasIconBefore: Boolean(iconBefore),
-    hasIconAfter: Boolean(iconAfter)
+    hasIconBefore: Boolean(IconBefore),
+    hasIconAfter: Boolean(IconAfter)
   });
   return baseProps;
 };

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

@@ -49,10 +49,6 @@ var useIconButton = function useIconButton(_ref) {
     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(_content.default, {
       type: "icon",
       hasOverlay: hasOverlay

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

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/default/button.js

@@ -21,7 +21,9 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   isDisabled,
   isSelected,
   iconBefore,
+  UNSAFE_iconAfter_size,
   iconAfter,
+  UNSAFE_iconBefore_size,
   children,
   shouldFitContainer,
   interactionName,
@@ -47,7 +49,9 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
     buttonType: 'button',
     children,
     iconBefore,
+    UNSAFE_iconBefore_size,
     iconAfter,
+    UNSAFE_iconAfter_size,
     interactionName,
     isDisabled,
     isSelected,

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

@@ -10,7 +10,9 @@ const LinkButtonBase = ({
   isDisabled,
   isSelected,
   iconBefore,
+  UNSAFE_iconBefore_size,
   iconAfter,
+  UNSAFE_iconAfter_size,
   children,
   shouldFitContainer,
   interactionName,
@@ -36,7 +38,9 @@ const LinkButtonBase = ({
     buttonType: 'link',
     children,
     iconBefore,
+    UNSAFE_iconBefore_size,
     iconAfter,
+    UNSAFE_iconAfter_size,
     interactionName,
     isDisabled,
     isSelected,

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

@@ -15,8 +15,10 @@ const useDefaultButton = ({
   appearance,
   autoFocus,
   buttonType,
-  iconBefore,
-  iconAfter,
+  iconBefore: IconBefore,
+  UNSAFE_iconBefore_size,
+  iconAfter: IconAfter,
+  UNSAFE_iconAfter_size,
   interactionName,
   isDisabled,
   isSelected,
@@ -42,15 +44,21 @@ const useDefaultButton = ({
     appearance,
     autoFocus,
     buttonType,
-    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
+    children: /*#__PURE__*/React.createElement(Fragment, null, IconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, iconBefore), children && /*#__PURE__*/React.createElement(Content, {
+    }, /*#__PURE__*/React.createElement(IconBefore, {
+      label: "",
+      size: UNSAFE_iconBefore_size
+    })), children && /*#__PURE__*/React.createElement(Content, {
       hasOverlay: hasOverlay
-    }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
+    }, children), IconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, iconAfter)),
+    }, /*#__PURE__*/React.createElement(IconAfter, {
+      label: "",
+      size: UNSAFE_iconAfter_size
+    }))),
     interactionName,
     isDisabled,
     isSelected,
@@ -68,8 +76,8 @@ const useDefaultButton = ({
     ref,
     shouldFitContainer,
     spacing,
-    hasIconBefore: Boolean(iconBefore),
-    hasIconAfter: Boolean(iconAfter)
+    hasIconBefore: Boolean(IconBefore),
+    hasIconAfter: Boolean(IconAfter)
   });
   return baseProps;
 };

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

@@ -43,10 +43,6 @@ const useIconButton = ({
     appearance,
     autoFocus,
     buttonType,
-    /**
-     * TODO: Have not finished IconButton yet. It also needs a required accessible
-     * label - likely implemented using VisuallyHidden
-     */
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay

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

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/default/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", "iconBefore", "iconAfter", "children", "shouldFitContainer", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "UNSAFE_iconAfter_size", "iconAfter", "UNSAFE_iconBefore_size", "children", "shouldFitContainer", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
@@ -23,7 +23,9 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     iconBefore = _ref.iconBefore,
+    UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     iconAfter = _ref.iconAfter,
+    UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
     children = _ref.children,
     shouldFitContainer = _ref.shouldFitContainer,
     interactionName = _ref.interactionName,
@@ -49,7 +51,9 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     buttonType: 'button',
     children: children,
     iconBefore: iconBefore,
+    UNSAFE_iconBefore_size: UNSAFE_iconBefore_size,
     iconAfter: iconAfter,
+    UNSAFE_iconAfter_size: UNSAFE_iconAfter_size,
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,

package/dist/esm/new-button/variants/default/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", "iconBefore", "iconAfter", "children", "shouldFitContainer", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "UNSAFE_iconBefore_size", "iconAfter", "UNSAFE_iconAfter_size", "children", "shouldFitContainer", "interactionName", "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 useDefaultButton from './use-default-button';
@@ -12,7 +12,9 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     iconBefore = _ref.iconBefore,
+    UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
     iconAfter = _ref.iconAfter,
+    UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     children = _ref.children,
     shouldFitContainer = _ref.shouldFitContainer,
     interactionName = _ref.interactionName,
@@ -37,7 +39,9 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     buttonType: 'link',
     children: children,
     iconBefore: iconBefore,
+    UNSAFE_iconBefore_size: UNSAFE_iconBefore_size,
     iconAfter: iconAfter,
+    UNSAFE_iconAfter_size: UNSAFE_iconAfter_size,
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,

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

@@ -15,8 +15,10 @@ var useDefaultButton = function useDefaultButton(_ref) {
     appearance = _ref.appearance,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
-    iconBefore = _ref.iconBefore,
-    iconAfter = _ref.iconAfter,
+    IconBefore = _ref.iconBefore,
+    UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
+    IconAfter = _ref.iconAfter,
+    UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
@@ -41,15 +43,21 @@ var useDefaultButton = function useDefaultButton(_ref) {
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: buttonType,
-    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
+    children: /*#__PURE__*/React.createElement(Fragment, null, IconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, iconBefore), children && /*#__PURE__*/React.createElement(Content, {
+    }, /*#__PURE__*/React.createElement(IconBefore, {
+      label: "",
+      size: UNSAFE_iconBefore_size
+    })), children && /*#__PURE__*/React.createElement(Content, {
       hasOverlay: hasOverlay
-    }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
+    }, children), IconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, iconAfter)),
+    }, /*#__PURE__*/React.createElement(IconAfter, {
+      label: "",
+      size: UNSAFE_iconAfter_size
+    }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
@@ -67,8 +75,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
-    hasIconBefore: Boolean(iconBefore),
-    hasIconAfter: Boolean(iconAfter)
+    hasIconBefore: Boolean(IconBefore),
+    hasIconAfter: Boolean(IconAfter)
   });
   return baseProps;
 };

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

@@ -42,10 +42,6 @@ var useIconButton = function useIconButton(_ref) {
     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.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay

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

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/default/link.d.ts

@@ -2,7 +2,7 @@ import React, { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, iconBefore, iconAfter, children, shouldFitContainer, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, iconBefore, UNSAFE_iconBefore_size, iconAfter, UNSAFE_iconAfter_size, children, shouldFitContainer, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

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

@@ -1,13 +1,26 @@
-/// <reference types="react" />
+import { type Size } from '@atlaskit/icon/types';
+import { type IconProp } from '../types';
 export type CommonDefaultButtonProps = {
     /**
      * Places an icon within the button, after the button's text
      */
-    iconAfter?: React.ReactChild;
+    iconAfter?: IconProp;
+    /**
+     * Set the size of the icon after.
+     *
+     * This is UNSAFE as it will be removed in future in favor of a 100% bounded API
+     */
+    UNSAFE_iconAfter_size?: Size;
     /**
      * Places an icon within the button, before the button's text
      */
-    iconBefore?: React.ReactChild;
+    iconBefore?: IconProp;
+    /**
+     * Set the size of the icon before.
+     *
+     * This is UNSAFE as it will be removed in future in favor of a 100% bounded API
+     */
+    UNSAFE_iconBefore_size?: Size;
     /**
      * Option to fit button width to its parent width
      */

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

@@ -11,5 +11,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore, iconAfter, interactionName, isDisabled, isSelected, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore: IconBefore, UNSAFE_iconBefore_size, iconAfter: IconAfter, UNSAFE_iconAfter_size, interactionName, isDisabled, isSelected, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

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

@@ -1,6 +1,5 @@
-import React from 'react';
-import { type IconProps, type Size } from '@atlaskit/icon/types';
-import { type IconButtonAppearance } from '../types';
+import { type Size } from '@atlaskit/icon/types';
+import { type IconButtonAppearance, type IconProp } from '../types';
 export type CommonIconButtonProps = {
     /**
      * The button style variation
@@ -9,7 +8,7 @@ export type CommonIconButtonProps = {
     /**
      * Places an icon within the button
      */
-    icon: React.ComponentType<IconProps>;
+    icon: IconProp;
     /**
      * Provide an accessible label, often used by screen readers
      */
@@ -17,7 +16,7 @@ export type CommonIconButtonProps = {
     /**
      * Set the size of the icon
      *
-     * Set to UNSAFE as it will be removed in future in favour of a 100% bounded API
+     * This is UNSAFE as it will be removed in future in favor of a 100% bounded API
      */
     UNSAFE_size?: Size;
 };

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type IconProps } from '@atlaskit/icon/types';
 export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
 export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
 export type IconButtonAppearance = 'default' | 'primary' | 'subtle';
 export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
 export type Spacing = 'compact' | 'default' | 'none';
+export type IconProp = React.ComponentType<IconProps>;
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
     /**

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/default/link.d.ts

@@ -2,7 +2,7 @@ import React, { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, iconBefore, iconAfter, children, shouldFitContainer, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, iconBefore, UNSAFE_iconBefore_size, iconAfter, UNSAFE_iconAfter_size, children, shouldFitContainer, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

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

@@ -1,13 +1,26 @@
-/// <reference types="react" />
+import { type Size } from '@atlaskit/icon/types';
+import { type IconProp } from '../types';
 export type CommonDefaultButtonProps = {
     /**
      * Places an icon within the button, after the button's text
      */
-    iconAfter?: React.ReactChild;
+    iconAfter?: IconProp;
+    /**
+     * Set the size of the icon after.
+     *
+     * This is UNSAFE as it will be removed in future in favor of a 100% bounded API
+     */
+    UNSAFE_iconAfter_size?: Size;
     /**
      * Places an icon within the button, before the button's text
      */
-    iconBefore?: React.ReactChild;
+    iconBefore?: IconProp;
+    /**
+     * Set the size of the icon before.
+     *
+     * This is UNSAFE as it will be removed in future in favor of a 100% bounded API
+     */
+    UNSAFE_iconBefore_size?: Size;
     /**
      * Option to fit button width to its parent width
      */

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

@@ -11,5 +11,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore, iconAfter, interactionName, isDisabled, isSelected, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore: IconBefore, UNSAFE_iconBefore_size, iconAfter: IconAfter, UNSAFE_iconAfter_size, interactionName, isDisabled, isSelected, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

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

@@ -1,6 +1,5 @@
-import React from 'react';
-import { type IconProps, type Size } from '@atlaskit/icon/types';
-import { type IconButtonAppearance } from '../types';
+import { type Size } from '@atlaskit/icon/types';
+import { type IconButtonAppearance, type IconProp } from '../types';
 export type CommonIconButtonProps = {
     /**
      * The button style variation
@@ -9,7 +8,7 @@ export type CommonIconButtonProps = {
     /**
      * Places an icon within the button
      */
-    icon: React.ComponentType<IconProps>;
+    icon: IconProp;
     /**
      * Provide an accessible label, often used by screen readers
      */
@@ -17,7 +16,7 @@ export type CommonIconButtonProps = {
     /**
      * Set the size of the icon
      *
-     * Set to UNSAFE as it will be removed in future in favour of a 100% bounded API
+     * This is UNSAFE as it will be removed in future in favor of a 100% bounded API
      */
     UNSAFE_size?: Size;
 };

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type IconProps } from '@atlaskit/icon/types';
 export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
 export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
 export type IconButtonAppearance = 'default' | 'primary' | 'subtle';
 export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
 export type Spacing = 'compact' | 'default' | 'none';
+export type IconProp = React.ComponentType<IconProps>;
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.17.2",
+  "version": "16.17.4",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -85,7 +85,7 @@
     "@atlaskit/primitives": "^1.12.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@atlaskit/visually-hidden": "^1.2.4",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"