@atlaskit/button 16.11.0 → 16.12.0

package/dist/es2019/utils/variants.js

@@ -1,13 +1,54 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import AddIcon from '@atlaskit/icon/glyph/add';
 import Button from '../new-button/variants/default/button';
 import LinkButton from '../new-button/variants/default/link';
+// import IconButton, {
+//   IconButtonProps,
+// } from '../new-button/variants/icon/button';
+import LinkIconButton from '../new-button/variants/icon/link';
 // Add required default props to variants
-const LinkButtonRender = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(LinkButton, _extends({
+const LinkButtonRender = /*#__PURE__*/forwardRef(({
+  href = 'home',
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/React.createElement(LinkButton, _extends({
   ref: ref,
-  href: "#"
-}, props), props.children));
+  href: href
+}, rest), children));
+
+// TODO: Enable icon button in tests once it's ready
+// const IconButtonRender = forwardRef(
+//   (
+//     {
+//       children,
+//       icon = <AddIcon label="" />,
+//       ...rest
+//     }: Omit<IconButtonProps, 'icon'> & {
+//       icon?: IconButtonProps['icon'];
+//     },
+//     ref: React.Ref<HTMLButtonElement>,
+//   ) => (
+//     <IconButton ref={ref} icon={icon} {...rest}>
+//       {children}
+//     </IconButton>
+//   ),
+// );
+
+const LinkIconButtonRender = /*#__PURE__*/forwardRef(({
+  href = '/home',
+  children,
+  icon = /*#__PURE__*/React.createElement(AddIcon, {
+    label: ""
+  }),
+  ...rest
+}, ref) => /*#__PURE__*/React.createElement(LinkIconButton, _extends({
+  ref: ref,
+  icon: icon,
+  href: href
+}, rest), children));
 export const variants = [{
   name: 'Button',
   Component: Button,
@@ -16,5 +57,27 @@ export const variants = [{
   name: 'LinkButton',
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement
-}];
-export default variants;
+}
+// TODO: Enable icon buttons in tests once it's ready
+// {
+//   name: 'IconButton',
+//   Component: IconButtonRender,
+//   elementType: HTMLButtonElement,
+// },
+// {
+//   name: 'LinkIconButton',
+//   Component: LinkIconButtonRender,
+//   elementType: HTMLAnchorElement,
+// },
+];
+
+export default variants;
+export const linkButtonVariants = [{
+  name: 'LinkButton',
+  Component: LinkButtonRender,
+  elementType: HTMLAnchorElement
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement
+}];

package/dist/esm/new-button/variants/default/link.js

@@ -1,19 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "iconAfter", "children", "shouldFitContainer", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
-import React from 'react';
-import { Box } from '@atlaskit/primitives';
+import React, { forwardRef, memo } from 'react';
+import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useDefaultButton from './use-default-button';
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-var LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkButton(_ref, ref) {
+var LinkButtonBase = function LinkButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     autoFocus = _ref.autoFocus,
     appearance = _ref.appearance,
@@ -65,34 +56,45 @@ var LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     shouldFitContainer: shouldFitContainer,
     spacing: spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Use Link primitive to allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    React.createElement(Box, _extends({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      onMouseDownCapture: baseProps.onMouseDownCapture,
-      onMouseUpCapture: baseProps.onMouseUpCapture,
-      onKeyDownCapture: baseProps.onKeyDownCapture,
-      onKeyUpCapture: baseProps.onKeyUpCapture,
-      onTouchStartCapture: baseProps.onTouchStartCapture,
-      onTouchEndCapture: baseProps.onTouchEndCapture,
-      onPointerDownCapture: baseProps.onPointerDownCapture,
-      onPointerUpCapture: baseProps.onPointerUpCapture,
-      onClickCapture: baseProps.onClickCapture,
-      as: "a",
-      testId: testId
-      /**
-       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
-       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkButton.displayName = 'LinkButton';
+  return /*#__PURE__*/React.createElement(UNSAFE_LINK
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    testId: testId
+    /**
+     * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+     * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+     */
+    // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+    ,
+    href: baseProps.isDisabled ? undefined : href,
+    role: baseProps.isDisabled ? 'link' : undefined,
+    "aria-disabled": baseProps.isDisabled === true ? true : undefined
+  }), baseProps.children);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+var WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
+
+/**
+ * __Link Button__
+ *
+ * Renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var LinkButton = /*#__PURE__*/memo(WithRef);
 export default LinkButton;

package/dist/esm/new-button/variants/icon/link.js

@@ -1,19 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "children", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
-import React from 'react';
-import { Box } from '@atlaskit/primitives';
+import React, { forwardRef, memo } from 'react';
+import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useIconButton from './use-icon-button';
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-var LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkIconButton(_ref, ref) {
+var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     autoFocus = _ref.autoFocus,
     appearance = _ref.appearance,
@@ -61,34 +52,45 @@ var LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(func
     ref: ref,
     spacing: spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    React.createElement(Box, _extends({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      onMouseDownCapture: baseProps.onMouseDownCapture,
-      onMouseUpCapture: baseProps.onMouseUpCapture,
-      onKeyDownCapture: baseProps.onKeyDownCapture,
-      onKeyUpCapture: baseProps.onKeyUpCapture,
-      onTouchStartCapture: baseProps.onTouchStartCapture,
-      onTouchEndCapture: baseProps.onTouchEndCapture,
-      onPointerDownCapture: baseProps.onPointerDownCapture,
-      onPointerUpCapture: baseProps.onPointerUpCapture,
-      onClickCapture: baseProps.onClickCapture,
-      as: "a",
-      testId: testId
-      /**
-       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
-       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkIconButton.displayName = 'LinkIconButton';
+  return /*#__PURE__*/React.createElement(UNSAFE_LINK
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    testId: testId
+    /**
+     * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+     * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+     */
+    // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+    ,
+    href: baseProps.isDisabled ? undefined : href,
+    role: baseProps.isDisabled ? 'link' : undefined,
+    "aria-disabled": baseProps.isDisabled === true ? true : undefined
+  }), baseProps.children);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+var WithRef = /*#__PURE__*/forwardRef(LinkIconButtonBase);
+
+/**
+ * __Link Icon Button__
+ *
+ * Renders a link in the style of an icon button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var LinkIconButton = /*#__PURE__*/memo(WithRef);
 export default LinkIconButton;

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.11.0",
+    packageVersion: "16.12.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.11.0",
+    packageVersion: "16.12.0",
     analyticsData: analyticsContext
   });
 

package/dist/esm/utils/variants.js

@@ -1,14 +1,61 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @repo/internal/react/no-unsafe-spread-props */
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "children"],
+  _excluded2 = ["href", "children", "icon"];
 import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import AddIcon from '@atlaskit/icon/glyph/add';
 import Button from '../new-button/variants/default/button';
 import LinkButton from '../new-button/variants/default/link';
+// import IconButton, {
+//   IconButtonProps,
+// } from '../new-button/variants/icon/button';
+import LinkIconButton from '../new-button/variants/icon/link';
 // Add required default props to variants
-var LinkButtonRender = /*#__PURE__*/forwardRef(function (props, ref) {
+var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$href = _ref.href,
+    href = _ref$href === void 0 ? 'home' : _ref$href,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(LinkButton, _extends({
     ref: ref,
-    href: "#"
-  }, props), props.children);
+    href: href
+  }, rest), children);
+});
+
+// TODO: Enable icon button in tests once it's ready
+// const IconButtonRender = forwardRef(
+//   (
+//     {
+//       children,
+//       icon = <AddIcon label="" />,
+//       ...rest
+//     }: Omit<IconButtonProps, 'icon'> & {
+//       icon?: IconButtonProps['icon'];
+//     },
+//     ref: React.Ref<HTMLButtonElement>,
+//   ) => (
+//     <IconButton ref={ref} icon={icon} {...rest}>
+//       {children}
+//     </IconButton>
+//   ),
+// );
+
+var LinkIconButtonRender = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$href = _ref2.href,
+    href = _ref2$href === void 0 ? '/home' : _ref2$href,
+    children = _ref2.children,
+    _ref2$icon = _ref2.icon,
+    icon = _ref2$icon === void 0 ? /*#__PURE__*/React.createElement(AddIcon, {
+      label: ""
+    }) : _ref2$icon,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(LinkIconButton, _extends({
+    ref: ref,
+    icon: icon,
+    href: href
+  }, rest), children);
 });
 export var variants = [{
   name: 'Button',
@@ -18,5 +65,27 @@ export var variants = [{
   name: 'LinkButton',
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement
-}];
-export default variants;
+}
+// TODO: Enable icon buttons in tests once it's ready
+// {
+//   name: 'IconButton',
+//   Component: IconButtonRender,
+//   elementType: HTMLButtonElement,
+// },
+// {
+//   name: 'LinkIconButton',
+//   Component: LinkIconButtonRender,
+//   elementType: HTMLAnchorElement,
+// },
+];
+
+export default variants;
+export var linkButtonVariants = [{
+  name: 'LinkButton',
+  Component: LinkButtonRender,
+  elementType: HTMLAnchorElement
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement
+}];

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import { type CommonButtonVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
-type Element = HTMLButtonElement;
-type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<Element>>;
-export type ButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
 /**
  * __Button__
  *
@@ -15,5 +13,5 @@ export type ButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+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>>>;
 export default Button;

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

@@ -1,17 +1,20 @@
-import React from 'react';
-import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import React, { type Ref } from 'react';
+import { type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
-type Element = HTMLAnchorElement;
-type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.AnchorHTMLAttributes<Element>>;
-export type LinkButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, iconBefore, iconAfter, children, shouldFitContainer, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *
- * A link button renders a link in the style of a button.
+ * Renders a link in the style of a button.
  *
  * - [Examples](https://atlassian.design/components/button/examples)
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>>;
+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> & {
+    ref?: React.Ref<HTMLAnchorElement> | undefined;
+}) => ReturnType<typeof LinkButtonBase>;
 export default LinkButton;

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import { type CommonButtonVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-type Element = HTMLButtonElement;
-type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<Element>>;
-export type IconButtonProps = CommonIconButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
 /**
  * __Icon Button__
  *
@@ -13,5 +11,5 @@ export type IconButtonProps = CommonIconButtonProps & CombinedButtonProps<Elemen
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+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>>>;
 export default IconButton;

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

@@ -1,17 +1,20 @@
-import React from 'react';
-import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import React, { type Ref } from 'react';
+import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-type Element = HTMLAnchorElement;
-type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.AnchorHTMLAttributes<Element>>;
-export type LinkIconButtonProps = CommonIconButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, icon, children, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
- * __Link Button__
+ * __Link Icon Button__
  *
- * A link button renders a link in the style of a button.
+ * Renders a link in the style of an icon button.
  *
  * - [Examples](https://atlassian.design/components/button/examples)
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkIconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>>;
+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> & {
+    ref?: React.Ref<HTMLAnchorElement> | undefined;
+}) => ReturnType<typeof LinkIconButtonBase>;
 export default LinkIconButton;

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

@@ -63,7 +63,17 @@ export type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAtt
     'data-testid'?: never;
 }>;
 /**
- * Combines common buttom props with additional HTML attributes.
+ * Combines common button props with additional HTML attributes.
  */
 export type CombinedButtonProps<TagName extends HTMLElement, HTMLAttributes extends SupportedElementAttributes> = Combine<HTMLAttributes, CommonButtonProps<TagName>>;
+/**
+ * Common props for Button `<button>` variants
+ */
+export type CommonButtonVariantProps = CombinedButtonProps<HTMLButtonElement, AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>>;
+/**
+ * Common props for Link `<a>` Button variants
+ */
+export type CommonLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = {
+    href: string | RouterLinkConfig;
+} & CombinedButtonProps<HTMLAnchorElement, AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>>>;
 export {};

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

@@ -1,5 +1,7 @@
 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';
 export type Variant = {
     name: string;
     Component: typeof Button | typeof LinkButtonRender;
@@ -8,8 +10,28 @@ export type Variant = {
      */
     elementType: typeof HTMLButtonElement | typeof HTMLAnchorElement;
 };
-declare const LinkButtonRender: React.ForwardRefExoticComponent<import("../new-button/variants/default/types").CommonDefaultButtonProps & Omit<Omit<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "style" | "disabled" | "className" | "role">, "data-testid"> & {
-    'data-testid'?: undefined;
-}, keyof import("../new-button/variants/types").CommonButtonProps<TagName>> & import("../new-button/variants/types").CommonButtonProps<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+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"> & {
+        href?: string | undefined;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    elementType: {
+        new (): HTMLAnchorElement;
+        prototype: HTMLAnchorElement;
+    };
+} | {
+    name: string;
+    Component: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "href" | "icon"> & {
+        href?: string | undefined;
+        icon?: React.ReactChild | undefined;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    elementType: {
+        new (): HTMLAnchorElement;
+        prototype: HTMLAnchorElement;
+    };
+})[];

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import { type CommonButtonVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
-type Element = HTMLButtonElement;
-type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<Element>>;
-export type ButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
 /**
  * __Button__
  *
@@ -15,5 +13,5 @@ export type ButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+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>>>;
 export default Button;

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

@@ -1,17 +1,20 @@
-import React from 'react';
-import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import React, { type Ref } from 'react';
+import { type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
-type Element = HTMLAnchorElement;
-type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.AnchorHTMLAttributes<Element>>;
-export type LinkButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, iconBefore, iconAfter, children, shouldFitContainer, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *
- * A link button renders a link in the style of a button.
+ * Renders a link in the style of a button.
  *
  * - [Examples](https://atlassian.design/components/button/examples)
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>>;
+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> & {
+    ref?: React.Ref<HTMLAnchorElement> | undefined;
+}) => ReturnType<typeof LinkButtonBase>;
 export default LinkButton;