@atlaskit/button 16.17.8 → 16.17.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 16.17.10
+
+### Patch Changes
+
+- [#55666](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/55666) [`7be116fed51b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7be116fed51b) - Add support for shape to IconButton
+
+## 16.17.9
+
+### Patch Changes
+
+- [#57808](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57808) [`b99d50f91202`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b99d50f91202) - Internal changes to styling on SplitButton (closed beta) to fix issues with border radius when wrapper elements are used.
+
 ## 16.17.8
 
 ### Patch Changes

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

@@ -68,7 +68,20 @@ var splitButtonStyles = (0, _react.css)({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-
+var primaryButtonStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndEndRadius: 0,
+    borderStartEndRadius: 0
+  }
+});
+var secondaryButtonStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndStartRadius: 0,
+    borderStartStartRadius: 0
+  }
+});
 /**
  * TODO: Add JSdoc
  */
@@ -107,11 +120,15 @@ var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
       spacing: spacing,
       isDisabled: isDisabled
     }
-  }, PrimaryAction, (0, _react.jsx)(Divider, {
+  }, (0, _react.jsx)("div", {
+    css: primaryButtonStyles
+  }, PrimaryAction), (0, _react.jsx)(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), SecondaryAction));
+  }), (0, _react.jsx)("div", {
+    css: secondaryButtonStyles
+  }, SecondaryAction)));
 };
 /**
  * TODO: Decide on API
@@ -131,9 +148,13 @@ var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWi
       spacing: spacing,
       isDisabled: isDisabled
     }
-  }, primaryAction, (0, _react.jsx)(Divider, {
+  }, (0, _react.jsx)("div", {
+    css: primaryButtonStyles
+  }, primaryAction), (0, _react.jsx)(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), secondaryAction));
+  }), (0, _react.jsx)("div", {
+    css: secondaryButtonStyles
+  }, secondaryAction)));
 };

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", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId", "UNSAFE_size"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size"];
 /**
  * __Icon Button__
  *
@@ -43,6 +43,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
     onClickCapture = _ref.onClickCapture,
+    shape = _ref.shape,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
@@ -57,8 +58,6 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: 'button',
-    children: null,
-    // Set in hook.
     icon: icon,
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -76,6 +75,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     onClickCapture: onClickCapture,
     overlay: overlay,
     ref: ref,
+    shape: shape,
     spacing: spacing,
     UNSAFE_size: UNSAFE_size
   });

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", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "UNSAFE_size", "href"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "testId", "UNSAFE_size", "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) {
@@ -35,6 +35,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
     onClickCapture = _ref.onClickCapture,
+    shape = _ref.shape,
     testId = _ref.testId,
     UNSAFE_size = _ref.UNSAFE_size,
     href = _ref.href,
@@ -44,8 +45,6 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: 'link',
-    children: null,
-    // Set in hook.
     icon: icon,
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -63,6 +62,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onClickCapture: onClickCapture,
     overlay: overlay,
     ref: ref,
+    shape: shape,
     spacing: spacing,
     UNSAFE_size: UNSAFE_size
   });

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

@@ -40,10 +40,12 @@ var useIconButton = function useIconButton(_ref) {
     onClickCapture = _ref.onClickCapture,
     overlay = _ref.overlay,
     ref = _ref.ref,
+    shape = _ref.shape,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     UNSAFE_size = _ref.UNSAFE_size;
   var hasOverlay = Boolean(overlay);
+  var isCircle = shape === 'circle';
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -60,6 +62,7 @@ var useIconButton = function useIconButton(_ref) {
     isDisabled: isDisabled,
     isSelected: isSelected,
     isIconButton: true,
+    isCircle: isCircle,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

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

@@ -60,6 +60,8 @@ var useButtonBase = function useButtonBase(_ref) {
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
     isIconButton = _ref$isIconButton === void 0 ? false : _ref$isIconButton,
+    _ref$isCircle = _ref.isCircle,
+    isCircle = _ref$isCircle === void 0 ? false : _ref$isCircle,
     _ref$hasIconBefore = _ref.hasIconBefore,
     hasIconBefore = _ref$hasIconBefore === void 0 ? false : _ref$hasIconBefore,
     _ref$hasIconAfter = _ref.hasIconAfter,
@@ -115,7 +117,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.17.8",
+    packageVersion: "16.17.10",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -129,6 +131,7 @@ var useButtonBase = function useButtonBase(_ref) {
       isActiveOverSelected: isActiveOverSelected,
       shouldFitContainer: shouldFitContainer,
       isIconButton: isIconButton,
+      isCircle: isCircle,
       hasOverlay: Boolean(overlay),
       isLink: buttonType === 'link',
       hasIconBefore: hasIconBefore,
@@ -136,7 +139,7 @@ var useButtonBase = function useButtonBase(_ref) {
       isSplit: isSplitButton,
       isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,

package/dist/cjs/new-button/variants/shared/xcss.js

@@ -48,14 +48,6 @@ var verticalAlign = {
   none: 'baseline'
 };
 var splitBorderStyles = {
-  ':first-of-type': {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  ':last-of-type': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  },
   ':focus-visible': {
     zIndex: 1
   }
@@ -99,6 +91,7 @@ function getXCSS(_ref3) {
     isHighlighted = _ref3.isHighlighted,
     isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
+    isCircle = _ref3.isCircle,
     shouldFitContainer = _ref3.shouldFitContainer,
     isLink = _ref3.isLink,
     isSplit = _ref3.isSplit,
@@ -144,7 +137,7 @@ function getXCSS(_ref3) {
   return (0, _primitives.xcss)(_objectSpread(_objectSpread(_objectSpread({
     alignItems: 'baseline',
     borderWidth: 'border.width.0',
-    borderRadius: 'border.radius.100',
+    borderRadius: isCircle && !isSplit ? 'border.radius.circle' : 'border.radius.100',
     boxSizing: 'border-box',
     display: 'inline-flex',
     fontSize: 'inherit',

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

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

@@ -62,7 +62,20 @@ const splitButtonStyles = css({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-
+const primaryButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndEndRadius: 0,
+    borderStartEndRadius: 0
+  }
+});
+const secondaryButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndStartRadius: 0,
+    borderStartStartRadius: 0
+  }
+});
 /**
  * TODO: Add JSdoc
  */
