@atlaskit/button 17.10.0 → 17.11.1

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 (19) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/new-button/variants/icon/button.js +105 -15
  3. package/dist/cjs/new-button/variants/icon/link.js +111 -14
  4. package/dist/cjs/old-button/shared/button-base.js +1 -1
  5. package/dist/es2019/new-button/variants/icon/button.js +101 -14
  6. package/dist/es2019/new-button/variants/icon/link.js +107 -13
  7. package/dist/es2019/old-button/shared/button-base.js +1 -1
  8. package/dist/esm/new-button/variants/icon/button.js +105 -15
  9. package/dist/esm/new-button/variants/icon/link.js +111 -14
  10. package/dist/esm/old-button/shared/button-base.js +1 -1
  11. package/dist/types/new-button/variants/icon/link.d.ts +1 -1
  12. package/dist/types/new-button/variants/icon/types.d.ts +16 -2
  13. package/dist/types/new-button/variants/icon/use-icon-button.d.ts +1 -1
  14. package/dist/types/utils/variants.d.ts +2 -2
  15. package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +1 -1
  16. package/dist/types-ts4.5/new-button/variants/icon/types.d.ts +16 -2
  17. package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +1 -1
  18. package/dist/types-ts4.5/utils/variants.d.ts +2 -2
  19. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 17.11.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#85696](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85696) [`3f4e688ce636`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f4e688ce636) - Tooltips are now included within icon buttons. They are disabled by default. To enable set `isTooltipDisabled` to false.
8
+
3
9
  ## 17.10.0
4
10
 
5
11
  ### Minor Changes
package/dist/cjs/new-button/variants/icon/button.js CHANGED
@@ -9,8 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
  var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
12
+ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
12
13
  var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
13
- var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "isLoading", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size", "aria-label"];
14
+ var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
14
15
  /**
15
16
  * __Icon Button__
16
17
  *
@@ -21,33 +22,36 @@ var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance
21
22
  * - [Usage](https://atlassian.design/components/button/usage)
22
23
  */
23
24
  var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
24
- var analyticsContext = _ref.analyticsContext,
25
- interactionName = _ref.interactionName,
26
- autoFocus = _ref.autoFocus,
25
+ var preventedAriaLabel = _ref['aria-label'],
26
+ analyticsContext = _ref.analyticsContext,
27
27
  appearance = _ref.appearance,
28
- spacing = _ref.spacing,
28
+ autoFocus = _ref.autoFocus,
29
+ icon = _ref.icon,
30
+ interactionName = _ref.interactionName,
29
31
  isDisabled = _ref.isDisabled,
30
- isSelected = _ref.isSelected,
31
32
  isLoading = _ref.isLoading,
32
- icon = _ref.icon,
33
+ isSelected = _ref.isSelected,
34
+ _ref$isTooltipDisable = _ref.isTooltipDisabled,
35
+ isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
33
36
  label = _ref.label,
34
- overlay = _ref.overlay,
35
37
  onClick = _ref.onClick,
36
- onMouseDownCapture = _ref.onMouseDownCapture,
37
- onMouseUpCapture = _ref.onMouseUpCapture,
38
+ onClickCapture = _ref.onClickCapture,
38
39
  onKeyDownCapture = _ref.onKeyDownCapture,
39
40
  onKeyUpCapture = _ref.onKeyUpCapture,
40
- onTouchStartCapture = _ref.onTouchStartCapture,
41
- onTouchEndCapture = _ref.onTouchEndCapture,
41
+ onMouseDownCapture = _ref.onMouseDownCapture,
42
+ onMouseUpCapture = _ref.onMouseUpCapture,
42
43
  onPointerDownCapture = _ref.onPointerDownCapture,
43
44
  onPointerUpCapture = _ref.onPointerUpCapture,
44
- onClickCapture = _ref.onClickCapture,
45
+ onTouchEndCapture = _ref.onTouchEndCapture,
46
+ onTouchStartCapture = _ref.onTouchStartCapture,
47
+ overlay = _ref.overlay,
45
48
  shape = _ref.shape,
49
+ spacing = _ref.spacing,
50
+ testId = _ref.testId,
51
+ tooltip = _ref.tooltip,
46
52
  _ref$type = _ref.type,
47
53
  type = _ref$type === void 0 ? 'button' : _ref$type,
48
- testId = _ref.testId,
49
54
  UNSAFE_size = _ref.UNSAFE_size,
