@atlaskit/button 16.3.2 → 16.3.5

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/button
 
+## 16.3.5
+
+### Patch Changes
+
+- [`e09f1576233`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e09f1576233) - Internal code change turning on new linting rules.
+- Updated dependencies
+
+## 16.3.4
+
+### Patch Changes
+
+- [`65a90f6ba14`](https://bitbucket.org/atlassian/atlassian-frontend/commits/65a90f6ba14) - Use medium icons for button examples
+
+## 16.3.3
+
+### Patch Changes
+
+- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
+
 ## 16.3.2
 
 ### Patch Changes

package/__perf__/customised.tsx

@@ -5,7 +5,7 @@ import AddIcon from '@atlaskit/icon/glyph/editor/add';
 import { CustomThemeButton } from '../src';
 
 export default () => (
-  <CustomThemeButton iconBefore={<AddIcon label="add" />}>
+  <CustomThemeButton iconBefore={<AddIcon label="" />}>
     Button
   </CustomThemeButton>
 );

package/codemods/__tests__/15.0.0-lite-mode/{optimistic.ts → optimistic.tsx}

@@ -615,8 +615,6 @@ describe('Spreading props', () => {
   });
 });
 
-describe('ButtonGroup', () => {});
-
 describe('`type ButtonProps`', () => {
   check({
     transformer,

package/codemods/__tests__/{_framework.ts → _framework.tsx}

@@ -1,5 +1,7 @@
 import { API, FileInfo, Options } from 'jscodeshift';
 
+import noop from '@atlaskit/ds-lib/noop';
+
 const applyTransform = require('jscodeshift/dist/testUtils').applyTransform;
 
 type Transformer = (file: FileInfo, jscodeshift: API, options: Options) => void;
@@ -14,8 +16,6 @@ type TestArgs = {
   after?: () => void;
 };
 
-function noop() {}
-
 export function check({
   it: name,
   original,

package/dist/cjs/button-group.js

@@ -43,7 +43,10 @@ function ButtonGroup(_ref) {
     return (0, _core.jsx)("div", {
       key: idx,
       css: groupItemStyles
-    }, appearance ? /*#__PURE__*/_react.default.cloneElement(child, {
+    }, appearance ?
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-clone-element
+    _react.default.cloneElement(child, {
       appearance: appearance
     }) : child);
   }));

package/dist/cjs/button.js

@@ -17,6 +17,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 var _components = require("@atlaskit/theme/components");
 
 var _buttonBase = _interopRequireDefault(require("./shared/button-base"));
@@ -31,15 +33,22 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function noop() {}
-
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 
+/**
+ * __Button__
+ *
+ * A button triggers an event or action. They let users know what will happen next.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
 var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
   var _ref$onMouseDown = _ref.onMouseDown,
-      providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
+      providedOnMouseDown = _ref$onMouseDown === void 0 ? _noop.default : _ref$onMouseDown,
       _ref$onMouseUp = _ref.onMouseUp,
-      providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
+      providedOnMouseUp = _ref$onMouseUp === void 0 ? _noop.default : _ref$onMouseUp,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),

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

@@ -86,6 +86,13 @@ var initial = {
   isActive: false,
   isFocus: false
 };
+/**
+ * __Custom theme button__
+ *
+ * A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
+ */
 
 var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function CustomThemeButton(_ref2, ref) {
   var _ref2$appearance = _ref2.appearance,

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

@@ -103,6 +103,7 @@ var Theme = (0, _components.createTheme)(function (themeProps) {
     // that we are changing theme soon there is no point
     spinnerStyles: {}
   };
-});
+}); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var _default = Theme;
 exports.default = _default;

package/dist/cjs/loading-button.js

@@ -19,6 +19,13 @@ var _loadingSpinner = _interopRequireDefault(require("./shared/loading-spinner")
 
 var _excluded = ["isLoading"];
 
+/**
+ * __Loading button__
+ *
+ * A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#loading-button)
+ */
 var LoadingButton = /*#__PURE__*/_react.default.forwardRef(function LoadingButton(_ref, ref) {
   var _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,

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

@@ -19,6 +19,8 @@ var _core = require("@emotion/core");
 
 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 _colors = require("@atlaskit/theme/colors");
@@ -33,12 +35,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function noop() {} // Disabled buttons will still publish events for nested elements in webkit.
+// Disabled buttons will still publish events for nested elements in webkit.
 // We are disabling pointer events on child elements so that
 // the button will always be the target of events
 // Note: firefox does not have this behaviour for child elements
-
-
 var noPointerEventsOnChildrenCss = {
   '> *': {
     pointerEvents: 'none'
@@ -70,9 +70,9 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
       _props$type = props.type,
       type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
       _props$onMouseDown = props.onMouseDown,
-      providedOnMouseDown = _props$onMouseDown === void 0 ? noop : _props$onMouseDown,
+      providedOnMouseDown = _props$onMouseDown === void 0 ? _noop.default : _props$onMouseDown,
       _props$onClick = props.onClick,
-      providedOnClick = _props$onClick === void 0 ? noop : _props$onClick,
+      providedOnClick = _props$onClick === void 0 ? _noop.default : _props$onClick,
       _props$component = props.component,
       Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
       testId = props.testId,
@@ -101,7 +101,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.2",
+    packageVersion: "16.3.5",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -123,7 +123,8 @@ 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.
+  /**
+   * 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
    */

package/dist/cjs/version.json

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

package/dist/es2019/button-group.js

@@ -29,7 +29,10 @@ export default function ButtonGroup({
     return jsx("div", {
       key: idx,
       css: groupItemStyles
-    }, appearance ? /*#__PURE__*/React.cloneElement(child, {
+    }, appearance ?
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-clone-element
+    React.cloneElement(child, {
       appearance
     }) : child);
   }));

package/dist/es2019/button.js

@@ -1,13 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useMemo, useState } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import ButtonBase from './shared/button-base';
 import { getCss } from './shared/css';
 import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
-
-function noop() {}
-
 const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+/**
+ * __Button__
+ *
+ * A button triggers an event or action. They let users know what will happen next.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
 const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
   onMouseDown: providedOnMouseDown = noop,
   onMouseUp: providedOnMouseUp = noop,

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

@@ -47,6 +47,14 @@ const initial = {
   isActive: false,
   isFocus: false
 };
+/**
+ * __Custom theme button__
+ *
+ * A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
+ */
+
 const CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function CustomThemeButton({
   // Calculate default props for use in custom themes
   appearance = 'default',

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

@@ -77,5 +77,6 @@ const Theme = createTheme(themeProps => ({
   // Keeping this for legacy compat. We could remove it, but given
   // that we are changing theme soon there is no point
   spinnerStyles: {}
-}));
+})); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Theme;

package/dist/es2019/loading-button.js

@@ -2,6 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from './button';
 import LoadingSpinner from './shared/loading-spinner';
+
+/**
+ * __Loading button__
+ *
+ * A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#loading-button)
+ */
 const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton({
   isLoading = false,
   ...rest

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

@@ -4,17 +4,15 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
-import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
-
-function noop() {} // Disabled buttons will still publish events for nested elements in webkit.
+import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css'; // Disabled buttons will still publish events for nested elements in webkit.
 // We are disabling pointer events on child elements so that
 // the button will always be the target of events
 // Note: firefox does not have this behaviour for child elements
 
-
 const noPointerEventsOnChildrenCss = {
   '> *': {
     pointerEvents: 'none'
@@ -70,7 +68,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.2",
+    packageVersion: "16.3.5",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -92,7 +90,8 @@ 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.
+  /**
+   * 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
    */

package/dist/es2019/version.json

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

package/dist/esm/button-group.js

@@ -28,7 +28,10 @@ export default function ButtonGroup(_ref) {
     return jsx("div", {
       key: idx,
       css: groupItemStyles
-    }, appearance ? /*#__PURE__*/React.cloneElement(child, {
+    }, appearance ?
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-clone-element
+    React.cloneElement(child, {
       appearance: appearance
     }) : child);
   }));

package/dist/esm/button.js

@@ -3,14 +3,22 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["onMouseDown", "onMouseUp"];
 import React, { useCallback, useMemo, useState } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import ButtonBase from './shared/button-base';
 import { getCss } from './shared/css';
 import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
-
-function noop() {}
-
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+/**
+ * __Button__
+ *
+ * A button triggers an event or action. They let users know what will happen next.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
 var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   var _ref$onMouseDown = _ref.onMouseDown,
       providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,

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

@@ -62,6 +62,14 @@ var initial = {
   isActive: false,
   isFocus: false
 };
+/**
+ * __Custom theme button__
+ *
+ * A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
+ */
+
 var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function CustomThemeButton(_ref2, ref) {
   var _ref2$appearance = _ref2.appearance,
       appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,

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

@@ -86,5 +86,6 @@ var Theme = createTheme(function (themeProps) {
     // that we are changing theme soon there is no point
     spinnerStyles: {}
   };
-});
+}); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Theme;

package/dist/esm/loading-button.js

@@ -4,6 +4,14 @@ var _excluded = ["isLoading"];
 import React from 'react';
 import Button from './button';
 import LoadingSpinner from './shared/loading-spinner';
+
+/**
+ * __Loading button__
+ *
+ * A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#loading-button)
+ */
 var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(_ref, ref) {
   var _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,

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

@@ -6,17 +6,15 @@ var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled"
 import React, { useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
-import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
-
-function noop() {} // Disabled buttons will still publish events for nested elements in webkit.
+import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css'; // Disabled buttons will still publish events for nested elements in webkit.
 // We are disabling pointer events on child elements so that
 // the button will always be the target of events
 // Note: firefox does not have this behaviour for child elements
 
-
 var noPointerEventsOnChildrenCss = {
   '> *': {
     pointerEvents: 'none'
@@ -79,7 +77,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.2",
+    packageVersion: "16.3.5",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -101,7 +99,8 @@ 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.
+  /**
+   * 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
    */

package/dist/esm/version.json

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

package/dist/types/button-group.d.ts

@@ -2,7 +2,9 @@
 import React from 'react';
 import { Appearance } from './types';
 export declare type ButtonGroupProps = {
-    /** The appearance to apply to all buttons. */
+    /**
+     * The appearance to apply to all buttons.
+     */
     appearance?: Appearance;
     children?: React.ReactNode;
 };

package/dist/types/button.d.ts

@@ -2,5 +2,14 @@ import React from 'react';
 import { BaseProps } from './types';
 export interface ButtonProps extends BaseProps {
 }
+/**
+ * __Button__
+ *
+ * A button triggers an event or action. They let users know what will happen next.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
 declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>>;
 export default Button;

package/dist/types/custom-theme-button/custom-theme-button-types.d.ts

@@ -8,7 +8,8 @@ export declare type ThemeTokens = {
 export declare type InteractionState = 'disabled' | 'focusSelected' | 'selected' | 'active' | 'hover' | 'focus' | 'default';
 export declare type CustomThemeButtonOwnProps = {
     isLoading?: boolean;
-    /** Slow + discouraged custom theme API
+    /**
+     * Slow + discouraged custom theme API
      * See custom theme guide for usage details
      */
     theme?: (current: (props: ThemeProps) => ThemeTokens, props: ThemeProps) => ThemeTokens;

package/dist/types/custom-theme-button/custom-theme-button.d.ts

@@ -1,3 +1,10 @@
 import React from 'react';
+/**
+ * __Custom theme button__
+ *
+ * A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
+ */
 declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("..").BaseProps, "overlay"> & import("./custom-theme-button-types").CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
 export default CustomThemeButton;

package/dist/types/loading-button.d.ts

@@ -4,5 +4,12 @@ export declare type LoadingButtonOwnProps = {
     isLoading?: boolean;
 };
 export declare type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps;
+/**
+ * __Loading button__
+ *
+ * A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#loading-button)
+ */
 declare const LoadingButton: React.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & LoadingButtonOwnProps & React.RefAttributes<HTMLElement>>;
 export default LoadingButton;

package/dist/types/shared/loading-spinner.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { BaseProps } from '../types';
-declare type Props = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
-export default function LoadingSpinner({ spacing, ...rest }: Props): JSX.Element;
+declare type LoadingSpinnerProps = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
+export default function LoadingSpinner({ spacing, ...rest }: LoadingSpinnerProps): JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -4,44 +4,82 @@ export declare type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'su
 export declare type Spacing = 'compact' | 'default' | 'none';
 declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export declare type BaseOwnProps = {
-    /** The base styling to apply to the button */
+    /**
+     * The base styling to apply to the button
+     */
     appearance?: Appearance;
-    /** Set the button to autofocus on mount */
+    /**
+     * Set the button to autofocus on mount
+     */
     autoFocus?: boolean;
-    /** Add a classname to the button */
+    /**
+     * Add a classname to the button
+     */
     className?: string;
-    /** Used to 'overlay' something over a button. This is commonly used to display a loading spinner */
+    /**
+     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner
+     */
     overlay?: React.ReactNode;
-    /** Provides a url for buttons being used as a link */
+    /**
+     * Provides a url for buttons being used as a link
+     */
     href?: string;
-    /** Places an icon within the button, after the button's text */
+    /**
+     * Places an icon within the button, after the button's text
+     */
     iconAfter?: React.ReactChild;
-    /** Places an icon within the button, before the button's text */
+    /**
+     * Places an icon within the button, before the button's text
+     */
     iconBefore?: React.ReactChild;
-    /** Set if the button is disabled */
+    /**
+     * Set if the button is disabled
+     */
     isDisabled?: boolean;
-    /** Change the style to indicate the button is selected */
+    /**
+     * Change the style to indicate the button is selected
+     */
     isSelected?: boolean;
-    /** Handler to be called on blur */
+    /**
+     * Handler to be called on blur
+     */
     onBlur?: React.FocusEventHandler<HTMLElement>;
-    /** Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details */
+    /**
+     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
+     */
     onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Handler to be called on focus */
+    /**
+     * Handler to be called on focus
+     */
     onFocus?: React.FocusEventHandler<HTMLElement>;
-    /** Set the amount of padding in the button */
+    /**
+     * Set the amount of padding in the button
+     */
     spacing?: Spacing;
-    /** Pass target down to a link within the button component, if a href is provided */
+    /**
+     * Pass target down to a link within the button component, if a href is provided
+     */
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-    /** Pass type down to a button */
+    /**
+     * Pass type down to a button
+     */
     type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
-    /** Option to fit button width to its parent width */
+    /**
+     * Option to fit button width to its parent width
+     */
     shouldFitContainer?: boolean;
-    /** Text content to be rendered in the button */
+    /**
+     * Text content to be rendered in the button
+     */
     children?: React.ReactNode;
-    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     */
     testId?: string;
     component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
-    /** Additional information to be included in the `context` of analytics events that come from button */
+    /**
+     * Additional information to be included in the `context` of analytics events that come from button
+     */
     analyticsContext?: Record<string, any>;
 };
 export declare type BaseProps = Combine<Combine<Omit<React.AllHTMLAttributes<HTMLElement>, 'disabled'>, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.3.2",
+  "version": "16.3.5",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,7 +13,7 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
@@ -23,16 +23,16 @@
     }
   },
   "af:exports": {
-    "./button-group": "./src/entry-points/button-group.ts",
-    "./custom-theme-button": "./src/entry-points/custom-theme-button.ts",
-    "./loading-button": "./src/entry-points/loading-button.ts",
-    "./standard-button": "./src/entry-points/standard-button.ts",
-    "./types": "./src/entry-points/types.ts",
-    ".": "./src/index.ts"
+    "./button-group": "./src/entry-points/button-group.tsx",
+    "./custom-theme-button": "./src/entry-points/custom-theme-button.tsx",
+    "./loading-button": "./src/entry-points/loading-button.tsx",
+    "./standard-button": "./src/entry-points/standard-button.tsx",
+    "./types": "./src/entry-points/types.tsx",
+    ".": "./src/index.tsx"
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -46,9 +46,9 @@
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/logo": "^13.7.0",
+    "@atlaskit/logo": "^13.8.0",
     "@atlaskit/section-message": "^6.1.0",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -56,7 +56,7 @@
     "@testing-library/react": "^8.0.1",
     "@types/react-router-dom": "^4.3.1",
     "ast-types": "^0.13.3",
-    "bind-event-listener": "^2.1.0",
+    "bind-event-listener": "^2.1.1",
     "jest-emotion": "^10.0.32",
     "jest-in-case": "^1.0.2",
     "jscodeshift": "^0.13.0",
@@ -73,6 +73,7 @@
     },
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",

package/report.api.md

@@ -0,0 +1,177 @@
+## 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/core';
+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';
+
+export declare type Appearance =
+  | 'default'
+  | 'danger'
+  | 'link'
+  | 'primary'
+  | 'subtle'
+  | 'subtle-link'
+  | 'warning';
+
+export declare type BaseOwnProps = {
+  /** The base styling to apply to the button */
+  appearance?: Appearance;
+  /** Set the button to autofocus on mount */
+  autoFocus?: boolean;
+  /** Add a classname to the button */
+  className?: string;
+  /** Used to 'overlay' something over a button. This is commonly used to display a loading spinner */
+  overlay?: React_2.ReactNode;
+  /** Provides a url for buttons being used as a link */
+  href?: string;
+  /** Places an icon within the button, after the button's text */
+  iconAfter?: React_2.ReactChild;
+  /** Places an icon within the button, before the button's text */
+  iconBefore?: React_2.ReactChild;
+  /** Set if the button is disabled */
+  isDisabled?: boolean;
+  /** Change the style to indicate the button is selected */
+  isSelected?: boolean;
+  /** Handler to be called on blur */
+  onBlur?: React_2.FocusEventHandler<HTMLElement>;
+  /** Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details */
+  onClick?: (
+    e: React_2.MouseEvent<HTMLElement>,
+    analyticsEvent: UIAnalyticsEvent,
+  ) => void;
+  /** Handler to be called on focus */
+  onFocus?: React_2.FocusEventHandler<HTMLElement>;
+  /** Set the amount of padding in the button */
+  spacing?: Spacing;
+  /** Pass target down to a link within the button component, if a href is provided */
+  target?: React_2.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+  /** Pass type down to a button */
+  type?: React_2.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  /** Option to fit button width to its parent width */
+  shouldFitContainer?: boolean;
+  /** Text content to be rendered in the button */
+  children?: React_2.ReactNode;
+  /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
+  testId?: string;
+  component?:
+    | React_2.ComponentType<React_2.AllHTMLAttributes<HTMLElement>>
+    | React_2.ElementType;
+  /** Additional information to be included in the `context` of analytics events that come from button */
+  analyticsContext?: Record<string, any>;
+};
+
+export declare type BaseProps = Combine<
+  Combine<
+    Omit<React_2.AllHTMLAttributes<HTMLElement>, 'disabled'>,
+    {
+      'data-testid'?: never;
+      'data-has-overlay'?: never;
+    }
+  >,
+  BaseOwnProps
+>;
+
+declare const Button: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
+  ButtonProps & React_2.RefAttributes<HTMLElement>
+>>;
+export default Button;
+
+export declare function ButtonGroup({
+  appearance,
+  children,
+}: ButtonGroupProps): JSX.Element;
+
+declare type ButtonGroupProps = {
+  /** The appearance to apply to all buttons. */
+  appearance?: Appearance;
+  children?: React_2.ReactNode;
+};
+
+export declare interface ButtonProps extends BaseProps {}
+
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+
+export declare const CustomThemeButton: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
+  Omit<BaseProps, 'overlay'> &
+    CustomThemeButtonOwnProps &
+    React_2.RefAttributes<HTMLElement>
+>>;
+
+export declare type CustomThemeButtonOwnProps = {
+  isLoading?: boolean;
+  /** Slow + discouraged custom theme API
+   * See custom theme guide for usage details
+   */
+  theme?: (
+    current: (props: ThemeProps) => ThemeTokens,
+    props: ThemeProps,
+  ) => ThemeTokens;
+};
+
+export declare type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> &
+  CustomThemeButtonOwnProps;
+
+export declare type InteractionState =
+  | 'disabled'
+  | 'focusSelected'
+  | 'selected'
+  | 'active'
+  | 'hover'
+  | 'focus'
+  | 'default';
+
+export declare const LoadingButton: React_2.ForwardRefExoticComponent<
+  Omit<BaseProps, 'overlay'> &
+    LoadingButtonOwnProps &
+    React_2.RefAttributes<HTMLElement>
+>;
+
+export declare type LoadingButtonOwnProps = {
+  isLoading?: boolean;
+};
+
+export declare type LoadingButtonProps = Omit<BaseProps, 'overlay'> &
+  LoadingButtonOwnProps;
+
+export declare type Spacing = 'compact' | 'default' | 'none';
+
+export declare 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;
+};
+
+export declare type ThemeProps = Partial<CustomThemeButtonProps> & {
+  state: InteractionState;
+  iconIsOnlyChild?: boolean;
+  mode?: ThemeModes;
+};
+
+export declare type ThemeTokens = {
+  buttonStyles: CSSObject;
+  spinnerStyles: CSSObject;
+};
+
+export {};
+```