@atlaskit/button 16.17.5 → 16.17.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 16.17.7
+
+### Patch Changes
+
+- [#57511](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57511) [`a3fc003a2d20`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a3fc003a2d20) - [ux] Fixes a bug in `LinkIconButton` (in closed beta) where the `UNSAFE_size` prop did not apply
+
+## 16.17.6
+
+### Patch Changes
+
+- [#57229](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57229) [`dd91461d616d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dd91461d616d) - [ux] Fixes a bug in new Buttons (in closed beta) that affected text alignment
+
 ## 16.17.5
 
 ### Patch Changes

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", "href"];
+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"];
 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) {
@@ -36,6 +36,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onClickCapture = _ref.onClickCapture,
     testId = _ref.testId,
+    UNSAFE_size = _ref.UNSAFE_size,
     href = _ref.href,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var baseProps = (0, _useIconButton.default)({
@@ -62,7 +63,8 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onClickCapture: onClickCapture,
     overlay: overlay,
     ref: ref,
-    spacing: spacing
+    spacing: spacing,
+    UNSAFE_size: UNSAFE_size
   });
   return /*#__PURE__*/_react.default.createElement(_link.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

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.5",
+    packageVersion: "16.17.7",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

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

@@ -18,6 +18,11 @@ var heights = exports.heights = {
   compact: "".concat(24 / fontSize, "em"),
   none: 'auto'
 };
+var lineHeights = {
+  default: heights.default,
+  compact: heights.compact,
+  none: 'inherit'
+};
 var paddingInline = {
   default: {
     default: 'space.150',
@@ -137,7 +142,7 @@ function getXCSS(_ref3) {
     paddingInlineStart = _getNavigationSplitBu.paddingInlineStart,
     paddingInlineEnd = _getNavigationSplitBu.paddingInlineEnd;
   return (0, _primitives.xcss)(_objectSpread(_objectSpread(_objectSpread({
-    alignItems: 'center',
+    alignItems: 'baseline',
     borderWidth: 'border.width.0',
     borderRadius: 'border.radius.100',
     boxSizing: 'border-box',
@@ -153,6 +158,7 @@ function getXCSS(_ref3) {
     transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
     whiteSpace: 'nowrap',
     height: height,
+    lineHeight: lineHeights[spacing],
     paddingBlock: 'space.0',
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,

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

package/dist/cjs/utils/appearances.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.linkButtonAppearances = exports.buttonAppearances = void 0;
+exports.linkButtonAppearances = exports.iconButtonAppearances = exports.buttonAppearances = void 0;
 var buttonAppearances = exports.buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger'];
-var linkButtonAppearances = exports.linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];
+var linkButtonAppearances = exports.linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];
+var iconButtonAppearances = exports.iconButtonAppearances = ['default', 'primary', 'subtle'];

package/dist/cjs/utils/variants.js

@@ -5,14 +5,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.linkButtonVariants = exports.default = void 0;
+exports.linkButtonVariants = exports.iconButtonVariants = exports.defaultButtonVariants = 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 _starFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/star-filled"));
 var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
 var _link = _interopRequireDefault(require("../new-button/variants/default/link"));
+var _button2 = _interopRequireDefault(require("../new-button/variants/icon/button"));
+var _link2 = _interopRequireDefault(require("../new-button/variants/icon/link"));
 var _appearances = require("./appearances");
-var _excluded = ["href", "children"];
+var _excluded = ["href", "children"],
+  _excluded2 = ["icon", "label"],
+  _excluded3 = ["href", "icon", "label"];
 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
@@ -26,12 +31,33 @@ var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     href: href
   }, rest), children);
 });
-var linkButtonVariants = exports.linkButtonVariants = [{
-  name: 'LinkButton',
-  Component: LinkButtonRender,
-  elementType: HTMLAnchorElement,
-  appearances: _appearances.linkButtonAppearances
-}];
+var IconButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var _ref2$icon = _ref2.icon,
+    icon = _ref2$icon === void 0 ? _starFilled.default : _ref2$icon,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Label' : _ref2$label,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/_react.default.createElement(_button2.default, (0, _extends2.default)({
+    ref: ref,
+    icon: icon,
+    label: label
+  }, rest));
+});
+var LinkIconButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
+  var _ref3$href = _ref3.href,
+    href = _ref3$href === void 0 ? 'home' : _ref3$href,
+    _ref3$icon = _ref3.icon,
+    icon = _ref3$icon === void 0 ? _starFilled.default : _ref3$icon,
+    _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? 'Label' : _ref3$label,
+    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+  return /*#__PURE__*/_react.default.createElement(_link2.default, (0, _extends2.default)({
+    ref: ref,
+    href: href,
+    icon: icon,
+    label: label
+  }, rest));
+});
 var variants = [{
   name: 'Button',
   Component: _button.default,
@@ -42,5 +68,27 @@ var variants = [{
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: _appearances.linkButtonAppearances
+}, {
+  name: 'IconButton',
+  Component: IconButtonRender,
+  elementType: HTMLButtonElement,
+  appearances: _appearances.iconButtonAppearances
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement,
+  appearances: _appearances.iconButtonAppearances
 }];
+var defaultButtonVariants = exports.defaultButtonVariants = variants.filter(function (_ref4) {
+  var name = _ref4.name;
+  return name === 'Button' || name === 'LinkButton';
+});
+var linkButtonVariants = exports.linkButtonVariants = variants.filter(function (_ref5) {
+  var name = _ref5.name;
+  return name === 'LinkButton' || name === 'LinkIconButton';
+});
+var iconButtonVariants = exports.iconButtonVariants = variants.filter(function (_ref6) {
+  var name = _ref6.name;
+  return name === 'IconButton' || name === 'LinkIconButton';
+});
 var _default = exports.default = variants;

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

@@ -24,6 +24,7 @@ const LinkIconButtonBase = ({
   onPointerUpCapture,
   onClickCapture,
   testId,
+  UNSAFE_size,
   href,
   ...rest
 }, ref) => {
@@ -51,7 +52,8 @@ const LinkIconButtonBase = ({
     onClickCapture,
     overlay,
     ref,
-    spacing
+    spacing,
+    UNSAFE_size
   });
   return /*#__PURE__*/React.createElement(UNSAFE_LINK
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

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.5",
+    packageVersion: "16.17.7",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

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

@@ -7,6 +7,11 @@ export const heights = {
   compact: `${24 / fontSize}em`,
   none: 'auto'
 };
+const lineHeights = {
+  default: heights.default,
+  compact: heights.compact,
+  none: 'inherit'
+};
 const paddingInline = {
   default: {
     default: 'space.150',
@@ -131,7 +136,7 @@ export function getXCSS({
     paddingInlineEnd
   } = getNavigationSplitButtonPaddings();
   return xcss({
-    alignItems: 'center',
+    alignItems: 'baseline',
     borderWidth: 'border.width.0',
     borderRadius: 'border.radius.100',
     boxSizing: 'border-box',
@@ -147,6 +152,7 @@ export function getXCSS({
     transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
     whiteSpace: 'nowrap',
     height,
+    lineHeight: lineHeights[spacing],
     paddingBlock: 'space.0',
     paddingInlineStart,
     paddingInlineEnd,

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

package/dist/es2019/utils/appearances.js

@@ -1,3 +1,4 @@
 const buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger'];
 const linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];
-export { buttonAppearances, linkButtonAppearances };
+const iconButtonAppearances = ['default', 'primary', 'subtle'];
+export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };

package/dist/es2019/utils/variants.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
+import StarFilledIcon from '@atlaskit/icon/glyph/star-filled';
 import Button from '../new-button/variants/default/button';
 import LinkButton from '../new-button/variants/default/link';
-import { buttonAppearances, linkButtonAppearances } from './appearances';
+import IconButton from '../new-button/variants/icon/button';
+import LinkIconButton from '../new-button/variants/icon/link';
+import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
 // Add required default props to variants
 const LinkButtonRender = /*#__PURE__*/forwardRef(({
   href = 'home',
@@ -12,12 +15,26 @@ const LinkButtonRender = /*#__PURE__*/forwardRef(({
   ref: ref,
   href: href
 }, rest), children));
-export const linkButtonVariants = [{
-  name: 'LinkButton',
-  Component: LinkButtonRender,
-  elementType: HTMLAnchorElement,
-  appearances: linkButtonAppearances
-}];
+const IconButtonRender = /*#__PURE__*/forwardRef(({
+  icon = StarFilledIcon,
+  label = 'Label',
+  ...rest
+}, ref) => /*#__PURE__*/React.createElement(IconButton, _extends({
+  ref: ref,
+  icon: icon,
+  label: label
+}, rest)));
+const LinkIconButtonRender = /*#__PURE__*/forwardRef(({
+  href = 'home',
+  icon = StarFilledIcon,
+  label = 'Label',
+  ...rest
+}, ref) => /*#__PURE__*/React.createElement(LinkIconButton, _extends({
+  ref: ref,
+  href: href,
+  icon: icon,
+  label: label
+}, rest)));
 const variants = [{
   name: 'Button',
   Component: Button,
@@ -28,5 +45,24 @@ const variants = [{
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: linkButtonAppearances
+}, {
+  name: 'IconButton',
+  Component: IconButtonRender,
+  elementType: HTMLButtonElement,
+  appearances: iconButtonAppearances
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement,
+  appearances: iconButtonAppearances
 }];
+export const defaultButtonVariants = variants.filter(({
+  name
+}) => name === 'Button' || name === 'LinkButton');
+export const linkButtonVariants = variants.filter(({
+  name
+}) => name === 'LinkButton' || name === 'LinkIconButton');
+export const iconButtonVariants = variants.filter(({
+  name
+}) => name === 'IconButton' || name === 'LinkIconButton');
 export default variants;

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", "href"];
+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"];
 import React, { forwardRef, memo } from 'react';
 import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useIconButton from './use-icon-button';
@@ -26,6 +26,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onClickCapture = _ref.onClickCapture,
     testId = _ref.testId,
+    UNSAFE_size = _ref.UNSAFE_size,
     href = _ref.href,
     rest = _objectWithoutProperties(_ref, _excluded);
   var baseProps = useIconButton({
@@ -52,7 +53,8 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onClickCapture: onClickCapture,
     overlay: overlay,
     ref: ref,
-    spacing: spacing
+    spacing: spacing,
+    UNSAFE_size: UNSAFE_size
   });
   return /*#__PURE__*/React.createElement(UNSAFE_LINK
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

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.5",
+    packageVersion: "16.17.7",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

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

@@ -10,6 +10,11 @@ export var heights = {
   compact: "".concat(24 / fontSize, "em"),
   none: 'auto'
 };
+var lineHeights = {
+  default: heights.default,
+  compact: heights.compact,
+  none: 'inherit'
+};
 var paddingInline = {
   default: {
     default: 'space.150',
@@ -129,7 +134,7 @@ export function getXCSS(_ref3) {
     paddingInlineStart = _getNavigationSplitBu.paddingInlineStart,
     paddingInlineEnd = _getNavigationSplitBu.paddingInlineEnd;
   return xcss(_objectSpread(_objectSpread(_objectSpread({
-    alignItems: 'center',
+    alignItems: 'baseline',
     borderWidth: 'border.width.0',
     borderRadius: 'border.radius.100',
     boxSizing: 'border-box',
@@ -145,6 +150,7 @@ export function getXCSS(_ref3) {
     transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
     whiteSpace: 'nowrap',
     height: height,
+    lineHeight: lineHeights[spacing],
     paddingBlock: 'space.0',
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,

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

package/dist/esm/utils/appearances.js

@@ -1,3 +1,4 @@
 var buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger'];
 var linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];
-export { buttonAppearances, linkButtonAppearances };
+var iconButtonAppearances = ['default', 'primary', 'subtle'];
+export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };

package/dist/esm/utils/variants.js

@@ -1,10 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "children"];
+var _excluded = ["href", "children"],
+  _excluded2 = ["icon", "label"],
+  _excluded3 = ["href", "icon", "label"];
 import React, { forwardRef } from 'react';
+import StarFilledIcon from '@atlaskit/icon/glyph/star-filled';
 import Button from '../new-button/variants/default/button';
 import LinkButton from '../new-button/variants/default/link';
-import { buttonAppearances, linkButtonAppearances } from './appearances';
+import IconButton from '../new-button/variants/icon/button';
+import LinkIconButton from '../new-button/variants/icon/link';
+import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
 // Add required default props to variants
 var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
@@ -16,12 +21,33 @@ var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
     href: href
   }, rest), children);
 });
-export var linkButtonVariants = [{
-  name: 'LinkButton',
-  Component: LinkButtonRender,
-  elementType: HTMLAnchorElement,
-  appearances: linkButtonAppearances
-}];
+var IconButtonRender = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$icon = _ref2.icon,
+    icon = _ref2$icon === void 0 ? StarFilledIcon : _ref2$icon,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Label' : _ref2$label,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    ref: ref,
+    icon: icon,
+    label: label
+  }, rest));
+});
+var LinkIconButtonRender = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var _ref3$href = _ref3.href,
+    href = _ref3$href === void 0 ? 'home' : _ref3$href,
+    _ref3$icon = _ref3.icon,
+    icon = _ref3$icon === void 0 ? StarFilledIcon : _ref3$icon,
+    _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? 'Label' : _ref3$label,
+    rest = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(LinkIconButton, _extends({
+    ref: ref,
+    href: href,
+    icon: icon,
+    label: label
+  }, rest));
+});
 var variants = [{
   name: 'Button',
   Component: Button,
@@ -32,5 +58,27 @@ var variants = [{
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: linkButtonAppearances
+}, {
+  name: 'IconButton',
+  Component: IconButtonRender,
+  elementType: HTMLButtonElement,
+  appearances: iconButtonAppearances
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement,
+  appearances: iconButtonAppearances
 }];
+export var defaultButtonVariants = variants.filter(function (_ref4) {
+  var name = _ref4.name;
+  return name === 'Button' || name === 'LinkButton';
+});
+export var linkButtonVariants = variants.filter(function (_ref5) {
+  var name = _ref5.name;
+  return name === 'LinkButton' || name === 'LinkIconButton';
+});
+export var iconButtonVariants = variants.filter(function (_ref6) {
+  var name = _ref6.name;
+  return name === 'IconButton' || name === 'LinkIconButton';
+});
 export default variants;

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, 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, 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

@@ -1,4 +1,3 @@
-import { type Size } from '@atlaskit/icon/types';
 import { type IconButtonAppearance, type IconProp } from '../types';
 export type CommonIconButtonProps = {
     /**
@@ -14,9 +13,8 @@ export type CommonIconButtonProps = {
      */
     label: string;
     /**
-     * Set the size of the icon
-     *
+     * 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
      */
-    UNSAFE_size?: Size;
+    UNSAFE_size?: 'small' | 'large' | 'xlarge';
 };

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

@@ -1,4 +1,5 @@
-import { type ButtonAppearance, type LinkButtonAppearance } from '../new-button/variants/types';
+import { type ButtonAppearance, type IconButtonAppearance, type LinkButtonAppearance } from '../new-button/variants/types';
 declare const buttonAppearances: ButtonAppearance[];
 declare const linkButtonAppearances: LinkButtonAppearance[];
-export { buttonAppearances, linkButtonAppearances };
+declare const iconButtonAppearances: IconButtonAppearance[];
+export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };

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

@@ -1,31 +1,51 @@
 import React from 'react';
 import Button from '../new-button/variants/default/button';
 import { LinkButtonProps } from '../new-button/variants/default/link';
-import { buttonAppearances, linkButtonAppearances } from './appearances';
-export type Variant = {
+import { type IconButtonProps } from '../new-button/variants/icon/button';
+import { type LinkIconButtonProps } from '../new-button/variants/icon/link';
+import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
+type DefaultButtonVariant = {
     name: 'Button';
     Component: typeof Button;
     elementType: typeof HTMLButtonElement;
     appearances: typeof buttonAppearances;
-} | {
+};
+type LinkButtonVariant = {
     name: 'LinkButton';
     Component: typeof LinkButtonRender;
     elementType: typeof HTMLAnchorElement;
     appearances: typeof linkButtonAppearances;
 };
+type IconButtonVariant = {
+    name: 'IconButton';
+    Component: typeof IconButtonRender;
+    elementType: typeof HTMLButtonElement;
+    appearances: typeof iconButtonAppearances;
+};
+type LinkIconButtonVariant = {
+    name: 'LinkIconButton';
+    Component: typeof LinkIconButtonRender;
+    elementType: typeof HTMLAnchorElement;
+    appearances: typeof iconButtonAppearances;
+};
+type DefaultButtonVariants = DefaultButtonVariant | LinkButtonVariant;
+type LinkButtonVariants = LinkButtonVariant | LinkIconButtonVariant;
+type IconButtonVariants = IconButtonVariant | LinkIconButtonVariant;
+export type Variant = DefaultButtonVariant | LinkButtonVariant | IconButtonVariant | LinkIconButtonVariant;
 declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
-export declare const linkButtonVariants: {
-    name: string;
-    Component: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
-        href?: string | undefined;
-    } & React.RefAttributes<HTMLAnchorElement>>;
-    elementType: {
-        new (): HTMLAnchorElement;
-        prototype: HTMLAnchorElement;
-    };
-    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-}[];
+declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
+    icon?: import("../new-button/variants/types").IconProp | undefined;
+    label?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "label" | "href" | "icon"> & {
+    href?: string | undefined;
+    icon?: import("../new-button/variants/types").IconProp | undefined;
+    label?: string | undefined;
+} & React.RefAttributes<HTMLAnchorElement>>;
 declare const variants: Variant[];
+export declare const defaultButtonVariants: DefaultButtonVariants[];
+export declare const linkButtonVariants: LinkButtonVariants[];
+export declare const iconButtonVariants: IconButtonVariants[];
 export default variants;

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, 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, 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

@@ -1,4 +1,3 @@
-import { type Size } from '@atlaskit/icon/types';
 import { type IconButtonAppearance, type IconProp } from '../types';
 export type CommonIconButtonProps = {
     /**
@@ -14,9 +13,8 @@ export type CommonIconButtonProps = {
      */
     label: string;
     /**
-     * Set the size of the icon
-     *
+     * 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
      */
-    UNSAFE_size?: Size;
+    UNSAFE_size?: 'small' | 'large' | 'xlarge';
 };

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

@@ -1,4 +1,5 @@
-import { type ButtonAppearance, type LinkButtonAppearance } from '../new-button/variants/types';
+import { type ButtonAppearance, type IconButtonAppearance, type LinkButtonAppearance } from '../new-button/variants/types';
 declare const buttonAppearances: ButtonAppearance[];
 declare const linkButtonAppearances: LinkButtonAppearance[];
-export { buttonAppearances, linkButtonAppearances };
+declare const iconButtonAppearances: IconButtonAppearance[];
+export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };

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

@@ -1,31 +1,51 @@
 import React from 'react';
 import Button from '../new-button/variants/default/button';
 import { LinkButtonProps } from '../new-button/variants/default/link';
-import { buttonAppearances, linkButtonAppearances } from './appearances';
-export type Variant = {
+import { type IconButtonProps } from '../new-button/variants/icon/button';
+import { type LinkIconButtonProps } from '../new-button/variants/icon/link';
+import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
+type DefaultButtonVariant = {
     name: 'Button';
     Component: typeof Button;
     elementType: typeof HTMLButtonElement;
     appearances: typeof buttonAppearances;
-} | {
+};
+type LinkButtonVariant = {
     name: 'LinkButton';
     Component: typeof LinkButtonRender;
     elementType: typeof HTMLAnchorElement;
     appearances: typeof linkButtonAppearances;
 };
+type IconButtonVariant = {
+    name: 'IconButton';
+    Component: typeof IconButtonRender;
+    elementType: typeof HTMLButtonElement;
+    appearances: typeof iconButtonAppearances;
+};
+type LinkIconButtonVariant = {
+    name: 'LinkIconButton';
+    Component: typeof LinkIconButtonRender;
+    elementType: typeof HTMLAnchorElement;
+    appearances: typeof iconButtonAppearances;
+};
+type DefaultButtonVariants = DefaultButtonVariant | LinkButtonVariant;
+type LinkButtonVariants = LinkButtonVariant | LinkIconButtonVariant;
+type IconButtonVariants = IconButtonVariant | LinkIconButtonVariant;
+export type Variant = DefaultButtonVariant | LinkButtonVariant | IconButtonVariant | LinkIconButtonVariant;
 declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
-export declare const linkButtonVariants: {
-    name: string;
-    Component: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
-        href?: string | undefined;
-    } & React.RefAttributes<HTMLAnchorElement>>;
-    elementType: {
-        new (): HTMLAnchorElement;
-        prototype: HTMLAnchorElement;
-    };
-    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-}[];
+declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
+    icon?: import("../new-button/variants/types").IconProp | undefined;
+    label?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "label" | "href" | "icon"> & {
+    href?: string | undefined;
+    icon?: import("../new-button/variants/types").IconProp | undefined;
+    label?: string | undefined;
+} & React.RefAttributes<HTMLAnchorElement>>;
 declare const variants: Variant[];
+export declare const defaultButtonVariants: DefaultButtonVariants[];
+export declare const linkButtonVariants: LinkButtonVariants[];
+export declare const iconButtonVariants: IconButtonVariants[];
 export default variants;

package/package.json

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