@atlaskit/button 16.16.1 → 16.17.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/button
 
+## 16.17.0
+
+### Minor Changes
+
+- [#43311](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43311) [`8764ee956ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8764ee956ae) - [ux] Remove `appearance` prop options `link` and `subtle-link` from the new Button (in Alpha). They are now reserved for the new LinkButton component
+
 ## 16.16.1
 
 ### Patch Changes

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.16.1",
+    packageVersion: "16.17.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.16.1",
+    packageVersion: "16.17.0",
     analyticsData: analyticsContext
   });
 

package/dist/cjs/utils/appearances.js

@@ -3,6 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var appearances = ['default', 'primary', 'link', 'subtle', 'subtle-link', 'warning', 'danger'];
-var _default = exports.default = appearances;
+exports.linkButtonAppearances = exports.buttonAppearances = void 0;
+var buttonAppearances = exports.buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger'];
+var linkButtonAppearances = exports.linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];

package/dist/cjs/utils/variants.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.variants = exports.linkButtonVariants = exports.default = void 0;
+exports.linkButtonVariants = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -13,6 +13,7 @@ var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
 var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
 var _link = _interopRequireDefault(require("../new-button/variants/default/link"));
 var _link2 = _interopRequireDefault(require("../new-button/variants/icon/link"));
+var _appearances = require("../utils/appearances");
 var _excluded = ["href", "children"],
   _excluded2 = ["href", "children", "icon"]; // eslint-disable-next-line import/no-extraneous-dependencies
 // import IconButton, {
@@ -65,14 +66,28 @@ var LinkIconButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
     href: href
   }, rest), children);
 });