@@ -101,11 +114,15 @@ export const SplitButton = ({
       spacing,
       isDisabled
     }
-  }, PrimaryAction, jsx(Divider, {
+  }, jsx("div", {
+    css: primaryButtonStyles
+  }, PrimaryAction), jsx(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), SecondaryAction));
+  }), jsx("div", {
+    css: secondaryButtonStyles
+  }, SecondaryAction)));
 };
 /**
  * TODO: Decide on API
@@ -123,9 +140,13 @@ export const SplitButtonWithSlots = ({
       spacing,
       isDisabled
     }
-  }, primaryAction, jsx(Divider, {
+  }, jsx("div", {
+    css: primaryButtonStyles
+  }, primaryAction), jsx(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), secondaryAction));
+  }), jsx("div", {
+    css: secondaryButtonStyles
+  }, secondaryAction)));
 };

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

@@ -34,6 +34,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   onPointerDownCapture,
   onPointerUpCapture,
   onClickCapture,
+  shape,
   type = 'button',
   testId,
   UNSAFE_size,
@@ -48,8 +49,6 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     appearance,
     autoFocus,
     buttonType: 'button',
-    children: null,
-    // Set in hook.
     icon,
     interactionName,
     isDisabled,
@@ -67,6 +66,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     onClickCapture,
     overlay,
     ref,
+    shape,
     spacing,
     UNSAFE_size
   });

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

@@ -23,6 +23,7 @@ const LinkIconButtonBase = ({
   onPointerDownCapture,
   onPointerUpCapture,
   onClickCapture,
+  shape,
   testId,
   UNSAFE_size,
   href,
@@ -33,8 +34,6 @@ const LinkIconButtonBase = ({
     appearance,
     autoFocus,
     buttonType: 'link',
-    children: null,
-    // Set in hook.
     icon,
     interactionName,
     isDisabled,
@@ -52,6 +51,7 @@ const LinkIconButtonBase = ({
     onClickCapture,
     overlay,
     ref,
+    shape,
     spacing,
     UNSAFE_size
   });

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

@@ -33,11 +33,13 @@ const useIconButton = ({
   onClickCapture,
   overlay,
   ref,
+  shape,
   shouldFitContainer,
   spacing,
   UNSAFE_size
 }) => {
   const hasOverlay = Boolean(overlay);
+  const isCircle = shape === 'circle';
   const baseProps = useButtonBase({
     analyticsContext,
     appearance,
@@ -54,6 +56,7 @@ const useIconButton = ({
     isDisabled,
     isSelected,
     isIconButton: true,
+    isCircle,
     onClick,
     onMouseDownCapture,
     onMouseUpCapture,

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

@@ -45,6 +45,7 @@ const useButtonBase = ({
   isSelected = false,
   // TODO: Separate Icon Button styling from button base
   isIconButton = false,
+  isCircle = false,
   // TODO: Separate icon slot styling from button base
   hasIconBefore = false,
   hasIconAfter = false,
@@ -97,7 +98,7 @@ const useButtonBase = ({
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.17.8",
+    packageVersion: "16.17.10",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -110,13 +111,14 @@ const useButtonBase = ({
     isActiveOverSelected,
     shouldFitContainer,
     isIconButton,
+    isCircle,
     hasOverlay: Boolean(overlay),
     isLink: buttonType === 'link',
     hasIconBefore,
     hasIconAfter,
     isSplit: isSplitButton,
     isNavigationSplit: isNavigationSplitButton
-  }), [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }), [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   const isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return {
     ref: setRef,

package/dist/es2019/new-button/variants/shared/xcss.js

@@ -37,14 +37,6 @@ const verticalAlign = {
   none: 'baseline'
 };
 const splitBorderStyles = {
-  ':first-of-type': {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  ':last-of-type': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  },
   ':focus-visible': {
     zIndex: 1
   }
@@ -89,6 +81,7 @@ export function getXCSS({
   isHighlighted,
   isActiveOverSelected,
   isIconButton,
+  isCircle,
   shouldFitContainer,
   isLink,
   isSplit,
@@ -138,7 +131,7 @@ export function getXCSS({
   return xcss({
     alignItems: 'baseline',
     borderWidth: 'border.width.0',
-    borderRadius: 'border.radius.100',
+    borderRadius: isCircle && !isSplit ? 'border.radius.circle' : 'border.radius.100',
     boxSizing: 'border-box',
     display: 'inline-flex',
     fontSize: 'inherit',

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

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

@@ -62,7 +62,20 @@ var splitButtonStyles = css({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-
+var primaryButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndEndRadius: 0,
+    borderStartEndRadius: 0
+  }
+});
+var secondaryButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndStartRadius: 0,
+    borderStartStartRadius: 0
+  }
+});
 /**
  * TODO: Add JSdoc
  */
