@atlaskit/button 16.11.0 → 16.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/entry-points/unsafe.js +14 -0
  3. package/dist/cjs/new-button/containers/split-button/split-button.js +4 -0
  4. package/dist/cjs/new-button/variants/default/button.js +1 -1
  5. package/dist/cjs/new-button/variants/default/link.js +49 -42
  6. package/dist/cjs/new-button/variants/icon/button.js +2 -0
  7. package/dist/cjs/new-button/variants/icon/link.js +49 -42
  8. package/dist/cjs/new-button/variants/shared/use-button-base.js +1 -1
  9. package/dist/cjs/old-button/shared/button-base.js +1 -1
  10. package/dist/cjs/utils/variants.js +73 -8
  11. package/dist/es2019/entry-points/unsafe.js +2 -0
  12. package/dist/es2019/new-button/containers/split-button/split-button.js +4 -0
  13. package/dist/es2019/new-button/variants/default/button.js +1 -2
  14. package/dist/es2019/new-button/variants/default/link.js +47 -44
  15. package/dist/es2019/new-button/variants/icon/button.js +2 -1
  16. package/dist/es2019/new-button/variants/icon/link.js +47 -44
  17. package/dist/es2019/new-button/variants/shared/use-button-base.js +1 -1
  18. package/dist/es2019/old-button/shared/button-base.js +1 -1
  19. package/dist/es2019/utils/variants.js +69 -6
  20. package/dist/esm/entry-points/unsafe.js +2 -0
  21. package/dist/esm/new-button/containers/split-button/split-button.js +4 -0
  22. package/dist/esm/new-button/variants/default/button.js +1 -1
  23. package/dist/esm/new-button/variants/default/link.js +46 -42
  24. package/dist/esm/new-button/variants/icon/button.js +2 -0
  25. package/dist/esm/new-button/variants/icon/link.js +46 -42
  26. package/dist/esm/new-button/variants/shared/use-button-base.js +1 -1
  27. package/dist/esm/old-button/shared/button-base.js +1 -1
  28. package/dist/esm/utils/variants.js +75 -6
  29. package/dist/types/entry-points/unsafe.d.ts +2 -0
  30. package/dist/types/new-button/containers/split-button/split-button.d.ts +4 -0
  31. package/dist/types/new-button/variants/default/button.d.ts +4 -6
  32. package/dist/types/new-button/variants/default/link.d.ts +12 -7
  33. package/dist/types/new-button/variants/icon/button.d.ts +5 -5
  34. package/dist/types/new-button/variants/icon/link.d.ts +13 -8
  35. package/dist/types/new-button/variants/types.d.ts +11 -1
  36. package/dist/types/utils/variants.d.ts +25 -3
  37. package/dist/types-ts4.5/entry-points/unsafe.d.ts +2 -0
  38. package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +4 -0
  39. package/dist/types-ts4.5/new-button/variants/default/button.d.ts +4 -6
  40. package/dist/types-ts4.5/new-button/variants/default/link.d.ts +12 -7
  41. package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +5 -5
  42. package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +13 -8
  43. package/dist/types-ts4.5/new-button/variants/types.d.ts +11 -1
  44. package/dist/types-ts4.5/utils/variants.d.ts +25 -3
  45. package/package.json +35 -3
@@ -1,18 +1,8 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React from 'react';
3
- import { Box } from '@atlaskit/primitives';
2
+ import React, { forwardRef, memo } from 'react';
3
+ import UNSAFE_LINK from '@atlaskit/primitives/link';
4
4
  import useIconButton from './use-icon-button';
