@atlaskit/button 16.3.9 → 16.3.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/button
 
+## 16.3.10
+
+### Patch Changes
+
+- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
+
 ## 16.3.9
 
 ### Patch Changes

package/dist/cjs/button-group.js

@@ -18,7 +18,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /** @jsx jsx */
 var buttonGroupStyles = (0, _core.css)({
   display: 'inline-flex',
-  gap: 4,
+  // TODO Delete this comment after verifying spacing token -> previous value `4`
+  gap: "var(--ds-scale-050, 4px)",
   '> *': {
     flex: '1 0 auto'
   }

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

@@ -101,7 +101,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.9",
+    packageVersion: "16.3.10",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/cjs/version.json

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

package/dist/es2019/button-group.js

@@ -3,7 +3,8 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/core';
 const buttonGroupStyles = css({
   display: 'inline-flex',
-  gap: 4,
+  // TODO Delete this comment after verifying spacing token -> previous value `4`
+  gap: "var(--ds-scale-050, 4px)",
   '> *': {
     flex: '1 0 auto'
   }

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

@@ -68,7 +68,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.9",
+    packageVersion: "16.3.10",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/es2019/version.json

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

package/dist/esm/button-group.js

@@ -3,7 +3,8 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/core';
 var buttonGroupStyles = css({
   display: 'inline-flex',
-  gap: 4,
+  // TODO Delete this comment after verifying spacing token -> previous value `4`
+  gap: "var(--ds-scale-050, 4px)",
   '> *': {
     flex: '1 0 auto'
   }

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

@@ -77,7 +77,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.9",
+    packageVersion: "16.3.10",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.3.9",
+  "version": "16.3.10",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -50,11 +52,11 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/checkbox": "^12.3.0",
+    "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/logo": "^13.9.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/logo": "^13.10.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -83,6 +85,7 @@
       "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/button"
+## API Report File for "@atlaskit/button".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -24,49 +26,87 @@ export declare type Appearance =
   | 'warning';
 
 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_2.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_2.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_2.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_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 */
+  /**
+   * 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 */
+  /**
+   * Handler to be called on focus
+   */
   onFocus?: React_2.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_2.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-  /** Pass type down to a button */
+  /**
+   * Pass type down to a button
+   */
   type?: React_2.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_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 */
+  /**
+   * 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 */
+  /**
+   * Additional information to be included in the `context` of analytics events that come from button
+   */
   analyticsContext?: Record<string, any>;
 };
 
@@ -81,6 +121,15 @@ export declare type BaseProps = Combine<
   BaseOwnProps
 >;
 
+/**
+ * __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_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
   ButtonProps & React_2.RefAttributes<HTMLElement>
 >>;
@@ -92,7 +141,9 @@ export declare function ButtonGroup({
 }: ButtonGroupProps): JSX.Element;
 
 declare type ButtonGroupProps = {
-  /** The appearance to apply to all buttons. */
+  /**
+   * The appearance to apply to all buttons.
+   */
   appearance?: Appearance;
   children?: React_2.ReactNode;
 };
@@ -101,6 +152,13 @@ export declare interface ButtonProps extends BaseProps {}
 
 declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
 
+/**
+ * __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)
+ */
 export declare const CustomThemeButton: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
   Omit<BaseProps, 'overlay'> &
     CustomThemeButtonOwnProps &
@@ -109,7 +167,8 @@ export declare const CustomThemeButton: React_2.MemoExoticComponent<React_2.Forw
 
 export declare type CustomThemeButtonOwnProps = {
   isLoading?: boolean;
-  /** Slow + discouraged custom theme API
+  /**
+   * Slow + discouraged custom theme API
    * See custom theme guide for usage details
    */
   theme?: (
@@ -130,6 +189,13 @@ export declare type InteractionState =
   | 'focus'
   | 'default';
 
+/**
+ * __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)
+ */
 export declare const LoadingButton: React_2.ForwardRefExoticComponent<
   Omit<BaseProps, 'overlay'> &
     LoadingButtonOwnProps &