@atlaskit/button 16.8.3 → 16.8.5

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 (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/button.js +26 -9
  3. package/dist/cjs/shared/button-base.js +33 -29
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/button.js +20 -7
  6. package/dist/es2019/shared/button-base.js +30 -24
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/button.js +26 -9
  9. package/dist/esm/shared/button-base.js +33 -29
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 16.8.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`54b69a2fc03`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54b69a2fc03) - Refactor out rest props from button and make props more explicit.
8
+
9
+ ## 16.8.4
10
+
11
+ ### Patch Changes
12
+
13
+ - [`4b3cfb2276b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4b3cfb2276b) - Refactor button base to remove rest props and make props more explicit.
14
+
3
15
  ## 16.8.3
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/button.js CHANGED
@@ -15,7 +15,7 @@ var _components = require("@atlaskit/theme/components");
15
15
  var _buttonBase = _interopRequireDefault(require("./shared/button-base"));
16
16
  var _css = require("./shared/css");
17
17
  var _getIsOnlySingleIcon = _interopRequireDefault(require("./shared/get-is-only-single-icon"));
18
- var _excluded = ["onMouseDown", "onMouseUp"];
18
+ var _excluded = ["appearance", "children", "iconBefore", "iconAfter", "isSelected", "onMouseDown", "onMouseUp", "shouldFitContainer", "spacing"];
19
19
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
20
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
21
  var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
@@ -29,18 +29,29 @@ var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerC
29
29
  * - [Usage](https://atlassian.design/components/button/usage)
30
30
  */
31
31
  var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
32
- var _ref$onMouseDown = _ref.onMouseDown,
32
+ var _ref$appearance = _ref.appearance,
33
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
34
+ children = _ref.children,
35
+ iconBefore = _ref.iconBefore,
36
+ iconAfter = _ref.iconAfter,
37
+ _ref$isSelected = _ref.isSelected,
38
+ isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
39
+ _ref$onMouseDown = _ref.onMouseDown,
33
40
  providedOnMouseDown = _ref$onMouseDown === void 0 ? _noop.default : _ref$onMouseDown,
34
41
  _ref$onMouseUp = _ref.onMouseUp,
35
42
  providedOnMouseUp = _ref$onMouseUp === void 0 ? _noop.default : _ref$onMouseUp,
43
+ _ref$shouldFitContain = _ref.shouldFitContainer,
44
+ shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
45
+ _ref$spacing = _ref.spacing,
46
+ spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
36
47
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
37
48
  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
38
49
  mode = _useGlobalTheme.mode;
39
- var appearance = rest.appearance || 'default';
40
- var spacing = rest.spacing || 'default';
41
- var shouldFitContainer = Boolean(rest.shouldFitContainer);
42
- var isSelected = Boolean(rest.isSelected);
43
- var isOnlySingleIcon = (0, _getIsOnlySingleIcon.default)(rest);
50
+ var isOnlySingleIcon = (0, _getIsOnlySingleIcon.default)({
51
+ children: children,
52
+ iconBefore: iconBefore,
53
+ iconAfter: iconAfter
54
+ });
44
55
  var _useState = (0, _react.useState)(false),
45
56
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
46
57
  isActive = _useState2[0],
@@ -72,13 +83,19 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
72
83
  }, [appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon]);
73
84
  return /*#__PURE__*/_react.default.createElement(_buttonBase.default, (0, _extends2.default)({}, rest, {
74
85
  ref: ref,
75
- buttonCss: buttonCss
86
+ appearance: appearance,
87
+ buttonCss: buttonCss,
88
+ children: children
76
89
  // Due to how click events are set, we need to set active styles
77
90
  // manually in Firefox and wrap onMouseDown/onMouseUp
78
91
  ,
79
92
  "data-firefox-is-active": isActive ? true : undefined,
93
+ iconAfter: iconAfter,
94
+ iconBefore: iconBefore,
95
+ isSelected: isSelected,
80
96
  onMouseDown: onMouseDown,
81
- onMouseUp: onMouseUp
97
+ onMouseUp: onMouseUp,
98
+ spacing: spacing
82
99
  }));
83
100
  }));
84
101
 
package/dist/cjs/shared/button-base.js CHANGED
@@ -19,7 +19,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
19
  var _colors = require("@atlaskit/theme/colors");
20
20
  var _blockEvents = _interopRequireDefault(require("./block-events"));
21
21
  var _css = require("./css");
22
- var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "interactionName", "analyticsContext"];
22
+ var _excluded = ["analyticsContext", "appearance", "autoFocus", "buttonCss", "children", "className", "href", "component", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onBlur", "onClick", "onFocus", "onMouseDown", "overlay", "shouldFitContainer", "spacing", "tabIndex", "type", "testId"];
23
23
  /** @jsx jsx */
24
24
  // eslint-disable-next-line no-duplicate-imports
25
25
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -34,38 +34,39 @@ var noPointerEventsOnChildrenCss = {
34
34
  }
35
35
  };
36
36
  var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props, ref) {
37
- var _props$appearance = props.appearance,
37
+ var analyticsContext = props.analyticsContext,
38
+ _props$appearance = props.appearance,
38
39
  appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
39
- buttonCss = props.buttonCss,
40
- _props$spacing = props.spacing,
41
- spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
42
40
  _props$autoFocus = props.autoFocus,
43
41
  autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
42
+ buttonCss = props.buttonCss,
43
+ children = props.children,
44
+ className = props.className,
45
+ href = props.href,
46
+ _props$component = props.component,
47
+ Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
48
+ iconAfter = props.iconAfter,
49
+ iconBefore = props.iconBefore,
50
+ interactionName = props.interactionName,
44
51
  _props$isDisabled = props.isDisabled,
45
52
  isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
46
- _props$shouldFitConta = props.shouldFitContainer,
47
- shouldFitContainer = _props$shouldFitConta === void 0 ? false : _props$shouldFitConta,
48
53
  _props$isSelected = props.isSelected,
49
54
  isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
50
- iconBefore = props.iconBefore,
51
- iconAfter = props.iconAfter,
52
- children = props.children,
53
- className = props.className,
54
- href = props.href,
55
+ onBlur = props.onBlur,
56
+ _props$onClick = props.onClick,
57
+ providedOnClick = _props$onClick === void 0 ? _noop.default : _props$onClick,
58
+ onFocus = props.onFocus,
59
+ _props$onMouseDown = props.onMouseDown,
60
+ providedOnMouseDown = _props$onMouseDown === void 0 ? _noop.default : _props$onMouseDown,
55
61
  overlay = props.overlay,
62
+ shouldFitContainer = props.shouldFitContainer,
63
+ _props$spacing = props.spacing,
64
+ spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
56
65
  _props$tabIndex = props.tabIndex,
57
66
  tabIndex = _props$tabIndex === void 0 ? !props.component && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.clove-sprint-a11y-button_5rz5j') ? undefined : 0 : _props$tabIndex,
58
67
  _props$type = props.type,
59
68
  type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
60
- _props$onMouseDown = props.onMouseDown,
61
- providedOnMouseDown = _props$onMouseDown === void 0 ? _noop.default : _props$onMouseDown,
62
- _props$onClick = props.onClick,
63
- providedOnClick = _props$onClick === void 0 ? _noop.default : _props$onClick,
64
- _props$component = props.component,
65
- Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
66
69
  testId = props.testId,
67
- interactionName = props.interactionName,
68
- analyticsContext = props.analyticsContext,
69
70
  rest = (0, _objectWithoutProperties2.default)(props, _excluded);
70
71
  var ourRef = (0, _react.useRef)();
71
72
  var setRef = (0, _react.useCallback)(function (node) {
@@ -78,6 +79,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
78
79
  return;
79
80
  }
80
81
 
82
+ // We can write to ref's `current` property, but Typescript does not like it.
81
83
  // @ts-ignore
82
84
  ref.current = node;
83
85
  }, [ourRef, ref]);
@@ -94,7 +96,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
94
96
  action: 'clicked',
95
97
  componentName: 'button',
96
98
  packageName: "@atlaskit/button",
97
- packageVersion: "16.8.3",
99
+ packageVersion: "16.8.5",
98
100
  analyticsData: analyticsContext
99
101
  });
100
102
 
@@ -133,23 +135,25 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
133
135
  };
134
136
  }
135
137
  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
136
- css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
137
- className: className,
138
138
  ref: setRef,
139
- onClick: onClick,
140
- onMouseDown: onMouseDown,
141
- disabled: isDisabled,
142
- href: isInteractive ? href : undefined
139
+ className: className,
140
+ css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss]
143
141
  // using undefined so that the property doesn't exist when false
144
142
  ,
145
143
  "data-has-overlay": hasOverlay ? true : undefined,
146
144
  "data-testid": testId,
147
- type: type
145
+ disabled: isDisabled,
146
+ href: isInteractive ? href : undefined,
147
+ onBlur: onBlur,
148
+ onClick: onClick,
149
+ onFocus: onFocus,
150
+ onMouseDown: onMouseDown
148
151
  // Adding a tab index so element is always focusable, even when not a <button> or <a>
149
152
  // Disabling focus via keyboard navigation when disabled
150
153
  // as this is standard button behaviour
151
154
  ,
152
- tabIndex: isDisabled ? -1 : tabIndex
155
+ tabIndex: isDisabled ? -1 : tabIndex,
156
+ type: type
153
157
  }, (0, _blockEvents.default)({
154
158
  isInteractive: isInteractive
155
159
  })), iconBefore ? (0, _react2.jsx)("span", {
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "16.8.3",
3
+ "version": "16.8.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/button.js CHANGED
@@ -16,18 +16,25 @@ const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowe
16
16
  * - [Usage](https://atlassian.design/components/button/usage)
17
17
  */
18
18
  const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
19
+ appearance = 'default',
20
+ children,
21
+ iconBefore,
22
+ iconAfter,
23
+ isSelected = false,
19
24
  onMouseDown: providedOnMouseDown = noop,
20
25
  onMouseUp: providedOnMouseUp = noop,
26
+ shouldFitContainer = false,
27
+ spacing = 'default',
21
28
  ...rest
22
29
  }, ref) {
23
30
  const {
24
31
  mode
25
32
  } = useGlobalTheme();
26
- const appearance = rest.appearance || 'default';
27
- const spacing = rest.spacing || 'default';
28
- const shouldFitContainer = Boolean(rest.shouldFitContainer);
29
- const isSelected = Boolean(rest.isSelected);
30
- const isOnlySingleIcon = getIsOnlySingleIcon(rest);
33
+ const isOnlySingleIcon = getIsOnlySingleIcon({
34
+ children,
35
+ iconBefore,
36
+ iconAfter
37
+ });
31
38
  const [isActive, setIsActive] = useState(false);
32
39
 
33
40
  // Wrap onMouseDown / onMouseUp to manually trigger active state
@@ -54,13 +61,19 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
54
61
  }), [appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon]);
55
62
  return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, rest, {
56
63
  ref: ref,
57
- buttonCss: buttonCss
64
+ appearance: appearance,
65
+ buttonCss: buttonCss,
66
+ children: children
58
67
  // Due to how click events are set, we need to set active styles
59
68
  // manually in Firefox and wrap onMouseDown/onMouseUp
60
69
  ,
61
70
  "data-firefox-is-active": isActive ? true : undefined,
71
+ iconAfter: iconAfter,
72
+ iconBefore: iconBefore,
73
+ isSelected: isSelected,
62
74
  onMouseDown: onMouseDown,
63
- onMouseUp: onMouseUp
75
+ onMouseUp: onMouseUp,
76
+ spacing: spacing
64
77
  }));
65
78
  }));
66
79
 
package/dist/es2019/shared/button-base.js CHANGED
@@ -24,33 +24,36 @@ const noPointerEventsOnChildrenCss = {
24
24
  };
25
25
  export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
26
26
  const {
27
+ // I don't think analytics should be in button, but for now it is
28
+ analyticsContext,
27
29
  appearance = 'default',
28
- buttonCss,
29
- spacing = 'default',
30
30
  autoFocus = false,
31
- isDisabled = false,
32
- shouldFitContainer = false,
33
- isSelected = false,
34
- iconBefore,
35
- iconAfter,
31
+ buttonCss,
36
32
  children,
37
33
  className,
38
34
  href,
35
+ // use the provided component prop,
36
+ // else default to anchor if there is a href, and button if there is no href
37
+ component: Component = href ? 'a' : 'button',
38
+ iconAfter,
39
+ iconBefore,
40
+ interactionName,
41
+ isDisabled = false,
42
+ isSelected = false,
43
+ onBlur,
44
+ onClick: providedOnClick = noop,
45
+ onFocus,
46
+ onMouseDown: providedOnMouseDown = noop,
39
47
  overlay,
48
+ // Pulling out so it doesn't spread on rendered component
49
+ shouldFitContainer,
50
+ spacing = 'default',
40
51
  // Don't set unnecessary tabIndex for focus if using standard <button> or <a>
41
52
  // html elements. Set to `0` for custom components to ensure other elements can
42
53
  // be focused (although the custom component could be a <button> or <a>...)
43
54
  tabIndex = !props.component && getBooleanFF('platform.design-system-team.clove-sprint-a11y-button_5rz5j') ? undefined : 0,
44
55
  type = !href ? 'button' : undefined,
45
- onMouseDown: providedOnMouseDown = noop,
46
- onClick: providedOnClick = noop,
47
- // use the provided component prop,
48
- // else default to anchor if there is a href, and button if there is no href
49
- component: Component = href ? 'a' : 'button',
50
56
  testId,
51
- interactionName,
52
- // I don't think this should be in button, but for now it is
53
- analyticsContext,
54
57
  ...rest
55
58
  } = props;
56
59
  const ourRef = useRef();
@@ -64,6 +67,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
64
67
  return;
65
68
  }
66
69
 
70
+ // We can write to ref's `current` property, but Typescript does not like it.
67
71
  // @ts-ignore
68
72
  ref.current = node;
69
73
  }, [ourRef, ref]);
@@ -80,7 +84,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
80
84
  action: 'clicked',
81
85
  componentName: 'button',
82
86
  packageName: "@atlaskit/button",
83
- packageVersion: "16.8.3",
87
+ packageVersion: "16.8.5",
84
88
  analyticsData: analyticsContext
85
89
  });
86
90
 
@@ -119,23 +123,25 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
119
123
  };
120
124
  }
121
125
  return jsx(FocusRing, null, jsx(Component, _extends({}, rest, {
122
- css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
123
- className: className,
124
126
  ref: setRef,
125
- onClick: onClick,
126
- onMouseDown: onMouseDown,
127
- disabled: isDisabled,
128
- href: isInteractive ? href : undefined
127
+ className: className,
128
+ css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss]
129
129
  // using undefined so that the property doesn't exist when false
130
130
  ,
131
131
  "data-has-overlay": hasOverlay ? true : undefined,
132
132
  "data-testid": testId,
133
- type: type
133
+ disabled: isDisabled,
134
+ href: isInteractive ? href : undefined,
135
+ onBlur: onBlur,
136
+ onClick: onClick,
137
+ onFocus: onFocus,
138
+ onMouseDown: onMouseDown
134
139
  // Adding a tab index so element is always focusable, even when not a <button> or <a>
135
140
  // Disabling focus via keyboard navigation when disabled
136
141
  // as this is standard button behaviour
137
142
  ,
138
- tabIndex: isDisabled ? -1 : tabIndex
143
+ tabIndex: isDisabled ? -1 : tabIndex,
144
+ type: type
139
145
  }, blockEvents({
140
146
  isInteractive
141
147
  })), iconBefore ? jsx("span", {
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "16.8.3",
3
+ "version": "16.8.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/button.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["onMouseDown", "onMouseUp"];
4
+ var _excluded = ["appearance", "children", "iconBefore", "iconAfter", "isSelected", "onMouseDown", "onMouseUp", "shouldFitContainer", "spacing"];
5
5
  import React, { useCallback, useMemo, useState } from 'react';
6
6
  import noop from '@atlaskit/ds-lib/noop';
7
7
  import { useGlobalTheme } from '@atlaskit/theme/components';
@@ -19,18 +19,29 @@ var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerC
19
19
  * - [Usage](https://atlassian.design/components/button/usage)
20
20
  */
21
21
  var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
22
- var _ref$onMouseDown = _ref.onMouseDown,
22
+ var _ref$appearance = _ref.appearance,
23
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
24
+ children = _ref.children,
25
+ iconBefore = _ref.iconBefore,
26
+ iconAfter = _ref.iconAfter,
27
+ _ref$isSelected = _ref.isSelected,
28
+ isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
29
+ _ref$onMouseDown = _ref.onMouseDown,
23
30
  providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
24
31
  _ref$onMouseUp = _ref.onMouseUp,
25
32
  providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
33
+ _ref$shouldFitContain = _ref.shouldFitContainer,
34
+ shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
35
+ _ref$spacing = _ref.spacing,
36
+ spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
26
37
  rest = _objectWithoutProperties(_ref, _excluded);
27
38
  var _useGlobalTheme = useGlobalTheme(),
28
39
  mode = _useGlobalTheme.mode;
29
- var appearance = rest.appearance || 'default';
30
- var spacing = rest.spacing || 'default';
31
- var shouldFitContainer = Boolean(rest.shouldFitContainer);
32
- var isSelected = Boolean(rest.isSelected);
33
- var isOnlySingleIcon = getIsOnlySingleIcon(rest);
40
+ var isOnlySingleIcon = getIsOnlySingleIcon({
41
+ children: children,
42
+ iconBefore: iconBefore,
43
+ iconAfter: iconAfter
44
+ });
34
45
  var _useState = useState(false),
35
46
  _useState2 = _slicedToArray(_useState, 2),
36
47
  isActive = _useState2[0],
@@ -62,13 +73,19 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
62
73
  }, [appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon]);
63
74
  return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, rest, {
64
75
  ref: ref,
65
- buttonCss: buttonCss
76
+ appearance: appearance,
77
+ buttonCss: buttonCss,
78
+ children: children
66
79
  // Due to how click events are set, we need to set active styles
67
80
  // manually in Firefox and wrap onMouseDown/onMouseUp
68
81
  ,
69
82
  "data-firefox-is-active": isActive ? true : undefined,
83
+ iconAfter: iconAfter,
84
+ iconBefore: iconBefore,
85
+ isSelected: isSelected,
70
86
  onMouseDown: onMouseDown,
71
- onMouseUp: onMouseUp
87
+ onMouseUp: onMouseUp,
88
+ spacing: spacing
72
89
  }));
73
90
  }));
74
91
 
package/dist/esm/shared/button-base.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "interactionName", "analyticsContext"];
3
+ var _excluded = ["analyticsContext", "appearance", "autoFocus", "buttonCss", "children", "className", "href", "component", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onBlur", "onClick", "onFocus", "onMouseDown", "overlay", "shouldFitContainer", "spacing", "tabIndex", "type", "testId"];
4
4
  /** @jsx jsx */
5
5
  import React, { useCallback, useContext, useEffect, useRef } from 'react';
6
6
  import { css, jsx } from '@emotion/react';
@@ -25,38 +25,39 @@ var noPointerEventsOnChildrenCss = {
25
25
  }
26
26
  };
27
27
  export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
28
- var _props$appearance = props.appearance,
28
+ var analyticsContext = props.analyticsContext,
29
+ _props$appearance = props.appearance,
29
30
  appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
30
- buttonCss = props.buttonCss,
31
- _props$spacing = props.spacing,
32
- spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
33
31
  _props$autoFocus = props.autoFocus,
34
32
  autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
33
+ buttonCss = props.buttonCss,
34
+ children = props.children,
35
+ className = props.className,
36
+ href = props.href,
37
+ _props$component = props.component,
38
+ Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
39
+ iconAfter = props.iconAfter,
40
+ iconBefore = props.iconBefore,
41
+ interactionName = props.interactionName,
35
42
  _props$isDisabled = props.isDisabled,
36
43
  isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
37
- _props$shouldFitConta = props.shouldFitContainer,
38
- shouldFitContainer = _props$shouldFitConta === void 0 ? false : _props$shouldFitConta,
39
44
  _props$isSelected = props.isSelected,
40
45
  isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
41
- iconBefore = props.iconBefore,
42
- iconAfter = props.iconAfter,
43
- children = props.children,
44
- className = props.className,
45
- href = props.href,
46
+ onBlur = props.onBlur,
47
+ _props$onClick = props.onClick,
48
+ providedOnClick = _props$onClick === void 0 ? noop : _props$onClick,
49
+ onFocus = props.onFocus,
50
+ _props$onMouseDown = props.onMouseDown,
51
+ providedOnMouseDown = _props$onMouseDown === void 0 ? noop : _props$onMouseDown,
46
52
  overlay = props.overlay,
53
+ shouldFitContainer = props.shouldFitContainer,
54
+ _props$spacing = props.spacing,
55
+ spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
47
56
  _props$tabIndex = props.tabIndex,
48
57
  tabIndex = _props$tabIndex === void 0 ? !props.component && getBooleanFF('platform.design-system-team.clove-sprint-a11y-button_5rz5j') ? undefined : 0 : _props$tabIndex,
49
58
  _props$type = props.type,
50
59
  type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
51
- _props$onMouseDown = props.onMouseDown,
52
- providedOnMouseDown = _props$onMouseDown === void 0 ? noop : _props$onMouseDown,
53
- _props$onClick = props.onClick,
54
- providedOnClick = _props$onClick === void 0 ? noop : _props$onClick,
55
- _props$component = props.component,
56
- Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
57
60
  testId = props.testId,
58
- interactionName = props.interactionName,
59
- analyticsContext = props.analyticsContext,
60
61
  rest = _objectWithoutProperties(props, _excluded);
61
62
  var ourRef = useRef();
62
63
  var setRef = useCallback(function (node) {
@@ -69,6 +70,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
69
70
  return;
70
71
  }
71
72
 
73
+ // We can write to ref's `current` property, but Typescript does not like it.
72
74
  // @ts-ignore
73
75
  ref.current = node;
74
76
  }, [ourRef, ref]);
@@ -85,7 +87,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
85
87
  action: 'clicked',
86
88
  componentName: 'button',
87
89
  packageName: "@atlaskit/button",
88
- packageVersion: "16.8.3",
90
+ packageVersion: "16.8.5",
89
91
  analyticsData: analyticsContext
90
92
  });
91
93
 
@@ -124,23 +126,25 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
124
126
  };
125
127
  }
126
128
  return jsx(FocusRing, null, jsx(Component, _extends({}, rest, {
127
- css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
128
- className: className,
129
129
  ref: setRef,
130
- onClick: onClick,
131
- onMouseDown: onMouseDown,
132
- disabled: isDisabled,
133
- href: isInteractive ? href : undefined
130
+ className: className,
131
+ css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss]
134
132
  // using undefined so that the property doesn't exist when false
135
133
  ,
136
134
  "data-has-overlay": hasOverlay ? true : undefined,
137
135
  "data-testid": testId,
138
- type: type
136
+ disabled: isDisabled,
137
+ href: isInteractive ? href : undefined,
138
+ onBlur: onBlur,
139
+ onClick: onClick,
140
+ onFocus: onFocus,
141
+ onMouseDown: onMouseDown
139
142
  // Adding a tab index so element is always focusable, even when not a <button> or <a>
140
143
  // Disabling focus via keyboard navigation when disabled
141
144
  // as this is standard button behaviour
142
145
  ,
143
- tabIndex: isDisabled ? -1 : tabIndex
146
+ tabIndex: isDisabled ? -1 : tabIndex,
147
+ type: type
144
148
  }, blockEvents({
145
149
  isInteractive: isInteractive
146
150
  })), iconBefore ? jsx("span", {
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "16.8.3",
3
+ "version": "16.8.5",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "16.8.3",
3
+ "version": "16.8.5",
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/"
@@ -23,7 +23,7 @@
23
23
  "sideEffects": false,
24
24
  "atlaskit:src": "src/index.tsx",
25
25
  "atlassian": {
26
- "team": "Design System Maker Experience",
26
+ "team": "Design System Team",
27
27
  "releaseModel": "continuous",
28
28
  "website": {
29
29
  "name": "Button",