5
- /**
6
- * __Link Button__
7
- *
8
- * A link button renders a link in the style of a button.
9
- *
10
- * - [Examples](https://atlassian.design/components/button/examples)
11
- * - [Code](https://atlassian.design/components/button/code)
12
- * - [Usage](https://atlassian.design/components/button/usage)
13
- */
14
- const LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkIconButton({
15
- // Button base
5
+ const LinkIconButtonBase = ({
16
6
  analyticsContext,
17
7
  autoFocus,
18
8
  appearance,
@@ -36,7 +26,7 @@ const LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
36
26
  testId,
37
27
  href,
38
28
  ...rest
39
- }, ref) {
29
+ }, ref) => {
40
30
  const baseProps = useIconButton({
41
31
  analyticsContext,
42
32
  appearance,
@@ -61,34 +51,47 @@ const LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
61
51
  ref,
62
52
  spacing
63
53
  });
64
- return (
65
- /*#__PURE__*/
66
- // TODO: Allow custom components for routing (with context)
67
- // https://product-fabric.atlassian.net/browse/DSP-12505
68
- React.createElement(Box, _extends({}, rest, {
69
- ref: baseProps.ref,
70
- xcss: baseProps.xcss,
71
- onClick: baseProps.onClick,
72
- onMouseDownCapture: baseProps.onMouseDownCapture,
73
- onMouseUpCapture: baseProps.onMouseUpCapture,
74
- onKeyDownCapture: baseProps.onKeyDownCapture,
75
- onKeyUpCapture: baseProps.onKeyUpCapture,
76
- onTouchStartCapture: baseProps.onTouchStartCapture,
77
- onTouchEndCapture: baseProps.onTouchEndCapture,
78
- onPointerDownCapture: baseProps.onPointerDownCapture,
79
- onPointerUpCapture: baseProps.onPointerUpCapture,
80
- onClickCapture: baseProps.onClickCapture,
81
- as: "a",
82
- testId: testId
83
- /**
84
- * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
85
- * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
86
- */,
87
- href: baseProps.isDisabled ? undefined : href,
88
- role: baseProps.isDisabled ? 'link' : undefined,
89
- "aria-disabled": baseProps.isDisabled === true ? true : undefined
90
- }), baseProps.children)
91
- );
92
- }));
93
- LinkIconButton.displayName = 'LinkIconButton';
54
+ return /*#__PURE__*/React.createElement(UNSAFE_LINK
55
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
56
+ , _extends({}, rest, {
57
+ ref: baseProps.ref,
58
+ xcss: baseProps.xcss,
59
+ onClick: baseProps.onClick,
60
+ onMouseDownCapture: baseProps.onMouseDownCapture,
61
+ onMouseUpCapture: baseProps.onMouseUpCapture,
62
+ onKeyDownCapture: baseProps.onKeyDownCapture,
63
+ onKeyUpCapture: baseProps.onKeyUpCapture,
64
+ onTouchStartCapture: baseProps.onTouchStartCapture,
65
+ onTouchEndCapture: baseProps.onTouchEndCapture,
66
+ onPointerDownCapture: baseProps.onPointerDownCapture,
67
+ onPointerUpCapture: baseProps.onPointerUpCapture,
68
+ onClickCapture: baseProps.onClickCapture,
69
+ testId: testId
70
+ /**
71
+ * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
72
+ * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
73
+ */
74
+ // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
75
+ ,
76
+ href: baseProps.isDisabled ? undefined : href,
77
+ role: baseProps.isDisabled ? 'link' : undefined,
78
+ "aria-disabled": baseProps.isDisabled === true ? true : undefined
79
+ }), baseProps.children);
80
+ };
81
+
82
+ // Workarounds to support generic types with forwardRef + memo
83
+ const WithRef = /*#__PURE__*/forwardRef(LinkIconButtonBase);
84
+
85
+ /**
86
+ * __Link Icon Button__
87
+ *
88
+ * @private __UNSAFE__ LinkIconButton is not yet safe for production use.
89
+ *
90
+ * Renders a link in the style of an icon button.
91
+ *
92
+ * - [Examples](https://atlassian.design/components/button/examples)
93
+ * - [Code](https://atlassian.design/components/button/code)
94
+ * - [Usage](https://atlassian.design/components/button/usage)
95
+ */
96
+ const LinkIconButton = /*#__PURE__*/memo(WithRef);
94
97
  export default LinkIconButton;
@@ -97,7 +97,7 @@ const useButtonBase = ({
97
97
  action: 'clicked',
98
98
  componentName: 'button',
99
99
  packageName: "@atlaskit/button",
100
- packageVersion: "16.11.0",
100
+ packageVersion: "16.13.0",
101
101
  analyticsData: analyticsContext,
102
102
  actionSubject: buttonType
103
103
  });
@@ -103,7 +103,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
103
103
  action: 'clicked',
104
104
  componentName: 'button',
105
105
  packageName: "@atlaskit/button",
