@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.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/entry-points/unsafe.js +14 -0
- package/dist/cjs/new-button/containers/split-button/split-button.js +4 -0
- package/dist/cjs/new-button/variants/default/button.js +1 -1
- package/dist/cjs/new-button/variants/default/link.js +49 -42
- package/dist/cjs/new-button/variants/icon/button.js +2 -0
- package/dist/cjs/new-button/variants/icon/link.js +49 -42
- package/dist/cjs/new-button/variants/shared/use-button-base.js +1 -1
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/cjs/utils/variants.js +73 -8
- package/dist/es2019/entry-points/unsafe.js +2 -0
- package/dist/es2019/new-button/containers/split-button/split-button.js +4 -0
- package/dist/es2019/new-button/variants/default/button.js +1 -2
- package/dist/es2019/new-button/variants/default/link.js +47 -44
- package/dist/es2019/new-button/variants/icon/button.js +2 -1
- package/dist/es2019/new-button/variants/icon/link.js +47 -44
- package/dist/es2019/new-button/variants/shared/use-button-base.js +1 -1
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/es2019/utils/variants.js +69 -6
- package/dist/esm/entry-points/unsafe.js +2 -0
- package/dist/esm/new-button/containers/split-button/split-button.js +4 -0
- package/dist/esm/new-button/variants/default/button.js +1 -1
- package/dist/esm/new-button/variants/default/link.js +46 -42
- package/dist/esm/new-button/variants/icon/button.js +2 -0
- package/dist/esm/new-button/variants/icon/link.js +46 -42
- package/dist/esm/new-button/variants/shared/use-button-base.js +1 -1
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/esm/utils/variants.js +75 -6
- package/dist/types/entry-points/unsafe.d.ts +2 -0
- package/dist/types/new-button/containers/split-button/split-button.d.ts +4 -0
- package/dist/types/new-button/variants/default/button.d.ts +4 -6
- package/dist/types/new-button/variants/default/link.d.ts +12 -7
- package/dist/types/new-button/variants/icon/button.d.ts +5 -5
- package/dist/types/new-button/variants/icon/link.d.ts +13 -8
- package/dist/types/new-button/variants/types.d.ts +11 -1
- package/dist/types/utils/variants.d.ts +25 -3
- package/dist/types-ts4.5/entry-points/unsafe.d.ts +2 -0
- package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +4 -0
- package/dist/types-ts4.5/new-button/variants/default/button.d.ts +4 -6
- package/dist/types-ts4.5/new-button/variants/default/link.d.ts +12 -7
- package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +5 -5
- package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +13 -8
- package/dist/types-ts4.5/new-button/variants/types.d.ts +11 -1
- package/dist/types-ts4.5/utils/variants.d.ts +25 -3
- 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
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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;
|
|
@@ -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.
|
|
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((
|
|
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
|
-
},
|
|
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
|
-
|
|
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
|
-
* @
|
|
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
|
|
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
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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;
|
|
@@ -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
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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 (
|
|
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
|
-
},
|
|
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
|
-
|
|
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
|
|
2
|
+
import { type CommonButtonVariantProps } from '../types';
|
|
3
3
|
import { type CommonDefaultButtonProps } from './types';
|
|
4
|
-
type
|
|
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
|
-
* @
|
|
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<
|
|
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;
|