@@ -101,11 +114,15 @@ export var SplitButton = function SplitButton(_ref3) {
       spacing: spacing,
       isDisabled: isDisabled
     }
-  }, PrimaryAction, jsx(Divider, {
+  }, jsx("div", {
+    css: primaryButtonStyles
+  }, PrimaryAction), jsx(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), SecondaryAction));
+  }), jsx("div", {
+    css: secondaryButtonStyles
+  }, SecondaryAction)));
 };
 /**
  * TODO: Decide on API
@@ -125,9 +142,13 @@ export var SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
       spacing: spacing,
       isDisabled: isDisabled
     }
-  }, primaryAction, jsx(Divider, {
+  }, jsx("div", {
+    css: primaryButtonStyles
+  }, primaryAction), jsx(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), secondaryAction));
+  }), jsx("div", {
+    css: secondaryButtonStyles
+  }, secondaryAction)));
 };

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", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId", "UNSAFE_size"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size"];
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
 import useIconButton from './use-icon-button';
@@ -36,6 +36,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
     onClickCapture = _ref.onClickCapture,
+    shape = _ref.shape,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
@@ -50,8 +51,6 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: 'button',
-    children: null,
-    // Set in hook.
     icon: icon,
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -69,6 +68,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onClickCapture: onClickCapture,
     overlay: overlay,
     ref: ref,
+    shape: shape,
     spacing: spacing,
     UNSAFE_size: UNSAFE_size
   });

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", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "UNSAFE_size", "href"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "testId", "UNSAFE_size", "href"];
 import React, { forwardRef, memo } from 'react';
 import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useIconButton from './use-icon-button';
@@ -25,6 +25,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
     onClickCapture = _ref.onClickCapture,
+    shape = _ref.shape,
     testId = _ref.testId,
     UNSAFE_size = _ref.UNSAFE_size,
     href = _ref.href,
@@ -34,8 +35,6 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: 'link',
-    children: null,
-    // Set in hook.
     icon: icon,
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -53,6 +52,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onClickCapture: onClickCapture,
     overlay: overlay,
     ref: ref,
+    shape: shape,
     spacing: spacing,
     UNSAFE_size: UNSAFE_size
   });

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

@@ -33,10 +33,12 @@ var useIconButton = function useIconButton(_ref) {
     onClickCapture = _ref.onClickCapture,
     overlay = _ref.overlay,
     ref = _ref.ref,
+    shape = _ref.shape,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     UNSAFE_size = _ref.UNSAFE_size;
   var hasOverlay = Boolean(overlay);
+  var isCircle = shape === 'circle';
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -53,6 +55,7 @@ var useIconButton = function useIconButton(_ref) {
     isDisabled: isDisabled,
     isSelected: isSelected,
     isIconButton: true,
+    isCircle: isCircle,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

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

@@ -52,6 +52,8 @@ var useButtonBase = function useButtonBase(_ref) {
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
     isIconButton = _ref$isIconButton === void 0 ? false : _ref$isIconButton,
+    _ref$isCircle = _ref.isCircle,
+    isCircle = _ref$isCircle === void 0 ? false : _ref$isCircle,
     _ref$hasIconBefore = _ref.hasIconBefore,
     hasIconBefore = _ref$hasIconBefore === void 0 ? false : _ref$hasIconBefore,
     _ref$hasIconAfter = _ref.hasIconAfter,
@@ -107,7 +109,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.17.8",
+    packageVersion: "16.17.10",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -121,6 +123,7 @@ var useButtonBase = function useButtonBase(_ref) {
       isActiveOverSelected: isActiveOverSelected,
       shouldFitContainer: shouldFitContainer,
       isIconButton: isIconButton,
+      isCircle: isCircle,
       hasOverlay: Boolean(overlay),
       isLink: buttonType === 'link',
       hasIconBefore: hasIconBefore,
@@ -128,7 +131,7 @@ var useButtonBase = function useButtonBase(_ref) {
       isSplit: isSplitButton,
       isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,

package/dist/esm/new-button/variants/shared/xcss.js

@@ -40,14 +40,6 @@ var verticalAlign = {
   none: 'baseline'
 };
 var splitBorderStyles = {
-  ':first-of-type': {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  ':last-of-type': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  },
   ':focus-visible': {
     zIndex: 1
   }
@@ -91,6 +83,7 @@ export function getXCSS(_ref3) {
     isHighlighted = _ref3.isHighlighted,
     isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
+    isCircle = _ref3.isCircle,
     shouldFitContainer = _ref3.shouldFitContainer,
     isLink = _ref3.isLink,
     isSplit = _ref3.isSplit,
@@ -136,7 +129,7 @@ export function getXCSS(_ref3) {
   return xcss(_objectSpread(_objectSpread(_objectSpread({
     alignItems: 'baseline',
     borderWidth: 'border.width.0',
-    borderRadius: 'border.radius.100',
+    borderRadius: isCircle && !isSplit ? 'border.radius.circle' : 'border.radius.100',
     boxSizing: 'border-box',
     display: 'inline-flex',
     fontSize: 'inherit',

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

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

@@ -2,7 +2,7 @@ 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 & 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, UNSAFE_size, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+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, shape, testId, UNSAFE_size, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

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

@@ -12,6 +12,10 @@ export type CommonIconButtonProps = {
      * Provide an accessible label, often used by screen readers
      */
     label: string;