-var variants = exports.variants = [{
+var linkButtonVariants = exports.linkButtonVariants = [{
+  name: 'LinkButton',
+  Component: LinkButtonRender,
+  elementType: HTMLAnchorElement,
+  appearances: _appearances.linkButtonAppearances
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement,
+  // TODO: Make specific to icon button
+  appearances: _appearances.linkButtonAppearances
+}];
+var variants = [{
   name: 'Button',
   Component: _button.default,
-  elementType: HTMLButtonElement
+  elementType: HTMLButtonElement,
+  appearances: _appearances.buttonAppearances
 }, {
   name: 'LinkButton',
   Component: LinkButtonRender,
-  elementType: HTMLAnchorElement
+  elementType: HTMLAnchorElement,
+  appearances: _appearances.linkButtonAppearances
 }
 // TODO: Enable icon buttons in tests once it's ready
 // {
@@ -86,13 +101,4 @@ var variants = exports.variants = [{
 //   elementType: HTMLAnchorElement,
 // },
 ];
-var _default = exports.default = variants;
-var linkButtonVariants = exports.linkButtonVariants = [{
-  name: 'LinkButton',
-  Component: LinkButtonRender,
-  elementType: HTMLAnchorElement
-}, {
-  name: 'LinkIconButton',
-  Component: LinkIconButtonRender,
-  elementType: HTMLAnchorElement
-}];
+var _default = exports.default = variants;

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.16.1",
+    packageVersion: "16.17.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.16.1",
+    packageVersion: "16.17.0",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/utils/appearances.js

@@ -1,2 +1,3 @@
-const appearances = ['default', 'primary', 'link', 'subtle', 'subtle-link', 'warning', 'danger'];
-export default appearances;
+const buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger'];
+const linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];
+export { buttonAppearances, linkButtonAppearances };

package/dist/es2019/utils/variants.js

@@ -9,6 +9,7 @@ import LinkButton from '../new-button/variants/default/link';
 //   IconButtonProps,
 // } from '../new-button/variants/icon/button';
 import LinkIconButton from '../new-button/variants/icon/link';
+import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
 // Add required default props to variants
 const LinkButtonRender = /*#__PURE__*/forwardRef(({
   href = 'home',
@@ -49,14 +50,28 @@ const LinkIconButtonRender = /*#__PURE__*/forwardRef(({
   icon: icon,
   href: href
 }, rest), children));
-export const variants = [{
+export const linkButtonVariants = [{
+  name: 'LinkButton',
+  Component: LinkButtonRender,
+  elementType: HTMLAnchorElement,
+  appearances: linkButtonAppearances
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement,
+  // TODO: Make specific to icon button
+  appearances: linkButtonAppearances
+}];
+const variants = [{
   name: 'Button',
   Component: Button,
-  elementType: HTMLButtonElement
+  elementType: HTMLButtonElement,
+  appearances: buttonAppearances
 }, {
   name: 'LinkButton',
   Component: LinkButtonRender,
-  elementType: HTMLAnchorElement
+  elementType: HTMLAnchorElement,
+  appearances: linkButtonAppearances
 }
 // TODO: Enable icon buttons in tests once it's ready
 // {
@@ -71,13 +86,4 @@ export const variants = [{
 // },
 ];
 
-export default variants;
-export const linkButtonVariants = [{
-  name: 'LinkButton',
-  Component: LinkButtonRender,
-  elementType: HTMLAnchorElement
-}, {
-  name: 'LinkIconButton',
-  Component: LinkIconButtonRender,
-  elementType: HTMLAnchorElement
-}];
+export default variants;

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.16.1",
+    packageVersion: "16.17.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.16.1",
+    packageVersion: "16.17.0",
     analyticsData: analyticsContext
   });
 

package/dist/esm/utils/appearances.js

@@ -1,2 +1,3 @@
-var appearances = ['default', 'primary', 'link', 'subtle', 'subtle-link', 'warning', 'danger'];
-export default appearances;
+var buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger'];
+var linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];
+export { buttonAppearances, linkButtonAppearances };

package/dist/esm/utils/variants.js

@@ -12,6 +12,7 @@ import LinkButton from '../new-button/variants/default/link';
 //   IconButtonProps,
 // } from '../new-button/variants/icon/button';
 import LinkIconButton from '../new-button/variants/icon/link';
+import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
 // Add required default props to variants
 var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
@@ -57,14 +58,28 @@ var LinkIconButtonRender = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     href: href
   }, rest), children);
 });
-export var variants = [{
+export var linkButtonVariants = [{
+  name: 'LinkButton',
+  Component: LinkButtonRender,
+  elementType: HTMLAnchorElement,
+  appearances: linkButtonAppearances
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement,
+  // TODO: Make specific to icon button
+  appearances: linkButtonAppearances
+}];
+var variants = [{
   name: 'Button',
   Component: Button,
-  elementType: HTMLButtonElement
+  elementType: HTMLButtonElement,
+  appearances: buttonAppearances
 }, {
   name: 'LinkButton',
   Component: LinkButtonRender,
-  elementType: HTMLAnchorElement
+  elementType: HTMLAnchorElement,
+  appearances: linkButtonAppearances
 }
 // TODO: Enable icon buttons in tests once it's ready
 // {
@@ -79,13 +94,4 @@ export var variants = [{
 // },
 ];
 
-export default variants;
-export var linkButtonVariants = [{
-  name: 'LinkButton',
-  Component: LinkButtonRender,
-  elementType: HTMLAnchorElement
-}, {
-  name: 'LinkIconButton',
-  Component: LinkIconButtonRender,
-  elementType: HTMLAnchorElement
-}];
+export default variants;

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

@@ -13,5 +13,5 @@ export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
 export default Button;

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

@@ -13,5 +13,5 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
 export default IconButton;

package/dist/types/new-button/variants/shared/use-button-base.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { xcss } from '@atlaskit/primitives';
-import { type CommonButtonProps } from '../types';
+import { type Appearance, type CommonButtonProps } from '../types';
 export type ControlledEvents<TagName extends HTMLElement> = Pick<React.DOMAttributes<TagName>, 'onMouseDownCapture' | 'onMouseUpCapture' | 'onKeyDownCapture' | 'onKeyUpCapture' | 'onTouchStartCapture' | 'onTouchEndCapture' | 'onPointerDownCapture' | 'onPointerUpCapture' | 'onClickCapture' | 'onClick'>;
 export type ControlledEventsPassed<TagName extends HTMLElement> = Omit<ControlledEvents<TagName>, 'onClick'> & Pick<CommonButtonProps<TagName>, 'onClick'>;
 export type UseButtonBaseArgs<TagName extends HTMLElement> = {
@@ -13,7 +13,8 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     hasIconBefore?: boolean;
     hasIconAfter?: boolean;
     shouldFitContainer?: boolean;
-} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'appearance' | 'autoFocus' | 'children' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay' | 'spacing'> & ControlledEventsPassed<TagName>;
+    appearance?: Appearance;
+} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'children' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay' | 'spacing'> & ControlledEventsPassed<TagName>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: ReturnType<typeof xcss>;
     ref(node: TagName | null): void;

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

@@ -1,13 +1,11 @@
 import React from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-export type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
+export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+export type Appearance = ButtonAppearance | LinkButtonAppearance;
 export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
-    /**
-     * The button style variation
-     */
-    appearance?: Appearance;
     /**
      * Set the button to autofocus on mount
      */
@@ -66,7 +64,12 @@ export type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAtt
 /**
  * Common additional props for button `<button>` variants
  */
-export type AdditionalButtonVariantProps = {};
+export type AdditionalButtonVariantProps = {
+    /**
+     * The button style variation
+     */
+    appearance?: ButtonAppearance;
+};
 /**
  * Combines common button props with additional HTML attributes.
  */
@@ -79,6 +82,10 @@ export type CommonButtonVariantProps = AdditionalButtonVariantProps & CombinedBu
  * Common additional props for Link `<a>` Button variants
  */
 export type AdditionalLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = {
+    /**
+     * The button style variation
+     */
+    appearance?: LinkButtonAppearance;
     /**
      * 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.
      */

package/dist/types/utils/appearances.d.ts

@@ -1,3 +1,4 @@
-import { type Appearance } from '../new-button/variants/types';
-declare const appearances: Appearance[];
-export default appearances;
+import { type ButtonAppearance, type LinkButtonAppearance } from '../new-button/variants/types';
+declare const buttonAppearances: ButtonAppearance[];
+declare const linkButtonAppearances: LinkButtonAppearance[];
+export { buttonAppearances, linkButtonAppearances };

package/dist/types/utils/variants.d.ts

@@ -2,19 +2,21 @@ import React from 'react';
 import Button from '../new-button/variants/default/button';
 import { LinkButtonProps } from '../new-button/variants/default/link';
 import { LinkIconButtonProps } from '../new-button/variants/icon/link';
+import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
 export type Variant = {
-    name: string;
-    Component: typeof Button | typeof LinkButtonRender;
-    /**
-     * Expected element rendered as underlying button
-     */
-    elementType: typeof HTMLButtonElement | typeof HTMLAnchorElement;
+    name: 'Button';
+    Component: typeof Button;
+    elementType: typeof HTMLButtonElement;
+    appearances: typeof buttonAppearances;
+} | {
+    name: 'LinkButton';
+    Component: typeof LinkButtonRender;
+    elementType: typeof HTMLAnchorElement;
+    appearances: typeof linkButtonAppearances;
 };
 declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
-export declare const variants: Variant[];
-export default variants;
 export declare const linkButtonVariants: ({
     name: string;
     Component: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
@@ -24,6 +26,7 @@ export declare const linkButtonVariants: ({
         new (): HTMLAnchorElement;
         prototype: HTMLAnchorElement;
     };
+    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
 } | {
     name: string;
     Component: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "href" | "icon"> & {
@@ -34,4 +37,7 @@ export declare const linkButtonVariants: ({
         new (): HTMLAnchorElement;
         prototype: HTMLAnchorElement;
     };
+    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
 })[];
+declare const variants: Variant[];
+export default variants;

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

@@ -13,5 +13,5 @@ export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
 export default Button;

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

@@ -13,5 +13,5 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
 export default IconButton;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { xcss } from '@atlaskit/primitives';
-import { type CommonButtonProps } from '../types';
+import { type Appearance, type CommonButtonProps } from '../types';
 export type ControlledEvents<TagName extends HTMLElement> = Pick<React.DOMAttributes<TagName>, 'onMouseDownCapture' | 'onMouseUpCapture' | 'onKeyDownCapture' | 'onKeyUpCapture' | 'onTouchStartCapture' | 'onTouchEndCapture' | 'onPointerDownCapture' | 'onPointerUpCapture' | 'onClickCapture' | 'onClick'>;
 export type ControlledEventsPassed<TagName extends HTMLElement> = Omit<ControlledEvents<TagName>, 'onClick'> & Pick<CommonButtonProps<TagName>, 'onClick'>;
 export type UseButtonBaseArgs<TagName extends HTMLElement> = {
@@ -13,7 +13,8 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     hasIconBefore?: boolean;
     hasIconAfter?: boolean;
     shouldFitContainer?: boolean;
-} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'appearance' | 'autoFocus' | 'children' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay' | 'spacing'> & ControlledEventsPassed<TagName>;
+    appearance?: Appearance;
+} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'children' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay' | 'spacing'> & ControlledEventsPassed<TagName>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: ReturnType<typeof xcss>;
     ref(node: TagName | null): void;

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

@@ -1,13 +1,11 @@
 import React from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-export type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
+export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+export type Appearance = ButtonAppearance | LinkButtonAppearance;
 export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
-    /**
-     * The button style variation
-     */
-    appearance?: Appearance;
     /**
      * Set the button to autofocus on mount
      */
@@ -66,7 +64,12 @@ export type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAtt
 /**
  * Common additional props for button `<button>` variants
  */
-export type AdditionalButtonVariantProps = {};
+export type AdditionalButtonVariantProps = {
+    /**
+     * The button style variation
+     */
+    appearance?: ButtonAppearance;
+};
 /**
  * Combines common button props with additional HTML attributes.
  */
@@ -79,6 +82,10 @@ export type CommonButtonVariantProps = AdditionalButtonVariantProps & CombinedBu
  * Common additional props for Link `<a>` Button variants
  */
 export type AdditionalLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = {
+    /**
+     * The button style variation
+     */
+    appearance?: LinkButtonAppearance;
     /**
      * 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.
      */

package/dist/types-ts4.5/utils/appearances.d.ts

@@ -1,3 +1,4 @@
-import { type Appearance } from '../new-button/variants/types';
-declare const appearances: Appearance[];
-export default appearances;
+import { type ButtonAppearance, type LinkButtonAppearance } from '../new-button/variants/types';
+declare const buttonAppearances: ButtonAppearance[];
+declare const linkButtonAppearances: LinkButtonAppearance[];
+export { buttonAppearances, linkButtonAppearances };

package/dist/types-ts4.5/utils/variants.d.ts

@@ -2,19 +2,21 @@ import React from 'react';
 import Button from '../new-button/variants/default/button';
 import { LinkButtonProps } from '../new-button/variants/default/link';
 import { LinkIconButtonProps } from '../new-button/variants/icon/link';
+import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
 export type Variant = {
-    name: string;
-    Component: typeof Button | typeof LinkButtonRender;
-    /**
-     * Expected element rendered as underlying button
-     */
-    elementType: typeof HTMLButtonElement | typeof HTMLAnchorElement;
+    name: 'Button';
+    Component: typeof Button;
+    elementType: typeof HTMLButtonElement;
+    appearances: typeof buttonAppearances;
+} | {
+    name: 'LinkButton';
+    Component: typeof LinkButtonRender;
+    elementType: typeof HTMLAnchorElement;
+    appearances: typeof linkButtonAppearances;
 };
 declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
-export declare const variants: Variant[];
-export default variants;
 export declare const linkButtonVariants: ({
     name: string;
     Component: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
@@ -24,6 +26,7 @@ export declare const linkButtonVariants: ({
         new (): HTMLAnchorElement;
         prototype: HTMLAnchorElement;
     };
+    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
 } | {
     name: string;
     Component: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "href" | "icon"> & {
@@ -34,4 +37,7 @@ export declare const linkButtonVariants: ({
         new (): HTMLAnchorElement;
         prototype: HTMLAnchorElement;
     };
+    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
 })[];
+declare const variants: Variant[];
+export default variants;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.16.1",
+  "version": "16.17.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -81,7 +81,7 @@
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/interaction-context": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.10.0",
+    "@atlaskit/primitives": "^1.11.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
@@ -97,7 +97,7 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/app-provider": "^0.4.0",
-    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",