106
- packageVersion: "16.11.0",
106
+ packageVersion: "16.13.0",
107
107
  analyticsData: analyticsContext
108
108
  });
109
109
 
@@ -1,13 +1,54 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
3
2
  import React, { forwardRef } from 'react';
3
+
4
+ // eslint-disable-next-line import/no-extraneous-dependencies
5
+ import AddIcon from '@atlaskit/icon/glyph/add';
4
6
  import Button from '../new-button/variants/default/button';
5
7
  import LinkButton from '../new-button/variants/default/link';
8
+ // import IconButton, {
9
+ // IconButtonProps,
10
+ // } from '../new-button/variants/icon/button';
11
+ import LinkIconButton from '../new-button/variants/icon/link';
6
12
  // Add required default props to variants
7
- const LinkButtonRender = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(LinkButton, _extends({
13
+ const LinkButtonRender = /*#__PURE__*/forwardRef(({
14
+ href = 'home',
15
+ children,
16
+ ...rest
17
+ }, ref) => /*#__PURE__*/React.createElement(LinkButton, _extends({
8
18
  ref: ref,
9
- href: "#"
10
- }, props), props.children));
19
+ href: href
20
+ }, rest), children));
21
+
22
+ // TODO: Enable icon button in tests once it's ready
23
+ // const IconButtonRender = forwardRef(
24
+ // (
25
+ // {
26
+ // children,
27
+ // icon = <AddIcon label="" />,
28
+ // ...rest
29
+ // }: Omit<IconButtonProps, 'icon'> & {
30
+ // icon?: IconButtonProps['icon'];
31
+ // },
32
+ // ref: React.Ref<HTMLButtonElement>,
33
+ // ) => (
34
+ // <IconButton ref={ref} icon={icon} {...rest}>
35
+ // {children}
36
+ // </IconButton>
37
+ // ),
38
+ // );
39
+
40
+ const LinkIconButtonRender = /*#__PURE__*/forwardRef(({
41
+ href = '/home',
42
+ children,
43
+ icon = /*#__PURE__*/React.createElement(AddIcon, {
44
+ label: ""
45
+ }),
46
+ ...rest
47
+ }, ref) => /*#__PURE__*/React.createElement(LinkIconButton, _extends({
48
+ ref: ref,
49
+ icon: icon,
50
+ href: href
51
+ }, rest), children));
11
52
  export const variants = [{
12
53
  name: 'Button',
13
54
  Component: Button,
@@ -16,5 +57,27 @@ export const variants = [{
16
57
  name: 'LinkButton',
17
58
  Component: LinkButtonRender,
18
59
  elementType: HTMLAnchorElement
19
- }];
20
- export default variants;
60
+ }
61
+ // TODO: Enable icon buttons in tests once it's ready
62
+ // {
63
+ // name: 'IconButton',
64
+ // Component: IconButtonRender,
65
+ // elementType: HTMLButtonElement,
66
+ // },
67
+ // {
68
+ // name: 'LinkIconButton',
69
+ // Component: LinkIconButtonRender,
70
+ // elementType: HTMLAnchorElement,
71
+ // },
72
+ ];
73
+
74
+ export default variants;
75
+ export const linkButtonVariants = [{
76
+ name: 'LinkButton',
77
+ Component: LinkButtonRender,
78
+ elementType: HTMLAnchorElement
79
+ }, {
80
+ name: 'LinkIconButton',
81
+ Component: LinkIconButtonRender,
82
+ elementType: HTMLAnchorElement
83
+ }];
@@ -1,4 +1,6 @@
1
1
  export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
2
+ export { default as UNSAFE_LINK_BUTTON } from '../new-button/variants/default/link';
2
3
  export { default as UNSAFE_ICON_BUTTON } from '../new-button/variants/icon/button';
4
+ export { default as UNSAFE_LINK_ICON_BUTTON } from '../new-button/variants/icon/link';
3
5
  export { SplitButton as UNSAFE_SPLIT_BUTTON, SplitButtonContainer as UNSAFE_SPLIT_BUTTON_CONTAINER, Divider as UNSAFE_DIVIDER, getActions as UNSAFE_GET_ACTIONS } from '../new-button/containers/split-button';
