@atlaskit/button 16.5.7 → 16.6.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/button
 
+## 16.6.1
+
+### Patch Changes
+
+- [`23a850fe471`](https://bitbucket.org/atlassian/atlassian-frontend/commits/23a850fe471) - DUMMY changeset to fix PI
+
+## 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

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,11 +13,14 @@ 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"));
 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", "interactionName", "analyticsContext"];
+/** @jsx jsx */
+// eslint-disable-next-line no-duplicate-imports
 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; }
 // Disabled buttons will still publish events for nested elements in webkit.
@@ -90,7 +93,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.5.7",
+    packageVersion: "16.6.1",
     analyticsData: analyticsContext
   });
 
@@ -128,7 +131,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
       }
     };
   }
-  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 +165,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.7",
+	"version": "16.6.1",
 	"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.7",
+    packageVersion: "16.6.1",
     analyticsData: analyticsContext
   });
 
@@ -113,7 +114,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       }
     };
   }
-  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.7",
+	"version": "16.6.1",
 	"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.7",
+    packageVersion: "16.6.1",
     analyticsData: analyticsContext
   });
 
@@ -121,7 +122,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       }
     };
   }
-  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.7",
+	"version": "16.6.1",
 	"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.7",
+  "version": "16.6.1",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,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.4.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.4.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -47,7 +48,7 @@
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/logo": "^13.11.0",
+    "@atlaskit/logo": "^13.13.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/select": "^16.1.0",
     "@atlaskit/ssr": "*",