@atlaskit/button 16.5.6 → 16.6.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/button
 
+## 16.6.0
+
+### Minor Changes
+
+- [`3367210dce8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3367210dce8) - [ux] Internal change to the way focus is rendered for buttons.
+  Focus states now apply a 2px offset to the focus ring to aid the contrast of the focus state when applied on the 'primary' and 'selected' buttons.
+  As part of this change, and to settle on a more systemic approach to focus, button also no longer applies a different colored shadow per appearance.
+
+## 16.5.7
+
+### Patch Changes
+
+- [`729e45efa7f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/729e45efa7f) - [ux] Fix a bug where the incorrect design tokens were used for the color of spinners in warning, disabled and selected buttons
+- Updated dependencies
+
 ## 16.5.6
 
 ### Patch Changes

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

@@ -81,7 +81,7 @@ function getCustomCss(_ref) {
 // To do this we are overwriting all pseudo selectors
 function getSpecifiers(styles) {
   return {
-    '&, &:hover, &:active, &:focus, &:visited, &:disabled, &[disabled]': styles
+    '&, &:hover, &:active, &:focus, &:focus-visible, &:visited, &:disabled, &[disabled]': styles
   };
 }
 function defaultThemeFn(current, values) {

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

@@ -13,6 +13,7 @@ var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _colors = require("@atlaskit/theme/colors");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
@@ -90,7 +91,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.5.6",
+    packageVersion: "16.6.0",
     analyticsData: analyticsContext
   });
 
@@ -123,12 +124,12 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
   var spinnerHackCss = {};
   if (isSelected || isDisabled || appearance === 'warning') {
     spinnerHackCss = {
-      '[data-theme] & svg': {
-        stroke: isSelected || isDisabled ? "var(--ds-text-subtle, ".concat(_colors.N500, ")") : "var(--ds-text-warning-inverse, ".concat(_colors.N500, ")")
+      '[data-theme] & circle': {
+        stroke: "".concat(isSelected || isDisabled ? "var(--ds-icon-subtle, ".concat(_colors.N500, ")") : "var(--ds-icon-warning-inverse, ".concat(_colors.N500, ")"), " !important")
       }
     };
   }
-  return (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
     ref: setRef,
@@ -162,6 +163,6 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     })]
   }, iconAfter) : null, overlay ? (0, _react2.jsx)("span", {
     css: [_css.overlayCss, spinnerHackCss]
-  }, overlay) : null);
+  }, overlay) : null));
 });
 exports.default = _default;

package/dist/cjs/shared/colors.js

@@ -173,78 +173,6 @@ var values = {
       }
     }
   },
-  boxShadowColor: {
-    default: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    },
-    primary: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    },
-    warning: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.Y500, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.Y500, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.Y500, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.Y500, ")")
-      }
-    },
-    danger: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.R100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.R100, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.R100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.R100, ")")
-      }
-    },
-    link: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    },
-    subtle: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    },
-    'subtle-link': {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    }
-  },
   color: {
     default: {
       default: {

package/dist/cjs/shared/css.js

@@ -143,17 +143,6 @@ function getCss(_ref3) {
       // background, box-shadow
       transitionDuration: '0s, 0.15s'
     }),
-    '&:focus': _objectSpread(_objectSpread({}, getColors({
-      appearance: appearance,
-      key: isSelected ? 'focusSelected' : 'focus',
-      mode: mode
-    })), {}, {
-      boxShadow: "0 0 0 2px ".concat(_colors.default.boxShadowColor[appearance].focus[mode]),
-      // background, box-shadow
-      transitionDuration: '0s, 0.2s',
-      // disabling browser focus outline
-      outline: 'none'
-    }),
     // giving active styles preference by listing them after focus
     '&:active': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
@@ -207,9 +196,9 @@ function getIconStyle(_ref4) {
   var spacing = _ref4.spacing;
   return (0, _react.css)({
     display: 'flex',
+    // icon size cannot grow and shrink
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     margin: spacing === 'none' ? 0 : innerMargin.icon,
-    // icon size cannot grow and shrink
     flexGrow: 0,
     flexShrink: 0,
     alignSelf: 'center',

package/dist/cjs/version.json

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

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

@@ -69,7 +69,7 @@ export function getCustomCss({
 // To do this we are overwriting all pseudo selectors
 export function getSpecifiers(styles) {
   return {
-    '&, &:hover, &:active, &:focus, &:visited, &:disabled, &[disabled]': styles
+    '&, &:hover, &:active, &:focus, &:focus-visible, &:visited, &:disabled, &[disabled]': styles
   };
 }
 export function defaultThemeFn(current, values) {

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

@@ -5,6 +5,7 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import FocusRing from '@atlaskit/focus-ring';
 // eslint-disable-next-line no-duplicate-imports
 import InteractionContext from '@atlaskit/interaction-context';
 import { N500 } from '@atlaskit/theme/colors';
@@ -75,7 +76,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.5.6",
+    packageVersion: "16.6.0",
     analyticsData: analyticsContext
   });
 
@@ -108,12 +109,12 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   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})`
+      '[data-theme] & circle': {
+        stroke: `${isSelected || isDisabled ? `var(--ds-icon-subtle, ${N500})` : `var(--ds-icon-warning-inverse, ${N500})`} !important`
       }
     };
   }
-  return jsx(Component, _extends({}, rest, {
+  return jsx(FocusRing, null, jsx(Component, _extends({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
     ref: setRef,
@@ -147,5 +148,5 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     })]
   }, iconAfter) : null, overlay ? jsx("span", {
     css: [overlayCss, spinnerHackCss]
-  }, overlay) : null);
+  }, overlay) : null));
 });

package/dist/es2019/shared/colors.js

@@ -164,78 +164,6 @@ const values = {
       }
     }
   },
-  boxShadowColor: {
-    default: {
-      focus: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      },
-      focusSelected: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      }
-    },
-    primary: {
-      focus: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      },
-      focusSelected: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      }
-    },
-    warning: {
-      focus: {
-        light: `var(--ds-border-focused, ${colors.Y500})`,
-        dark: `var(--ds-border-focused, ${colors.Y500})`
-      },
-      focusSelected: {
-        light: `var(--ds-border-focused, ${colors.Y500})`,
-        dark: `var(--ds-border-focused, ${colors.Y500})`
-      }
-    },
-    danger: {
-      focus: {
-        light: `var(--ds-border-focused, ${colors.R100})`,
-        dark: `var(--ds-border-focused, ${colors.R100})`
-      },
-      focusSelected: {
-        light: `var(--ds-border-focused, ${colors.R100})`,
-        dark: `var(--ds-border-focused, ${colors.R100})`
-      }
-    },
-    link: {
-      focus: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      },
-      focusSelected: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      }
-    },
-    subtle: {
-      focus: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      },
-      focusSelected: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      }
-    },
-    'subtle-link': {
-      focus: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      },
-      focusSelected: {
-        light: `var(--ds-border-focused, ${colors.B100})`,
-        dark: `var(--ds-border-focused, ${colors.B75})`
-      }
-    }
-  },
   color: {
     default: {
       default: {

package/dist/es2019/shared/css.js

@@ -136,18 +136,6 @@ export function getCss({
       // background, box-shadow
       transitionDuration: '0s, 0.15s'
     },
-    '&:focus': {
-      ...getColors({
-        appearance,
-        key: isSelected ? 'focusSelected' : 'focus',
-        mode
-      }),
-      boxShadow: `0 0 0 2px ${colors.boxShadowColor[appearance].focus[mode]}`,
-      // background, box-shadow
-      transitionDuration: '0s, 0.2s',
-      // disabling browser focus outline
-      outline: 'none'
-    },
     // giving active styles preference by listing them after focus
     '&:active': {
       ...getColors({
@@ -208,9 +196,9 @@ export function getIconStyle({
 }) {
   return css({
     display: 'flex',
+    // icon size cannot grow and shrink
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     margin: spacing === 'none' ? 0 : innerMargin.icon,
-    // icon size cannot grow and shrink
     flexGrow: 0,
     flexShrink: 0,
     alignSelf: 'center',

package/dist/es2019/version.json

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

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

@@ -71,7 +71,7 @@ export function getCustomCss(_ref) {
 // To do this we are overwriting all pseudo selectors
 export function getSpecifiers(styles) {
   return {
-    '&, &:hover, &:active, &:focus, &:visited, &:disabled, &[disabled]': styles
+    '&, &:hover, &:active, &:focus, &:focus-visible, &:visited, &:disabled, &[disabled]': styles
   };
 }
 export function defaultThemeFn(current, values) {

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

@@ -7,6 +7,7 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import FocusRing from '@atlaskit/focus-ring';
 // eslint-disable-next-line no-duplicate-imports
 import InteractionContext from '@atlaskit/interaction-context';
 import { N500 } from '@atlaskit/theme/colors';
@@ -83,7 +84,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.5.6",
+    packageVersion: "16.6.0",
     analyticsData: analyticsContext
   });
 
@@ -116,12 +117,12 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   var spinnerHackCss = {};
   if (isSelected || isDisabled || appearance === 'warning') {
     spinnerHackCss = {
-      '[data-theme] & svg': {
-        stroke: isSelected || isDisabled ? "var(--ds-text-subtle, ".concat(N500, ")") : "var(--ds-text-warning-inverse, ".concat(N500, ")")
+      '[data-theme] & circle': {
+        stroke: "".concat(isSelected || isDisabled ? "var(--ds-icon-subtle, ".concat(N500, ")") : "var(--ds-icon-warning-inverse, ".concat(N500, ")"), " !important")
       }
     };
   }
-  return jsx(Component, _extends({}, rest, {
+  return jsx(FocusRing, null, jsx(Component, _extends({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
     ref: setRef,
@@ -155,5 +156,5 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     })]
   }, iconAfter) : null, overlay ? jsx("span", {
     css: [overlayCss, spinnerHackCss]
-  }, overlay) : null);
+  }, overlay) : null));
 });

package/dist/esm/shared/colors.js

@@ -164,78 +164,6 @@ var values = {
       }
     }
   },
-  boxShadowColor: {
-    default: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    },
-    primary: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    },
-    warning: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.Y500, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.Y500, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.Y500, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.Y500, ")")
-      }
-    },
-    danger: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.R100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.R100, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.R100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.R100, ")")
-      }
-    },
-    link: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    },
-    subtle: {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    },
-    'subtle-link': {
-      focus: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      },
-      focusSelected: {
-        light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-        dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
-      }
-    }
-  },
   color: {
     default: {
       default: {

package/dist/esm/shared/css.js

@@ -132,17 +132,6 @@ export function getCss(_ref3) {
       // background, box-shadow
       transitionDuration: '0s, 0.15s'
     }),
-    '&:focus': _objectSpread(_objectSpread({}, getColors({
-      appearance: appearance,
-      key: isSelected ? 'focusSelected' : 'focus',
-      mode: mode
-    })), {}, {
-      boxShadow: "0 0 0 2px ".concat(colors.boxShadowColor[appearance].focus[mode]),
-      // background, box-shadow
-      transitionDuration: '0s, 0.2s',
-      // disabling browser focus outline
-      outline: 'none'
-    }),
     // giving active styles preference by listing them after focus
     '&:active': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
@@ -196,9 +185,9 @@ export function getIconStyle(_ref4) {
   var spacing = _ref4.spacing;
   return css({
     display: 'flex',
+    // icon size cannot grow and shrink
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     margin: spacing === 'none' ? 0 : innerMargin.icon,
-    // icon size cannot grow and shrink
     flexGrow: 0,
     flexShrink: 0,
     alignSelf: 'center',

package/dist/esm/version.json

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

package/dist/types/shared/colors.d.ts

@@ -15,16 +15,8 @@ export declare type ColorGroup = {
 export declare type ColorPreset = {
     [key in Appearance]: ColorGroup;
 };
-export declare type BoxShadowColorGroup = {
-    focus: ColorRule;
-    focusSelected: ColorRule;
-};
-declare type BoxShadowColorPreset = {
-    [key in Appearance]: BoxShadowColorGroup;
-};
 declare type Values = {
     background: ColorPreset;
-    boxShadowColor: BoxShadowColorPreset;
     color: ColorPreset;
 };
 declare const values: Values;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.5.6",
+  "version": "16.6.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,6 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -34,9 +33,10 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/focus-ring": "^1.0.6",
     "@atlaskit/interaction-context": "^2.0.0",
-    "@atlaskit/spinner": "^15.3.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/spinner": "^15.4.0",
+    "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -90,4 +90,4 @@
   },
   "homepage": "https://atlassian.design/components/button/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}