@atlaskit/button 16.8.5 → 16.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/button
 
+## 16.9.0
+
+### Minor Changes
+
+- [`f4aff27416d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f4aff27416d) - [ux] We are testing icon button internal spacing fix behind a feature flag. Now the space between icons and right or left edge of the button will be optically perceived as even. If this fix is successful it will be available in a later release.
+
 ## 16.8.5
 
 ### Patch Changes

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

@@ -19,6 +19,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _css = require("./css");
+var _getIfVisuallyHiddenChildren = require("./get-if-visually-hidden-children");
 var _excluded = ["analyticsContext", "appearance", "autoFocus", "buttonCss", "children", "className", "href", "component", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onBlur", "onClick", "onFocus", "onMouseDown", "overlay", "shouldFitContainer", "spacing", "tabIndex", "type", "testId"];
 /** @jsx jsx */
 // eslint-disable-next-line no-duplicate-imports
@@ -33,6 +34,26 @@ var noPointerEventsOnChildrenCss = {
     pointerEvents: 'none'
   }
 };
+var iconBeforeSpacingFixStyle = (0, _react2.css)({
+  marginLeft: '-4px'
+});
+var iconAfterSpacingFixStyle = (0, _react2.css)({
+  marginRight: '-4px'
+});
+var getSpacingFix = function getSpacingFix(children, spacingStyles) {
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') || !children || (0, _getIfVisuallyHiddenChildren.getIfVisuallyHiddenChildren)(children)) {
+    return null;
+  }
+  return spacingStyles;
+};
+var getChildren = function getChildren(children, childrenStyles) {
+  if ((0, _getIfVisuallyHiddenChildren.getIfVisuallyHiddenChildren)(children)) {
+    return children;
+  }
+  return children ? (0, _react2.jsx)("span", {
+    css: childrenStyles
+  }, children) : null;
+};
 var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props, ref) {
   var analyticsContext = props.analyticsContext,
     _props$appearance = props.appearance,
@@ -96,7 +117,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.8.5",
+    packageVersion: "16.9.0",
     analyticsData: analyticsContext
   });
 
@@ -159,15 +180,17 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
   })), iconBefore ? (0, _react2.jsx)("span", {
     css: [fadeCss, (0, _css.getIconStyle)({
       spacing: spacing
-    })]
-  }, iconBefore) : null, children ? (0, _react2.jsx)("span", {
+    }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
+  }, iconBefore) : null, !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? (0, _react2.jsx)("span", {
     css: [fadeCss, (0, _css.getContentStyle)({
       spacing: spacing
     })]
-  }, children) : null, iconAfter ? (0, _react2.jsx)("span", {
+  }, children) : null, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeCss, (0, _css.getContentStyle)({
+    spacing: spacing
+  })]), iconAfter ? (0, _react2.jsx)("span", {
     css: [fadeCss, (0, _css.getIconStyle)({
       spacing: spacing
-    })]
+    }), getSpacingFix(children, iconAfterSpacingFixStyle)]
   }, iconAfter) : null, overlay ? (0, _react2.jsx)("span", {
     css: [_css.overlayCss, spinnerHackCss]
   }, overlay) : null));

package/dist/cjs/shared/get-if-visually-hidden-children.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIfVisuallyHiddenChildren = void 0;
+var _react = require("react");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var getIfVisuallyHiddenChildren = function getIfVisuallyHiddenChildren(children) {
+  return children && /*#__PURE__*/(0, _react.isValidElement)(children) && children.type === _visuallyHidden.default;
+};
+exports.getIfVisuallyHiddenChildren = getIfVisuallyHiddenChildren;

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

@@ -4,10 +4,15 @@ 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)) {
+    return true;
+  }
   if (children) {
     return false;
   }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.8.5",
+	"version": "16.9.0",
 	"sideEffects": false
 }

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

@@ -12,6 +12,7 @@ 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';
+import { getIfVisuallyHiddenChildren } from './get-if-visually-hidden-children';
 
 // Disabled buttons will still publish events for nested elements in webkit.
 // We are disabling pointer events on child elements so that
@@ -22,6 +23,26 @@ const noPointerEventsOnChildrenCss = {
     pointerEvents: 'none'
   }
 };
+const iconBeforeSpacingFixStyle = css({
+  marginLeft: '-4px'
+});
+const iconAfterSpacingFixStyle = css({
+  marginRight: '-4px'
+});
+const getSpacingFix = (children, spacingStyles) => {
+  if (!getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') || !children || getIfVisuallyHiddenChildren(children)) {
+    return null;
+  }
+  return spacingStyles;
+};
+const getChildren = (children, childrenStyles) => {
+  if (getIfVisuallyHiddenChildren(children)) {
+    return children;
+  }
+  return children ? jsx("span", {
+    css: childrenStyles
+  }, children) : null;
+};
 export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   const {
     // I don't think analytics should be in button, but for now it is
@@ -84,7 +105,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.8.5",
+    packageVersion: "16.9.0",
     analyticsData: analyticsContext
   });
 
@@ -147,15 +168,17 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   })), iconBefore ? jsx("span", {
     css: [fadeCss, getIconStyle({
       spacing
-    })]
-  }, iconBefore) : null, children ? jsx("span", {
+    }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
+  }, iconBefore) : null, !getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? jsx("span", {
     css: [fadeCss, getContentStyle({
       spacing
     })]
-  }, children) : null, iconAfter ? jsx("span", {
+  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeCss, getContentStyle({
+    spacing
+  })]), iconAfter ? jsx("span", {
     css: [fadeCss, getIconStyle({
       spacing
-    })]
+    }), getSpacingFix(children, iconAfterSpacingFixStyle)]
   }, iconAfter) : null, overlay ? jsx("span", {
     css: [overlayCss, spinnerHackCss]
   }, overlay) : null));

package/dist/es2019/shared/get-if-visually-hidden-children.js

@@ -0,0 +1,5 @@
+import { isValidElement } from 'react';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+export const getIfVisuallyHiddenChildren = children => {
+  return children && /*#__PURE__*/isValidElement(children) && children.type === VisuallyHidden;
+};

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

@@ -1,8 +1,13 @@
+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)) {
+    return true;
+  }
   if (children) {
     return false;
   }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.8.5",
+	"version": "16.9.0",
 	"sideEffects": false
 }

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

@@ -14,6 +14,7 @@ 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';
+import { getIfVisuallyHiddenChildren } from './get-if-visually-hidden-children';
 
 // Disabled buttons will still publish events for nested elements in webkit.
 // We are disabling pointer events on child elements so that
@@ -24,6 +25,26 @@ var noPointerEventsOnChildrenCss = {
     pointerEvents: 'none'
   }
 };
+var iconBeforeSpacingFixStyle = css({
+  marginLeft: '-4px'
+});
+var iconAfterSpacingFixStyle = css({
+  marginRight: '-4px'
+});
+var getSpacingFix = function getSpacingFix(children, spacingStyles) {
+  if (!getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') || !children || getIfVisuallyHiddenChildren(children)) {
+    return null;
+  }
+  return spacingStyles;
+};
+var getChildren = function getChildren(children, childrenStyles) {
+  if (getIfVisuallyHiddenChildren(children)) {
+    return children;
+  }
+  return children ? jsx("span", {
+    css: childrenStyles
+  }, children) : null;
+};
 export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   var analyticsContext = props.analyticsContext,
     _props$appearance = props.appearance,
@@ -87,7 +108,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.8.5",
+    packageVersion: "16.9.0",
     analyticsData: analyticsContext
   });
 
@@ -150,15 +171,17 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   })), iconBefore ? jsx("span", {
     css: [fadeCss, getIconStyle({
       spacing: spacing
-    })]
-  }, iconBefore) : null, children ? jsx("span", {
+    }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
+  }, iconBefore) : null, !getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? jsx("span", {
     css: [fadeCss, getContentStyle({
       spacing: spacing
     })]
-  }, children) : null, iconAfter ? jsx("span", {
+  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeCss, getContentStyle({
+    spacing: spacing
+  })]), iconAfter ? jsx("span", {
     css: [fadeCss, getIconStyle({
       spacing: spacing
-    })]
+    }), getSpacingFix(children, iconAfterSpacingFixStyle)]
   }, iconAfter) : null, overlay ? jsx("span", {
     css: [overlayCss, spinnerHackCss]
   }, overlay) : null));

package/dist/esm/shared/get-if-visually-hidden-children.js

@@ -0,0 +1,5 @@
+import { isValidElement } from 'react';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+export var getIfVisuallyHiddenChildren = function getIfVisuallyHiddenChildren(children) {
+  return children && /*#__PURE__*/isValidElement(children) && children.type === VisuallyHidden;
+};

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

@@ -1,7 +1,12 @@
+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)) {
+    return true;
+  }
   if (children) {
     return false;
   }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.8.5",
+	"version": "16.9.0",
 	"sideEffects": false
 }

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.8.5",
+  "version": "16.9.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,6 +41,9 @@
   "platform-feature-flags": {
     "platform.design-system-team.clove-sprint-a11y-button_5rz5j": {
       "type": "boolean"
+    },
+    "platform.design-system-team.icon-button-spacing-fix_o1zc5": {
+      "type": "boolean"
     }
   },
   "dependencies": {
@@ -51,7 +54,8 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.13.0",
+    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/visually-hidden": "^1.2.4",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },