@atlaskit/button 16.7.6 → 16.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 16.8.1
+
+### Patch Changes
+
+- [`ba43427b3e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba43427b3e8) - Internal changes to account for introduction of shape/radius tokens.
+
+## 16.8.0
+
+### Minor Changes
+
+- [`5104149700b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5104149700b) - Button no longer unnecessarily sets `tabindex` as `0` for focus when using default `<button>` or `<a>` elements, as they are already focusable. This is still set when using the `component` prop so other elements can still be be focused. (This change is feature flagged)
+
 ## 16.7.6
 
 ### Patch Changes

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

@@ -185,6 +185,7 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
       return /*#__PURE__*/_react.default.createElement(_buttonBase.default, (0, _extends2.default)({}, restProps, {
         ref: ref,
         overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, restProps) : null,
+        "aria-busy": isLoading,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onMouseDown: onMouseDown,

package/dist/cjs/loading-button.js

@@ -25,6 +25,7 @@ var LoadingButton = /*#__PURE__*/_react.default.forwardRef(function LoadingButto
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, rest, {
     ref: ref,
+    "aria-busy": isLoading,
     overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, rest) : null
   }));
 });

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

@@ -15,6 +15,7 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _css = require("./css");
@@ -53,7 +54,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     href = props.href,
     overlay = props.overlay,
     _props$tabIndex = props.tabIndex,
-    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? !props.component && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.clove-sprint-a11y-button_5rz5j') ? undefined : 0 : _props$tabIndex,
     _props$type = props.type,
     type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
     _props$onMouseDown = props.onMouseDown,
@@ -93,7 +94,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.7.6",
+    packageVersion: "16.8.1",
     analyticsData: analyticsContext
   });
 

package/dist/cjs/shared/css.js

@@ -15,7 +15,6 @@ var _constants = require("@atlaskit/theme/constants");
 var _colors = _interopRequireDefault(require("./colors"));
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var borderRadius = (0, _constants.borderRadius)();
 var gridSize = (0, _constants.gridSize)();
 var fontSize = (0, _constants.fontSize)();
 
