@atlaskit/button 16.14.0 → 16.16.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 16.16.0
+
+### Minor Changes
+
+- [#42973](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42973) [`0fe0a5121a7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fe0a5121a7) - Add missing `testId` prop to `<ButtonGroup>` to enable testing
+
+## 16.15.0
+
+### Minor Changes
+
+- [#42950](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42950) [`9691abc55ce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9691abc55ce) - Restructure new Button (in Alpha) types for documentation purposes
+
 ## 16.14.0
 
 ### Minor Changes

package/dist/cjs/containers/button-group.js

@@ -21,9 +21,11 @@ var buttonGroupStyles = (0, _react2.css)({
 });
 function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
-    children = _ref.children;
+    children = _ref.children,
+    testId = _ref.testId;
   return (0, _react2.jsx)("div", {
-    css: buttonGroupStyles
+    css: buttonGroupStyles,
+    "data-testid": testId
   }, _react.default.Children.map(_react.default.Children.toArray(children), function (child, idx) {
     if (!child) {
       return null;

package/dist/cjs/new-button/variants/shared/use-button-base.js

@@ -115,7 +115,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.14.0",
+    packageVersion: "16.16.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

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

@@ -118,7 +118,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.14.0",
+    packageVersion: "16.16.0",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/containers/button-group.js

@@ -11,10 +11,12 @@ const buttonGroupStyles = css({
 });
 export default function ButtonGroup({
   appearance,
-  children
+  children,
+  testId
 }) {
   return jsx("div", {
-    css: buttonGroupStyles
+    css: buttonGroupStyles,
+    "data-testid": testId
   }, React.Children.map(React.Children.toArray(children), (child, idx) => {
     if (!child) {
       return null;

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -97,7 +97,7 @@ const useButtonBase = ({
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.14.0",
+    packageVersion: "16.16.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

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

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

package/dist/esm/containers/button-group.js

@@ -11,9 +11,11 @@ var buttonGroupStyles = css({
 });
 export default function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
-    children = _ref.children;
+    children = _ref.children,
+    testId = _ref.testId;
   return jsx("div", {
-    css: buttonGroupStyles
+    css: buttonGroupStyles,
+    "data-testid": testId
   }, React.Children.map(React.Children.toArray(children), function (child, idx) {
     if (!child) {
       return null;

package/dist/esm/new-button/variants/shared/use-button-base.js

@@ -107,7 +107,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.14.0",
+    packageVersion: "16.16.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

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

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

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

@@ -4,9 +4,16 @@ import { jsx } from '@emotion/react';
 import { Appearance } from '../old-button/types';
 export type ButtonGroupProps = {
     /**
-     * The appearance to apply to all buttons.
+     * The appearance to apply to all buttons
      */
     appearance?: Appearance;
+    /**
+     * The buttons to render inside the Button Group
+     */
     children?: React.ReactNode;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
 };
-export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): jsx.JSX.Element;
+export default function ButtonGroup({ appearance, children, testId, }: ButtonGroupProps): jsx.JSX.Element;

package/dist/types/new-button/variants/default/link.d.ts

@@ -14,9 +14,7 @@ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = ne
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonDefaultButtonProps & {
-    href: string | RouterLinkConfig;
-} & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
+declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonDefaultButtonProps & import("../types").AdditionalLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
 }) => ReturnType<typeof LinkButtonBase>;
 export default LinkButton;

package/dist/types/new-button/variants/icon/link.d.ts

@@ -14,9 +14,7 @@ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any>
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & {
-    href: string | RouterLinkConfig;
-} & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
+declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & import("../types").AdditionalLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
 }) => ReturnType<typeof LinkIconButtonBase>;
 export default LinkIconButton;

package/dist/types/new-button/variants/types.d.ts

@@ -5,7 +5,7 @@ export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
     /**
-     * The base styling to apply to the button
+     * The button style variation
      */
     appearance?: Appearance;
     /**
@@ -17,11 +17,11 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     overlay?: React.ReactNode;
     /**
-     * Set if the button is disabled
+     * Disable the button to prevent user interaction
      */
     isDisabled?: boolean;
     /**
-     * Change the style to indicate the button is selected
+     * Indicates that the button is selected
      */
     isSelected?: boolean;
     /**
@@ -37,20 +37,20 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     onFocus?: React.FocusEventHandler<TagName>;
     /**
-     * Set the amount of padding in the button
+     * Controls the amount of padding in the button
      */
     spacing?: Spacing;
     /**
-     * Text content to be rendered in the button
+     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for 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 unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
     /**
-     * An optional name used to identify this component to press listeners. E.g. interaction tracing
-     * @see https://hello.atlassian.net/wiki/spaces/UFO/pages/2010358949/UFO+Integration+into+Design+System+components
+     * An optional name used to identify this component to press listeners. For example, interaction tracing. For more information,
+     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration)
      */
     interactionName?: string;
     /**
@@ -58,10 +58,15 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     analyticsContext?: Record<string, any>;
 };
+export type SupportedElements = HTMLButtonElement | HTMLAnchorElement;
 type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
 export type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {
     'data-testid'?: never;
 }>;
+/**
+ * Common additional props for button `<button>` variants
+ */
+export type AdditionalButtonVariantProps = {};
 /**
  * Combines common button props with additional HTML attributes.
  */
@@ -69,11 +74,18 @@ export type CombinedButtonProps<TagName extends HTMLElement, HTMLAttributes exte
 /**
  * Common props for Button `<button>` variants
  */
-export type CommonButtonVariantProps = CombinedButtonProps<HTMLButtonElement, AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>>;
+export type CommonButtonVariantProps = AdditionalButtonVariantProps & CombinedButtonProps<HTMLButtonElement, AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>>;
 /**
- * Common props for Link `<a>` Button variants
+ * Common additional props for Link `<a>` Button variants
  */
-export type CommonLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = {
+export type AdditionalLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = {
+    /**
+     * Provides a URL for link buttons. When using an AppProvider with a configured router link component, a `RouterLinkConfig` object type can be provided for advanced usage. See the [Link Button routing example](https://atlassian.design/components/button/button-new/examples#routing) for more details.
+     */
     href: string | RouterLinkConfig;
-} & CombinedButtonProps<HTMLAnchorElement, AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>>>;
+};
+/**
+ * Common props for Link `<a>` Button variants
+ */
+export type CommonLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = AdditionalLinkVariantProps<RouterLinkConfig> & CombinedButtonProps<HTMLAnchorElement, AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>>>;
 export {};

package/dist/types-ts4.5/containers/button-group.d.ts

@@ -4,9 +4,16 @@ import { jsx } from '@emotion/react';
 import { Appearance } from '../old-button/types';
 export type ButtonGroupProps = {
     /**
-     * The appearance to apply to all buttons.
+     * The appearance to apply to all buttons
      */
     appearance?: Appearance;
+    /**
+     * The buttons to render inside the Button Group
+     */
     children?: React.ReactNode;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
 };
-export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): jsx.JSX.Element;
+export default function ButtonGroup({ appearance, children, testId, }: ButtonGroupProps): jsx.JSX.Element;

package/dist/types-ts4.5/new-button/variants/default/link.d.ts

@@ -14,9 +14,7 @@ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = ne
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonDefaultButtonProps & {
-    href: string | RouterLinkConfig;
-} & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
+declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonDefaultButtonProps & import("../types").AdditionalLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
 }) => ReturnType<typeof LinkButtonBase>;
 export default LinkButton;

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -14,9 +14,7 @@ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any>
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & {
-    href: string | RouterLinkConfig;
-} & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
+declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & import("../types").AdditionalLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
 }) => ReturnType<typeof LinkIconButtonBase>;
 export default LinkIconButton;

package/dist/types-ts4.5/new-button/variants/types.d.ts

@@ -5,7 +5,7 @@ export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
     /**
-     * The base styling to apply to the button
+     * The button style variation
      */
     appearance?: Appearance;
     /**
@@ -17,11 +17,11 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     overlay?: React.ReactNode;
     /**
-     * Set if the button is disabled
+     * Disable the button to prevent user interaction
      */
     isDisabled?: boolean;
     /**
-     * Change the style to indicate the button is selected
+     * Indicates that the button is selected
      */
     isSelected?: boolean;
     /**
@@ -37,20 +37,20 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     onFocus?: React.FocusEventHandler<TagName>;
     /**
-     * Set the amount of padding in the button
+     * Controls the amount of padding in the button
      */
     spacing?: Spacing;
     /**
-     * Text content to be rendered in the button
+     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for 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 unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
     /**
-     * An optional name used to identify this component to press listeners. E.g. interaction tracing
-     * @see https://hello.atlassian.net/wiki/spaces/UFO/pages/2010358949/UFO+Integration+into+Design+System+components
+     * An optional name used to identify this component to press listeners. For example, interaction tracing. For more information,
+     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration)
      */
     interactionName?: string;
     /**
@@ -58,10 +58,15 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     analyticsContext?: Record<string, any>;
 };
+export type SupportedElements = HTMLButtonElement | HTMLAnchorElement;
 type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
 export type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {
     'data-testid'?: never;
 }>;
+/**
+ * Common additional props for button `<button>` variants
+ */
+export type AdditionalButtonVariantProps = {};
 /**
  * Combines common button props with additional HTML attributes.
  */
@@ -69,11 +74,18 @@ export type CombinedButtonProps<TagName extends HTMLElement, HTMLAttributes exte
 /**
  * Common props for Button `<button>` variants
  */
-export type CommonButtonVariantProps = CombinedButtonProps<HTMLButtonElement, AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>>;
+export type CommonButtonVariantProps = AdditionalButtonVariantProps & CombinedButtonProps<HTMLButtonElement, AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>>;
 /**
- * Common props for Link `<a>` Button variants
+ * Common additional props for Link `<a>` Button variants
  */
-export type CommonLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = {
+export type AdditionalLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = {
+    /**
+     * Provides a URL for link buttons. When using an AppProvider with a configured router link component, a `RouterLinkConfig` object type can be provided for advanced usage. See the [Link Button routing example](https://atlassian.design/components/button/button-new/examples#routing) for more details.
+     */
     href: string | RouterLinkConfig;
-} & CombinedButtonProps<HTMLAnchorElement, AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>>>;
+};
+/**
+ * Common props for Link `<a>` Button variants
+ */
+export type CommonLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = AdditionalLinkVariantProps<RouterLinkConfig> & CombinedButtonProps<HTMLAnchorElement, AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>>>;
 export {};

package/extract-react-types/legacy-button/custom-theme-button-props.tsx

@@ -0,0 +1,7 @@
+import { CustomThemeButtonOwnProps } from '../../src/old-button/custom-theme-button/custom-theme-button-types';
+
+export default function CustomThemeButtonProps(
+  props: CustomThemeButtonOwnProps,
+) {
+  return null;
+}

package/extract-react-types/legacy-button/loading-button-props.tsx

@@ -0,0 +1,5 @@
+import { LoadingButtonOwnProps } from '../../src/old-button/loading-button';
+
+export default function LoadingButtonProps(props: LoadingButtonOwnProps) {
+  return null;
+}

package/extract-react-types/legacy-button/shared-props.tsx

@@ -0,0 +1,5 @@
+import { BaseOwnProps } from '../../src/old-button/types';
+
+export default function SharedProps(props: BaseOwnProps) {
+  return null;
+}

package/extract-react-types/new-button/variants/default/button-props.tsx

@@ -0,0 +1,5 @@
+import { AdditionalButtonVariantProps } from '../../../../src/new-button/variants/types';
+
+export default function ButtonProps(props: AdditionalButtonVariantProps) {
+  return null;
+}

package/extract-react-types/new-button/variants/default/common-props.tsx

@@ -0,0 +1,11 @@
+import { type CommonDefaultButtonProps } from '../../../../src/new-button/variants/default/types';
+import {
+  type CommonButtonProps,
+  type SupportedElements,
+} from '../../../../src/new-button/variants/types';
+
+export default function CommonProps(
+  props: CommonButtonProps<SupportedElements> & CommonDefaultButtonProps,
+) {
+  return null;
+}

package/extract-react-types/new-button/variants/default/link-button-props.tsx

@@ -0,0 +1,5 @@
+import { AdditionalLinkVariantProps } from '../../../../src/new-button/variants/types';
+
+export default function LinkButtonProps(props: AdditionalLinkVariantProps) {
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.14.0",
+  "version": "16.16.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
           "title": "Button (new)",
           "id": "button-new",
           "status": {
-            "type": "draft"
+            "type": "alpha"
           },
           "sortKey": 1
         },