@atlaskit/button 17.22.2 → 17.23.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/button
 
+## 17.23.0
+
+### Minor Changes
+
+- [#112945](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112945)
+  [`d7af9e23536c0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7af9e23536c0) -
+  New button prevents unintended spread props being passed to children. The following props will now
+  be ignored:
+
+  - css
+  - style
+  - as
+  - className
+
+  Note: These props were already excluded via types. The API has not changed.
+
 ## 17.22.2
 
 ### Patch Changes

package/dist/cjs/new-button/variants/default/button.js

@@ -8,9 +8,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 /**
  * __Button__
  *
@@ -51,7 +53,14 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = (0, _useDefaultButton.default)({
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,

package/dist/cjs/new-button/variants/default/link.js

@@ -9,9 +9,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 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); }
 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; }
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
@@ -43,12 +45,19 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     testId = _ref.testId,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = (0, _useDefaultButton.default)({
-    ariaLabel: ariaLabel,
-    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'link',
     children: children,

package/dist/cjs/new-button/variants/icon/button.js

@@ -8,10 +8,12 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 /**
  * __Icon Button__
  *
@@ -53,7 +55,15 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
+
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
    * buttons. It's currently duplicated and mostly the same.
@@ -105,9 +115,8 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
     }, function (triggerProps) {
-      return /*#__PURE__*/_react.default.createElement(_pressable.default
-      // Top level props
-      , (0, _extends2.default)({}, rest, {
+      return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, rest, {
+        // Top level props
         "aria-labelledby": baseProps['aria-labelledby'],
         type: type,
         testId: testId,

package/dist/cjs/new-button/variants/icon/link.js

@@ -9,10 +9,12 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 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); }
 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; }
 var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
@@ -45,7 +47,14 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     testId = _ref.testId,
     tooltip = _ref.tooltip,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = (0, _useIconButton.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,

package/dist/cjs/old-button/shared/button-base.js

@@ -133,7 +133,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.22.2",
+    packageVersion: "17.23.0",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/new-button/variants/default/button.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
 /**
@@ -41,8 +42,17 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   type = 'button',
   UNSAFE_iconAfter_size,
   UNSAFE_iconBefore_size,
-  ...rest
+  ...unsafeRest
 }, ref) {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   const baseProps = useDefaultButton({
     ariaLabel,
     ariaLabelledBy,

package/dist/es2019/new-button/variants/default/link.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import useDefaultButton from './use-default-button';
 const LinkButtonBase = ({
@@ -31,13 +32,22 @@ const LinkButtonBase = ({
   testId,
   UNSAFE_iconAfter_size,
   UNSAFE_iconBefore_size,
-  ...rest
+  ...unsafeRest
 }, ref) => {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   const baseProps = useDefaultButton({
-    ariaLabel,
-    ariaLabelledBy,
     analyticsContext,
     appearance,
+    ariaLabel,
+    ariaLabelledBy,
     autoFocus,
     buttonType: 'link',
     children,

package/dist/es2019/new-button/variants/icon/button.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -43,8 +44,18 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   tooltip,
   type = 'button',
   UNSAFE_size,
-  ...rest
+  ...unsafeRest
 }, ref) {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
+
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
    * buttons. It's currently duplicated and mostly the same.
@@ -95,9 +106,8 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
       hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
-    }, triggerProps => /*#__PURE__*/React.createElement(Pressable
-    // Top level props
-    , _extends({}, rest, {
+    }, triggerProps => /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+      // Top level props
       "aria-labelledby": baseProps['aria-labelledby'],
       type: type,
       testId: testId,

package/dist/es2019/new-button/variants/icon/link.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -33,8 +34,17 @@ const LinkIconButtonBase = ({
   testId,
   tooltip,
   UNSAFE_size,
-  ...rest
+  ...unsafeRest
 }, ref) => {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   const baseProps = useIconButton({
     analyticsContext,
     appearance,

package/dist/es2019/old-button/shared/button-base.js

@@ -119,7 +119,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.22.2",
+    packageVersion: "17.23.0",
     analyticsData: analyticsContext
   });
 

package/dist/esm/new-button/variants/default/button.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
 /**
@@ -44,7 +46,14 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = useDefaultButton({
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,

package/dist/esm/new-button/variants/default/link.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import useDefaultButton from './use-default-button';
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
@@ -33,12 +35,19 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     testId = _ref.testId,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = useDefaultButton({
-    ariaLabel: ariaLabel,
-    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'link',
     children: children,

package/dist/esm/new-button/variants/icon/button.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -46,7 +48,15 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
+
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
    * buttons. It's currently duplicated and mostly the same.
@@ -98,9 +108,8 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
     }, function (triggerProps) {
-      return /*#__PURE__*/React.createElement(Pressable
-      // Top level props
-      , _extends({}, rest, {
+      return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+        // Top level props
         "aria-labelledby": baseProps['aria-labelledby'],
         type: type,
         testId: testId,

package/dist/esm/new-button/variants/icon/link.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -35,7 +37,14 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     testId = _ref.testId,
     tooltip = _ref.tooltip,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = useIconButton({
     analyticsContext: analyticsContext,
     appearance: appearance,

package/dist/esm/old-button/shared/button-base.js

@@ -125,7 +125,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.22.2",
+    packageVersion: "17.23.0",
     analyticsData: analyticsContext
   });
 

package/dist/types/new-button/variants/default/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

package/dist/types/new-button/variants/icon/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

package/dist/types-ts4.5/new-button/variants/default/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "17.22.2",
+	"version": "17.23.0",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -204,6 +204,9 @@
 		"platform.design-system-team.component-visual-refresh_t8zbo": {
 			"type": "boolean"
 		},
+		"platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw": {
+			"type": "boolean"
+		},
 		"platform.design-system-team.button-render-prop-fix_lyo55": {
 			"type": "boolean"
 		}