@atlaskit/button 23.0.4 → 23.0.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/button
 
+## 23.0.6
+
+### Patch Changes
+
+- [#142967](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142967)
+  [`9b46cc7f6df9d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b46cc7f6df9d) -
+  Allows `role` to be modified for new buttons.
+- Updated dependencies
+
+## 23.0.5
+
+### Patch Changes
+
+- [#141813](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141813)
+  [`4bf38a93b38f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4bf38a93b38f3) -
+  Fix styling not being applied for LinkIconButtons with shape 'circle'.
+- Updated dependencies
+
 ## 23.0.4
 
 ### Patch Changes

package/dist/cjs/containers/button-group.js

@@ -19,7 +19,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var buttonGroupStyles = (0, _react2.css)({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> *': {
     flex: '1 0 auto'
   }

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

@@ -134,6 +134,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
+    shouldFitContainer: shouldFitContainer,
     testId: testId,
     componentName: "LinkButton",
     interactionName: interactionName

package/dist/cjs/new-button/variants/icon/link.compiled.css

@@ -1,6 +1,7 @@
 
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._14mj1kw7:after{border-radius:inherit}
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
 ._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}

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

@@ -31,7 +31,8 @@ var styles = {
   linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
   disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
   spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
-  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t"
+  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
+  circle: "_2rko14q2"
 };
 var defaultStyles = {
   root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
@@ -110,9 +111,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
       ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
     }, function (triggerProps) {
-      return /*#__PURE__*/React.createElement(_compiled.Anchor
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-      , (0, _extends2.default)({}, saferRest, {
+      return /*#__PURE__*/React.createElement(_compiled.Anchor, (0, _extends2.default)({}, saferRest, {
         "aria-labelledby": ariaLabelledBy,
         testId: testId,
         componentName: "LinkIconButton",
@@ -162,7 +161,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
         ,
         xcss: (0, _css2.cx)(styles.base, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
         // TODO: remove me once we kill color fallbacks
-        isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton),
+        isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
         onMouseDownCapture: onMouseDownCapture,
         onMouseUpCapture: onMouseUpCapture,
         onKeyDownCapture: onKeyDownCapture,
@@ -197,7 +196,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     ref: (0, _mergeRefs.default)([localRef, ref]),
     xcss: (0, _css2.cx)(styles.base, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact),
+    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
     onClick: _onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

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

@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "23.0.4",
+    packageVersion: "23.0.6",
     analyticsData: analyticsContext
   });
 

package/dist/cjs/old-button/shared/css.js

@@ -323,7 +323,7 @@ function getIconStyle(_ref4) {
   return (0, _react.css)({
     display: 'flex',
     // icon size cannot grow and shrink
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.icon,
     flexGrow: 0,
     flexShrink: 0,
@@ -340,7 +340,7 @@ function getIconStyle(_ref4) {
 function getContentStyle(_ref5) {
   var spacing = _ref5.spacing;
   return (0, _react.css)({
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,

package/dist/cjs/utils/variants.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.linkButtonVariants = exports.iconButtonVariants = exports.defaultButtonVariants = exports.default = void 0;
+exports.linkButtonVariants = exports.iconButtonVariants = exports.iconButtonShapes = 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"));
@@ -22,6 +22,7 @@ var _excluded = ["href", "children"],
 /* eslint-disable @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-20398 */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var iconButtonShapes = exports.iconButtonShapes = ['default', 'circle'];
 // Add required default props to variants
 var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$href = _ref.href,
@@ -77,13 +78,15 @@ var variants = [{
   Component: IconButtonRender,
   elementType: HTMLButtonElement,
   appearances: _appearances.iconButtonAppearances,
-  spacing: _spacing.iconButtonSpacing
+  spacing: _spacing.iconButtonSpacing,
+  shape: iconButtonShapes
 }, {
   name: 'LinkIconButton',
   Component: LinkIconButtonRender,
   elementType: HTMLAnchorElement,
   appearances: _appearances.iconButtonAppearances,
-  spacing: _spacing.iconButtonSpacing
+  spacing: _spacing.iconButtonSpacing,
+  shape: iconButtonShapes
 }];
 var defaultButtonVariants = exports.defaultButtonVariants = variants.filter(function (_ref4) {
   var name = _ref4.name;

package/dist/es2019/containers/button-group.js

@@ -9,7 +9,7 @@ import { css, jsx } from '@emotion/react';
 const buttonGroupStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> *': {
     flex: '1 0 auto'
   }

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

@@ -122,6 +122,7 @@ const LinkButtonBase = ({
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
+    shouldFitContainer: shouldFitContainer,
     testId: testId,
     componentName: "LinkButton",
     interactionName: interactionName

package/dist/es2019/new-button/variants/icon/link.compiled.css

@@ -1,6 +1,7 @@
 
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._14mj1kw7:after{border-radius:inherit}
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
 ._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}

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

@@ -18,7 +18,8 @@ const styles = {
   linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
   disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
   spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
-  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t"
+  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
+  circle: "_2rko14q2"
 };
 const defaultStyles = {
   root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
@@ -97,9 +98,7 @@ const LinkIconButtonBase = ({
       hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
       ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
-    }, triggerProps => /*#__PURE__*/React.createElement(Anchor
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    , _extends({}, saferRest, {
+    }, triggerProps => /*#__PURE__*/React.createElement(Anchor, _extends({}, saferRest, {
       "aria-labelledby": ariaLabelledBy,
       testId: testId,
       componentName: "LinkIconButton",
@@ -149,7 +148,7 @@ const LinkIconButtonBase = ({
       ,
       xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
       // TODO: remove me once we kill color fallbacks
-      isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton),
+      isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
       onMouseDownCapture: onMouseDownCapture,
       onMouseUpCapture: onMouseUpCapture,
       onKeyDownCapture: onKeyDownCapture,
@@ -183,7 +182,7 @@ const LinkIconButtonBase = ({
     ref: mergeRefs([localRef, ref]),
     xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact),
+    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

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

@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "23.0.4",
+    packageVersion: "23.0.6",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/old-button/shared/css.js

@@ -341,7 +341,7 @@ export function getIconStyle({
   return css({
     display: 'flex',
     // icon size cannot grow and shrink
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.icon,
     flexGrow: 0,
     flexShrink: 0,
@@ -359,7 +359,7 @@ export function getContentStyle({
   spacing
 }) {
   return css({
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,

package/dist/es2019/utils/variants.js

@@ -8,6 +8,7 @@ import IconButton from '../new-button/variants/icon/button';
 import LinkIconButton from '../new-button/variants/icon/link';
 import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
 import { buttonSpacing, iconButtonSpacing } from './spacing';
+export const iconButtonShapes = ['default', 'circle'];
 // Add required default props to variants
 const LinkButtonRender = /*#__PURE__*/forwardRef(({
   href = 'home',
@@ -54,13 +55,15 @@ const variants = [{
   Component: IconButtonRender,
   elementType: HTMLButtonElement,
   appearances: iconButtonAppearances,
-  spacing: iconButtonSpacing
+  spacing: iconButtonSpacing,
+  shape: iconButtonShapes
 }, {
   name: 'LinkIconButton',
   Component: LinkIconButtonRender,
   elementType: HTMLAnchorElement,
   appearances: iconButtonAppearances,
-  spacing: iconButtonSpacing
+  spacing: iconButtonSpacing,
+  shape: iconButtonShapes
 }];
 export const defaultButtonVariants = variants.filter(({
   name

package/dist/esm/containers/button-group.js

@@ -9,7 +9,7 @@ import { css, jsx } from '@emotion/react';
 var buttonGroupStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> *': {
     flex: '1 0 auto'
   }

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

@@ -124,6 +124,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
+    shouldFitContainer: shouldFitContainer,
     testId: testId,
     componentName: "LinkButton",
     interactionName: interactionName

package/dist/esm/new-button/variants/icon/link.compiled.css

@@ -1,6 +1,7 @@
 
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._14mj1kw7:after{border-radius:inherit}
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
 ._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}

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

@@ -21,7 +21,8 @@ var styles = {
   linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
   disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
   spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
-  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t"
+  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
+  circle: "_2rko14q2"
 };
 var defaultStyles = {
   root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
@@ -100,9 +101,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
       ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
     }, function (triggerProps) {
-      return /*#__PURE__*/React.createElement(Anchor
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-      , _extends({}, saferRest, {
+      return /*#__PURE__*/React.createElement(Anchor, _extends({}, saferRest, {
         "aria-labelledby": ariaLabelledBy,
         testId: testId,
         componentName: "LinkIconButton",
@@ -152,7 +151,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
         ,
         xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
         // TODO: remove me once we kill color fallbacks
-        isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton),
+        isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
         onMouseDownCapture: onMouseDownCapture,
         onMouseUpCapture: onMouseUpCapture,
         onKeyDownCapture: onKeyDownCapture,
@@ -187,7 +186,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     ref: mergeRefs([localRef, ref]),
     xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact),
+    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
     onClick: _onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

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

@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "23.0.4",
+    packageVersion: "23.0.6",
     analyticsData: analyticsContext
   });
 

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

@@ -315,7 +315,7 @@ export function getIconStyle(_ref4) {
   return css({
     display: 'flex',
     // icon size cannot grow and shrink
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.icon,
     flexGrow: 0,
     flexShrink: 0,
@@ -332,7 +332,7 @@ export function getIconStyle(_ref4) {
 export function getContentStyle(_ref5) {
   var spacing = _ref5.spacing;
   return css({
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,

package/dist/esm/utils/variants.js

@@ -12,6 +12,7 @@ import IconButton from '../new-button/variants/icon/button';
 import LinkIconButton from '../new-button/variants/icon/link';
 import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
 import { buttonSpacing, iconButtonSpacing } from './spacing';
+export var iconButtonShapes = ['default', 'circle'];
 // Add required default props to variants
 var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
@@ -67,13 +68,15 @@ var variants = [{
   Component: IconButtonRender,
   elementType: HTMLButtonElement,
   appearances: iconButtonAppearances,
-  spacing: iconButtonSpacing
+  spacing: iconButtonSpacing,
+  shape: iconButtonShapes
 }, {
   name: 'LinkIconButton',
   Component: LinkIconButtonRender,
   elementType: HTMLAnchorElement,
   appearances: iconButtonAppearances,
-  spacing: iconButtonSpacing
+  spacing: iconButtonSpacing,
+  shape: iconButtonShapes
 }];
 export var defaultButtonVariants = variants.filter(function (_ref4) {
   var name = _ref4.name;

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

@@ -11,7 +11,7 @@ export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
+declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className">, "data-testid"> & {
     'data-testid'?: undefined;
 }, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
     onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;

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

@@ -11,7 +11,7 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/icon-button/code)
  * - [Usage](https://atlassian.design/components/button/icon-button/usage)
  */
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className">, "data-testid"> & {
     'data-testid'?: undefined;
 }, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
     onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;

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

@@ -70,7 +70,7 @@ export type CommonAnchorProps<RouterLinkConfig extends Record<string, any> = nev
     href?: string | RouterLinkConfig;
 };
 type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
-type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {
+type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'disabled'>, {
     'data-testid'?: never;
 }>;
 /**

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

@@ -5,6 +5,8 @@ import { type IconButtonProps } from '../new-button/variants/icon/button';
 import { type LinkIconButtonProps } from '../new-button/variants/icon/link';
 import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
 import { buttonSpacing, iconButtonSpacing } from './spacing';
+type IconButtonShape = 'default' | 'circle';
+export declare const iconButtonShapes: IconButtonShape[];
 type DefaultButtonVariant = {
     name: 'Button';
     Component: typeof Button;
@@ -25,6 +27,7 @@ type IconButtonVariant = {
     elementType: typeof HTMLButtonElement;
     appearances: typeof iconButtonAppearances;
     spacing: typeof iconButtonSpacing;
+    shape: typeof iconButtonShapes;
 };
 type LinkIconButtonVariant = {
     name: 'LinkIconButton';
@@ -32,6 +35,7 @@ type LinkIconButtonVariant = {
     elementType: typeof HTMLAnchorElement;
     appearances: typeof iconButtonAppearances;
     spacing: typeof iconButtonSpacing;
+    shape: typeof iconButtonShapes;
 };
 type DefaultButtonVariants = DefaultButtonVariant | LinkButtonVariant;
 type LinkButtonVariants = LinkButtonVariant | LinkIconButtonVariant;

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

@@ -11,7 +11,7 @@ export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
+declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className">, "data-testid"> & {
     'data-testid'?: undefined;
 }, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
     onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;

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

@@ -11,7 +11,7 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/icon-button/code)
  * - [Usage](https://atlassian.design/components/button/icon-button/usage)
  */
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className">, "data-testid"> & {
     'data-testid'?: undefined;
 }, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
     onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;

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

@@ -70,7 +70,7 @@ export type CommonAnchorProps<RouterLinkConfig extends Record<string, any> = nev
     href?: string | RouterLinkConfig;
 };
 type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
-type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {
+type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'disabled'>, {
     'data-testid'?: never;
 }>;
 /**

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

@@ -5,6 +5,8 @@ import { type IconButtonProps } from '../new-button/variants/icon/button';
 import { type LinkIconButtonProps } from '../new-button/variants/icon/link';
 import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
 import { buttonSpacing, iconButtonSpacing } from './spacing';
+type IconButtonShape = 'default' | 'circle';
+export declare const iconButtonShapes: IconButtonShape[];
 type DefaultButtonVariant = {
     name: 'Button';
     Component: typeof Button;
@@ -25,6 +27,7 @@ type IconButtonVariant = {
     elementType: typeof HTMLButtonElement;
     appearances: typeof iconButtonAppearances;
     spacing: typeof iconButtonSpacing;
+    shape: typeof iconButtonShapes;
 };
 type LinkIconButtonVariant = {
     name: 'LinkIconButton';
@@ -32,6 +35,7 @@ type LinkIconButtonVariant = {
     elementType: typeof HTMLAnchorElement;
     appearances: typeof iconButtonAppearances;
     spacing: typeof iconButtonSpacing;
+    shape: typeof iconButtonShapes;
 };
 type DefaultButtonVariants = DefaultButtonVariant | LinkButtonVariant;
 type LinkButtonVariants = LinkButtonVariant | LinkIconButtonVariant;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "23.0.4",
+	"version": "23.0.6",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -88,13 +88,13 @@
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
-		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/interaction-context": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -105,23 +105,23 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "^2.0.0",
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
+		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
 		"@atlaskit/app-provider": "^2.1.0",
-		"@atlaskit/checkbox": "^17.0.0",
+		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/dropdown-menu": "^14.0.0",
+		"@atlaskit/dropdown-menu": "^14.1.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.1.0",
 		"@atlaskit/logo": "^16.0.0",
 		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/select": "^20.3.0",
-		"@atlaskit/ssr": "^0.4.0",
+		"@atlaskit/select": "^20.4.0",
+		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/toggle": "^15.0.0",
-		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",