@atlaskit/button 16.1.1 → 16.1.5

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/button
 
+## 16.1.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.1.4
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 16.1.3
+
+### Patch Changes
+
+- [`c3b0a17a96c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3b0a17a96c) - Fix spinner colours for disabled, warning and selected states when using tokens
+- Updated dependencies
+
+## 16.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.1.1
 
 ### Patch Changes

package/dist/cjs/button.js

@@ -25,6 +25,8 @@ var _css = require("./shared/css");
 
 var _getIsOnlySingleIcon = _interopRequireDefault(require("./shared/get-is-only-single-icon"));
 
+var _excluded = ["mode", "onMouseDown", "onMouseUp"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -39,7 +41,7 @@ var ButtonWithMode = /*#__PURE__*/_react.default.forwardRef(function ButtonWithM
       providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
       _ref$onMouseUp = _ref.onMouseUp,
       providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["mode", "onMouseDown", "onMouseUp"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var appearance = rest.appearance || 'default';
   var spacing = rest.spacing || 'default';
   var shouldFitContainer = Boolean(rest.shouldFitContainer);

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

@@ -29,13 +29,15 @@ var _loadingSpinner = _interopRequireDefault(require("../shared/loading-spinner"
 
 var _theme = _interopRequireWildcard(require("./theme"));
 
+var _excluded = ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function getInteractionState(_ref) {
   var _ref$isDisabled = _ref.isDisabled,
@@ -108,7 +110,7 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
       providedOnBlur = _ref2.onBlur,
       _ref2$theme = _ref2.theme,
       theme = _ref2$theme === void 0 ? _theme.defaultThemeFn : _ref2$theme,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
 
   // TODO is there a nicer way to do this?
   // Add default props back into object for spreading

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

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "Theme", {
   enumerable: true,
   get: function get() {
-    return _customThemeButton.default;
+    return _theme.default;
   }
 });
-Object.defineProperty(exports, "Theme", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _theme.default;
+    return _customThemeButton.default;
   }
 });
 

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

@@ -5,10 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
+exports.defaultThemeFn = defaultThemeFn;
 exports.getCustomCss = getCustomCss;
 exports.getSpecifiers = getSpecifiers;
-exports.defaultThemeFn = defaultThemeFn;
-exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -16,9 +16,9 @@ var _components = require("@atlaskit/theme/components");
 
 var _css = require("../shared/css");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var stateToSelectorMap = {
   focus: '&:focus',

package/dist/cjs/entry-points/custom-theme-button.js

@@ -5,16 +5,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "Theme", {
   enumerable: true,
   get: function get() {
-    return _customThemeButton.default;
+    return _customThemeButton.Theme;
   }
 });
-Object.defineProperty(exports, "Theme", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _customThemeButton.Theme;
+    return _customThemeButton.default;
   }
 });
 

package/dist/cjs/index.js

@@ -7,22 +7,22 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "ButtonGroup", {
   enumerable: true,
   get: function get() {
-    return _standardButton.default;
+    return _buttonGroup.default;
   }
 });
-Object.defineProperty(exports, "LoadingButton", {
+Object.defineProperty(exports, "CustomThemeButton", {
   enumerable: true,
   get: function get() {
-    return _loadingButton.default;
+    return _customThemeButton.default;
   }
 });
-Object.defineProperty(exports, "CustomThemeButton", {
+Object.defineProperty(exports, "LoadingButton", {
   enumerable: true,
   get: function get() {
-    return _customThemeButton.default;
+    return _loadingButton.default;
   }
 });
 Object.defineProperty(exports, "Theme", {
@@ -31,10 +31,10 @@ Object.defineProperty(exports, "Theme", {
     return _customThemeButton.Theme;
   }
 });
-Object.defineProperty(exports, "ButtonGroup", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _buttonGroup.default;
+    return _standardButton.default;
   }
 });
 

package/dist/cjs/loading-button.js

@@ -17,10 +17,12 @@ var _button = _interopRequireDefault(require("./button"));
 
 var _loadingSpinner = _interopRequireDefault(require("./shared/loading-spinner"));
 
+var _excluded = ["isLoading"];
+
 var LoadingButton = /*#__PURE__*/_react.default.forwardRef(function LoadingButton(_ref, ref) {
   var _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["isLoading"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, rest, {
     ref: ref,

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

@@ -21,15 +21,18 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 
 var _css = require("./css");
 
+var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "analyticsContext"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/** @jsx jsx */
 function noop() {} // Disabled buttons will still publish events for nested elements in webkit.
 // We are disabling pointer events on child elements so that
 // the button will always be the target of events
@@ -74,7 +77,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
       Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
       testId = props.testId,
       analyticsContext = props.analyticsContext,
-      rest = (0, _objectWithoutProperties2.default)(props, ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "analyticsContext"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var ourRef = (0, _react.useRef)();
   var setRef = (0, _react.useCallback)(function (node) {
     ourRef.current = node;
@@ -98,7 +101,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.1.1",
+    packageVersion: "16.1.5",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -120,6 +123,21 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     hasOverlay: hasOverlay
   });
   var isInteractive = !isDisabled && !hasOverlay;
+  /** 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
+   */
+
+  var spinnerHackCss = {};
+
+  if (isSelected || isDisabled || appearance === 'warning') {
+    spinnerHackCss = {
+      '[data-theme] & svg': {
+        stroke: isSelected || isDisabled ? "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")") : "var(--ds-text-onBoldWarning, ".concat(_colors.N500, ")")
+      }
+    };
+  }
+
   return (0, _core.jsx)(Component, (0, _extends2.default)({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -151,7 +169,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
       spacing: spacing
     })]
   }, iconAfter) : null, overlay ? (0, _core.jsx)("span", {
-    css: _css.overlayCss
+    css: [_css.overlayCss, spinnerHackCss]
   }, overlay) : null);
 });