@atlaskit/button 17.2.1 → 17.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 17.3.1
+
+### Patch Changes
+
+- [#65509](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65509) [`9e9847bebdbe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e9847bebdbe) - Fix aria-disabled not being passed to custom theme button
+
+## 17.3.0
+
+### Minor Changes
+
+- [#70040](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70040) [`d18ec4d7ce20`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d18ec4d7ce20) - [ux] Tidy up of the `platform.design-system-team.icon-button-spacing-fix_o1zc5` Platform Feature Flag which applies a small adjustment to icon spacing for buttons using `iconBefore` and `iconAfter` props. Small visual adjustment is to be expected — keep this in mind when reviewing any VR tests breaking. The spacing around the icons will be reduced.
+
 ## 17.2.1
 
 ### Patch Changes

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

@@ -117,7 +117,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.2.1",
+    packageVersion: "17.3.1",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/cjs/old-button/custom-theme-button/custom-theme-button.js

@@ -187,7 +187,7 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
         overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, restProps) : null
         // No need to render aria-disabled when it is false
         ,
-        "aria-disabled": isLoading || undefined,
+        "aria-disabled": isLoading || restProps['aria-disabled'],
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onMouseDown: onMouseDown,

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

@@ -15,7 +15,6 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _css = require("./css");
@@ -36,13 +35,13 @@ var noPointerEventsOnChildrenCss = {
   }
 };
 var iconBeforeSpacingFixStyle = (0, _react2.css)({
-  marginLeft: "var(--ds-space-negative-025, -2px)"
+  marginInlineStart: "var(--ds-space-negative-025, -2px)"
 });
 var iconAfterSpacingFixStyle = (0, _react2.css)({
-  marginRight: "var(--ds-space-negative-025, -2px)"
+  marginInlineEnd: "var(--ds-space-negative-025, -2px)"
 });
 var getSpacingFix = function getSpacingFix(children, spacingStyles) {
-  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') || !children || (0, _getIfVisuallyHiddenChildren.getIfVisuallyHiddenChildren)(children)) {
+  if (!children || (0, _getIfVisuallyHiddenChildren.getIfVisuallyHiddenChildren)(children)) {
     return null;
   }
   return spacingStyles;
@@ -118,7 +117,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.2.1",
+    packageVersion: "17.3.1",
     analyticsData: analyticsContext
   });
 
@@ -146,7 +145,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
   /**
    * HACK: Spinner needs to have different colours in the "new" tokens design compared to the old design.
    * For now, while we support both, these styles reach into Spinner when a theme is set, applies the right color.
-   * Ticket to remove: https://product-fabric.atlassian.net/browse/DSP-2067
+   * Ticket to remove: https://product-fabric.atlassian.net/browse/DSP-2067.
    */
   var spinnerHackCss = {};
   if (isSelected || isDisabled || appearance === 'warning') {
@@ -182,11 +181,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     css: [fadeStyles, (0, _css.getIconStyle)({
       spacing: spacing
     }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
-  }, iconBefore) : null, !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? (0, _react2.jsx)("span", {
-    css: [fadeStyles, (0, _css.getContentStyle)({
-      spacing: spacing
-    })]
-  }, children) : null, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeStyles, (0, _css.getContentStyle)({
+  }, iconBefore) : null, getChildren(children, [fadeStyles, (0, _css.getContentStyle)({
     spacing: spacing
   })]), iconAfter ? (0, _react2.jsx)("span", {
     css: [fadeStyles, (0, _css.getIconStyle)({

package/dist/cjs/old-button/shared/get-is-only-single-icon.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getIsOnlySingleIcon;
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getIfVisuallyHiddenChildren = require("./get-if-visually-hidden-children");
 function getIsOnlySingleIcon(_ref) {
   var children = _ref.children,
     iconBefore = _ref.iconBefore,
     iconAfter = _ref.iconAfter;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && (0, _getIfVisuallyHiddenChildren.getIfVisuallyHiddenChildren)(children)) {
+  if ((0, _getIfVisuallyHiddenChildren.getIfVisuallyHiddenChildren)(children)) {
     return true;
   }
   if (children) {

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

@@ -98,7 +98,7 @@ const useButtonBase = ({
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.2.1",
+    packageVersion: "17.3.1",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/es2019/old-button/custom-theme-button/custom-theme-button.js

@@ -153,7 +153,7 @@ const CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef
     overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null
     // No need to render aria-disabled when it is false
     ,
-    "aria-disabled": isLoading || undefined,
+    "aria-disabled": isLoading || restProps['aria-disabled'],
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onMouseDown: onMouseDown,

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

@@ -9,7 +9,6 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FocusRing from '@atlaskit/focus-ring';
 // eslint-disable-next-line no-duplicate-imports
 import InteractionContext from '@atlaskit/interaction-context';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
@@ -25,13 +24,13 @@ const noPointerEventsOnChildrenCss = {
   }
 };
 const iconBeforeSpacingFixStyle = css({
-  marginLeft: "var(--ds-space-negative-025, -2px)"
+  marginInlineStart: "var(--ds-space-negative-025, -2px)"
 });
 const iconAfterSpacingFixStyle = css({
-  marginRight: "var(--ds-space-negative-025, -2px)"
+  marginInlineEnd: "var(--ds-space-negative-025, -2px)"
 });
 const getSpacingFix = (children, spacingStyles) => {
-  if (!getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') || !children || getIfVisuallyHiddenChildren(children)) {
+  if (!children || getIfVisuallyHiddenChildren(children)) {
     return null;
   }
   return spacingStyles;
@@ -103,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.2.1",
+    packageVersion: "17.3.1",
     analyticsData: analyticsContext
   });
 
@@ -131,7 +130,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   /**
    * HACK: Spinner needs to have different colours in the "new" tokens design compared to the old design.
    * For now, while we support both, these styles reach into Spinner when a theme is set, applies the right color.
-   * Ticket to remove: https://product-fabric.atlassian.net/browse/DSP-2067
+   * Ticket to remove: https://product-fabric.atlassian.net/browse/DSP-2067.
    */
   var spinnerHackCss = {};
   if (isSelected || isDisabled || appearance === 'warning') {
@@ -167,11 +166,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     css: [fadeStyles, getIconStyle({
       spacing
     }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
-  }, iconBefore) : null, !getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? jsx("span", {
-    css: [fadeStyles, getContentStyle({
-      spacing
-    })]
-  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeStyles, getContentStyle({
+  }, iconBefore) : null, getChildren(children, [fadeStyles, getContentStyle({
     spacing
   })]), iconAfter ? jsx("span", {
     css: [fadeStyles, getIconStyle({

package/dist/es2019/old-button/shared/get-is-only-single-icon.js

@@ -1,11 +1,10 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getIfVisuallyHiddenChildren } from './get-if-visually-hidden-children';
 export default function getIsOnlySingleIcon({
   children,
   iconBefore,
   iconAfter
 }) {
-  if (getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getIfVisuallyHiddenChildren(children)) {
+  if (getIfVisuallyHiddenChildren(children)) {
     return true;
   }
   if (children) {

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

@@ -109,7 +109,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.2.1",
+    packageVersion: "17.3.1",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/esm/old-button/custom-theme-button/custom-theme-button.js

@@ -177,7 +177,7 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
         overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null
         // No need to render aria-disabled when it is false
         ,
-        "aria-disabled": isLoading || undefined,
+        "aria-disabled": isLoading || restProps['aria-disabled'],
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onMouseDown: onMouseDown,

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

@@ -11,7 +11,6 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FocusRing from '@atlaskit/focus-ring';
 // eslint-disable-next-line no-duplicate-imports
 import InteractionContext from '@atlaskit/interaction-context';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
@@ -27,13 +26,13 @@ var noPointerEventsOnChildrenCss = {
   }
 };
 var iconBeforeSpacingFixStyle = css({
-  marginLeft: "var(--ds-space-negative-025, -2px)"
+  marginInlineStart: "var(--ds-space-negative-025, -2px)"
 });
 var iconAfterSpacingFixStyle = css({
-  marginRight: "var(--ds-space-negative-025, -2px)"
+  marginInlineEnd: "var(--ds-space-negative-025, -2px)"
 });
 var getSpacingFix = function getSpacingFix(children, spacingStyles) {
-  if (!getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') || !children || getIfVisuallyHiddenChildren(children)) {
+  if (!children || getIfVisuallyHiddenChildren(children)) {
     return null;
   }
   return spacingStyles;
@@ -109,7 +108,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.2.1",
+    packageVersion: "17.3.1",
     analyticsData: analyticsContext
   });
 
@@ -137,7 +136,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   /**
    * HACK: Spinner needs to have different colours in the "new" tokens design compared to the old design.
    * For now, while we support both, these styles reach into Spinner when a theme is set, applies the right color.
-   * Ticket to remove: https://product-fabric.atlassian.net/browse/DSP-2067
+   * Ticket to remove: https://product-fabric.atlassian.net/browse/DSP-2067.
    */
   var spinnerHackCss = {};
   if (isSelected || isDisabled || appearance === 'warning') {
@@ -173,11 +172,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     css: [fadeStyles, getIconStyle({
       spacing: spacing
     }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
-  }, iconBefore) : null, !getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? jsx("span", {
-    css: [fadeStyles, getContentStyle({
-      spacing: spacing
-    })]
-  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeStyles, getContentStyle({
+  }, iconBefore) : null, getChildren(children, [fadeStyles, getContentStyle({
     spacing: spacing
   })]), iconAfter ? jsx("span", {
     css: [fadeStyles, getIconStyle({

package/dist/esm/old-button/shared/get-is-only-single-icon.js

@@ -1,10 +1,9 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getIfVisuallyHiddenChildren } from './get-if-visually-hidden-children';
 export default function getIsOnlySingleIcon(_ref) {
   var children = _ref.children,
     iconBefore = _ref.iconBefore,
     iconAfter = _ref.iconAfter;
-  if (getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getIfVisuallyHiddenChildren(children)) {
+  if (getIfVisuallyHiddenChildren(children)) {
     return true;
   }
   if (children) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "17.2.1",
+  "version": "17.3.1",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -73,18 +73,12 @@
     "./types": "./src/entry-points/types.tsx",
     ".": "./src/index.tsx"
   },
-  "platform-feature-flags": {
-    "platform.design-system-team.icon-button-spacing-fix_o1zc5": {
-      "type": "boolean"
-    }
-  },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/interaction-context": "^2.1.0",
-    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
@@ -100,7 +94,7 @@
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/app-provider": "^0.4.0",
+    "@atlaskit/app-provider": "^1.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",