+    /**
+     * Set the shape of the icon, defaults to square with rounded corners
+     */
+    shape?: 'default' | 'circle';
     /**
      * Set the size of the icon. `medium` is default, so it does not need to be specified.
      * This is UNSAFE as it will be removed in future in favor of a 100% bounded API

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

@@ -1,6 +1,6 @@
 import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
 import { type CommonIconButtonProps } from './types';
-type UseIconButtonArgs<TagName extends HTMLElement> = UseButtonBaseArgs<TagName> & CommonIconButtonProps;
+type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & CommonIconButtonProps;
 type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
 /**
  * __Use icon button__
@@ -11,5 +11,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-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>;
+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, shape, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

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

@@ -10,6 +10,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
      */
     buttonType: 'button' | 'link';
     isIconButton?: boolean;
+    isCircle?: boolean;
     hasIconBefore?: boolean;
     hasIconAfter?: boolean;
     shouldFitContainer?: boolean;
@@ -34,5 +35,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance: propAppearance, autoFocus, buttonType, interactionName, isDisabled: propIsDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance: propAppearance, autoFocus, buttonType, interactionName, isDisabled: propIsDisabled, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

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

@@ -13,6 +13,7 @@ export type GetXCSSArgs = {
     shouldFitContainer: boolean;
     hasOverlay: boolean;
     isIconButton: boolean;
+    isCircle: boolean;
     hasIconBefore: boolean;
     hasIconAfter: boolean;
     /**
@@ -28,4 +29,4 @@ export type GetXCSSArgs = {
      */
     isNavigationSplit: boolean;
 };