@@ -104,7 +103,7 @@ function getCss(_ref3) {
     // 0px margin added to css-reset
     alignItems: 'baseline',
     borderWidth: 0,
-    borderRadius: borderRadius,
+    borderRadius: "var(--ds-border-radius, 3px)",
     boxSizing: 'border-box',
     display: 'inline-flex',
     fontSize: 'inherit',
@@ -197,7 +196,7 @@ function getIconStyle(_ref4) {
   return (0, _react.css)({
     display: 'flex',
     // icon size cannot grow and shrink
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     margin: spacing === 'none' ? 0 : innerMargin.icon,
     flexGrow: 0,
     flexShrink: 0,
@@ -212,7 +211,7 @@ function getIconStyle(_ref4) {
 function getContentStyle(_ref5) {
   var spacing = _ref5.spacing;
   return (0, _react.css)({
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,

package/dist/cjs/version.json

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

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

@@ -151,6 +151,7 @@ const CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef
   }) => /*#__PURE__*/React.createElement(ButtonBase, _extends({}, restProps, {
     ref: ref,
     overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null,
+    "aria-busy": isLoading,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onMouseDown: onMouseDown,

package/dist/es2019/loading-button.js

@@ -16,6 +16,7 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton({
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
     ref: ref,
+    "aria-busy": isLoading,
     overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, rest) : null
   }));
 });

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

@@ -8,6 +8,7 @@ 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
@@ -36,7 +37,10 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     className,
     href,
     overlay,
-    tabIndex = 0,
+    // Don't set unnecessary tabIndex for focus if using standard <button> or <a>
+    // html elements. Set to `0` for custom components to ensure other elements can
+    // be focused (although the custom component could be a <button> or <a>...)
+    tabIndex = !props.component && getBooleanFF('platform.design-system-team.clove-sprint-a11y-button_5rz5j') ? undefined : 0,
     type = !href ? 'button' : undefined,
     onMouseDown: providedOnMouseDown = noop,
     onClick: providedOnClick = noop,
@@ -76,7 +80,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.7.6",
+    packageVersion: "16.8.1",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/shared/css.js

@@ -1,9 +1,8 @@
 import { css } from '@emotion/react';
-import { borderRadius as getBorderRadius, fontSize as getFontSize,
+import { fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
 import colors from './colors';
-const borderRadius = getBorderRadius();
 const gridSize = getGridSize();
 const fontSize = getFontSize();
 
@@ -95,7 +94,7 @@ export function getCss({
     // 0px margin added to css-reset
     alignItems: 'baseline',
     borderWidth: 0,
-    borderRadius,
+    borderRadius: "var(--ds-border-radius, 3px)",
     boxSizing: 'border-box',
     display: 'inline-flex',
     fontSize: 'inherit',
@@ -199,7 +198,7 @@ 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
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     margin: spacing === 'none' ? 0 : innerMargin.icon,
     flexGrow: 0,
     flexShrink: 0,
@@ -215,7 +214,7 @@ export function getContentStyle({
   spacing
 }) {
   return css({
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,

package/dist/es2019/version.json

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

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

@@ -175,6 +175,7 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, restProps, {
         ref: ref,
         overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null,
+        "aria-busy": isLoading,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onMouseDown: onMouseDown,

package/dist/esm/loading-button.js

@@ -18,6 +18,7 @@ var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(_ref, r
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
     ref: ref,
+    "aria-busy": isLoading,
     overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, rest) : null
   }));
 });

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

@@ -10,6 +10,7 @@ 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
@@ -44,7 +45,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     href = props.href,
     overlay = props.overlay,
     _props$tabIndex = props.tabIndex,
-    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? !props.component && getBooleanFF('platform.design-system-team.clove-sprint-a11y-button_5rz5j') ? undefined : 0 : _props$tabIndex,
     _props$type = props.type,
     type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
     _props$onMouseDown = props.onMouseDown,
@@ -84,7 +85,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.7.6",
+    packageVersion: "16.8.1",
     analyticsData: analyticsContext
   });
 

package/dist/esm/shared/css.js

@@ -2,11 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { css } from '@emotion/react';
-import { borderRadius as getBorderRadius, fontSize as getFontSize,
+import { fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
 import colors from './colors';
-var borderRadius = getBorderRadius();
 var gridSize = getGridSize();
 var fontSize = getFontSize();
 
@@ -95,7 +94,7 @@ export function getCss(_ref3) {
     // 0px margin added to css-reset
     alignItems: 'baseline',
     borderWidth: 0,
-    borderRadius: borderRadius,
+    borderRadius: "var(--ds-border-radius, 3px)",
     boxSizing: 'border-box',
     display: 'inline-flex',
     fontSize: 'inherit',
@@ -188,7 +187,7 @@ export function getIconStyle(_ref4) {
   return css({
     display: 'flex',
     // icon size cannot grow and shrink
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     margin: spacing === 'none' ? 0 : innerMargin.icon,
     flexGrow: 0,
     flexShrink: 0,
@@ -203,7 +202,7 @@ export function getIconStyle(_ref4) {
 export function getContentStyle(_ref5) {
   var spacing = _ref5.spacing;
   return css({
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.7.6",
+  "version": "16.8.1",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Button",
       "category": "Components"
@@ -38,14 +38,20 @@
     "./types": "./src/entry-points/types.tsx",
     ".": "./src/index.tsx"
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.clove-sprint-a11y-button_5rz5j": {
+      "type": "boolean"
+    }
+  },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/interaction-context": "^2.1.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -67,6 +73,7 @@
     "@types/react-router-dom": "^4.3.1",
     "ast-types": "^0.13.3",
     "bind-event-listener": "^2.1.1",
+    "jest-axe": "^4.0.0",
     "jest-emotion": "^10.0.32",
     "jest-in-case": "^1.0.2",
     "jscodeshift": "^0.13.0",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,133 @@
+## API Report File for "@atlaskit/button"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { ComponentType } from 'react';
+import { CSSObject } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { ThemeModes } from '@atlaskit/theme/types';
+import { ThemeModes as ThemeModes_2 } from '@atlaskit/theme';
+import { ThemeProp } from '@atlaskit/theme/components';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+export type Appearance = 'danger' | 'default' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+
+// @public (undocumented)
+export type BaseOwnProps = {
+    appearance?: Appearance;
+    autoFocus?: boolean;
+    className?: string;
+    overlay?: React_2.ReactNode;
+    href?: string;
+    iconAfter?: React_2.ReactChild;
+    iconBefore?: React_2.ReactChild;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onBlur?: React_2.FocusEventHandler<HTMLElement>;
+    onClick?: (e: React_2.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    onFocus?: React_2.FocusEventHandler<HTMLElement>;
+    spacing?: Spacing;
+    target?: React_2.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    type?: React_2.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    shouldFitContainer?: boolean;
+    children?: React_2.ReactNode;
+    testId?: string;
+    component?: React_2.ComponentType<React_2.AllHTMLAttributes<HTMLElement>> | React_2.ElementType;
+    interactionName?: string;
+    analyticsContext?: Record<string, any>;
+};
+
+// @public (undocumented)
+export type BaseProps = Combine<Combine<Omit<React_2.AllHTMLAttributes<HTMLElement>, 'disabled'>, {
+    'data-testid'?: never;
+    'data-has-overlay'?: never;
+}>, BaseOwnProps>;
+
+// @public
+const Button: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLElement>>>;
+export default Button;
+
+// @public (undocumented)
+export function ButtonGroup({ appearance, children, }: ButtonGroupProps): jsx.JSX.Element;
+
+// @public (undocumented)
+type ButtonGroupProps = {
+    appearance?: Appearance;
+    children?: React_2.ReactNode;
+};
+
+// @public (undocumented)
+export interface ButtonProps extends BaseProps {
+}
+
+// @public (undocumented)
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+
+// @public
+export const CustomThemeButton: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & CustomThemeButtonOwnProps & React_2.RefAttributes<HTMLElement>>>;
+
+// @public (undocumented)
+export type CustomThemeButtonOwnProps = {
+    isLoading?: boolean;
+    theme?: (current: (props: ThemeProps) => ThemeTokens, props: ThemeProps) => ThemeTokens;
+};
+
+// @public (undocumented)
+export type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps;
+
+// @public (undocumented)
+export type InteractionState = 'active' | 'default' | 'disabled' | 'focus' | 'focusSelected' | 'hover' | 'selected';
+
+// @public
+export const LoadingButton: React_2.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & LoadingButtonOwnProps & React_2.RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export type LoadingButtonOwnProps = {
+    isLoading?: boolean;
+};
+
+// @public (undocumented)
+export type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps;
+
+// @public (undocumented)
+export type Spacing = 'compact' | 'default' | 'none';
+
+// @public (undocumented)
+export const Theme: {
+    Consumer: ComponentType<    {
+    children: (tokens: ThemeTokens) => ReactNode;
+    } & Partial<CustomThemeButtonProps> & {
+    state: InteractionState;
+    iconIsOnlyChild?: boolean | undefined;
+    mode?: ThemeModes_2 | undefined;
+    }>;
+    Provider: ComponentType<    {
+    children?: ReactNode;
+    value?: ThemeProp<ThemeTokens, ThemeProps> | undefined;
+    }>;
+    useTheme: (props: ThemeProps) => ThemeTokens;
+};
+
+// @public (undocumented)
+export type ThemeProps = Partial<CustomThemeButtonProps> & {
+    state: InteractionState;
+    iconIsOnlyChild?: boolean;
+    mode?: ThemeModes;
+};
+
+// @public (undocumented)
+export type ThemeTokens = {
+    buttonStyles: CSSObject;
+    spinnerStyles: CSSObject;
+};
+
+// (No @packageDocumentation comment for this package)
+
+```