4
6
  export { SplitButtonContext as UNSAFE_SPLIT_BUTTON_CONTEXT } from '../new-button/containers/split-button/split-button-context';
@@ -80,6 +80,10 @@ export var SplitButtonContainer = function SplitButtonContainer(_ref2) {
80
80
  }, children);
81
81
  };
82
82
  /**
83
+ * __Split Button__
84
+ *
85
+ * @private __UNSAFE__ SplitButton is not yet safe for production use.
86
+ *
83
87
  * TODO: Add description when adding docs
84
88
  */
85
89
  export var SplitButton = function SplitButton(_ref3) {
@@ -7,7 +7,7 @@ import useDefaultButton from './use-default-button';
7
7
  /**
8
8
  * __Button__
9
9
  *
10
- * @warning __UNSAFE__ Button is not yet safe for production use.
10
+ * @private __UNSAFE__ Button is not yet safe for production use.
11
11
  *
12
12
  * A button triggers an event or action.
13
13
  *
@@ -1,19 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  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"];
4
- import React from 'react';
5
- import { Box } from '@atlaskit/primitives';
4
+ import React, { forwardRef, memo } from 'react';
5
+ import UNSAFE_LINK from '@atlaskit/primitives/link';
6
6
  import useDefaultButton from './use-default-button';
7
- /**
8
- * __Link Button__
9
- *
10
- * A link button renders a link in the style of a button.
11
- *
12
- * - [Examples](https://atlassian.design/components/button/examples)
13
- * - [Code](https://atlassian.design/components/button/code)
14
- * - [Usage](https://atlassian.design/components/button/usage)
15
- */
16
- var LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkButton(_ref, ref) {
7
+ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
17
8
  var analyticsContext = _ref.analyticsContext,
18
9
  autoFocus = _ref.autoFocus,
19
10
  appearance = _ref.appearance,
@@ -65,34 +56,47 @@ var LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
65
56
  shouldFitContainer: shouldFitContainer,
66
57
  spacing: spacing
67
58
  });
68
- return (
69
- /*#__PURE__*/
70
- // TODO: Use Link primitive to allow custom components for routing (with context)
71
- // https://product-fabric.atlassian.net/browse/DSP-12505
72
- React.createElement(Box, _extends({}, rest, {
73
- ref: baseProps.ref,
74
- xcss: baseProps.xcss,
75
- onClick: baseProps.onClick,
76
- onMouseDownCapture: baseProps.onMouseDownCapture,
77
- onMouseUpCapture: baseProps.onMouseUpCapture,
78
- onKeyDownCapture: baseProps.onKeyDownCapture,
79
- onKeyUpCapture: baseProps.onKeyUpCapture,
80
- onTouchStartCapture: baseProps.onTouchStartCapture,
81
- onTouchEndCapture: baseProps.onTouchEndCapture,
82
- onPointerDownCapture: baseProps.onPointerDownCapture,
83
- onPointerUpCapture: baseProps.onPointerUpCapture,
84
- onClickCapture: baseProps.onClickCapture,
85
- as: "a",
86
- testId: testId
87
- /**
88
- * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
89
- * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
90
- */,
91
- href: baseProps.isDisabled ? undefined : href,
92
- role: baseProps.isDisabled ? 'link' : undefined,
93
- "aria-disabled": baseProps.isDisabled === true ? true : undefined
94
- }), baseProps.children)
95
- );
96
- }));
97
- LinkButton.displayName = 'LinkButton';
59
+ return /*#__PURE__*/React.createElement(UNSAFE_LINK
60
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
61
+ , _extends({}, rest, {
62
+ ref: baseProps.ref,
63
+ xcss: baseProps.xcss,
64
+ onClick: baseProps.onClick,
65
+ onMouseDownCapture: baseProps.onMouseDownCapture,
66
+ onMouseUpCapture: baseProps.onMouseUpCapture,
67
+ onKeyDownCapture: baseProps.onKeyDownCapture,
68
+ onKeyUpCapture: baseProps.onKeyUpCapture,
69
+ onTouchStartCapture: baseProps.onTouchStartCapture,
70
+ onTouchEndCapture: baseProps.onTouchEndCapture,
71
+ onPointerDownCapture: baseProps.onPointerDownCapture,
72
+ onPointerUpCapture: baseProps.onPointerUpCapture,
73
+ onClickCapture: baseProps.onClickCapture,
74
+ testId: testId
75
+ /**
76
+ * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
77
+ * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
78
+ */
79
+ // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
80
+ ,
81
+ href: baseProps.isDisabled ? undefined : href,
82
+ role: baseProps.isDisabled ? 'link' : undefined,
83
+ "aria-disabled": baseProps.isDisabled === true ? true : undefined
84
+ }), baseProps.children);
85
+ };
86
+
87
+ // Workarounds to support generic types with forwardRef + memo
88
+ var WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
89
+
90
+ /**
91
+ * __Link Button__
92
+ *
93
+ * @private __UNSAFE__ LinkButton is not yet safe for production use.
94
+ *
95
+ * Renders a link in the style of a button.
96
+ *
97
+ * - [Examples](https://atlassian.design/components/button/examples)
98
+ * - [Code](https://atlassian.design/components/button/code)
99
+ * - [Usage](https://atlassian.design/components/button/usage)
100
+ */
101
+ var LinkButton = /*#__PURE__*/memo(WithRef);
98
102
  export default LinkButton;