-export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

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

@@ -2,7 +2,7 @@ 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 & 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, UNSAFE_size, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+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, shape, testId, UNSAFE_size, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

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

@@ -12,6 +12,10 @@ export type CommonIconButtonProps = {
      * Provide an accessible label, often used by screen readers
      */
     label: string;
+    /**
+     * Set the shape of the icon, defaults to square with rounded corners
+     */
+    shape?: 'default' | 'circle';
     /**
      * Set the size of the icon. `medium` is default, so it does not need to be specified.
      * This is UNSAFE as it will be removed in future in favor of a 100% bounded API

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

@@ -1,6 +1,6 @@
 import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
 import { type CommonIconButtonProps } from './types';
-type UseIconButtonArgs<TagName extends HTMLElement> = UseButtonBaseArgs<TagName> & CommonIconButtonProps;
+type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & CommonIconButtonProps;
 type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
 /**
  * __Use icon button__
@@ -11,5 +11,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-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>;
+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, shape, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

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

@@ -10,6 +10,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
      */
     buttonType: 'button' | 'link';
     isIconButton?: boolean;
+    isCircle?: boolean;
     hasIconBefore?: boolean;
     hasIconAfter?: boolean;
     shouldFitContainer?: boolean;
@@ -34,5 +35,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance: propAppearance, autoFocus, buttonType, interactionName, isDisabled: propIsDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance: propAppearance, autoFocus, buttonType, interactionName, isDisabled: propIsDisabled, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

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

@@ -13,6 +13,7 @@ export type GetXCSSArgs = {
     shouldFitContainer: boolean;
     hasOverlay: boolean;
     isIconButton: boolean;
+    isCircle: boolean;
     hasIconBefore: boolean;
     hasIconAfter: boolean;
     /**
@@ -28,4 +29,4 @@ export type GetXCSSArgs = {
      */
     isNavigationSplit: boolean;
 };
-export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.17.8",
+  "version": "16.17.10",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"