@atlaskit/button 18.4.1 → 19.1.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 +54 -0
- package/dist/cjs/containers/button-group.js +3 -9
- package/dist/cjs/new-button/containers/split-button/split-button.js +3 -3
- package/dist/cjs/new-button/variants/default/button.js +3 -9
- package/dist/cjs/new-button/variants/default/link.js +3 -9
- package/dist/cjs/new-button/variants/default/use-default-button.js +3 -7
- package/dist/cjs/new-button/variants/icon/button.js +16 -20
- package/dist/cjs/new-button/variants/icon/link.js +16 -20
- package/dist/cjs/new-button/variants/icon/use-icon-button.js +2 -4
- package/dist/cjs/new-button/variants/shared/icon-renderer.js +1 -4
- package/dist/cjs/new-button/variants/shared/use-button-base.js +2 -2
- package/dist/cjs/old-button/button.js +3 -1
- package/dist/cjs/old-button/custom-theme-button/custom-theme-button.js +4 -0
- package/dist/cjs/old-button/loading-button.js +3 -1
- package/dist/cjs/old-button/shared/button-base.js +2 -2
- package/dist/cjs/old-button/shared/css.js +3 -3
- package/dist/es2019/containers/button-group.js +2 -8
- package/dist/es2019/new-button/containers/split-button/split-button.js +3 -3
- package/dist/es2019/new-button/variants/default/button.js +2 -8
- package/dist/es2019/new-button/variants/default/link.js +2 -8
- package/dist/es2019/new-button/variants/default/use-default-button.js +3 -7
- package/dist/es2019/new-button/variants/icon/button.js +15 -19
- package/dist/es2019/new-button/variants/icon/link.js +15 -19
- package/dist/es2019/new-button/variants/icon/use-icon-button.js +2 -4
- package/dist/es2019/new-button/variants/shared/icon-renderer.js +1 -4
- package/dist/es2019/new-button/variants/shared/use-button-base.js +2 -2
- package/dist/es2019/old-button/button.js +3 -1
- package/dist/es2019/old-button/custom-theme-button/custom-theme-button.js +4 -0
- package/dist/es2019/old-button/loading-button.js +3 -1
- package/dist/es2019/old-button/shared/button-base.js +2 -2
- package/dist/es2019/old-button/shared/css.js +3 -3
- package/dist/esm/containers/button-group.js +3 -9
- package/dist/esm/new-button/containers/split-button/split-button.js +3 -3
- package/dist/esm/new-button/variants/default/button.js +3 -9
- package/dist/esm/new-button/variants/default/link.js +3 -9
- package/dist/esm/new-button/variants/default/use-default-button.js +3 -7
- package/dist/esm/new-button/variants/icon/button.js +16 -20
- package/dist/esm/new-button/variants/icon/link.js +16 -20
- package/dist/esm/new-button/variants/icon/use-icon-button.js +2 -4
- package/dist/esm/new-button/variants/shared/icon-renderer.js +1 -4
- package/dist/esm/new-button/variants/shared/use-button-base.js +2 -2
- package/dist/esm/old-button/button.js +3 -1
- package/dist/esm/old-button/custom-theme-button/custom-theme-button.js +4 -0
- package/dist/esm/old-button/loading-button.js +3 -1
- package/dist/esm/old-button/shared/button-base.js +2 -2
- package/dist/esm/old-button/shared/css.js +3 -3
- package/dist/types/containers/button-group.d.ts +2 -9
- package/dist/types/new-button/containers/split-button/split-button.d.ts +1 -1
- package/dist/types/new-button/variants/default/link.d.ts +1 -1
- package/dist/types/new-button/variants/default/types.d.ts +1 -15
- package/dist/types/new-button/variants/default/use-default-button.d.ts +1 -1
- package/dist/types/new-button/variants/icon/link.d.ts +1 -1
- package/dist/types/new-button/variants/icon/types.d.ts +1 -8
- package/dist/types/new-button/variants/icon/use-icon-button.d.ts +1 -1
- package/dist/types/new-button/variants/shared/icon-renderer.d.ts +1 -3
- package/dist/types/old-button/button.d.ts +3 -1
- package/dist/types/old-button/custom-theme-button/custom-theme-button.d.ts +4 -0
- package/dist/types/old-button/loading-button.d.ts +3 -1
- package/dist/types/old-button/shared/button-base.d.ts +1 -1
- package/dist/types-ts4.5/containers/button-group.d.ts +2 -9
- package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/default/link.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/default/types.d.ts +1 -15
- package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/icon/types.d.ts +1 -8
- package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/shared/icon-renderer.d.ts +1 -3
- package/dist/types-ts4.5/old-button/button.d.ts +3 -1
- package/dist/types-ts4.5/old-button/custom-theme-button/custom-theme-button.d.ts +4 -0
- package/dist/types-ts4.5/old-button/loading-button.d.ts +3 -1
- package/dist/types-ts4.5/old-button/shared/button-base.d.ts +1 -1
- package/package.json +4 -27
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId"
|
|
3
|
+
var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId"],
|
|
4
4
|
_excluded2 = ["className", "css", "as", "style"];
|
|
5
5
|
import React, { forwardRef, memo } from 'react';
|
|
6
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import Anchor from '@atlaskit/primitives/anchor';
|
|
8
7
|
import useDefaultButton from './use-default-button';
|
|
9
8
|
var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
@@ -32,8 +31,6 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
32
31
|
shouldFitContainer = _ref.shouldFitContainer,
|
|
33
32
|
spacing = _ref.spacing,
|
|
34
33
|
testId = _ref.testId,
|
|
35
|
-
UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
|
|
36
|
-
UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
|
|
37
34
|
unsafeRest = _objectWithoutProperties(_ref, _excluded);
|
|
38
35
|
// @ts-expect-error
|
|
39
36
|
var _className = unsafeRest.className,
|
|
@@ -41,7 +38,6 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
41
38
|
_as = unsafeRest.as,
|
|
42
39
|
_style = unsafeRest.style,
|
|
43
40
|
saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
|
|
44
|
-
var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
|
|
45
41
|
var baseProps = useDefaultButton({
|
|
46
42
|
analyticsContext: analyticsContext,
|
|
47
43
|
appearance: appearance,
|
|
@@ -68,13 +64,11 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
68
64
|
ref: ref,
|
|
69
65
|
shouldFitContainer: shouldFitContainer,
|
|
70
66
|
spacing: spacing,
|
|
71
|
-
testId: testId
|
|
72
|
-
UNSAFE_iconAfter_size: UNSAFE_iconAfter_size,
|
|
73
|
-
UNSAFE_iconBefore_size: UNSAFE_iconBefore_size
|
|
67
|
+
testId: testId
|
|
74
68
|
});
|
|
75
69
|
return /*#__PURE__*/React.createElement(Anchor
|
|
76
70
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
77
|
-
, _extends({},
|
|
71
|
+
, _extends({}, saferRest, {
|
|
78
72
|
"aria-label": baseProps['aria-label'],
|
|
79
73
|
"aria-labelledby": baseProps['aria-labelledby'],
|
|
80
74
|
ref: baseProps.ref,
|
|
@@ -39,9 +39,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
|
|
|
39
39
|
ref = _ref.ref,
|
|
40
40
|
shouldFitContainer = _ref.shouldFitContainer,
|
|
41
41
|
spacing = _ref.spacing,
|
|
42
|
-
testId = _ref.testId
|
|
43
|
-
UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
|
|
44
|
-
UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size;
|
|
42
|
+
testId = _ref.testId;
|
|
45
43
|
var baseProps = useButtonBase({
|
|
46
44
|
analyticsContext: analyticsContext,
|
|
47
45
|
appearance: appearance,
|
|
@@ -54,8 +52,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
|
|
|
54
52
|
position: "before",
|
|
55
53
|
isLoading: isLoading
|
|
56
54
|
}, /*#__PURE__*/React.createElement(IconRenderer, {
|
|
57
|
-
icon: iconBefore
|
|
58
|
-
size: UNSAFE_iconBefore_size
|
|
55
|
+
icon: iconBefore
|
|
59
56
|
})), children && /*#__PURE__*/React.createElement(Content, {
|
|
60
57
|
isLoading: isLoading
|
|
61
58
|
}, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
|
|
@@ -63,8 +60,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
|
|
|
63
60
|
position: "after",
|
|
64
61
|
isLoading: isLoading
|
|
65
62
|
}, /*#__PURE__*/React.createElement(IconRenderer, {
|
|
66
|
-
icon: iconAfter
|
|
67
|
-
size: UNSAFE_iconAfter_size
|
|
63
|
+
icon: iconAfter
|
|
68
64
|
}))),
|
|
69
65
|
interactionName: interactionName,
|
|
70
66
|
isDisabled: isDisabled,
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip", "type"
|
|
3
|
+
var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip", "type"],
|
|
4
4
|
_excluded2 = ["className", "css", "as", "style"];
|
|
5
5
|
import React from 'react';
|
|
6
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import Pressable from '@atlaskit/primitives/pressable';
|
|
8
7
|
import Tooltip from '@atlaskit/tooltip';
|
|
9
8
|
import useIconButton from './use-icon-button';
|
|
@@ -46,7 +45,6 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
|
|
|
46
45
|
tooltip = _ref.tooltip,
|
|
47
46
|
_ref$type = _ref.type,
|
|
48
47
|
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
49
|
-
UNSAFE_size = _ref.UNSAFE_size,
|
|
50
48
|
unsafeRest = _objectWithoutProperties(_ref, _excluded);
|
|
51
49
|
// @ts-expect-error
|
|
52
50
|
var _className = unsafeRest.className,
|
|
@@ -54,7 +52,6 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
|
|
|
54
52
|
_as = unsafeRest.as,
|
|
55
53
|
_style = unsafeRest.style,
|
|
56
54
|
saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
|
|
57
|
-
var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
|
|
58
55
|
|
|
59
56
|
/**
|
|
60
57
|
* TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
|
|
@@ -85,8 +82,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
|
|
|
85
82
|
ref: ref,
|
|
86
83
|
shape: shape,
|
|
87
84
|
spacing: spacing,
|
|
88
|
-
testId: testId
|
|
89
|
-
UNSAFE_size: UNSAFE_size
|
|
85
|
+
testId: testId
|
|
90
86
|
});
|
|
91
87
|
if (!isTooltipDisabled) {
|
|
92
88
|
var _tooltip$content;
|
|
@@ -106,7 +102,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
|
|
|
106
102
|
hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
|
|
107
103
|
hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
|
|
108
104
|
}, function (triggerProps) {
|
|
109
|
-
return /*#__PURE__*/React.createElement(Pressable, _extends({},
|
|
105
|
+
return /*#__PURE__*/React.createElement(Pressable, _extends({}, saferRest, {
|
|
110
106
|
// Top level props
|
|
111
107
|
"aria-labelledby": baseProps['aria-labelledby'],
|
|
112
108
|
type: type,
|
|
@@ -117,34 +113,34 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
|
|
|
117
113
|
// Shared between tooltip and native props
|
|
118
114
|
,
|
|
119
115
|
onMouseOver: function onMouseOver(e) {
|
|
120
|
-
var _triggerProps$onMouse,
|
|
116
|
+
var _triggerProps$onMouse, _saferRest$onMouseOve;
|
|
121
117
|
(_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
|
|
122
|
-
(
|
|
118
|
+
(_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 || _saferRest$onMouseOve.call(saferRest, e);
|
|
123
119
|
},
|
|
124
120
|
onMouseOut: function onMouseOut(e) {
|
|
125
|
-
var _triggerProps$onMouse2,
|
|
121
|
+
var _triggerProps$onMouse2, _saferRest$onMouseOut;
|
|
126
122
|
(_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
|
|
127
|
-
(
|
|
123
|
+
(_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 || _saferRest$onMouseOut.call(saferRest, e);
|
|
128
124
|
},
|
|
129
125
|
onMouseMove: function onMouseMove(e) {
|
|
130
|
-
var _triggerProps$onMouse3,
|
|
126
|
+
var _triggerProps$onMouse3, _saferRest$onMouseMov;
|
|
131
127
|
(_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
|
|
132
|
-
(
|
|
128
|
+
(_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 || _saferRest$onMouseMov.call(saferRest, e);
|
|
133
129
|
},
|
|
134
130
|
onMouseDown: function onMouseDown(e) {
|
|
135
|
-
var _triggerProps$onMouse4,
|
|
131
|
+
var _triggerProps$onMouse4, _saferRest$onMouseDow;
|
|
136
132
|
(_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
|
|
137
|
-
(
|
|
133
|
+
(_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 || _saferRest$onMouseDow.call(saferRest, e);
|
|
138
134
|
},
|
|
139
135
|
onFocus: function onFocus(e) {
|
|
140
|
-
var _triggerProps$onFocus,
|
|
136
|
+
var _triggerProps$onFocus, _saferRest$onFocus;
|
|
141
137
|
(_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
|
|
142
|
-
(
|
|
138
|
+
(_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 || _saferRest$onFocus.call(saferRest, e);
|
|
143
139
|
},
|
|
144
140
|
onBlur: function onBlur(e) {
|
|
145
|
-
var _triggerProps$onBlur,
|
|
141
|
+
var _triggerProps$onBlur, _saferRest$onBlur;
|
|
146
142
|
(_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
|
|
147
|
-
(
|
|
143
|
+
(_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 || _saferRest$onBlur.call(saferRest, e);
|
|
148
144
|
}
|
|
149
145
|
// Shared between tooltip and base props
|
|
150
146
|
,
|
|
@@ -174,7 +170,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
|
|
|
174
170
|
}), baseProps.children);
|
|
175
171
|
});
|
|
176
172
|
}
|
|
177
|
-
return /*#__PURE__*/React.createElement(Pressable, _extends({},
|
|
173
|
+
return /*#__PURE__*/React.createElement(Pressable, _extends({}, saferRest, {
|
|
178
174
|
"aria-labelledby": baseProps['aria-labelledby'],
|
|
179
175
|
ref: baseProps.ref,
|
|
180
176
|
xcss: baseProps.xcss,
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip"
|
|
3
|
+
var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip"],
|
|
4
4
|
_excluded2 = ["className", "css", "as", "style"];
|
|
5
5
|
import React, { forwardRef, memo } from 'react';
|
|
6
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import Anchor from '@atlaskit/primitives/anchor';
|
|
8
7
|
import Tooltip from '@atlaskit/tooltip';
|
|
9
8
|
import useIconButton from './use-icon-button';
|
|
@@ -35,7 +34,6 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
35
34
|
spacing = _ref.spacing,
|
|
36
35
|
testId = _ref.testId,
|
|
37
36
|
tooltip = _ref.tooltip,
|
|
38
|
-
UNSAFE_size = _ref.UNSAFE_size,
|
|
39
37
|
unsafeRest = _objectWithoutProperties(_ref, _excluded);
|
|
40
38
|
// @ts-expect-error
|
|
41
39
|
var _className = unsafeRest.className,
|
|
@@ -43,7 +41,6 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
43
41
|
_as = unsafeRest.as,
|
|
44
42
|
_style = unsafeRest.style,
|
|
45
43
|
saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
|
|
46
|
-
var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
|
|
47
44
|
var baseProps = useIconButton({
|
|
48
45
|
analyticsContext: analyticsContext,
|
|
49
46
|
appearance: appearance,
|
|
@@ -68,8 +65,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
68
65
|
ref: ref,
|
|
69
66
|
shape: shape,
|
|
70
67
|
spacing: spacing,
|
|
71
|
-
testId: testId
|
|
72
|
-
UNSAFE_size: UNSAFE_size
|
|
68
|
+
testId: testId
|
|
73
69
|
});
|
|
74
70
|
if (!isTooltipDisabled) {
|
|
75
71
|
var _tooltip$content;
|
|
@@ -91,7 +87,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
91
87
|
}, function (triggerProps) {
|
|
92
88
|
return /*#__PURE__*/React.createElement(Anchor
|
|
93
89
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
94
|
-
, _extends({},
|
|
90
|
+
, _extends({}, saferRest, {
|
|
95
91
|
"aria-labelledby": baseProps['aria-labelledby'],
|
|
96
92
|
testId: testId,
|
|
97
93
|
componentName: "LinkIconButton",
|
|
@@ -100,34 +96,34 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
100
96
|
// Shared between tooltip and native props
|
|
101
97
|
,
|
|
102
98
|
onMouseOver: function onMouseOver(e) {
|
|
103
|
-
var _triggerProps$onMouse,
|
|
99
|
+
var _triggerProps$onMouse, _saferRest$onMouseOve;
|
|
104
100
|
(_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
|
|
105
|
-
(
|
|
101
|
+
(_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 || _saferRest$onMouseOve.call(saferRest, e);
|
|
106
102
|
},
|
|
107
103
|
onMouseOut: function onMouseOut(e) {
|
|
108
|
-
var _triggerProps$onMouse2,
|
|
104
|
+
var _triggerProps$onMouse2, _saferRest$onMouseOut;
|
|
109
105
|
(_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
|
|
110
|
-
(
|
|
106
|
+
(_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 || _saferRest$onMouseOut.call(saferRest, e);
|
|
111
107
|
},
|
|
112
108
|
onMouseMove: function onMouseMove(e) {
|
|
113
|
-
var _triggerProps$onMouse3,
|
|
109
|
+
var _triggerProps$onMouse3, _saferRest$onMouseMov;
|
|
114
110
|
(_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
|
|
115
|
-
(
|
|
111
|
+
(_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 || _saferRest$onMouseMov.call(saferRest, e);
|
|
116
112
|
},
|
|
117
113
|
onMouseDown: function onMouseDown(e) {
|
|
118
|
-
var _triggerProps$onMouse4,
|
|
114
|
+
var _triggerProps$onMouse4, _saferRest$onMouseDow;
|
|
119
115
|
(_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
|
|
120
|
-
(
|
|
116
|
+
(_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 || _saferRest$onMouseDow.call(saferRest, e);
|
|
121
117
|
},
|
|
122
118
|
onFocus: function onFocus(e) {
|
|
123
|
-
var _triggerProps$onFocus,
|
|
119
|
+
var _triggerProps$onFocus, _saferRest$onFocus;
|
|
124
120
|
(_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
|
|
125
|
-
(
|
|
121
|
+
(_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 || _saferRest$onFocus.call(saferRest, e);
|
|
126
122
|
},
|
|
127
123
|
onBlur: function onBlur(e) {
|
|
128
|
-
var _triggerProps$onBlur,
|
|
124
|
+
var _triggerProps$onBlur, _saferRest$onBlur;
|
|
129
125
|
(_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
|
|
130
|
-
(
|
|
126
|
+
(_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 || _saferRest$onBlur.call(saferRest, e);
|
|
131
127
|
}
|
|
132
128
|
// Shared between tooltip and base props
|
|
133
129
|
,
|
|
@@ -167,7 +163,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
167
163
|
}
|
|
168
164
|
return /*#__PURE__*/React.createElement(Anchor
|
|
169
165
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
170
|
-
, _extends({},
|
|
166
|
+
, _extends({}, saferRest, {
|
|
171
167
|
"aria-labelledby": baseProps['aria-labelledby'],
|
|
172
168
|
ref: baseProps.ref,
|
|
173
169
|
xcss: baseProps.xcss,
|
|
@@ -40,8 +40,7 @@ var useIconButton = function useIconButton(_ref) {
|
|
|
40
40
|
shape = _ref.shape,
|
|
41
41
|
shouldFitContainer = _ref.shouldFitContainer,
|
|
42
42
|
spacing = _ref.spacing,
|
|
43
|
-
testId = _ref.testId
|
|
44
|
-
UNSAFE_size = _ref.UNSAFE_size;
|
|
43
|
+
testId = _ref.testId;
|
|
45
44
|
var isCircle = shape === 'circle';
|
|
46
45
|
var baseProps = useButtonBase({
|
|
47
46
|
analyticsContext: analyticsContext,
|
|
@@ -54,8 +53,7 @@ var useIconButton = function useIconButton(_ref) {
|
|
|
54
53
|
type: "icon",
|
|
55
54
|
isLoading: isLoading
|
|
56
55
|
}, /*#__PURE__*/React.createElement(IconRenderer, {
|
|
57
|
-
icon: icon
|
|
58
|
-
size: UNSAFE_size
|
|
56
|
+
icon: icon
|
|
59
57
|
}), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
|
|
60
58
|
interactionName: interactionName,
|
|
61
59
|
isDisabled: isDisabled,
|
|
@@ -15,15 +15,12 @@ function isIconRenderProp(func) {
|
|
|
15
15
|
*
|
|
16
16
|
*/
|
|
17
17
|
var IconRenderer = function IconRenderer(_ref) {
|
|
18
|
-
var Icon = _ref.icon
|
|
19
|
-
size = _ref.size;
|
|
18
|
+
var Icon = _ref.icon;
|
|
20
19
|
return /*#__PURE__*/React.createElement(React.Fragment, null, isIconRenderProp(Icon) ? Icon({
|
|
21
20
|
label: '',
|
|
22
|
-
size: size,
|
|
23
21
|
color: 'currentColor'
|
|
24
22
|
}) : /*#__PURE__*/React.createElement(Icon, {
|
|
25
23
|
label: "",
|
|
26
|
-
size: size,
|
|
27
24
|
color: 'currentColor'
|
|
28
25
|
}));
|
|
29
26
|
};
|
|
@@ -549,7 +549,7 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
549
549
|
var isSplitButton = Boolean(splitButtonContext);
|
|
550
550
|
var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
|
|
551
551
|
var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
|
|
552
|
-
var appearance = isDefaultAppearanceSplitButton && fg('platform
|
|
552
|
+
var appearance = isDefaultAppearanceSplitButton && fg('platform-component-visual-refresh') ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
|
|
553
553
|
var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
|
|
554
554
|
var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
|
|
555
555
|
var isInteractive = !isDisabled && !isLoading;
|
|
@@ -559,7 +559,7 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
559
559
|
useAutoFocus(localRef, autoFocus);
|
|
560
560
|
return _objectSpread({
|
|
561
561
|
ref: mergeRefs([localRef, ref]),
|
|
562
|
-
xcss: [fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (fg('platform
|
|
562
|
+
xcss: [fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
|
|
563
563
|
// TODO: remove me once we kill color fallbacks
|
|
564
564
|
isSelected && appearance === 'danger' && selectedDangerStyles,
|
|
565
565
|
// TODO: remove me once we kill color fallbacks
|
|
@@ -15,7 +15,9 @@ var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerC
|
|
|
15
15
|
/**
|
|
16
16
|
* __Button__
|
|
17
17
|
*
|
|
18
|
-
*
|
|
18
|
+
* @deprecated Legacy buttons are deprecated and will be removed from `atlaskit/button` in an upcoming major release. Please use the new Button components from `@atlaskit/button/new`
|
|
19
|
+
*
|
|
20
|
+
* Please refer to the [migration guide](https://atlassian.design/components/button/button-legacy/migration-guide) for further details.
|
|
19
21
|
*
|
|
20
22
|
* A button triggers an event or action. They let users know what will happen next.
|
|
21
23
|
*
|
|
@@ -57,6 +57,10 @@ var initial = {
|
|
|
57
57
|
/**
|
|
58
58
|
* __Custom theme button__
|
|
59
59
|
*
|
|
60
|
+
* @deprecated Legacy buttons are deprecated and will be removed from `atlaskit/button` in an upcoming major release. Please use the new Button components from `@atlaskit/button/new`
|
|
61
|
+
*
|
|
62
|
+
* Please refer to the [migration guide](https://atlassian.design/components/button/button-legacy/migration-guide) for further details.
|
|
63
|
+
*
|
|
60
64
|
* A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
|
|
61
65
|
*
|
|
62
66
|
* - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
|
|
@@ -7,7 +7,9 @@ import LoadingSpinner from './shared/loading-spinner';
|
|
|
7
7
|
/**
|
|
8
8
|
* __Loading button__
|
|
9
9
|
*
|
|
10
|
-
*
|
|
10
|
+
* @deprecated Legacy loading buttons are deprecated and will be removed from `atlaskit/button` in an upcoming major release. Please use the new Button components from `@atlaskit/button/new` with the `isLoading` prop.
|
|
11
|
+
*
|
|
12
|
+
* Please refer to the [migration guide](https://atlassian.design/components/button/button-legacy/migration-guide) for further details.
|
|
11
13
|
*
|
|
12
14
|
* A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
|
|
13
15
|
*
|
|
@@ -4,8 +4,8 @@ var _excluded = ["analyticsContext", "appearance", "autoFocus", "buttonCss", "ch
|
|
|
4
4
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
5
5
|
/**
|
|
6
6
|
* @jsxRuntime classic
|
|
7
|
+
* @jsx jsx
|
|
7
8
|
*/
|
|
8
|
-
/** @jsx jsx */
|
|
9
9
|
import React, { useCallback, useContext, useEffect, useRef } from 'react';
|
|
10
10
|
|
|
11
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
|
|
|
125
125
|
action: 'clicked',
|
|
126
126
|
componentName: 'button',
|
|
127
127
|
packageName: "@atlaskit/button",
|
|
128
|
-
packageVersion: "
|
|
128
|
+
packageVersion: "19.1.0",
|
|
129
129
|
analyticsData: analyticsContext
|
|
130
130
|
});
|
|
131
131
|
|
|
@@ -214,7 +214,7 @@ export function getCss(_ref3) {
|
|
|
214
214
|
textDecoration: 'none',
|
|
215
215
|
transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
|
|
216
216
|
whiteSpace: 'nowrap'
|
|
217
|
-
}, !fg('platform
|
|
217
|
+
}, !fg('platform-component-visual-refresh') && baseColors), {}, {
|
|
218
218
|
cursor: 'pointer',
|
|
219
219
|
height: heights[spacing],
|
|
220
220
|
lineHeight: lineHeights[spacing],
|
|
@@ -223,7 +223,7 @@ export function getCss(_ref3) {
|
|
|
223
223
|
width: shouldFitContainer ? '100%' : 'auto',
|
|
224
224
|
// justifyContent required for shouldFitContainer buttons with an icon inside
|
|
225
225
|
justifyContent: 'center'
|
|
226
|
-
}, !fg('platform
|
|
226
|
+
}, !fg('platform-component-visual-refresh') && _objectSpread(_objectSpread({
|
|
227
227
|
// Disabling visited styles (just using the base colors)
|
|
228
228
|
'&:visited': _objectSpread({}, baseColors),
|
|
229
229
|
'&:hover': _objectSpread(_objectSpread({}, getColors({
|
|
@@ -272,7 +272,7 @@ export function getCss(_ref3) {
|
|
|
272
272
|
key: isSelected ? 'selected' : 'default',
|
|
273
273
|
mode: mode
|
|
274
274
|
}))
|
|
275
|
-
})), fg('platform
|
|
275
|
+
})), fg('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
|
|
276
276
|
'&[disabled]': {
|
|
277
277
|
color: "var(--ds-text-disabled, #091E424F)",
|
|
278
278
|
backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
|
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
3
4
|
*/
|
|
4
|
-
/** @jsx jsx */
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
|
-
import { type Appearance } from '../old-button/types';
|
|
8
7
|
export type ButtonGroupProps = {
|
|
9
|
-
/**
|
|
10
|
-
* The appearance to apply to all buttons.
|
|
11
|
-
*
|
|
12
|
-
* @deprecated This prop is deprecated and will be removed in an upcoming major version. Apply the `appearance` prop on each button instead.
|
|
13
|
-
*/
|
|
14
|
-
appearance?: Appearance;
|
|
15
8
|
/**
|
|
16
9
|
* The buttons to render inside the button group.
|
|
17
10
|
*/
|
|
@@ -31,4 +24,4 @@ export type ButtonGroupProps = {
|
|
|
31
24
|
*/
|
|
32
25
|
titleId?: string;
|
|
33
26
|
};
|
|
34
|
-
export default function ButtonGroup({
|
|
27
|
+
export default function ButtonGroup({ children, testId, label, titleId }: ButtonGroupProps): jsx.JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
3
4
|
*/
|
|
4
|
-
/** @jsx jsx */
|
|
5
5
|
import { type ReactNode } from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
7
|
import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonProps, SplitButtonSpacing } from './types';
|
|
@@ -2,7 +2,7 @@ import { type Ref } from 'react';
|
|
|
2
2
|
import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
|
|
3
3
|
import { type CommonDefaultButtonProps } from './types';
|
|
4
4
|
export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
|
|
5
|
-
declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId,
|
|
5
|
+
declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
|
|
6
6
|
/**
|
|
7
7
|
* __Link Button__
|
|
8
8
|
*
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { type ButtonSpacing, type IconProp
|
|
2
|
+
import { type ButtonSpacing, type IconProp } from '../types';
|
|
3
3
|
export type CommonDefaultButtonProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Text content to be rendered in the button.
|
|
@@ -9,24 +9,10 @@ export type CommonDefaultButtonProps = {
|
|
|
9
9
|
* Places an icon within the button, after the button's text.
|
|
10
10
|
*/
|
|
11
11
|
iconAfter?: IconProp;
|
|
12
|
-
/**
|
|
13
|
-
* @deprecated Prefer `iconAfter` render prop for icon customizations.
|
|
14
|
-
*
|
|
15
|
-
* Set the size of the icon after. `medium` is default, so it does not need to be specified.
|
|
16
|
-
* This is UNSAFE as it will be removed in future in favor of a 100% bounded API
|
|
17
|
-
*/
|
|
18
|
-
UNSAFE_iconAfter_size?: IconSize;
|
|
19
12
|
/**
|
|
20
13
|
* Places an icon within the button, before the button's text.
|
|
21
14
|
*/
|
|
22
15
|
iconBefore?: IconProp;
|
|
23
|
-
/**
|
|
24
|
-
* @deprecated Prefer `iconBefore` render prop for icon customizations.
|
|
25
|
-
*
|
|
26
|
-
* Set the size of the icon before. `medium` is default, so it does not need to be specified.
|
|
27
|
-
* This is UNSAFE as it will be removed in future in favor of a 100% bounded API
|
|
28
|
-
*/
|
|
29
|
-
UNSAFE_iconBefore_size?: IconSize;
|
|
30
16
|
/**
|
|
31
17
|
* Option to fit button width to its parent width.
|
|
32
18
|
*/
|
|
@@ -12,5 +12,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
|
|
|
12
12
|
*
|
|
13
13
|
* @private
|
|
14
14
|
*/
|
|
15
|
-
declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shouldFitContainer, spacing, testId,
|
|
15
|
+
declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shouldFitContainer, spacing, testId, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
|
|
16
16
|
export default useDefaultButton;
|
|
@@ -2,7 +2,7 @@ import { type Ref } from 'react';
|
|
|
2
2
|
import { type CommonLinkVariantProps } from '../types';
|
|
3
3
|
import { type CommonIconButtonProps } from './types';
|
|
4
4
|
export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
|
|
5
|
-
declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip,
|
|
5
|
+
declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
|
|
6
6
|
/**
|
|
7
7
|
* __Link Icon Button__
|
|
8
8
|
*
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { type TooltipProps } from '@atlaskit/tooltip';
|
|
3
|
-
import { type IconButtonAppearance, type IconButtonSpacing, type IconProp
|
|
3
|
+
import { type IconButtonAppearance, type IconButtonSpacing, type IconProp } from '../types';
|
|
4
4
|
export type CommonIconButtonProps = {
|
|
5
5
|
'aria-label'?: never;
|
|
6
6
|
/**
|
|
@@ -31,11 +31,4 @@ export type CommonIconButtonProps = {
|
|
|
31
31
|
* Props passed down to the Tooltip component.
|
|
32
32
|
*/
|
|
33
33
|
tooltip?: Partial<Omit<TooltipProps, 'children'>>;
|
|
34
|
-
/**
|
|
35
|
-
* @deprecated Prefer `icon` render prop for icon customizations.
|
|
36
|
-
*
|
|
37
|
-
* Set the size of the icon. `medium` is default, so it does not need to be specified.
|
|
38
|
-
* This is UNSAFE as it will be removed in future in favor of a 100% bounded API.
|
|
39
|
-
*/
|
|
40
|
-
UNSAFE_size?: IconSize;
|
|
41
34
|
};
|
|
@@ -12,5 +12,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
|
|
|
12
12
|
*
|
|
13
13
|
* @private
|
|
14
14
|
*/
|
|
15
|
-
declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shape, shouldFitContainer, spacing, testId,
|
|
15
|
+
declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shape, shouldFitContainer, spacing, testId, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
|
|
16
16
|
export default useIconButton;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { type IconProps, type UNSAFE_NewIconProps } from '@atlaskit/icon/types';
|
|
3
2
|
import { type IconProp } from '../types';
|
|
4
3
|
/**
|
|
5
4
|
* __Icon renderer__
|
|
@@ -7,8 +6,7 @@ import { type IconProp } from '../types';
|
|
|
7
6
|
* Used to support render props with icons.
|
|
8
7
|
*
|
|
9
8
|
*/
|
|
10
|
-
declare const IconRenderer: ({ icon: Icon
|
|
9
|
+
declare const IconRenderer: ({ icon: Icon }: {
|
|
11
10
|
icon: IconProp;
|
|
12
|
-
size: IconProps['size'] | UNSAFE_NewIconProps['LEGACY_size'];
|
|
13
11
|
}) => JSX.Element;
|
|
14
12
|
export default IconRenderer;
|
|
@@ -5,7 +5,9 @@ export interface ButtonProps extends BaseProps {
|
|
|
5
5
|
/**
|
|
6
6
|
* __Button__
|
|
7
7
|
*
|
|
8
|
-
*
|
|
8
|
+
* @deprecated Legacy buttons are deprecated and will be removed from `atlaskit/button` in an upcoming major release. Please use the new Button components from `@atlaskit/button/new`
|
|
9
|
+
*
|
|
10
|
+
* Please refer to the [migration guide](https://atlassian.design/components/button/button-legacy/migration-guide) for further details.
|
|
9
11
|
*
|
|
10
12
|
* A button triggers an event or action. They let users know what will happen next.
|
|
11
13
|
*
|
|
@@ -2,6 +2,10 @@ import React from 'react';
|
|
|
2
2
|
/**
|
|
3
3
|
* __Custom theme button__
|
|
4
4
|
*
|
|
5
|
+
* @deprecated Legacy buttons are deprecated and will be removed from `atlaskit/button` in an upcoming major release. Please use the new Button components from `@atlaskit/button/new`
|
|
6
|
+
*
|
|
7
|
+
* Please refer to the [migration guide](https://atlassian.design/components/button/button-legacy/migration-guide) for further details.
|
|
8
|
+
*
|
|
5
9
|
* A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
|
|
6
10
|
*
|
|
7
11
|
* - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
|
|
@@ -7,7 +7,9 @@ export type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnPr
|
|
|
7
7
|
/**
|
|
8
8
|
* __Loading button__
|
|
9
9
|
*
|
|
10
|
-
*
|
|
10
|
+
* @deprecated Legacy loading buttons are deprecated and will be removed from `atlaskit/button` in an upcoming major release. Please use the new Button components from `@atlaskit/button/new` with the `isLoading` prop.
|
|
11
|
+
*
|
|
12
|
+
* Please refer to the [migration guide](https://atlassian.design/components/button/button-legacy/migration-guide) for further details.
|
|
11
13
|
*
|
|
12
14
|
* A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
|
|
13
15
|
*
|