50
- preventedAriaLabel = _ref['aria-label'],
51
55
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
52
56
  /**
53
57
  * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
@@ -80,6 +84,92 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
80
84
  spacing: spacing,
81
85
  UNSAFE_size: UNSAFE_size
82
86
  });
87
+ if (!isTooltipDisabled) {
88
+ var _tooltip$content;
89
+ return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
90
+ content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
91
+ testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
92
+ position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
93
+ delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
94
+ onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
95
+ onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
96
+ mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
97
+ analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
98
+ strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
99
+ tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
100
+ truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
101
+ component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
102
+ hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
103
+ hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
104
+ }, function (triggerProps) {
105
+ return /*#__PURE__*/_react.default.createElement(_pressable.default
106
+ // Top level props
107
+ , (0, _extends2.default)({}, rest, {
108
+ type: type,
109
+ testId: testId,
110
+ componentName: "IconButton",
111
+ analyticsContext: analyticsContext,
112
+ interactionName: interactionName
113
+ // Shared between tooltip and native props
114
+ ,
115
+ onMouseOver: function onMouseOver(e) {
116
+ var _triggerProps$onMouse, _rest$onMouseOver;
117
+ (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
118
+ (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 || _rest$onMouseOver.call(rest, e);
119
+ },
120
+ onMouseOut: function onMouseOut(e) {
121
+ var _triggerProps$onMouse2, _rest$onMouseOut;
122
+ (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
123
+ (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 || _rest$onMouseOut.call(rest, e);
124
+ },
125
+ onMouseMove: function onMouseMove(e) {
126
+ var _triggerProps$onMouse3, _rest$onMouseMove;
127
+ (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
128
+ (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 || _rest$onMouseMove.call(rest, e);
129
+ },
130
+ onMouseDown: function onMouseDown(e) {
131
+ var _triggerProps$onMouse4, _rest$onMouseDown;
132
+ (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
133
+ (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 || _rest$onMouseDown.call(rest, e);
134
+ },
135
+ onFocus: function onFocus(e) {
136
+ var _triggerProps$onFocus, _rest$onFocus;
137
+ (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
138
+ (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 || _rest$onFocus.call(rest, e);
139
+ },
140
+ onBlur: function onBlur(e) {
141
+ var _triggerProps$onBlur, _rest$onBlur;
142
+ (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
143
+ (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 || _rest$onBlur.call(rest, e);
144
+ }
145
+ // Shared between tooltip and base props
146
+ ,
147
+ onClick: function onClick(event, analyticsEvent) {
148
+ var _baseProps$onClick, _triggerProps$onClick;
149
+ baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
150
+ triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
151
+ },
152
+ ref: function ref(_ref2) {
153
+ var _triggerProps$ref;
154
+ baseProps.ref(_ref2);
155
+ triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
156
+ }
157
+ // Base props only
158
+ ,
159
+ xcss: baseProps.xcss,
160
+ isDisabled: baseProps.isDisabled,
161
+ onMouseDownCapture: baseProps.onMouseDownCapture,
162
+ onMouseUpCapture: baseProps.onMouseUpCapture,
163
+ onKeyDownCapture: baseProps.onKeyDownCapture,
164
+ onKeyUpCapture: baseProps.onKeyUpCapture,
165
+ onTouchStartCapture: baseProps.onTouchStartCapture,
166
+ onTouchEndCapture: baseProps.onTouchEndCapture,
167
+ onPointerDownCapture: baseProps.onPointerDownCapture,
168
+ onPointerUpCapture: baseProps.onPointerUpCapture,
169
+ onClickCapture: baseProps.onClickCapture
170
+ }), baseProps.children);
171
+ });
172
+ }
83
173
  return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, rest, {
84
174
  ref: baseProps.ref,
85
175
  xcss: baseProps.xcss,
package/dist/cjs/new-button/variants/icon/link.js CHANGED
@@ -10,36 +10,40 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
13
+ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
13
14
  var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
14
- var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "testId", "UNSAFE_size", "href", "aria-label"];
15
+ var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
15
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
18
  var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
18
- var analyticsContext = _ref.analyticsContext,
19
- interactionName = _ref.interactionName,
20
- autoFocus = _ref.autoFocus,
19
+ var preventedAriaLabel = _ref['aria-label'],
20
+ analyticsContext = _ref.analyticsContext,
21
21
  appearance = _ref.appearance,
22
- spacing = _ref.spacing,
22
+ autoFocus = _ref.autoFocus,
23
+ href = _ref.href,
24
+ icon = _ref.icon,
25
+ interactionName = _ref.interactionName,
23
26
  isDisabled = _ref.isDisabled,
24
27
  isSelected = _ref.isSelected,
25
- icon = _ref.icon,
28
+ _ref$isTooltipDisable = _ref.isTooltipDisabled,
29
+ isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
26
30
  label = _ref.label,
27
- overlay = _ref.overlay,
28
31
  onClick = _ref.onClick,
29
- onMouseDownCapture = _ref.onMouseDownCapture,
30
- onMouseUpCapture = _ref.onMouseUpCapture,
32
+ onClickCapture = _ref.onClickCapture,
31
33
  onKeyDownCapture = _ref.onKeyDownCapture,
32
34
  onKeyUpCapture = _ref.onKeyUpCapture,
33
- onTouchStartCapture = _ref.onTouchStartCapture,
34
- onTouchEndCapture = _ref.onTouchEndCapture,
35
+ onMouseDownCapture = _ref.onMouseDownCapture,
36
+ onMouseUpCapture = _ref.onMouseUpCapture,
35
37
  onPointerDownCapture = _ref.onPointerDownCapture,
36
38
  onPointerUpCapture = _ref.onPointerUpCapture,
37
- onClickCapture = _ref.onClickCapture,
39
+ onTouchEndCapture = _ref.onTouchEndCapture,
40
+ onTouchStartCapture = _ref.onTouchStartCapture,
41
+ overlay = _ref.overlay,
38
42
  shape = _ref.shape,
43
+ spacing = _ref.spacing,
39
44
  testId = _ref.testId,
45
+ tooltip = _ref.tooltip,
40
46
  UNSAFE_size = _ref.UNSAFE_size,
41
- href = _ref.href,
42
- preventedAriaLabel = _ref['aria-label'],
43
47
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
44
48
  var baseProps = (0, _useIconButton.default)({
45
49
  analyticsContext: analyticsContext,
@@ -67,6 +71,99 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
67
71
  spacing: spacing,
68
72
  UNSAFE_size: UNSAFE_size
69
73
  });
74
+ if (!isTooltipDisabled) {
75
+ var _tooltip$content;
76
+ return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
77
+ content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
78
+ testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
79
+ position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
80
+ delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
81
+ onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
82
+ onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
83
+ mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
84
+ analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
85
+ strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
86
+ tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
87
+ truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
88
+ component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
89
+ hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
90
+ hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
91
+ }, function (triggerProps) {
92
+ return /*#__PURE__*/_react.default.createElement(_anchor.default
93
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
94
+ , (0, _extends2.default)({}, rest, {
95
+ testId: testId,
96
+ componentName: "LinkIconButton",
97
+ analyticsContext: analyticsContext,
98
+ interactionName: interactionName
99
+ // Shared between tooltip and native props
100
+ ,
101
+ onMouseOver: function onMouseOver(e) {
102
+ var _triggerProps$onMouse, _rest$onMouseOver;
103
+ (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
104
+ (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 || _rest$onMouseOver.call(rest, e);
105
+ },
106
+ onMouseOut: function onMouseOut(e) {
107
+ var _triggerProps$onMouse2, _rest$onMouseOut;
108
+ (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
109
+ (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 || _rest$onMouseOut.call(rest, e);
110
+ },
111
+ onMouseMove: function onMouseMove(e) {
112
+ var _triggerProps$onMouse3, _rest$onMouseMove;
113
+ (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
114
+ (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 || _rest$onMouseMove.call(rest, e);
115
+ },
116
+ onMouseDown: function onMouseDown(e) {
117
+ var _triggerProps$onMouse4, _rest$onMouseDown;
118
+ (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
119
+ (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 || _rest$onMouseDown.call(rest, e);
120
+ },
121
+ onFocus: function onFocus(e) {
122
+ var _triggerProps$onFocus, _rest$onFocus;
123
+ (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
124
+ (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 || _rest$onFocus.call(rest, e);
125
+ },
126
+ onBlur: function onBlur(e) {
127
+ var _triggerProps$onBlur, _rest$onBlur;
128
+ (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
129
+ (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 || _rest$onBlur.call(rest, e);
130
+ }
131
+ // Shared between tooltip and base props
132
+ ,
133
+ onClick: function onClick(event, analyticsEvent) {
134
+ var _baseProps$onClick, _triggerProps$onClick;
135
+ baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
136
+ triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
137
+ },
138
+ ref: function ref(_ref2) {
139
+ var _triggerProps$ref;
140
+ baseProps.ref(_ref2);
141
+ triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
142
+ }
143
+ // Base props only
144
+ ,
145
+ xcss: baseProps.xcss,
146
+ onMouseDownCapture: baseProps.onMouseDownCapture,
147
+ onMouseUpCapture: baseProps.onMouseUpCapture,
148
+ onKeyDownCapture: baseProps.onKeyDownCapture,
149
+ onKeyUpCapture: baseProps.onKeyUpCapture,
150
+ onTouchStartCapture: baseProps.onTouchStartCapture,
151
+ onTouchEndCapture: baseProps.onTouchEndCapture,
152
+ onPointerDownCapture: baseProps.onPointerDownCapture,
153
+ onPointerUpCapture: baseProps.onPointerUpCapture,
154
+ onClickCapture: baseProps.onClickCapture
155
+ /**
156
+ * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
157
+ * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
158
+ */
159
+ // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
160
+ ,
161
+ href: baseProps.isDisabled ? undefined : href,
162
+ role: baseProps.isDisabled ? 'link' : undefined,
163
+ "aria-disabled": baseProps.isDisabled === true ? true : undefined
164
+ }), baseProps.children);
165
+ });
166
+ }
70
167
  return /*#__PURE__*/_react.default.createElement(_anchor.default
71
168
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
72
169
  , (0, _extends2.default)({}, rest, {
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -117,7 +117,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
117
117
  action: 'clicked',
118
118
  componentName: 'button',
119
119
  packageName: "@atlaskit/button",
120
- packageVersion: "17.10.0",
120
+ packageVersion: "17.11.1",
121
121
  analyticsData: analyticsContext
122
122
  });
123
123
 
package/dist/es2019/new-button/variants/icon/button.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
3
  import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
4
+ import Tooltip from '@atlaskit/tooltip';
4
5
  import useIconButton from './use-icon-button';
5
6
  /**
6
7
  * __Icon Button__
@@ -12,33 +13,35 @@ import useIconButton from './use-icon-button';
12
13
  * - [Usage](https://atlassian.design/components/button/usage)
13
14
  */
14
15
  const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
16
+ // Prevent duplicate labels being added.
17
+ 'aria-label': preventedAriaLabel,
15
18
  analyticsContext,
16
- interactionName,
17
- autoFocus,
18
19
  appearance,
19
- spacing,
20
+ autoFocus,
21
+ icon,
22
+ interactionName,
20
23
  isDisabled,
21
- isSelected,
22
24
  isLoading,
23
- icon,
25
+ isSelected,
26
+ isTooltipDisabled = true,
24
27
  label,
25
- overlay,
26
28
  onClick,
27
- onMouseDownCapture,
28
- onMouseUpCapture,
29
+ onClickCapture,
29
30
  onKeyDownCapture,
30
31
  onKeyUpCapture,
31
- onTouchStartCapture,
32
- onTouchEndCapture,
32
+ onMouseDownCapture,
33
+ onMouseUpCapture,
33
34
  onPointerDownCapture,
34
35
  onPointerUpCapture,
35
- onClickCapture,
36
+ onTouchEndCapture,
37
+ onTouchStartCapture,
38
+ overlay,
36
39
  shape,
37
- type = 'button',
40
+ spacing,
38
41
  testId,
42
+ tooltip,
43
+ type = 'button',
39
44
  UNSAFE_size,
40
- // Prevent duplicate labels being added.
41
- 'aria-label': preventedAriaLabel,
42
45
  ...rest
43
46
  }, ref) {
44
47
  /**
@@ -72,6 +75,90 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
72
75
  spacing,
73
76
  UNSAFE_size
74
77
  });
78
+ if (!isTooltipDisabled) {
79
+ var _tooltip$content;
80
+ return /*#__PURE__*/React.createElement(Tooltip, {
81
+ content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
82
+ testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
83
+ position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
84
+ delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
85
+ onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
86
+ onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
87
+ mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
88
+ analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
89
+ strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
90
+ tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
91
+ truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
92
+ component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
93
+ hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
94
+ hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
95
+ }, triggerProps => /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE
96
+ // Top level props
97
+ , _extends({}, rest, {
98
+ type: type,
99
+ testId: testId,
100
+ componentName: "IconButton",
101
+ analyticsContext: analyticsContext,
102
+ interactionName: interactionName
103
+ // Shared between tooltip and native props
104
+ ,
105
+ onMouseOver: e => {
106
+ var _triggerProps$onMouse, _rest$onMouseOver;
107
+ (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
108
+ (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 ? void 0 : _rest$onMouseOver.call(rest, e);
109
+ },
110
+ onMouseOut: e => {
111
+ var _triggerProps$onMouse2, _rest$onMouseOut;
112
+ (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
113
+ (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 ? void 0 : _rest$onMouseOut.call(rest, e);
114
+ },
115
+ onMouseMove: e => {
116
+ var _triggerProps$onMouse3, _rest$onMouseMove;
117
+ (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
118
+ (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 ? void 0 : _rest$onMouseMove.call(rest, e);
119
+ },
120
+ onMouseDown: e => {
121
+ var _triggerProps$onMouse4, _rest$onMouseDown;
122
+ (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
123
+ (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 ? void 0 : _rest$onMouseDown.call(rest, e);
124
+ },
125
+ onFocus: e => {
126
+ var _triggerProps$onFocus, _rest$onFocus;
127
+ (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
128
+ (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, e);
129
+ },
130
+ onBlur: e => {
131
+ var _triggerProps$onBlur, _rest$onBlur;
132
+ (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
133
+ (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 ? void 0 : _rest$onBlur.call(rest, e);
134
+ }
135
+ // Shared between tooltip and base props
136
+ ,
137
+ onClick: (event, analyticsEvent) => {
138
+ var _baseProps$onClick, _triggerProps$onClick;
139
+ baseProps === null || baseProps === void 0 ? void 0 : (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 ? void 0 : _baseProps$onClick.call(baseProps, event, analyticsEvent);
140
+ triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
141
+ },
142
+ ref: ref => {
143
+ var _triggerProps$ref;
144
+ baseProps.ref(ref);
145
+ triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 ? void 0 : _triggerProps$ref.call(triggerProps, ref);
146
+ }
147
+ // Base props only
148
+ ,
149
+ xcss: baseProps.xcss,
150
+ isDisabled: baseProps.isDisabled,
151
+ onMouseDownCapture: baseProps.onMouseDownCapture,
152
+ onMouseUpCapture: baseProps.onMouseUpCapture,
153
+ onKeyDownCapture: baseProps.onKeyDownCapture,
154
+ onKeyUpCapture: baseProps.onKeyUpCapture,
155
+ onTouchStartCapture: baseProps.onTouchStartCapture,
156
+ onTouchEndCapture: baseProps.onTouchEndCapture,
157
+ onPointerDownCapture: baseProps.onPointerDownCapture,
158
+ onPointerUpCapture: baseProps.onPointerUpCapture,
159
+ onClickCapture: baseProps.onClickCapture
160
+ }), baseProps.children));
161
+ }
75
162
  return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE, _extends({}, rest, {
76
163
  ref: baseProps.ref,
77
164
  xcss: baseProps.xcss,
package/dist/es2019/new-button/variants/icon/link.js CHANGED
@@ -1,34 +1,37 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { forwardRef, memo } from 'react';
3
3
  import UNSAFE_ANCHOR from '@atlaskit/primitives/anchor';
4
+ import Tooltip from '@atlaskit/tooltip';
4
5
  import useIconButton from './use-icon-button';
5
6
  const LinkIconButtonBase = ({
7
+ // Prevent duplicate labels being added.
8
+ 'aria-label': preventedAriaLabel,
6
9
  analyticsContext,
7
- interactionName,
8
- autoFocus,
9
10
  appearance,
10
- spacing,
11
+ autoFocus,
12
+ href,
13
+ icon,
14
+ interactionName,
11
15
  isDisabled,
12
16
  isSelected,
13
- icon,
17
+ isTooltipDisabled = true,
14
18
  label,
15
- overlay,
16
19
  onClick,
17
- onMouseDownCapture,
18
- onMouseUpCapture,
20
+ onClickCapture,
19
21
  onKeyDownCapture,
20
22
  onKeyUpCapture,
21
- onTouchStartCapture,
22
- onTouchEndCapture,
23
+ onMouseDownCapture,
24
+ onMouseUpCapture,
23
25
  onPointerDownCapture,
24
26
  onPointerUpCapture,
25
- onClickCapture,
27
+ onTouchEndCapture,
28
+ onTouchStartCapture,
29
+ overlay,
26
30
  shape,
31
+ spacing,
27
32
  testId,
33
+ tooltip,
28
34
  UNSAFE_size,
29
- href,
30
- // Prevent duplicate labels being added.
31
- 'aria-label': preventedAriaLabel,
32
35
  ...rest
33
36
  }, ref) => {
34
37
  const baseProps = useIconButton({
@@ -57,6 +60,97 @@ const LinkIconButtonBase = ({
57
60
  spacing,
58
61
  UNSAFE_size
59
62
  });
63
+ if (!isTooltipDisabled) {
64
+ var _tooltip$content;
65
+ return /*#__PURE__*/React.createElement(Tooltip, {
66
+ content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
67
+ testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
68
+ position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
69
+ delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
70
+ onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
71
+ onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
72
+ mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
73
+ analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
74
+ strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
75
+ tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
76
+ truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
77
+ component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
78
+ hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
79
+ hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
80
+ }, triggerProps => /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
81
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
82
+ , _extends({}, rest, {
83
+ testId: testId,
84
+ componentName: "LinkIconButton",
85
+ analyticsContext: analyticsContext,
86
+ interactionName: interactionName
87
+ // Shared between tooltip and native props
88
+ ,
89
+ onMouseOver: e => {
90
+ var _triggerProps$onMouse, _rest$onMouseOver;
91
+ (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
92
+ (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 ? void 0 : _rest$onMouseOver.call(rest, e);
93
+ },
94
+ onMouseOut: e => {
95
+ var _triggerProps$onMouse2, _rest$onMouseOut;
96
+ (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
97
+ (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 ? void 0 : _rest$onMouseOut.call(rest, e);
98
+ },
99
+ onMouseMove: e => {
100
+ var _triggerProps$onMouse3, _rest$onMouseMove;
101
+ (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
102
+ (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 ? void 0 : _rest$onMouseMove.call(rest, e);
103
+ },
104
+ onMouseDown: e => {
105
+ var _triggerProps$onMouse4, _rest$onMouseDown;
106
+ (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
107
+ (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 ? void 0 : _rest$onMouseDown.call(rest, e);
108
+ },
109
+ onFocus: e => {
110
+ var _triggerProps$onFocus, _rest$onFocus;
111
+ (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
112
+ (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, e);
113
+ },
114
+ onBlur: e => {
115
+ var _triggerProps$onBlur, _rest$onBlur;
116
+ (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
117
+ (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 ? void 0 : _rest$onBlur.call(rest, e);
118
+ }
119
+ // Shared between tooltip and base props
120
+ ,
121
+ onClick: (event, analyticsEvent) => {
122
+ var _baseProps$onClick, _triggerProps$onClick;
123
+ baseProps === null || baseProps === void 0 ? void 0 : (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 ? void 0 : _baseProps$onClick.call(baseProps, event, analyticsEvent);
124
+ triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
125
+ },
126
+ ref: ref => {
127
+ var _triggerProps$ref;
128
+ baseProps.ref(ref);
129
+ triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 ? void 0 : _triggerProps$ref.call(triggerProps, ref);
130
+ }
131
+ // Base props only
132
+ ,
133
+ xcss: baseProps.xcss,
134
+ onMouseDownCapture: baseProps.onMouseDownCapture,
135
+ onMouseUpCapture: baseProps.onMouseUpCapture,
136
+ onKeyDownCapture: baseProps.onKeyDownCapture,
137
+ onKeyUpCapture: baseProps.onKeyUpCapture,
138
+ onTouchStartCapture: baseProps.onTouchStartCapture,
139
+ onTouchEndCapture: baseProps.onTouchEndCapture,
140
+ onPointerDownCapture: baseProps.onPointerDownCapture,
141
+ onPointerUpCapture: baseProps.onPointerUpCapture,
142
+ onClickCapture: baseProps.onClickCapture
143
+ /**
144
+ * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
145
+ * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
146
+ */
147
+ // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
148
+ ,
149
+ href: baseProps.isDisabled ? undefined : href,
150
+ role: baseProps.isDisabled ? 'link' : undefined,
151
+ "aria-disabled": baseProps.isDisabled === true ? true : undefined
152
+ }), baseProps.children));
153
+ }
60
154
  return /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
61
155
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
62
156
  , _extends({}, rest, {
package/dist/es2019/old-button/shared/button-base.js CHANGED
@@ -102,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
102
102
  action: 'clicked',
103
103
  componentName: 'button',
104
104
  packageName: "@atlaskit/button",
105
- packageVersion: "17.10.0",
105
+ packageVersion: "17.11.1",
106
106
  analyticsData: analyticsContext
107
107
  });
108
108
 
package/dist/esm/new-button/variants/icon/button.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "isLoading", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size", "aria-label"];
3
+ var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
4
4
  import React from 'react';
5
5
  import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
6
+ import Tooltip from '@atlaskit/tooltip';
6
7
  import useIconButton from './use-icon-button';
7
8
  /**
8
9
  * __Icon Button__
@@ -14,33 +15,36 @@ import useIconButton from './use-icon-button';
14
15
  * - [Usage](https://atlassian.design/components/button/usage)
15
16
  */
16
17
  var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
17
- var analyticsContext = _ref.analyticsContext,
18
- interactionName = _ref.interactionName,
19
- autoFocus = _ref.autoFocus,
18
+ var preventedAriaLabel = _ref['aria-label'],
19
+ analyticsContext = _ref.analyticsContext,
20
20
  appearance = _ref.appearance,
21
- spacing = _ref.spacing,
21
+ autoFocus = _ref.autoFocus,
22
+ icon = _ref.icon,
23
+ interactionName = _ref.interactionName,
22
24
  isDisabled = _ref.isDisabled,
23
- isSelected = _ref.isSelected,
24
25
  isLoading = _ref.isLoading,
25
- icon = _ref.icon,
26
+ isSelected = _ref.isSelected,
27
+ _ref$isTooltipDisable = _ref.isTooltipDisabled,
28
+ isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
26
29
  label = _ref.label,
27
- overlay = _ref.overlay,
28
30
  onClick = _ref.onClick,
29
- onMouseDownCapture = _ref.onMouseDownCapture,
30
- onMouseUpCapture = _ref.onMouseUpCapture,
31
+ onClickCapture = _ref.onClickCapture,
31
32
  onKeyDownCapture = _ref.onKeyDownCapture,
32
33
  onKeyUpCapture = _ref.onKeyUpCapture,
33
- onTouchStartCapture = _ref.onTouchStartCapture,
34
- onTouchEndCapture = _ref.onTouchEndCapture,
34
+ onMouseDownCapture = _ref.onMouseDownCapture,
35
+ onMouseUpCapture = _ref.onMouseUpCapture,
35
36
  onPointerDownCapture = _ref.onPointerDownCapture,
36
37
  onPointerUpCapture = _ref.onPointerUpCapture,
37
- onClickCapture = _ref.onClickCapture,
38
+ onTouchEndCapture = _ref.onTouchEndCapture,
39
+ onTouchStartCapture = _ref.onTouchStartCapture,
40
+ overlay = _ref.overlay,
38
41
  shape = _ref.shape,
42
+ spacing = _ref.spacing,
43
+ testId = _ref.testId,
44
+ tooltip = _ref.tooltip,
39
45
  _ref$type = _ref.type,
40
46
  type = _ref$type === void 0 ? 'button' : _ref$type,
41
- testId = _ref.testId,
42
47
  UNSAFE_size = _ref.UNSAFE_size,
43
- preventedAriaLabel = _ref['aria-label'],
44
48
  rest = _objectWithoutProperties(_ref, _excluded);
45
49
  /**
46
50
  * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
@@ -73,6 +77,92 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
73
77
  spacing: spacing,
74
78
  UNSAFE_size: UNSAFE_size
75
79
  });
80
+ if (!isTooltipDisabled) {
81
+ var _tooltip$content;
82
+ return /*#__PURE__*/React.createElement(Tooltip, {
83
+ content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
84
+ testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
85
+ position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
86
+ delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
87
+ onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
88
+ onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
89
+ mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
90
+ analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
91
+ strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
92
+ tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
93
+ truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
94
+ component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
95
+ hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
96
+ hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
97
+ }, function (triggerProps) {
98
+ return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE
99
+ // Top level props
100
+ , _extends({}, rest, {
101
+ type: type,
102
+ testId: testId,
103
+ componentName: "IconButton",
104
+ analyticsContext: analyticsContext,
105
+ interactionName: interactionName
106
+ // Shared between tooltip and native props
107
+ ,
108
+ onMouseOver: function onMouseOver(e) {
109
+ var _triggerProps$onMouse, _rest$onMouseOver;
110
+ (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
111
+ (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 || _rest$onMouseOver.call(rest, e);
112
+ },
113
+ onMouseOut: function onMouseOut(e) {
114
+ var _triggerProps$onMouse2, _rest$onMouseOut;
115
+ (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
116
+ (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 || _rest$onMouseOut.call(rest, e);
117
+ },
118
+ onMouseMove: function onMouseMove(e) {
119
+ var _triggerProps$onMouse3, _rest$onMouseMove;
120
+ (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
121
+ (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 || _rest$onMouseMove.call(rest, e);
122
+ },
123
+ onMouseDown: function onMouseDown(e) {
124
+ var _triggerProps$onMouse4, _rest$onMouseDown;
125
+ (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
126
+ (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 || _rest$onMouseDown.call(rest, e);
127
+ },
128
+ onFocus: function onFocus(e) {
129
+ var _triggerProps$onFocus, _rest$onFocus;
130
+ (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
131
+ (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 || _rest$onFocus.call(rest, e);
132
+ },
133
+ onBlur: function onBlur(e) {
134
+ var _triggerProps$onBlur, _rest$onBlur;
135
+ (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
136
+ (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 || _rest$onBlur.call(rest, e);
137
+ }
138
+ // Shared between tooltip and base props
139
+ ,
140
+ onClick: function onClick(event, analyticsEvent) {
141
+ var _baseProps$onClick, _triggerProps$onClick;
142
+ baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
143
+ triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
144
+ },
145
+ ref: function ref(_ref2) {
146
+ var _triggerProps$ref;
147
+ baseProps.ref(_ref2);
148
+ triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
149
+ }
150
+ // Base props only
151
+ ,
152
+ xcss: baseProps.xcss,
153
+ isDisabled: baseProps.isDisabled,
154
+ onMouseDownCapture: baseProps.onMouseDownCapture,
155
+ onMouseUpCapture: baseProps.onMouseUpCapture,
156
+ onKeyDownCapture: baseProps.onKeyDownCapture,
157
+ onKeyUpCapture: baseProps.onKeyUpCapture,
158
+ onTouchStartCapture: baseProps.onTouchStartCapture,
159
+ onTouchEndCapture: baseProps.onTouchEndCapture,
160
+ onPointerDownCapture: baseProps.onPointerDownCapture,
161
+ onPointerUpCapture: baseProps.onPointerUpCapture,
162
+ onClickCapture: baseProps.onClickCapture
163
+ }), baseProps.children);
164
+ });
165
+ }
76
166
  return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE, _extends({}, rest, {
77
167
  ref: baseProps.ref,
78
168
  xcss: baseProps.xcss,
package/dist/esm/new-button/variants/icon/link.js CHANGED
@@ -1,35 +1,39 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "testId", "UNSAFE_size", "href", "aria-label"];
3
+ var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
4
4
  import React, { forwardRef, memo } from 'react';
5
5
  import UNSAFE_ANCHOR from '@atlaskit/primitives/anchor';
6
+ import Tooltip from '@atlaskit/tooltip';
6
7
  import useIconButton from './use-icon-button';
7
8
  var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
8
- var analyticsContext = _ref.analyticsContext,
9
- interactionName = _ref.interactionName,
10
- autoFocus = _ref.autoFocus,
9
+ var preventedAriaLabel = _ref['aria-label'],
10
+ analyticsContext = _ref.analyticsContext,
11
11
  appearance = _ref.appearance,
12
- spacing = _ref.spacing,
12
+ autoFocus = _ref.autoFocus,
13
+ href = _ref.href,
14
+ icon = _ref.icon,
15
+ interactionName = _ref.interactionName,
13
16
  isDisabled = _ref.isDisabled,
14
17
  isSelected = _ref.isSelected,
15
- icon = _ref.icon,
18
+ _ref$isTooltipDisable = _ref.isTooltipDisabled,
19
+ isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
16
20
  label = _ref.label,
17
- overlay = _ref.overlay,
18
21
  onClick = _ref.onClick,
19
- onMouseDownCapture = _ref.onMouseDownCapture,
20
- onMouseUpCapture = _ref.onMouseUpCapture,
22
+ onClickCapture = _ref.onClickCapture,
21
23
  onKeyDownCapture = _ref.onKeyDownCapture,
22
24
  onKeyUpCapture = _ref.onKeyUpCapture,
23
- onTouchStartCapture = _ref.onTouchStartCapture,
24
- onTouchEndCapture = _ref.onTouchEndCapture,
25
+ onMouseDownCapture = _ref.onMouseDownCapture,
26
+ onMouseUpCapture = _ref.onMouseUpCapture,
25
27
  onPointerDownCapture = _ref.onPointerDownCapture,
26
28
  onPointerUpCapture = _ref.onPointerUpCapture,
27
- onClickCapture = _ref.onClickCapture,
29
+ onTouchEndCapture = _ref.onTouchEndCapture,
30
+ onTouchStartCapture = _ref.onTouchStartCapture,
31
+ overlay = _ref.overlay,
28
32
  shape = _ref.shape,
33
+ spacing = _ref.spacing,
29
34
  testId = _ref.testId,
35
+ tooltip = _ref.tooltip,
30
36
  UNSAFE_size = _ref.UNSAFE_size,
31
- href = _ref.href,
32
- preventedAriaLabel = _ref['aria-label'],
33
37
  rest = _objectWithoutProperties(_ref, _excluded);
34
38
  var baseProps = useIconButton({
35
39
  analyticsContext: analyticsContext,
@@ -57,6 +61,99 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
57
61
  spacing: spacing,
58
62
  UNSAFE_size: UNSAFE_size
59
63
  });
64
+ if (!isTooltipDisabled) {
65
+ var _tooltip$content;
66
+ return /*#__PURE__*/React.createElement(Tooltip, {
67
+ content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
68
+ testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
69
+ position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
70
+ delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
71
+ onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
72
+ onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
73
+ mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
74
+ analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
75
+ strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
76
+ tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
77
+ truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
78
+ component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
79
+ hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
80
+ hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
81
+ }, function (triggerProps) {
82
+ return /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
83
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
84
+ , _extends({}, rest, {
85
+ testId: testId,
86
+ componentName: "LinkIconButton",
87
+ analyticsContext: analyticsContext,
88
+ interactionName: interactionName
89
+ // Shared between tooltip and native props
90
+ ,
91
+ onMouseOver: function onMouseOver(e) {
92
+ var _triggerProps$onMouse, _rest$onMouseOver;
93
+ (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
94
+ (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 || _rest$onMouseOver.call(rest, e);
95
+ },
96
+ onMouseOut: function onMouseOut(e) {
97
+ var _triggerProps$onMouse2, _rest$onMouseOut;
98
+ (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
99
+ (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 || _rest$onMouseOut.call(rest, e);
100
+ },
101
+ onMouseMove: function onMouseMove(e) {
102
+ var _triggerProps$onMouse3, _rest$onMouseMove;
103
+ (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
104
+ (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 || _rest$onMouseMove.call(rest, e);
105
+ },
106
+ onMouseDown: function onMouseDown(e) {
107
+ var _triggerProps$onMouse4, _rest$onMouseDown;
108
+ (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
109
+ (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 || _rest$onMouseDown.call(rest, e);
110
+ },
111
+ onFocus: function onFocus(e) {
112
+ var _triggerProps$onFocus, _rest$onFocus;
113
+ (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
114
+ (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 || _rest$onFocus.call(rest, e);
115
+ },
116
+ onBlur: function onBlur(e) {
117
+ var _triggerProps$onBlur, _rest$onBlur;
118
+ (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
119
+ (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 || _rest$onBlur.call(rest, e);
120
+ }
121
+ // Shared between tooltip and base props
122
+ ,
123
+ onClick: function onClick(event, analyticsEvent) {
124
+ var _baseProps$onClick, _triggerProps$onClick;
125
+ baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
126
+ triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
127
+ },
128
+ ref: function ref(_ref2) {
129
+ var _triggerProps$ref;
130
+ baseProps.ref(_ref2);
131
+ triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
132
+ }
133
+ // Base props only
134
+ ,
135
+ xcss: baseProps.xcss,
136
+ onMouseDownCapture: baseProps.onMouseDownCapture,
137
+ onMouseUpCapture: baseProps.onMouseUpCapture,
138
+ onKeyDownCapture: baseProps.onKeyDownCapture,
139
+ onKeyUpCapture: baseProps.onKeyUpCapture,
140
+ onTouchStartCapture: baseProps.onTouchStartCapture,
141
+ onTouchEndCapture: baseProps.onTouchEndCapture,
142
+ onPointerDownCapture: baseProps.onPointerDownCapture,
143
+ onPointerUpCapture: baseProps.onPointerUpCapture,
144
+ onClickCapture: baseProps.onClickCapture
145
+ /**
146
+ * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
147
+ * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
148
+ */
149
+ // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
150
+ ,
151
+ href: baseProps.isDisabled ? undefined : href,
152
+ role: baseProps.isDisabled ? 'link' : undefined,
153
+ "aria-disabled": baseProps.isDisabled === true ? true : undefined
154
+ }), baseProps.children);
155
+ });
156
+ }
60
157
  return /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
61
158
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
62
159
  , _extends({}, rest, {
package/dist/esm/old-button/shared/button-base.js CHANGED
@@ -108,7 +108,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
108
108
  action: 'clicked',
109
109
  componentName: 'button',
110
110
  packageName: "@atlaskit/button",
111
- packageVersion: "17.10.0",
111
+ packageVersion: "17.11.1",
112
112
  analyticsData: analyticsContext
113
113
  });
114
114
 
package/dist/types/new-button/variants/icon/link.d.ts CHANGED
@@ -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>({ analyticsContext, interactionName, autoFocus, appearance, spacing, isDisabled, isSelected, icon, label, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, shape, testId, UNSAFE_size, href, "aria-label": preventedAriaLabel, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
5
+ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
6
6
  /**
7
7
  * __Link Icon Button__
8
8
  *
package/dist/types/new-button/variants/icon/types.d.ts CHANGED
@@ -1,5 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { TooltipProps } from '@atlaskit/tooltip';
1
3
  import { type IconButtonAppearance, type IconButtonSpacing, type IconProp, type IconSize } from '../types';
2
4
  export type CommonIconButtonProps = {
5
+ 'aria-label'?: never;
3
6
  /**
4
7
  * The button style variation.
5
8
  */
@@ -8,11 +11,18 @@ export type CommonIconButtonProps = {
8
11
  * Places an icon within the button.
9
12
  */
10
13
  icon: IconProp;
14
+ /**
15
+ * Conditionally show a spinner over the top of a button.
16
+ */
17
+ isLoading?: boolean;
18
+ /**
19
+ * Prevent a tooltip from showing. Use sparingly.
20
+ */
21
+ isTooltipDisabled?: boolean;
11
22
  /**
12
23
  * Provide an accessible label, often used by screen readers.
13
24
  */
14
- label: string;
15
- 'aria-label'?: never;
25
+ label: React.ReactNode;
16
26
  /**
17
27
  * Set the shape of the icon, defaults to square with rounded corners.
18
28
  */
@@ -21,6 +31,10 @@ export type CommonIconButtonProps = {
21
31
  * Controls the amount of padding in the button.
22
32
  */
23
33
  spacing?: IconButtonSpacing;
34
+ /**
35
+ * Props passed down to the Tooltip component.
36
+ */
37
+ tooltip?: Partial<Omit<TooltipProps, 'children'>>;
24
38
  /**
25
39
  * Set the size of the icon. `medium` is default, so it does not need to be specified.
26
40
  * This is UNSAFE as it will be removed in future in favor of a 100% bounded API.
package/dist/types/new-button/variants/icon/use-icon-button.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
2
2
  import { type CommonIconButtonProps } from './types';
3
- type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & CommonIconButtonProps;
3
+ type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & Omit<CommonIconButtonProps, 'isTooltipDisabled' | 'tooltip'>;
4
4
  type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
5
5
  /**
6
6
  * __Use icon button__
package/dist/types/utils/variants.d.ts CHANGED
@@ -42,12 +42,12 @@ declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonP
42
42
  } & React.RefAttributes<HTMLAnchorElement>>;
43
43
  declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
44
44
  icon?: import("../new-button/variants/types").IconProp | undefined;
45
- label?: string | undefined;
45
+ label?: IconButtonProps['label'];
46
46
  } & React.RefAttributes<HTMLButtonElement>>;
47
47
  declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
48
48
  href?: string | undefined;
49
49
  icon?: import("../new-button/variants/types").IconProp | undefined;
50
- label?: string | undefined;
50
+ label?: LinkIconButtonProps['label'];
51
51
  } & React.RefAttributes<HTMLAnchorElement>>;
52
52
  declare const variants: Variant[];
53
53
  export declare const defaultButtonVariants: DefaultButtonVariants[];
package/dist/types-ts4.5/new-button/variants/icon/link.d.ts CHANGED
@@ -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>({ analyticsContext, interactionName, autoFocus, appearance, spacing, isDisabled, isSelected, icon, label, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, shape, testId, UNSAFE_size, href, "aria-label": preventedAriaLabel, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
5
+ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
6
6
  /**
7
7
  * __Link Icon Button__
8
8
  *
package/dist/types-ts4.5/new-button/variants/icon/types.d.ts CHANGED
@@ -1,5 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { TooltipProps } from '@atlaskit/tooltip';
1
3
  import { type IconButtonAppearance, type IconButtonSpacing, type IconProp, type IconSize } from '../types';
2
4
  export type CommonIconButtonProps = {
5
+ 'aria-label'?: never;
3
6
  /**
4
7
  * The button style variation.
5
8
  */
@@ -8,11 +11,18 @@ export type CommonIconButtonProps = {
8
11
  * Places an icon within the button.
9
12
  */
10
13
  icon: IconProp;
14
+ /**
15
+ * Conditionally show a spinner over the top of a button.
16
+ */
17
+ isLoading?: boolean;
18
+ /**
19
+ * Prevent a tooltip from showing. Use sparingly.
20
+ */
21
+ isTooltipDisabled?: boolean;
11
22
  /**
12
23
  * Provide an accessible label, often used by screen readers.
13
24
  */
14
- label: string;
15
- 'aria-label'?: never;
25
+ label: React.ReactNode;
16
26
  /**
17
27
  * Set the shape of the icon, defaults to square with rounded corners.
18
28
  */
@@ -21,6 +31,10 @@ export type CommonIconButtonProps = {
21
31
  * Controls the amount of padding in the button.
22
32
  */
23
33
  spacing?: IconButtonSpacing;
34
+ /**
35
+ * Props passed down to the Tooltip component.
36
+ */
37
+ tooltip?: Partial<Omit<TooltipProps, 'children'>>;
24
38
  /**
25
39
  * Set the size of the icon. `medium` is default, so it does not need to be specified.
26
40
  * This is UNSAFE as it will be removed in future in favor of a 100% bounded API.
package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
2
2
  import { type CommonIconButtonProps } from './types';
3
- type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & CommonIconButtonProps;
3
+ type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & Omit<CommonIconButtonProps, 'isTooltipDisabled' | 'tooltip'>;
4
4
  type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
5
5
  /**
6
6
  * __Use icon button__
package/dist/types-ts4.5/utils/variants.d.ts CHANGED
@@ -42,12 +42,12 @@ declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonP
42
42
  } & React.RefAttributes<HTMLAnchorElement>>;
43
43
  declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
44
44
  icon?: import("../new-button/variants/types").IconProp | undefined;
45
- label?: string | undefined;
45
+ label?: IconButtonProps['label'];
46
46
  } & React.RefAttributes<HTMLButtonElement>>;
47
47
  declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
48
48
  href?: string | undefined;
49
49
  icon?: import("../new-button/variants/types").IconProp | undefined;
50
- label?: string | undefined;
50
+ label?: LinkIconButtonProps['label'];
51
51
  } & React.RefAttributes<HTMLAnchorElement>>;
52
52
  declare const variants: Variant[];
53
53
  export declare const defaultButtonVariants: DefaultButtonVariants[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "17.10.0",
3
+ "version": "17.11.1",
4
4
  "description": "A button triggers an event or action. They let users know what will happen next.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -84,13 +84,14 @@
84
84
  "dependencies": {
85
85
  "@atlaskit/analytics-next": "^9.2.0",
86
86
  "@atlaskit/ds-lib": "^2.2.0",
87
- "@atlaskit/focus-ring": "^1.3.0",
87
+ "@atlaskit/focus-ring": "^1.3.9",
88
88
  "@atlaskit/icon": "^22.1.0",
89
89
  "@atlaskit/interaction-context": "^2.1.0",
90
90
  "@atlaskit/primitives": "^5.5.0",
91
91
  "@atlaskit/spinner": "^16.0.0",
92
92
  "@atlaskit/theme": "^12.7.0",
93
93
  "@atlaskit/tokens": "^1.43.0",
94
+ "@atlaskit/tooltip": "^18.1.3",
94
95
  "@atlaskit/visually-hidden": "^1.2.4",
95
96
  "@babel/runtime": "^7.0.0",
96
97
  "@emotion/react": "^11.7.1"
@@ -102,7 +103,7 @@
102
103
  "@af/accessibility-testing": "*",
103
104
  "@af/integration-testing": "*",
104
105
  "@af/visual-regression": "*",
105
- "@atlaskit/app-provider": "^1.2.0",
106
+ "@atlaskit/app-provider": "^1.3.0",
106
107
  "@atlaskit/ssr": "*",
107
108
  "@atlaskit/visual-regression": "*",
108
109
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",