@@ -7,6 +7,8 @@ import useIconButton from './use-icon-button';
7
7
  /**
8
8
  * __Icon Button__
9
9
  *
10
+ * @private __UNSAFE__ IconButton is not yet safe for production use.
11
+ *
10
12
  * TODO: Description
11
13
  *
12
14
  * - [Examples](https://atlassian.design/components/button/examples)
@@ -1,19 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "children", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
4
- import React from 'react';
5
- import { Box } from '@atlaskit/primitives';
4
+ import React, { forwardRef, memo } from 'react';
5
+ import UNSAFE_LINK from '@atlaskit/primitives/link';
6
6
  import useIconButton from './use-icon-button';
7
- /**
8
- * __Link Button__
9
- *
10
- * A link button renders a link in the style of a button.
11
- *
12
- * - [Examples](https://atlassian.design/components/button/examples)
13
- * - [Code](https://atlassian.design/components/button/code)
14
- * - [Usage](https://atlassian.design/components/button/usage)
15
- */
16
- var LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkIconButton(_ref, ref) {
7
+ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
17
8
  var analyticsContext = _ref.analyticsContext,
18
9
  autoFocus = _ref.autoFocus,
19
10
  appearance = _ref.appearance,
@@ -61,34 +52,47 @@ var LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(func
61
52
  ref: ref,
62
53
  spacing: spacing
63
54
  });
