@atlaskit/button 16.1.2 → 16.1.6

package/dist/cjs/shared/loading-spinner.js

@@ -13,6 +13,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
+var _excluded = ["spacing"];
+
 function getSpinnerAppearance(_ref) {
   var appearance = _ref.appearance,
       isDisabled = _ref.isDisabled,
@@ -36,7 +38,7 @@ function getSpinnerAppearance(_ref) {
 function LoadingSpinner(_ref2) {
   var _ref2$spacing = _ref2.spacing,
       spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, ["spacing"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var size = spacing === 'default' ? 'medium' : 'small';
   return /*#__PURE__*/_react.default.createElement(_spinner.default, {
     size: size,

package/dist/cjs/version.json

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

package/dist/es2019/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useMemo, useState } from 'react';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import ButtonBase from './shared/button-base';
 import { getCss } from './shared/css';
 import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
@@ -8,12 +8,14 @@ import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
 function noop() {}
 
 const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-const ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode({
-  mode,
+const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
   onMouseDown: providedOnMouseDown = noop,
   onMouseUp: providedOnMouseUp = noop,
   ...rest
 }, ref) {
+  const {
+    mode
+  } = useGlobalTheme();
   const appearance = rest.appearance || 'default';
   const spacing = rest.spacing || 'default';
   const shouldFitContainer = Boolean(rest.shouldFitContainer);
@@ -53,16 +55,6 @@ const ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode({
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp
   }));
-});
-const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(props, ref) {
-  return /*#__PURE__*/React.createElement(GlobalTheme.Consumer, null, ({
-    mode
-  }) => {
-    return /*#__PURE__*/React.createElement(ButtonWithMode, _extends({}, props, {
-      ref: ref,
-      mode: mode
-    }));
-  });
 })); // Tools including enzyme rely on components having a display name
 
 Button.displayName = 'Button';

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

@@ -5,6 +5,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
 
@@ -69,7 +70,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.1.2",
+    packageVersion: "16.1.6",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -91,6 +92,21 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     hasOverlay
   });
   const 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-subtle, ${N500})` : `var(--ds-text-warning-inverse, ${N500})`
+      }
+    };
+  }
+
   return jsx(Component, _extends({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -122,6 +138,6 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       spacing
     })]
   }, iconAfter) : null, overlay ? jsx("span", {
-    css: overlayCss
+    css: [overlayCss, spinnerHackCss]
   }, overlay) : null);
 });