@atlaskit/button 16.8.2 → 16.8.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/button
 
+## 16.8.3
+
+### Patch Changes
+
+- [`11cd2f83450`](https://bitbucket.org/atlassian/atlassian-frontend/commits/11cd2f83450) - Refactor loading button to use less rest props to pass props more explicitly.
+
 ## 16.8.2
 
 ### Patch Changes

package/dist/cjs/loading-button.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _button = _interopRequireDefault(require("./button"));
 var _loadingSpinner = _interopRequireDefault(require("./shared/loading-spinner"));
-var _excluded = ["isLoading"];
+var _excluded = ["appearance", "isDisabled", "isSelected", "isLoading", "spacing"];
 /**
  * __Loading button__
  *
@@ -19,14 +19,27 @@ var _excluded = ["isLoading"];
  * - [Examples](https://atlassian.design/components/button/examples#loading-button)
  */
 var LoadingButton = /*#__PURE__*/_react.default.forwardRef(function LoadingButton(_ref, ref) {
-  var _ref$isLoading = _ref.isLoading,
+  var appearance = _ref.appearance,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    spacing = _ref.spacing,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, rest, {
     ref: ref,
+    appearance: appearance,
     "aria-busy": isLoading,
-    overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, rest) : null
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, {
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : null,
+    spacing: spacing
   }));
 });
 

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

@@ -94,7 +94,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.8.2",
+    packageVersion: "16.8.3",
     analyticsData: analyticsContext
   });
 

package/dist/cjs/shared/loading-spinner.js

@@ -5,10 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LoadingSpinner;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _excluded = ["spacing"];
 function getSpinnerAppearance(_ref) {
   var appearance = _ref.appearance,
     isDisabled = _ref.isDisabled,
@@ -25,12 +23,18 @@ function getSpinnerAppearance(_ref) {
   return 'inherit';
 }
 function LoadingSpinner(_ref2) {
-  var _ref2$spacing = _ref2.spacing,
-    spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var appearance = _ref2.appearance,
+    isDisabled = _ref2.isDisabled,
+    isSelected = _ref2.isSelected,
+    _ref2$spacing = _ref2.spacing,
+    spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing;
   var size = spacing === 'default' ? 'medium' : 'small';
   return /*#__PURE__*/_react.default.createElement(_spinner.default, {
     size: size,
-    appearance: getSpinnerAppearance(rest)
+    appearance: getSpinnerAppearance({
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    })
   });
 }

package/dist/cjs/version.json

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

package/dist/es2019/loading-button.js

@@ -10,14 +10,27 @@ import LoadingSpinner from './shared/loading-spinner';
  * - [Examples](https://atlassian.design/components/button/examples#loading-button)
  */
 const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton({
+  appearance,
+  isDisabled,
+  isSelected,
   isLoading = false,
+  spacing,
   ...rest
 }, ref) {
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
     ref: ref,
+    appearance: appearance,
     "aria-busy": isLoading,
-    overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, rest) : null
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, {
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : null,
+    spacing: spacing
   }));
 });
 

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

@@ -80,7 +80,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.8.2",
+    packageVersion: "16.8.3",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/shared/loading-spinner.js

@@ -17,12 +17,18 @@ function getSpinnerAppearance({
   return 'inherit';
 }
 export default function LoadingSpinner({
-  spacing = 'default',
-  ...rest
+  appearance,
+  isDisabled,
+  isSelected,
+  spacing = 'default'
 }) {
   const size = spacing === 'default' ? 'medium' : 'small';
   return /*#__PURE__*/React.createElement(Spinner, {
     size: size,
-    appearance: getSpinnerAppearance(rest)
+    appearance: getSpinnerAppearance({
+      appearance,
+      isDisabled,
+      isSelected
+    })
   });
 }

package/dist/es2019/version.json

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

package/dist/esm/loading-button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading"];
+var _excluded = ["appearance", "isDisabled", "isSelected", "isLoading", "spacing"];
 import React from 'react';
 import Button from './button';
 import LoadingSpinner from './shared/loading-spinner';
@@ -12,14 +12,27 @@ import LoadingSpinner from './shared/loading-spinner';
  * - [Examples](https://atlassian.design/components/button/examples#loading-button)
  */
 var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(_ref, ref) {
-  var _ref$isLoading = _ref.isLoading,
+  var appearance = _ref.appearance,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    spacing = _ref.spacing,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
     ref: ref,
+    appearance: appearance,
     "aria-busy": isLoading,
-    overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, rest) : null
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, {
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : null,
+    spacing: spacing
   }));
 });
 

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

@@ -85,7 +85,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.8.2",
+    packageVersion: "16.8.3",
     analyticsData: analyticsContext
   });
 

package/dist/esm/shared/loading-spinner.js

@@ -1,5 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["spacing"];
 import React from 'react';
 import Spinner from '@atlaskit/spinner';
 function getSpinnerAppearance(_ref) {
@@ -18,12 +16,18 @@ function getSpinnerAppearance(_ref) {
   return 'inherit';
 }
 export default function LoadingSpinner(_ref2) {
-  var _ref2$spacing = _ref2.spacing,
-    spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+  var appearance = _ref2.appearance,
+    isDisabled = _ref2.isDisabled,
+    isSelected = _ref2.isSelected,
+    _ref2$spacing = _ref2.spacing,
+    spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing;
   var size = spacing === 'default' ? 'medium' : 'small';
   return /*#__PURE__*/React.createElement(Spinner, {
     size: size,
-    appearance: getSpinnerAppearance(rest)
+    appearance: getSpinnerAppearance({
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    })
   });
 }

package/dist/esm/version.json

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.8.2",
+  "version": "16.8.3",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "team": "Design System Team",
+    "team": "Design System Maker Experience",
     "releaseModel": "continuous",
     "website": {
       "name": "Button",
@@ -51,7 +51,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

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)
+
+```