64
- return (
65
- /*#__PURE__*/
66
- // TODO: Allow custom components for routing (with context)
67
- // https://product-fabric.atlassian.net/browse/DSP-12505
68
- React.createElement(Box, _extends({}, rest, {
69
- ref: baseProps.ref,
70
- xcss: baseProps.xcss,
71
- onClick: baseProps.onClick,
72
- onMouseDownCapture: baseProps.onMouseDownCapture,
73
- onMouseUpCapture: baseProps.onMouseUpCapture,
74
- onKeyDownCapture: baseProps.onKeyDownCapture,
75
- onKeyUpCapture: baseProps.onKeyUpCapture,
76
- onTouchStartCapture: baseProps.onTouchStartCapture,
77
- onTouchEndCapture: baseProps.onTouchEndCapture,
78
- onPointerDownCapture: baseProps.onPointerDownCapture,
79
- onPointerUpCapture: baseProps.onPointerUpCapture,
80
- onClickCapture: baseProps.onClickCapture,
81
- as: "a",
82
- testId: testId
83
- /**
84
- * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
85
- * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
86
- */,
87
- href: baseProps.isDisabled ? undefined : href,
88
- role: baseProps.isDisabled ? 'link' : undefined,
89
- "aria-disabled": baseProps.isDisabled === true ? true : undefined
90
- }), baseProps.children)
91
- );
92
- }));
93
- LinkIconButton.displayName = 'LinkIconButton';
55
+ return /*#__PURE__*/React.createElement(UNSAFE_LINK
56
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
57
+ , _extends({}, rest, {
58
+ ref: baseProps.ref,
59
+ xcss: baseProps.xcss,
60
+ onClick: baseProps.onClick,
61
+ onMouseDownCapture: baseProps.onMouseDownCapture,
62
+ onMouseUpCapture: baseProps.onMouseUpCapture,
63
+ onKeyDownCapture: baseProps.onKeyDownCapture,
64
+ onKeyUpCapture: baseProps.onKeyUpCapture,
65
+ onTouchStartCapture: baseProps.onTouchStartCapture,
66
+ onTouchEndCapture: baseProps.onTouchEndCapture,
67
+ onPointerDownCapture: baseProps.onPointerDownCapture,
68
+ onPointerUpCapture: baseProps.onPointerUpCapture,
69
+ onClickCapture: baseProps.onClickCapture,
70
+ testId: testId
71
+ /**
72
+ * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
73
+ * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
74
+ */
75
+ // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
76
+ ,
77
+ href: baseProps.isDisabled ? undefined : href,
78
+ role: baseProps.isDisabled ? 'link' : undefined,
79
+ "aria-disabled": baseProps.isDisabled === true ? true : undefined
80
+ }), baseProps.children);
81
+ };
82
+
83
+ // Workarounds to support generic types with forwardRef + memo
84
+ var WithRef = /*#__PURE__*/forwardRef(LinkIconButtonBase);
85
+
86
+ /**
87
+ * __Link Icon Button__
88
+ *
89
+ * @private __UNSAFE__ LinkIconButton is not yet safe for production use.
90
+ *
91
+ * Renders a link in the style of an icon button.
92
+ *
93
+ * - [Examples](https://atlassian.design/components/button/examples)
94
+ * - [Code](https://atlassian.design/components/button/code)
95
+ * - [Usage](https://atlassian.design/components/button/usage)
96
+ */
97
+ var LinkIconButton = /*#__PURE__*/memo(WithRef);
94
98
  export default LinkIconButton;
@@ -107,7 +107,7 @@ var useButtonBase = function useButtonBase(_ref) {
107
107
  action: 'clicked',
108
108
  componentName: 'button',
109
109
  packageName: "@atlaskit/button",
110
- packageVersion: "16.11.0",
110
+ packageVersion: "16.13.0",
111
111
  analyticsData: analyticsContext,
112
112
  actionSubject: buttonType
113
113
  });
@@ -109,7 +109,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
109
109
  action: 'clicked',
110
110
  componentName: 'button',
111
111
  packageName: "@atlaskit/button",
112
- packageVersion: "16.11.0",
112
+ packageVersion: "16.13.0",
113
113
  analyticsData: analyticsContext
114
114
  });
115
115
 
@@ -1,14 +1,61 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["href", "children"],
4
+ _excluded2 = ["href", "children", "icon"];
3
5
  import React, { forwardRef } from 'react';
6
+
7
+ // eslint-disable-next-line import/no-extraneous-dependencies
8
+ import AddIcon from '@atlaskit/icon/glyph/add';
4
9
  import Button from '../new-button/variants/default/button';
5
10
  import LinkButton from '../new-button/variants/default/link';
11
+ // import IconButton, {
12
+ // IconButtonProps,
13
+ // } from '../new-button/variants/icon/button';
14
+ import LinkIconButton from '../new-button/variants/icon/link';
6
15
  // Add required default props to variants
7
- var LinkButtonRender = /*#__PURE__*/forwardRef(function (props, ref) {
16
+ var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
17
+ var _ref$href = _ref.href,
18
+ href = _ref$href === void 0 ? 'home' : _ref$href,
19
+ children = _ref.children,
20
+ rest = _objectWithoutProperties(_ref, _excluded);
8
21
  return /*#__PURE__*/React.createElement(LinkButton, _extends({
9
22
  ref: ref,
10
- href: "#"
11
- }, props), props.children);
23
+ href: href
24
+ }, rest), children);
25
+ });
26
+
27
+ // TODO: Enable icon button in tests once it's ready
28
+ // const IconButtonRender = forwardRef(
29
+ // (
30
+ // {
31
+ // children,
32
+ // icon = <AddIcon label="" />,
33
+ // ...rest
34
+ // }: Omit<IconButtonProps, 'icon'> & {
35
+ // icon?: IconButtonProps['icon'];
36
+ // },
37
+ // ref: React.Ref<HTMLButtonElement>,
38
+ // ) => (
39
+ // <IconButton ref={ref} icon={icon} {...rest}>
40
+ // {children}
41
+ // </IconButton>
42
+ // ),
43
+ // );
44
+
45
+ var LinkIconButtonRender = /*#__PURE__*/forwardRef(function (_ref2, ref) {
46
+ var _ref2$href = _ref2.href,
47
+ href = _ref2$href === void 0 ? '/home' : _ref2$href,
48
+ children = _ref2.children,
49
+ _ref2$icon = _ref2.icon,
50
+ icon = _ref2$icon === void 0 ? /*#__PURE__*/React.createElement(AddIcon, {
51
+ label: ""
52
+ }) : _ref2$icon,
53
+ rest = _objectWithoutProperties(_ref2, _excluded2);
54
+ return /*#__PURE__*/React.createElement(LinkIconButton, _extends({
55
+ ref: ref,
56
+ icon: icon,
57
+ href: href
58
+ }, rest), children);
12
59
  });
