@atlaskit/button 16.0.0 → 16.1.3

package/CHANGELOG.md

@@ -1,14 +1,43 @@
 # @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
+
+- Updated dependencies
+
+## 16.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.1.0
+
+### Minor Changes
+
+- [`e267e790d38`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e267e790d38) - [ux] Colors are now sourced through tokens.
+
+### Patch Changes
+
+- [`2d7cc544696`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d7cc544696) - Updates token usage to match the latest token set
+- Updated dependencies
+
 ## 16.0.0
 
 ### Major Changes
 
-- [`1f9aa6747c7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1f9aa6747c7) - [ux] This fixes a regression in Safari where 2px padding is added to the Button component. Before you upgrade, please ensure you are not relying on overriding styles in the Button element such as applying your own margin. Also ensure you do not have a group of two or more buttons that are not enclosed within a ButtonGroup. This is a breaking change - please ensure you are using a ButtonGroup or robust layout styles that do not rely on Button internals.
+- An accidental release occurred, you can safely upgrade without making any changes as there is no difference between 15.1.8 and 16.0.0.
 
 ### Patch Changes
 
-- [`f75544b8b57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f75544b8b57) - [ux] As a part of DSP-895, a 0px margin was applied to button to fix a regression in Safari. This has been reverted as the 0px margin will be moved to css-reset instead. As a part of that same ticket, the specificity of the footer buttons in modal dialog was updated. This has also been reverted now that the 0px margin is being moved to css-reset.
 - Updated dependencies
 
 ## 15.1.8

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

@@ -28,7 +28,7 @@ var stateToSelectorMap = {
   disabled: '&[disabled]'
 }; // Mapping the new clean css back to the legacy theme format.
 // The legacy theme format has all styles at the top level (no nested selectors)
-// and uses `getSpecifiers()` to apply the style to all psudeo states
+// and uses `getSpecifiers()` to apply the style to all pseudo states
 
 function getCustomCss(_ref) {
   var _ref$appearance = _ref.appearance,
@@ -54,7 +54,7 @@ function getCustomCss(_ref) {
     shouldFitContainer: shouldFitContainer,
     isOnlySingleIcon: iconIsOnlyChild
   }); // we need to disable the default browser focus styles always
-  // this is because we are not expressing that we can have two pesduo states at a time
+  // this is because we are not expressing that we can have two pseudo states at a time
 
   result.outline = 'none'; // Pulling relevant styles up to the top level
 
@@ -82,7 +82,7 @@ function getCustomCss(_ref) {
   });
   return result;
 } // This styling approach works by generating a 'style' and applying with maximum specificity
-// To do this we are overwriting all psuedo selectors
+// To do this we are overwriting all pseudo selectors
 
 
 function getSpecifiers(styles) {

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.0.0",
+    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);
 });