@atlaskit/editor-plugin-find-replace 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-find-replace
 
+## 1.0.2
+
+### Patch Changes
+
+- [#72125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72125) [`9b19a14df053`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b19a14df053) - Migrated buttons in find and replace popup to new atlaskit buttons with a feature flag `platform.design-system-team.editor-new-button_jjjdo`.
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/cjs/ui/Find.js

@@ -237,6 +237,9 @@ var Find = /*#__PURE__*/function (_React$Component) {
           title: this.matchCase,
           appearance: "default",
           icon: this.matchCaseIcon,
+          newIcon: _keyboard.default,
+          iconLabel: this.matchCase,
+          iconSize: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? 'small' : undefined,
           onClick: this.handleMatchCaseClick,
           isPressed: shouldMatchCase
         })));
@@ -286,23 +289,32 @@ var Find = /*#__PURE__*/function (_React$Component) {
         }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
           title: this.matchCase,
           icon: this.matchCaseIcon,
+          newIcon: _keyboard.default,
+          iconLabel: this.matchCase,
+          iconSize: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? 'small' : undefined,
           onClick: this.handleMatchCaseClick,
           isPressed: shouldMatchCase
         }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
           title: this.findNext,
           icon: this.findNextIcon,
+          newIcon: _chevronDown.default,
+          iconLabel: this.findNext,
           keymapDescription: 'Enter',
           onClick: this.handleFindNextClick,
           disabled: count.total <= 1
         }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
           title: this.findPrevious,
           icon: this.findPrevIcon,
+          newIcon: _chevronUp.default,
+          iconLabel: this.findPrevious,
           keymapDescription: 'Shift Enter',
           onClick: this.handleFindPrevClick,
           disabled: count.total <= 1
         }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
           title: this.closeFindReplaceDialog,
           icon: this.closeIcon,
+          newIcon: _close.default,
+          iconLabel: this.closeFindReplaceDialog,
           keymapDescription: 'Escape',
           onClick: this.clearSearch
         }));

package/dist/cjs/ui/FindReplaceTooltipButton.js

@@ -14,8 +14,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _new = require("@atlaskit/button/new");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -44,6 +46,8 @@ var FindReplaceTooltipButton = exports.FindReplaceTooltipButton = /*#__PURE__*/f
       var _this$props = this.props,
         title = _this$props.title,
         icon = _this$props.icon,
+        newIcon = _this$props.newIcon,
+        iconSize = _this$props.iconSize,
         keymapDescription = _this$props.keymapDescription,
         disabled = _this$props.disabled,
         isPressed = _this$props.isPressed,
@@ -58,7 +62,18 @@ var FindReplaceTooltipButton = exports.FindReplaceTooltipButton = /*#__PURE__*/f
         }),
         hideTooltipOnClick: true,
         position: 'top'
-      }, /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.editor-new-button_jjjdo') ? /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
+        id: "afterInputSection",
+        label: title,
+        appearance: appearance,
+        testId: title,
+        ref: this.buttonRef,
+        icon: newIcon,
+        UNSAFE_size: iconSize,
+        isDisabled: disabled,
+        onClick: this.handleClick,
+        isSelected: isPressed
+      }, pressedProps)) : /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
         id: "afterInputSection",
         label: title,
         appearance: appearance,

package/dist/cjs/ui/Replace.js

@@ -16,6 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -23,6 +24,7 @@ var _form = require("@atlaskit/form");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
 var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _FindReplaceTooltipButton = require("./FindReplaceTooltipButton");
 var _styles = require("./styles");
@@ -255,6 +257,8 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
         title: this.findNext,
         icon: this.findNextIcon,
+        newIcon: _chevronDown.default,
+        iconLabel: this.findNext,
         keymapDescription: 'Enter',
         onClick: this.handleFindNextClick,
         disabled: count.total <= 1
@@ -263,10 +267,29 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
         title: this.findPrevious,
         icon: this.findPrevIcon,
+        newIcon: _chevronUp.default,
+        iconLabel: this.findPrevious,
         keymapDescription: 'Shift Enter',
         onClick: this.handleFindPrevClick,
         disabled: count.total <= 1
-      })), (0, _react2.jsx)(_standardButton.default, {
+      })), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.editor-new-button_jjjdo') ? (0, _react2.jsx)(_primitives.Inline, {
+        space: "space.075",
+        xcss: (0, _primitives.xcss)({
+          paddingInlineStart: 'space.050',
+          paddingInlineEnd: 'space.025'
+        })
+      }, (0, _react2.jsx)(_new.default, {
+        testId: this.replace,
+        id: "replace-button",
+        onClick: this.handleReplaceClick,
+        isDisabled: !canReplace
+      }, this.replace), (0, _react2.jsx)(_new.default, {
+        appearance: "primary",
+        testId: this.replaceAll,
+        id: "replaceAll-button",
+        onClick: this.handleReplaceAllClick,
+        isDisabled: !canReplace
+      }, this.replaceAll)) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_standardButton.default, {
         css: _styles.replaceSectionButtonStyles,
         testId: this.replace,
         id: "replace-button",
@@ -279,9 +302,13 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         id: "replaceAll-button",
         onClick: this.handleReplaceAllClick,
         isDisabled: !canReplace
-      }, this.replaceAll)), (0, _react2.jsx)("div", {
+      }, this.replaceAll))), (0, _react2.jsx)("div", {
         css: _styles.orderZeroStyles
-      }, (0, _react2.jsx)(_standardButton.default, {
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.editor-new-button_jjjdo') ? (0, _react2.jsx)(_new.default, {
+        appearance: "subtle",
+        testId: this.closeFindReplaceDialog,
+        onClick: this.clearSearch
+      }, this.closeFindReplaceDialog) : (0, _react2.jsx)(_standardButton.default, {
         css: _styles.replaceSectionButtonStyles,
         appearance: "subtle",
         testId: this.closeFindReplaceDialog,
@@ -299,7 +326,17 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         onKeyDown: this.handleReplaceKeyDown,
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd
-      }), (0, _react2.jsx)(_standardButton.default, {
+      }), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.editor-new-button_jjjdo') ? (0, _react2.jsx)(_primitives.Inline, {
+        space: "space.050"
+      }, (0, _react2.jsx)(_new.default, {
+        testId: this.replace,
+        onClick: this.handleReplaceClick,
+        isDisabled: !canReplace
+      }, this.replace), (0, _react2.jsx)(_new.default, {
+        testId: this.replaceAll,
+        onClick: this.handleReplaceAllClick,
+        isDisabled: !canReplace
+      }, this.replaceAll)) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_standardButton.default, {
         css: _styles.replaceSectionButtonStyles,
         testId: this.replace,
         onClick: this.handleReplaceClick,
@@ -309,7 +346,7 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         testId: this.replaceAll,
         onClick: this.handleReplaceAllClick,
         isDisabled: !canReplace
-      }, this.replaceAll));
+      }, this.replaceAll)));
     }
   }]);
   return Replace;

package/dist/cjs/ui/styles.js

@@ -65,7 +65,8 @@ var countWrapperStyles = exports.countWrapperStyles = (0, _react.css)({
   alignItems: 'center'
 });
 var orderZeroStyles = exports.orderZeroStyles = (0, _react.css)({
-  order: '0'
+  order: '0',
+  marginInline: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.editor-new-button_jjjdo') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)") : 0
 });
 var orderOneStyles = exports.orderOneStyles = (0, _react.css)({
   order: '1'

package/dist/es2019/ui/Find.js

@@ -216,6 +216,9 @@ class Find extends React.Component {
         title: this.matchCase,
         appearance: "default",
         icon: this.matchCaseIcon,
+        newIcon: MatchCaseIcon,
+        iconLabel: this.matchCase,
+        iconSize: getBooleanFF('platform.editor.a11y-find-replace') ? 'small' : undefined,
         onClick: this.handleMatchCaseClick,
         isPressed: shouldMatchCase
       })));
@@ -265,23 +268,32 @@ class Find extends React.Component {
       }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && jsx(FindReplaceTooltipButton, {
         title: this.matchCase,
         icon: this.matchCaseIcon,
+        newIcon: MatchCaseIcon,
+        iconLabel: this.matchCase,
+        iconSize: getBooleanFF('platform.editor.a11y-find-replace') ? 'small' : undefined,
         onClick: this.handleMatchCaseClick,
         isPressed: shouldMatchCase
       }), jsx(FindReplaceTooltipButton, {
         title: this.findNext,
         icon: this.findNextIcon,
+        newIcon: ChevronDownIcon,
+        iconLabel: this.findNext,
         keymapDescription: 'Enter',
         onClick: this.handleFindNextClick,
         disabled: count.total <= 1
       }), jsx(FindReplaceTooltipButton, {
         title: this.findPrevious,
         icon: this.findPrevIcon,
+        newIcon: ChevronUpIcon,
+        iconLabel: this.findPrevious,
         keymapDescription: 'Shift Enter',
         onClick: this.handleFindPrevClick,
         disabled: count.total <= 1
       }), jsx(FindReplaceTooltipButton, {
         title: this.closeFindReplaceDialog,
         icon: this.closeIcon,
+        newIcon: EditorCloseIcon,
+        iconLabel: this.closeFindReplaceDialog,
         keymapDescription: 'Escape',
         onClick: this.clearSearch
       }));

package/dist/es2019/ui/FindReplaceTooltipButton.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import Button from '@atlaskit/button/standard-button';
+import { IconButton } from '@atlaskit/button/new';
+import LegacyButton from '@atlaskit/button/standard-button';
 import { findKeymapByDescription, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class FindReplaceTooltipButton extends React.PureComponent {
@@ -17,6 +19,8 @@ export class FindReplaceTooltipButton extends React.PureComponent {
     const {
       title,
       icon,
+      newIcon,
+      iconSize,
       keymapDescription,
       disabled,
       isPressed,
@@ -34,7 +38,18 @@ export class FindReplaceTooltipButton extends React.PureComponent {
       }),
       hideTooltipOnClick: true,
       position: 'top'
-    }, /*#__PURE__*/React.createElement(Button, _extends({
+    }, getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? /*#__PURE__*/React.createElement(IconButton, _extends({
+      id: "afterInputSection",
+      label: title,
+      appearance: appearance,
+      testId: title,
+      ref: this.buttonRef,
+      icon: newIcon,
+      UNSAFE_size: iconSize,
+      isDisabled: disabled,
+      onClick: this.handleClick,
+      isSelected: isPressed
+    }, pressedProps)) : /*#__PURE__*/React.createElement(LegacyButton, _extends({
       id: "afterInputSection",
       label: title,
       appearance: appearance,

package/dist/es2019/ui/Replace.js

@@ -4,13 +4,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
+import LegacyButton from '@atlaskit/button/standard-button';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
 import { Label, ValidMessage } from '@atlaskit/form';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Inline, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
 import { NextPreviousItem, orderOneStyles, orderZeroStyles, replaceSectionButtonStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './styles';
@@ -231,6 +233,8 @@ class Replace extends React.PureComponent {
     }, jsx(FindReplaceTooltipButton, {
       title: this.findNext,
       icon: this.findNextIcon,
+      newIcon: ChevronDownIcon,
+      iconLabel: this.findNext,
       keymapDescription: 'Enter',
       onClick: this.handleFindNextClick,
       disabled: count.total <= 1
@@ -239,25 +243,48 @@ class Replace extends React.PureComponent {
     }, jsx(FindReplaceTooltipButton, {
       title: this.findPrevious,
       icon: this.findPrevIcon,
+      newIcon: ChevronUpIcon,
+      iconLabel: this.findPrevious,
       keymapDescription: 'Shift Enter',
       onClick: this.handleFindPrevClick,
       disabled: count.total <= 1
-    })), jsx(Button, {
-      css: replaceSectionButtonStyles,
+    })), getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Inline, {
+      space: "space.075",
+      xcss: xcss({
+        paddingInlineStart: 'space.050',
+        paddingInlineEnd: 'space.025'
+      })
+    }, jsx(Button, {
       testId: this.replace,
       id: "replace-button",
       onClick: this.handleReplaceClick,
       isDisabled: !canReplace
     }, this.replace), jsx(Button, {
+      appearance: "primary",
+      testId: this.replaceAll,
+      id: "replaceAll-button",
+      onClick: this.handleReplaceAllClick,
+      isDisabled: !canReplace
+    }, this.replaceAll)) : jsx(Fragment, null, jsx(LegacyButton, {
+      css: replaceSectionButtonStyles,
+      testId: this.replace,
+      id: "replace-button",
+      onClick: this.handleReplaceClick,
+      isDisabled: !canReplace
+    }, this.replace), jsx(LegacyButton, {
       css: replaceSectionButtonStyles,
       appearance: "primary",
       testId: this.replaceAll,
       id: "replaceAll-button",
       onClick: this.handleReplaceAllClick,
       isDisabled: !canReplace
-    }, this.replaceAll)), jsx("div", {
+    }, this.replaceAll))), jsx("div", {
       css: orderZeroStyles
-    }, jsx(Button, {
+    }, getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Button, {
+      appearance: "subtle",
+      testId: this.closeFindReplaceDialog,
+      onClick: this.clearSearch
+    }, this.closeFindReplaceDialog) : jsx(LegacyButton, {
       css: replaceSectionButtonStyles,
       appearance: "subtle",
       testId: this.closeFindReplaceDialog,
@@ -275,17 +302,27 @@ class Replace extends React.PureComponent {
       onKeyDown: this.handleReplaceKeyDown,
       onCompositionStart: this.handleCompositionStart,
       onCompositionEnd: this.handleCompositionEnd
-    }), jsx(Button, {
-      css: replaceSectionButtonStyles,
+    }), getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Inline, {
+      space: "space.050"
+    }, jsx(Button, {
       testId: this.replace,
       onClick: this.handleReplaceClick,
       isDisabled: !canReplace
     }, this.replace), jsx(Button, {
+      testId: this.replaceAll,
+      onClick: this.handleReplaceAllClick,
+      isDisabled: !canReplace
+    }, this.replaceAll)) : jsx(Fragment, null, jsx(LegacyButton, {
+      css: replaceSectionButtonStyles,
+      testId: this.replace,
+      onClick: this.handleReplaceClick,
+      isDisabled: !canReplace
+    }, this.replace), jsx(LegacyButton, {
       css: replaceSectionButtonStyles,
       testId: this.replaceAll,
       onClick: this.handleReplaceAllClick,
       isDisabled: !canReplace
-    }, this.replaceAll));
+    }, this.replaceAll)));
   }
 }
 export default injectIntl(Replace);

package/dist/es2019/ui/styles.js

@@ -107,7 +107,8 @@ export const countWrapperStyles = css({
   alignItems: 'center'
 });
 export const orderZeroStyles = css({
-  order: '0'
+  order: '0',
+  marginInline: getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"}` : 0
 });
 export const orderOneStyles = css({
   order: '1'

package/dist/esm/ui/Find.js

@@ -232,6 +232,9 @@ var Find = /*#__PURE__*/function (_React$Component) {
           title: this.matchCase,
           appearance: "default",
           icon: this.matchCaseIcon,
+          newIcon: MatchCaseIcon,
+          iconLabel: this.matchCase,
+          iconSize: getBooleanFF('platform.editor.a11y-find-replace') ? 'small' : undefined,
           onClick: this.handleMatchCaseClick,
           isPressed: shouldMatchCase
         })));
@@ -281,23 +284,32 @@ var Find = /*#__PURE__*/function (_React$Component) {
         }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && jsx(FindReplaceTooltipButton, {
           title: this.matchCase,
           icon: this.matchCaseIcon,
+          newIcon: MatchCaseIcon,
+          iconLabel: this.matchCase,
+          iconSize: getBooleanFF('platform.editor.a11y-find-replace') ? 'small' : undefined,
           onClick: this.handleMatchCaseClick,
           isPressed: shouldMatchCase
         }), jsx(FindReplaceTooltipButton, {
           title: this.findNext,
           icon: this.findNextIcon,
+          newIcon: ChevronDownIcon,
+          iconLabel: this.findNext,
           keymapDescription: 'Enter',
           onClick: this.handleFindNextClick,
           disabled: count.total <= 1
         }), jsx(FindReplaceTooltipButton, {
           title: this.findPrevious,
           icon: this.findPrevIcon,
+          newIcon: ChevronUpIcon,
+          iconLabel: this.findPrevious,
           keymapDescription: 'Shift Enter',
           onClick: this.handleFindPrevClick,
           disabled: count.total <= 1
         }), jsx(FindReplaceTooltipButton, {
           title: this.closeFindReplaceDialog,
           icon: this.closeIcon,
+          newIcon: EditorCloseIcon,
+          iconLabel: this.closeFindReplaceDialog,
           keymapDescription: 'Escape',
           onClick: this.clearSearch
         }));

package/dist/esm/ui/FindReplaceTooltipButton.js

@@ -11,8 +11,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
-import Button from '@atlaskit/button/standard-button';
+import { IconButton } from '@atlaskit/button/new';
+import LegacyButton from '@atlaskit/button/standard-button';
 import { findKeymapByDescription, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var FindReplaceTooltipButton = /*#__PURE__*/function (_React$PureComponent) {
@@ -37,6 +39,8 @@ export var FindReplaceTooltipButton = /*#__PURE__*/function (_React$PureComponen
       var _this$props = this.props,
         title = _this$props.title,
         icon = _this$props.icon,
+        newIcon = _this$props.newIcon,
+        iconSize = _this$props.iconSize,
         keymapDescription = _this$props.keymapDescription,
         disabled = _this$props.disabled,
         isPressed = _this$props.isPressed,
@@ -51,7 +55,18 @@ export var FindReplaceTooltipButton = /*#__PURE__*/function (_React$PureComponen
         }),
         hideTooltipOnClick: true,
         position: 'top'
-      }, /*#__PURE__*/React.createElement(Button, _extends({
+      }, getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? /*#__PURE__*/React.createElement(IconButton, _extends({
+        id: "afterInputSection",
+        label: title,
+        appearance: appearance,
+        testId: title,
+        ref: this.buttonRef,
+        icon: newIcon,
+        UNSAFE_size: iconSize,
+        isDisabled: disabled,
+        onClick: this.handleClick,
+        isSelected: isPressed
+      }, pressedProps)) : /*#__PURE__*/React.createElement(LegacyButton, _extends({
         id: "afterInputSection",
         label: title,
         appearance: appearance,

package/dist/esm/ui/Replace.js

@@ -12,13 +12,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
+import LegacyButton from '@atlaskit/button/standard-button';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
 import { Label, ValidMessage } from '@atlaskit/form';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Inline, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
 import { NextPreviousItem, orderOneStyles, orderZeroStyles, replaceSectionButtonStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './styles';
@@ -247,6 +249,8 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       }, jsx(FindReplaceTooltipButton, {
         title: this.findNext,
         icon: this.findNextIcon,
+        newIcon: ChevronDownIcon,
+        iconLabel: this.findNext,
         keymapDescription: 'Enter',
         onClick: this.handleFindNextClick,
         disabled: count.total <= 1
@@ -255,25 +259,48 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       }, jsx(FindReplaceTooltipButton, {
         title: this.findPrevious,
         icon: this.findPrevIcon,
+        newIcon: ChevronUpIcon,
+        iconLabel: this.findPrevious,
         keymapDescription: 'Shift Enter',
         onClick: this.handleFindPrevClick,
         disabled: count.total <= 1
-      })), jsx(Button, {
-        css: replaceSectionButtonStyles,
+      })), getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Inline, {
+        space: "space.075",
+        xcss: xcss({
+          paddingInlineStart: 'space.050',
+          paddingInlineEnd: 'space.025'
+        })
+      }, jsx(Button, {
         testId: this.replace,
         id: "replace-button",
         onClick: this.handleReplaceClick,
         isDisabled: !canReplace
       }, this.replace), jsx(Button, {
+        appearance: "primary",
+        testId: this.replaceAll,
+        id: "replaceAll-button",
+        onClick: this.handleReplaceAllClick,
+        isDisabled: !canReplace
+      }, this.replaceAll)) : jsx(Fragment, null, jsx(LegacyButton, {
+        css: replaceSectionButtonStyles,
+        testId: this.replace,
+        id: "replace-button",
+        onClick: this.handleReplaceClick,
+        isDisabled: !canReplace
+      }, this.replace), jsx(LegacyButton, {
         css: replaceSectionButtonStyles,
         appearance: "primary",
         testId: this.replaceAll,
         id: "replaceAll-button",
         onClick: this.handleReplaceAllClick,
         isDisabled: !canReplace
-      }, this.replaceAll)), jsx("div", {
+      }, this.replaceAll))), jsx("div", {
         css: orderZeroStyles
-      }, jsx(Button, {
+      }, getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Button, {
+        appearance: "subtle",
+        testId: this.closeFindReplaceDialog,
+        onClick: this.clearSearch
+      }, this.closeFindReplaceDialog) : jsx(LegacyButton, {
         css: replaceSectionButtonStyles,
         appearance: "subtle",
         testId: this.closeFindReplaceDialog,
@@ -291,17 +318,27 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         onKeyDown: this.handleReplaceKeyDown,
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd
-      }), jsx(Button, {
-        css: replaceSectionButtonStyles,
+      }), getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Inline, {
+        space: "space.050"
+      }, jsx(Button, {
         testId: this.replace,
         onClick: this.handleReplaceClick,
         isDisabled: !canReplace
       }, this.replace), jsx(Button, {
+        testId: this.replaceAll,
+        onClick: this.handleReplaceAllClick,
+        isDisabled: !canReplace
+      }, this.replaceAll)) : jsx(Fragment, null, jsx(LegacyButton, {
+        css: replaceSectionButtonStyles,
+        testId: this.replace,
+        onClick: this.handleReplaceClick,
+        isDisabled: !canReplace
+      }, this.replace), jsx(LegacyButton, {
         css: replaceSectionButtonStyles,
         testId: this.replaceAll,
         onClick: this.handleReplaceAllClick,
         isDisabled: !canReplace
-      }, this.replaceAll));
+      }, this.replaceAll)));
     }
   }]);
   return Replace;

package/dist/esm/ui/styles.js

@@ -60,7 +60,8 @@ export var countWrapperStyles = css({
   alignItems: 'center'
 });
 export var orderZeroStyles = css({
-  order: '0'
+  order: '0',
+  marginInline: getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)") : 0
 });
 export var orderOneStyles = css({
   order: '1'

package/dist/types/ui/FindReplaceTooltipButton.d.ts

@@ -1,12 +1,16 @@
 import React from 'react';
+import type { IconProps } from '@atlaskit/icon/types';
 interface Props {
     title: string;
     icon: JSX.Element;
+    newIcon: React.ComponentType<IconProps>;
+    iconLabel: string;
+    iconSize?: 'small' | undefined;
     keymapDescription: string;
     onClick: (ref: React.RefObject<HTMLButtonElement>) => void;
     disabled?: boolean;
     isPressed?: boolean;
-    appearance?: 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+    appearance?: 'default' | 'primary' | 'subtle';
 }
 export declare class FindReplaceTooltipButton extends React.PureComponent<Props> {
     private buttonRef;

package/dist/types-ts4.5/ui/FindReplaceTooltipButton.d.ts

@@ -1,12 +1,16 @@
 import React from 'react';
+import type { IconProps } from '@atlaskit/icon/types';
 interface Props {
     title: string;
     icon: JSX.Element;
+    newIcon: React.ComponentType<IconProps>;
+    iconLabel: string;
+    iconSize?: 'small' | undefined;
     keymapDescription: string;
     onClick: (ref: React.RefObject<HTMLButtonElement>) => void;
     disabled?: boolean;
     isPressed?: boolean;
-    appearance?: 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+    appearance?: 'default' | 'primary' | 'subtle';
 }
 export declare class FindReplaceTooltipButton extends React.PureComponent<Props> {
     private buttonRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-find-replace",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "find replace plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -43,6 +43,7 @@
     "@atlaskit/form": "^9.0.5",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
+    "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.37.0",
@@ -56,7 +57,6 @@
     "@af/visual-regression": "*",
     "@atlaskit/editor-plugin-block-type": "^3.0.0",
     "@atlaskit/editor-plugin-text-formatting": "^1.0.0",
-    "@atlaskit/primitives": "^2.0.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/feature-flags-test-utils": "^0.2.0",
     "@testing-library/react": "^12.1.5",
@@ -108,6 +108,9 @@
   "platform-feature-flags": {
     "platform.editor.a11y-find-replace": {
       "type": "boolean"
+    },
+    "platform.design-system-team.editor-new-button_jjjdo": {
+      "type": "boolean"
     }
   },
   "stricter": {