13
60
  export var variants = [{
14
61
  name: 'Button',
@@ -18,5 +65,27 @@ export var variants = [{
18
65
  name: 'LinkButton',
19
66
  Component: LinkButtonRender,
20
67
  elementType: HTMLAnchorElement
21
- }];
22
- export default variants;
68
+ }
69
+ // TODO: Enable icon buttons in tests once it's ready
70
+ // {
71
+ // name: 'IconButton',
72
+ // Component: IconButtonRender,
73
+ // elementType: HTMLButtonElement,
74
+ // },
75
+ // {
76
+ // name: 'LinkIconButton',
77
+ // Component: LinkIconButtonRender,
78
+ // elementType: HTMLAnchorElement,
79
+ // },
80
+ ];
81
+
82
+ export default variants;
83
+ export var linkButtonVariants = [{
84
+ name: 'LinkButton',
85
+ Component: LinkButtonRender,
86
+ elementType: HTMLAnchorElement
87
+ }, {
88
+ name: 'LinkIconButton',
89
+ Component: LinkIconButtonRender,
90
+ elementType: HTMLAnchorElement
91
+ }];
@@ -1,4 +1,6 @@
1
1
  export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
2
+ export { default as UNSAFE_LINK_BUTTON } from '../new-button/variants/default/link';
2
3
  export { default as UNSAFE_ICON_BUTTON } from '../new-button/variants/icon/button';
4
+ export { default as UNSAFE_LINK_ICON_BUTTON } from '../new-button/variants/icon/link';
3
5
  export { SplitButton as UNSAFE_SPLIT_BUTTON, SplitButtonContainer as UNSAFE_SPLIT_BUTTON_CONTAINER, Divider as UNSAFE_DIVIDER, getActions as UNSAFE_GET_ACTIONS, } from '../new-button/containers/split-button';
4
6
  export { SplitButtonContext as UNSAFE_SPLIT_BUTTON_CONTEXT } from '../new-button/containers/split-button/split-button-context';
@@ -29,6 +29,10 @@ type SplitButtonProps = {
29
29
  isDisabled?: boolean;
30
30
  };
31
31
  /**
32
+ * __Split Button__
33
+ *
34
+ * @private __UNSAFE__ SplitButton is not yet safe for production use.
35
+ *
32
36
  * TODO: Add description when adding docs
33
37
  */
34
38
  export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
@@ -1,13 +1,11 @@
1
1
  import React from 'react';
2
- import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
2
+ import { type CommonButtonVariantProps } from '../types';
3
3
  import { type CommonDefaultButtonProps } from './types';
4
- type Element = HTMLButtonElement;
5
- type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<Element>>;
6
- export type ButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
4
+ export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
7
5
  /**
8
6
  * __Button__
9
7
  *
10
- * @warning __UNSAFE__ Button is not yet safe for production use.
8
+ * @private __UNSAFE__ Button is not yet safe for production use.
11
9
  *
12
10
  * A button triggers an event or action.
13
11
  *
@@ -15,5 +13,5 @@ export type ButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element
15
13
  * - [Code](https://atlassian.design/components/button/code)
16
14
  * - [Usage](https://atlassian.design/components/button/usage)
17
15
  */
18
- declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
16
+ 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>>>;
19
17
  export default Button;