@atlaskit/button 16.1.2 → 16.1.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/button
 
+## 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

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

@@ -21,6 +21,10 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 
 var _css = require("./css");
@@ -98,7 +102,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.1.2",
+    packageVersion: "16.1.3",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -120,6 +124,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 ? (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500) : (0, _tokens.token)('color.text.onBoldWarning', _colors.N500)
+      }
+    };
+  }
+
   return (0, _core.jsx)(Component, (0, _extends2.default)({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -151,7 +170,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);
 });
 

package/dist/cjs/version.json

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

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

@@ -5,6 +5,8 @@ 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 { token } from '@atlaskit/tokens';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
 
@@ -69,7 +71,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.1.2",
+    packageVersion: "16.1.3",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -91,6 +93,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 ? token('color.text.mediumEmphasis', N500) : token('color.text.onBoldWarning', N500)
+      }
+    };
+  }
+
   return jsx(Component, _extends({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -122,6 +139,6 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       spacing
     })]
   }, iconAfter) : null, overlay ? jsx("span", {
-    css: overlayCss
+    css: [overlayCss, spinnerHackCss]
   }, overlay) : null);
 });

package/dist/es2019/version.json

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

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

@@ -6,6 +6,8 @@ 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 { token } from '@atlaskit/tokens';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
 
@@ -77,7 +79,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.1.2",
+    packageVersion: "16.1.3",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -99,6 +101,21 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     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 ? token('color.text.mediumEmphasis', N500) : token('color.text.onBoldWarning', N500)
+      }
+    };
+  }
+
   return jsx(Component, _extends({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -130,6 +147,6 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       spacing: spacing
     })]
   }, iconAfter) : null, overlay ? jsx("span", {
-    css: overlayCss
+    css: [overlayCss, spinnerHackCss]
   }, overlay) : null);
 });

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.1.2",
+  "version": "16.1.3",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
     "@atlaskit/ds-lib": "^1.3.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },