@atlaskit/button 23.9.7 → 23.9.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/button
 
+## 23.9.8
+
+### Patch Changes
+
+- [`c085330e0dde8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c085330e0dde8) -
+  Remove new icon button styling hack
+
 ## 23.9.7
 
 ### Patch Changes

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

@@ -1,20 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _react = _interopRequireDefault(require("react"));
 var _buttonBase = _interopRequireDefault(require("../shared/button-base"));
 var _content = _interopRequireDefault(require("../shared/content"));
 var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
 var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId", "type"],
   _excluded2 = ["className", "css", "as", "style"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * __Button__
  *
@@ -88,7 +86,7 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     componentName: "Button",
     type: type,
     interactionName: interactionName
-  }, saferRest), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
+  }, saferRest), iconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
     type: "icon",
     position: "before",
     isLoading: isLoading
@@ -102,7 +100,7 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     isLoading: isLoading
   }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
     icon: iconAfter
-  }))));
+  })));
 }));
 Button.displayName = 'Button';
 var _default = exports.default = Button;

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

@@ -37,6 +37,7 @@
 ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._gy1p1b66{column-gap:var(--ds-space-050,4px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqswh2mm{position:relative}

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

@@ -29,8 +29,10 @@ var styles = {
   linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
   disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
   spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
-  buttonIconBefore: "_bozgu2gc",
-  buttonIconAfter: "_y4tiu2gc",
+  buttonIconBeforeWithHack: "_bozgu2gc",
+  buttonIconAfterWithHack: "_y4tiu2gc",
+  buttonIconBefore: "_bozgutpp _gy1p12x7",
+  buttonIconAfter: "_y4tiutpp _gy1p12x7",
   fullWidth: "_1bsb1osq"
 };
 var defaultStyles = {
@@ -136,7 +138,15 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     interactionName: interactionName
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, saferRest, {
-    xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
+    xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconBeforeWithHack,
+    //to remove when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
+    //to remove when platform-button-icon-spacing-cleanup is removed
+    hasIconBefore && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    shouldFitContainer && styles.fullWidth)
   }), iconBefore && /*#__PURE__*/React.createElement(_content.default, {
     type: "icon",
     position: "before",

package/dist/cjs/new-button/variants/shared/button-base.compiled.css

@@ -57,6 +57,7 @@
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._gy1p1b66{column-gap:var(--ds-space-050,4px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqswh2mm{position:relative}

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

@@ -39,8 +39,10 @@ var styles = {
   loading: "_80om15jw",
   iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
   iconButtonCompact: "_4t3i1k8s _1bsb1k8s",
-  buttonIconBefore: "_bozgu2gc",
-  buttonIconAfter: "_y4tiu2gc",
+  buttonIconBeforeWithHack: "_bozgu2gc",
+  buttonIconAfterWithHack: "_y4tiu2gc",
+  buttonIconBefore: "_bozgutpp _gy1p12x7",
+  buttonIconAfter: "_y4tiutpp _gy1p12x7",
   splitButton: "_g0pbb4wl",
   loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t",
   navigationSplitButton: "_1bsb1tcg _bfhksm61 _y4ti12x7 _bozg12x7"
@@ -178,7 +180,15 @@ function (_ref, ref) {
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedStyles.warning,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
+    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, shouldFitContainer && styles.fullWidth, hasIconBefore && !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconBeforeWithHack,
+    //TODO Remove when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
+    //TODO Remove when platform-button-icon-spacing-cleanup is removed
+    hasIconBefore && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
     isDisabled: (0, _platformFeatureFlags.fg)('platform-dst_fix_not_focusable_loading_button') ? isDisabled : isEffectivelyDisabled
   }, (0, _platformFeatureFlags.fg)('platform-dst_fix_not_focusable_loading_button') && {
     'aria-live': 'polite'

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

@@ -9,13 +9,14 @@ exports.default = void 0;
 require("./content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var styles = {
   text: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _1bto1l2s _o5721q9c",
   icon: "_1e0c1txw _16jlidpf _1o9zidpf _1wpz1h6o _1wybidpf _vwz4idpf _uiztglyw",
-  beforeIcon: "_1he91b66 _w795v77o",
-  afterIcon: "_1he9v77o _w7951b66",
   common: "_v564g17y",
-  fade: "_tzy4idpf"
+  fade: "_tzy4idpf",
+  beforeIcon: "_1he91b66 _w795v77o",
+  afterIcon: "_1he9v77o _w7951b66"
 };
 /**
  * __Content__
@@ -29,7 +30,7 @@ var Content = function Content(_ref) {
     isLoading = _ref.isLoading,
     position = _ref.position;
   return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade, position === 'before' && styles.beforeIcon, position === 'after' && styles.afterIcon])
+    className: (0, _runtime.ax)([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade, !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && position === 'before' && styles.beforeIcon, !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && position === 'after' && styles.afterIcon])
   }, children);
 };
 var _default = exports.default = Content;

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

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

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { Fragment } from 'react';
+import React from 'react';
 import ButtonBase from '../shared/button-base';
 import Content from '../shared/content';
 import IconRenderer from '../shared/icon-renderer';
@@ -77,7 +77,7 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
     componentName: "Button",
     type: type,
     interactionName: interactionName
-  }, saferRest), /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
+  }, saferRest), iconBefore && /*#__PURE__*/React.createElement(Content, {
     type: "icon",
     position: "before",
     isLoading: isLoading
@@ -91,7 +91,7 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
     isLoading: isLoading
   }, /*#__PURE__*/React.createElement(IconRenderer, {
     icon: iconAfter
-  }))));
+  })));
 }));
 Button.displayName = 'Button';
 export default Button;

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

@@ -37,6 +37,7 @@
 ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._gy1p1b66{column-gap:var(--ds-space-050,4px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqswh2mm{position:relative}

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

@@ -17,8 +17,10 @@ const styles = {
   linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
   disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
   spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
-  buttonIconBefore: "_bozgu2gc",
-  buttonIconAfter: "_y4tiu2gc",
+  buttonIconBeforeWithHack: "_bozgu2gc",
+  buttonIconAfterWithHack: "_y4tiu2gc",
+  buttonIconBefore: "_bozgutpp _gy1p12x7",
+  buttonIconAfter: "_y4tiutpp _gy1p12x7",
   fullWidth: "_1bsb1osq"
 };
 const defaultStyles = {
@@ -125,7 +127,15 @@ const LinkButtonBase = ({
     interactionName: interactionName
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, saferRest, {
-    xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
+    xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBeforeWithHack,
+    //to remove when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
+    //to remove when platform-button-icon-spacing-cleanup is removed
+    hasIconBefore && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    shouldFitContainer && styles.fullWidth)
   }), iconBefore && /*#__PURE__*/React.createElement(Content, {
     type: "icon",
     position: "before",

package/dist/es2019/new-button/variants/shared/button-base.compiled.css

@@ -57,6 +57,7 @@
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._gy1p1b66{column-gap:var(--ds-space-050,4px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqswh2mm{position:relative}

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

@@ -27,8 +27,10 @@ const styles = {
   loading: "_80om15jw",
   iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
   iconButtonCompact: "_4t3i1k8s _1bsb1k8s",
-  buttonIconBefore: "_bozgu2gc",
-  buttonIconAfter: "_y4tiu2gc",
+  buttonIconBeforeWithHack: "_bozgu2gc",
+  buttonIconAfterWithHack: "_y4tiu2gc",
+  buttonIconBefore: "_bozgutpp _gy1p12x7",
+  buttonIconAfter: "_y4tiutpp _gy1p12x7",
   splitButton: "_g0pbb4wl",
   loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t",
   navigationSplitButton: "_1bsb1tcg _bfhksm61 _y4ti12x7 _bozg12x7"
@@ -159,7 +161,15 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedStyles.warning,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && fg('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
+    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && fg('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, shouldFitContainer && styles.fullWidth, hasIconBefore && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBeforeWithHack,
+    //TODO Remove when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
+    //TODO Remove when platform-button-icon-spacing-cleanup is removed
+    hasIconBefore && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
     isDisabled: fg('platform-dst_fix_not_focusable_loading_button') ? isDisabled : isEffectivelyDisabled
   }, fg('platform-dst_fix_not_focusable_loading_button') && {
     'aria-live': 'polite'

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

@@ -2,13 +2,14 @@
 import "./content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 const styles = {
   text: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _1bto1l2s _o5721q9c",
   icon: "_1e0c1txw _16jlidpf _1o9zidpf _1wpz1h6o _1wybidpf _vwz4idpf _uiztglyw",
-  beforeIcon: "_1he91b66 _w795v77o",
-  afterIcon: "_1he9v77o _w7951b66",
   common: "_v564g17y",
-  fade: "_tzy4idpf"
+  fade: "_tzy4idpf",
+  beforeIcon: "_1he91b66 _w795v77o",
+  afterIcon: "_1he9v77o _w7951b66"
 };
 /**
  * __Content__
@@ -22,7 +23,7 @@ const Content = ({
   position
 }) => {
   return /*#__PURE__*/React.createElement("span", {
-    className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade, position === 'before' && styles.beforeIcon, position === 'after' && styles.afterIcon])
+    className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade, !fg('platform-button-icon-spacing-cleanup') && position === 'before' && styles.beforeIcon, !fg('platform-button-icon-spacing-cleanup') && position === 'after' && styles.afterIcon])
   }, children);
 };
 export default Content;

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: "0.0.0-development",
+    packageVersion: "23.9.7",
     analyticsData: analyticsContext
   });
 

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId", "type"],
   _excluded2 = ["className", "css", "as", "style"];
-import React, { Fragment } from 'react';
+import React from 'react';
 import ButtonBase from '../shared/button-base';
 import Content from '../shared/content';
 import IconRenderer from '../shared/icon-renderer';
@@ -79,7 +79,7 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     componentName: "Button",
     type: type,
     interactionName: interactionName
-  }, saferRest), /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
+  }, saferRest), iconBefore && /*#__PURE__*/React.createElement(Content, {
     type: "icon",
     position: "before",
     isLoading: isLoading
@@ -93,7 +93,7 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     isLoading: isLoading
   }, /*#__PURE__*/React.createElement(IconRenderer, {
     icon: iconAfter
-  }))));
+  })));
 }));
 Button.displayName = 'Button';
 export default Button;

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

@@ -37,6 +37,7 @@
 ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._gy1p1b66{column-gap:var(--ds-space-050,4px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqswh2mm{position:relative}

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

@@ -20,8 +20,10 @@ var styles = {
   linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
   disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
   spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
-  buttonIconBefore: "_bozgu2gc",
-  buttonIconAfter: "_y4tiu2gc",
+  buttonIconBeforeWithHack: "_bozgu2gc",
+  buttonIconAfterWithHack: "_y4tiu2gc",
+  buttonIconBefore: "_bozgutpp _gy1p12x7",
+  buttonIconAfter: "_y4tiutpp _gy1p12x7",
   fullWidth: "_1bsb1osq"
 };
 var defaultStyles = {
@@ -127,7 +129,15 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     interactionName: interactionName
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, saferRest, {
-    xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
+    xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBeforeWithHack,
+    //to remove when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
+    //to remove when platform-button-icon-spacing-cleanup is removed
+    hasIconBefore && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    shouldFitContainer && styles.fullWidth)
   }), iconBefore && /*#__PURE__*/React.createElement(Content, {
     type: "icon",
     position: "before",

package/dist/esm/new-button/variants/shared/button-base.compiled.css

@@ -57,6 +57,7 @@
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._gy1p1b66{column-gap:var(--ds-space-050,4px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqswh2mm{position:relative}

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

@@ -30,8 +30,10 @@ var styles = {
   loading: "_80om15jw",
   iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
   iconButtonCompact: "_4t3i1k8s _1bsb1k8s",
-  buttonIconBefore: "_bozgu2gc",
-  buttonIconAfter: "_y4tiu2gc",
+  buttonIconBeforeWithHack: "_bozgu2gc",
+  buttonIconAfterWithHack: "_y4tiu2gc",
+  buttonIconBefore: "_bozgutpp _gy1p12x7",
+  buttonIconAfter: "_y4tiutpp _gy1p12x7",
   splitButton: "_g0pbb4wl",
   loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t",
   navigationSplitButton: "_1bsb1tcg _bfhksm61 _y4ti12x7 _bozg12x7"
@@ -169,7 +171,15 @@ function (_ref, ref) {
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedStyles.warning,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && fg('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
+    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && fg('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, shouldFitContainer && styles.fullWidth, hasIconBefore && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBeforeWithHack,
+    //TODO Remove when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
+    //TODO Remove when platform-button-icon-spacing-cleanup is removed
+    hasIconBefore && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    hasIconAfter && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
+    //to keep when platform-button-icon-spacing-cleanup is removed
+    isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
     isDisabled: fg('platform-dst_fix_not_focusable_loading_button') ? isDisabled : isEffectivelyDisabled
   }, fg('platform-dst_fix_not_focusable_loading_button') && {
     'aria-live': 'polite'

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

@@ -2,13 +2,14 @@
 import "./content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 var styles = {
   text: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _1bto1l2s _o5721q9c",
   icon: "_1e0c1txw _16jlidpf _1o9zidpf _1wpz1h6o _1wybidpf _vwz4idpf _uiztglyw",
-  beforeIcon: "_1he91b66 _w795v77o",
-  afterIcon: "_1he9v77o _w7951b66",
   common: "_v564g17y",
-  fade: "_tzy4idpf"
+  fade: "_tzy4idpf",
+  beforeIcon: "_1he91b66 _w795v77o",
+  afterIcon: "_1he9v77o _w7951b66"
 };
 /**
  * __Content__
@@ -22,7 +23,7 @@ var Content = function Content(_ref) {
     isLoading = _ref.isLoading,
     position = _ref.position;
   return /*#__PURE__*/React.createElement("span", {
-    className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade, position === 'before' && styles.beforeIcon, position === 'after' && styles.afterIcon])
+    className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade, !fg('platform-button-icon-spacing-cleanup') && position === 'before' && styles.beforeIcon, !fg('platform-button-icon-spacing-cleanup') && position === 'after' && styles.afterIcon])
   }, children);
 };
 export default Content;

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: "0.0.0-development",
+    packageVersion: "23.9.7",
     analyticsData: analyticsContext
   });
 

package/dist/types/containers/button-group.d.ts

@@ -23,4 +23,4 @@ export type ButtonGroupProps = {
      */
     titleId?: string;
 };
-export default function ButtonGroup({ children, testId, label, titleId }: ButtonGroupProps): React.JSX.Element;
+export default function ButtonGroup({ children, testId, label, titleId, }: ButtonGroupProps): React.JSX.Element;

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

@@ -12,7 +12,7 @@ type SplitButtonContextProps = NavigationSplitButtonContextProps | MainSplitButt
 /**
  * TODO: Add jsdoc
  */
-export declare const SplitButtonContext: import("react").Context<SplitButtonContextProps | undefined>;
+export declare const SplitButtonContext: import('react').Context<SplitButtonContextProps | undefined>;
 type UseSplitButtonContext = {
     appearance: SplitButtonAppearance | 'subtle';
     spacing: SplitButtonSpacing;

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
 export declare const getActions: (children: ReactNode) => {
-    PrimaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
-    SecondaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
+    PrimaryAction: string | number | import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | import('react').ReactPortal;
+    SecondaryAction: string | number | import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | import('react').ReactPortal;
 };

package/dist/types/old-button/custom-theme-button/custom-theme-button.d.ts

@@ -12,5 +12,5 @@ import { type CustomThemeButtonOwnProps } from './custom-theme-button-types';
  *
  * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
  */
-declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
+declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
 export default CustomThemeButton;

package/dist/types/old-button/shared/css.d.ts

@@ -10,14 +10,14 @@ type GetCssArgs = {
     isOnlySingleIcon: boolean;
 };
 export declare function getCss({ appearance, spacing, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
-export declare function getIconStyle({ spacing }: {
+export declare function getIconStyle({ spacing, }: {
     spacing: Spacing;
-}): import("@emotion/react").SerializedStyles;
-export declare function getContentStyle({ spacing }: {
+}): import('@emotion/react').SerializedStyles;
+export declare function getContentStyle({ spacing, }: {
     spacing: Spacing;
-}): import("@emotion/react").SerializedStyles;
-export declare function getFadingCss({ hasOverlay }: {
+}): import('@emotion/react').SerializedStyles;
+export declare function getFadingCss({ hasOverlay, }: {
     hasOverlay: boolean;
-}): import("@emotion/react").SerializedStyles;
+}): import('@emotion/react').SerializedStyles;
 export declare const overlayCss: CSSObject;
 export {};

package/dist/types/old-button/shared/get-if-visually-hidden-children.d.ts

@@ -1,2 +1,2 @@
 import { type ReactNode } from 'react';
-export declare const getIfVisuallyHiddenChildren: (children: ReactNode) => boolean | "" | 0 | null | undefined;
+export declare const getIfVisuallyHiddenChildren: (children: ReactNode) => boolean | '' | 0 | null | undefined;

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

@@ -23,4 +23,4 @@ export type ButtonGroupProps = {
      */
     titleId?: string;
 };
-export default function ButtonGroup({ children, testId, label, titleId }: ButtonGroupProps): React.JSX.Element;
+export default function ButtonGroup({ children, testId, label, titleId, }: ButtonGroupProps): React.JSX.Element;

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

@@ -12,7 +12,7 @@ type SplitButtonContextProps = NavigationSplitButtonContextProps | MainSplitButt
 /**
  * TODO: Add jsdoc
  */
-export declare const SplitButtonContext: import("react").Context<SplitButtonContextProps | undefined>;
+export declare const SplitButtonContext: import('react').Context<SplitButtonContextProps | undefined>;
 type UseSplitButtonContext = {
     appearance: SplitButtonAppearance | 'subtle';
     spacing: SplitButtonSpacing;

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
 export declare const getActions: (children: ReactNode) => {
-    PrimaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
-    SecondaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
+    PrimaryAction: string | number | import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | import('react').ReactPortal;
+    SecondaryAction: string | number | import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | import('react').ReactPortal;
 };

package/dist/types-ts4.5/old-button/custom-theme-button/custom-theme-button.d.ts

@@ -12,5 +12,5 @@ import { type CustomThemeButtonOwnProps } from './custom-theme-button-types';
  *
  * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
  */
-declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
+declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
 export default CustomThemeButton;

package/dist/types-ts4.5/old-button/shared/css.d.ts

@@ -10,14 +10,14 @@ type GetCssArgs = {
     isOnlySingleIcon: boolean;
 };
 export declare function getCss({ appearance, spacing, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
-export declare function getIconStyle({ spacing }: {
+export declare function getIconStyle({ spacing, }: {
     spacing: Spacing;
-}): import("@emotion/react").SerializedStyles;
-export declare function getContentStyle({ spacing }: {
+}): import('@emotion/react').SerializedStyles;
+export declare function getContentStyle({ spacing, }: {
     spacing: Spacing;
-}): import("@emotion/react").SerializedStyles;
-export declare function getFadingCss({ hasOverlay }: {
+}): import('@emotion/react').SerializedStyles;
+export declare function getFadingCss({ hasOverlay, }: {
     hasOverlay: boolean;
-}): import("@emotion/react").SerializedStyles;
+}): import('@emotion/react').SerializedStyles;
 export declare const overlayCss: CSSObject;
 export {};

package/dist/types-ts4.5/old-button/shared/get-if-visually-hidden-children.d.ts

@@ -1,2 +1,2 @@
 import { type ReactNode } from 'react';
-export declare const getIfVisuallyHiddenChildren: (children: ReactNode) => boolean | "" | 0 | null | undefined;
+export declare const getIfVisuallyHiddenChildren: (children: ReactNode) => boolean | '' | 0 | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "23.9.7",
+	"version": "23.9.8",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -129,6 +129,9 @@
 		},
 		"platform-dst_fix_not_focusable_loading_button": {
 			"type": "boolean"
+		},
+		"platform-button-icon-spacing-cleanup": {
+			"type": "boolean"
 		}
 	}
 }