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

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @atlaskit/editor-plugin-find-replace
 
+## 1.1.0
+
+### Minor Changes
+
+- [#72122](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72122) [`c3186450404a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3186450404a) - Breaking change:
+
+  ## WHAT?:
+
+  Removing feature flags:
+
+  - singleLayout
+  - newInsertionBehaviour
+  - interactiveExpand
+  - findReplace
+  - findReplaceMatchCase
+  - extendFloatingToolbar
+
+  ## WHY?:
+
+  Because the flags and props are unused/by default active. Removing them will reduce our maintenance burden
+
+  ## HOW to update your code:
+
+  - If you were using the feature flag - the behaviour is now default and you can remove the flags
+  - If you were not using the feature flag - the behaviour is now default.
+  - If you have opted out of using the feature flag - we have been careful to ensure no-one has opted out of the behaviours. If you do have an issue please reach out to #help-editor.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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/FindReplaceToolbarButtonWithState.js

@@ -48,7 +48,6 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
     editorView = _ref2.editorView,
     containerElement = _ref2.containerElement,
     dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
-    featureFlags = _ref2.featureFlags,
     takeFullWidth = _ref2.takeFullWidth,
     api = _ref2.api;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
@@ -135,12 +134,10 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
   var handleToggleMatchCase = function handleToggleMatchCase() {
     dispatchCommand((0, _commands.toggleMatchCase)());
   };
-  var findReplaceMatchCase = featureFlags.findReplaceMatchCase;
   if (!findReplaceState) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButton.default, {
-    allowMatchCase: findReplaceMatchCase,
     shouldMatchCase: findReplaceState.shouldMatchCase,
     onToggleMatchCase: handleToggleMatchCase,
     isActive: findReplaceState.isActive,

package/dist/cjs/plugin.js

@@ -11,10 +11,8 @@ var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _main = require("./pm-plugins/main");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var findReplacePlugin = exports.findReplacePlugin = function findReplacePlugin(_ref) {
-  var _api$featureFlags;
   var props = _ref.config,
     api = _ref.api;
-  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
   return {
     name: 'findReplace',
     pmPlugins: function pmPlugins() {
@@ -53,12 +51,7 @@ var findReplacePlugin = exports.findReplacePlugin = function findReplacePlugin(_
           popupsScrollableElement: popupsScrollableElement,
           editorView: editorView,
           containerElement: containerElement,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent
-          // `allowMatchCase` comes through the preset, but not the feature flags
-          // prop with the `ComposableEditor` - grab the FFs from the editor API
-          // instead until we clean this up.
-          ,
-          featureFlags: featureFlags,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
           isToolbarReducedSpacing: isToolbarReducedSpacing,
           api: api
         });
@@ -84,7 +77,6 @@ var findReplacePlugin = exports.findReplacePlugin = function findReplacePlugin(_
           containerElement: containerElement,
           dispatchAnalyticsEvent: dispatchAnalyticsEvent,
           takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
-          featureFlags: featureFlags,
           api: api
         });
       }

package/dist/cjs/ui/Find.js

@@ -135,7 +135,7 @@ var Find = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMatchCaseClick", function (buttonRef) {
-      if (_this.props.allowMatchCase && _this.props.onToggleMatchCase) {
+      if (_this.props.onToggleMatchCase) {
         _this.props.onToggleMatchCase();
         _this.props.onFind(_this.props.findText);
       }
@@ -216,7 +216,6 @@ var Find = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         findText = _this$props.findText,
         count = _this$props.count,
-        allowMatchCase = _this$props.allowMatchCase,
         shouldMatchCase = _this$props.shouldMatchCase,
         formatMessage = _this$props.intl.formatMessage;
       var resultsCount = formatMessage(_messages.findReplaceMessages.resultsCount, {
@@ -231,12 +230,15 @@ var Find = /*#__PURE__*/function (_React$Component) {
         }, findText && (0, _react2.jsx)("span", {
           "data-testid": "textfield-count",
           css: [_styles.countStyles, _styles.countStylesAlternateStyles]
-        }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && (0, _react2.jsx)("div", {
+        }, count.total === 0 ? this.noResultsFound : resultsCount)), (0, _react2.jsx)("div", {
           css: _styles.matchCaseSection
         }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
           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
         })));
@@ -283,26 +285,35 @@ var Find = /*#__PURE__*/function (_React$Component) {
         }, findText && (0, _react2.jsx)("span", {
           "data-testid": "textfield-count",
           css: _styles.countStyles
-        }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+        }, count.total === 0 ? this.noResultsFound : resultsCount)), (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/FindReplaceToolbarButtonWithState.js

@@ -35,7 +35,6 @@ const FindReplaceToolbarButtonWithState = ({
   editorView,
   containerElement,
   dispatchAnalyticsEvent,
-  featureFlags,
   takeFullWidth,
   api
 }) => {
@@ -120,14 +119,10 @@ const FindReplaceToolbarButtonWithState = ({
   const handleToggleMatchCase = () => {
     dispatchCommand(toggleMatchCase());
   };
-  const {
-    findReplaceMatchCase
-  } = featureFlags;
   if (!findReplaceState) {
     return null;
   }
   return /*#__PURE__*/React.createElement(FindReplaceToolbarButton, {
-    allowMatchCase: findReplaceMatchCase,
     shouldMatchCase: findReplaceState.shouldMatchCase,
     onToggleMatchCase: handleToggleMatchCase,
     isActive: findReplaceState.isActive,

package/dist/es2019/plugin.js

@@ -7,8 +7,6 @@ export const findReplacePlugin = ({
   config: props,
   api
 }) => {
-  var _api$featureFlags;
-  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
   return {
     name: 'findReplace',
     pmPlugins() {
@@ -47,12 +45,7 @@ export const findReplacePlugin = ({
           popupsScrollableElement: popupsScrollableElement,
           editorView: editorView,
           containerElement: containerElement,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent
-          // `allowMatchCase` comes through the preset, but not the feature flags
-          // prop with the `ComposableEditor` - grab the FFs from the editor API
-          // instead until we clean this up.
-          ,
-          featureFlags: featureFlags,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
           isToolbarReducedSpacing: isToolbarReducedSpacing,
           api: api
         });
@@ -79,7 +72,6 @@ export const findReplacePlugin = ({
           containerElement: containerElement,
           dispatchAnalyticsEvent: dispatchAnalyticsEvent,
           takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
-          featureFlags: featureFlags,
           api: api
         });
       }

package/dist/es2019/ui/Find.js

@@ -118,7 +118,7 @@ class Find extends React.Component {
       });
     });
     _defineProperty(this, "handleMatchCaseClick", buttonRef => {
-      if (this.props.allowMatchCase && this.props.onToggleMatchCase) {
+      if (this.props.onToggleMatchCase) {
         this.props.onToggleMatchCase();
         this.props.onFind(this.props.findText);
       }
@@ -192,7 +192,6 @@ class Find extends React.Component {
     const {
       findText,
       count,
-      allowMatchCase,
       shouldMatchCase,
       intl: {
         formatMessage
@@ -210,12 +209,15 @@ class Find extends React.Component {
       }, findText && jsx("span", {
         "data-testid": "textfield-count",
         css: [countStyles, countStylesAlternateStyles]
-      }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && jsx("div", {
+      }, count.total === 0 ? this.noResultsFound : resultsCount)), jsx("div", {
         css: matchCaseSection
       }, jsx(FindReplaceTooltipButton, {
         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
       })));
@@ -262,26 +264,35 @@ class Find extends React.Component {
       }, findText && jsx("span", {
         "data-testid": "textfield-count",
         css: countStyles
-      }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && jsx(FindReplaceTooltipButton, {
+      }, count.total === 0 ? this.noResultsFound : resultsCount)), 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/FindReplaceToolbarButtonWithState.js

@@ -39,7 +39,6 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
     editorView = _ref2.editorView,
     containerElement = _ref2.containerElement,
     dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
-    featureFlags = _ref2.featureFlags,
     takeFullWidth = _ref2.takeFullWidth,
     api = _ref2.api;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
@@ -126,12 +125,10 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
   var handleToggleMatchCase = function handleToggleMatchCase() {
     dispatchCommand(toggleMatchCase());
   };
-  var findReplaceMatchCase = featureFlags.findReplaceMatchCase;
   if (!findReplaceState) {
     return null;
   }
   return /*#__PURE__*/React.createElement(FindReplaceToolbarButton, {
-    allowMatchCase: findReplaceMatchCase,
     shouldMatchCase: findReplaceState.shouldMatchCase,
     onToggleMatchCase: handleToggleMatchCase,
     isActive: findReplaceState.isActive,

package/dist/esm/plugin.js

@@ -4,10 +4,8 @@ import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
 import { findReplacePluginKey } from './pm-plugins/plugin-key';
 export var findReplacePlugin = function findReplacePlugin(_ref) {
-  var _api$featureFlags;
   var props = _ref.config,
     api = _ref.api;
-  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
   return {
     name: 'findReplace',
     pmPlugins: function pmPlugins() {
@@ -46,12 +44,7 @@ export var findReplacePlugin = function findReplacePlugin(_ref) {
           popupsScrollableElement: popupsScrollableElement,
           editorView: editorView,
           containerElement: containerElement,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent
-          // `allowMatchCase` comes through the preset, but not the feature flags
-          // prop with the `ComposableEditor` - grab the FFs from the editor API
-          // instead until we clean this up.
-          ,
-          featureFlags: featureFlags,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
           isToolbarReducedSpacing: isToolbarReducedSpacing,
           api: api
         });
@@ -77,7 +70,6 @@ export var findReplacePlugin = function findReplacePlugin(_ref) {
           containerElement: containerElement,
           dispatchAnalyticsEvent: dispatchAnalyticsEvent,
           takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
-          featureFlags: featureFlags,
           api: api
         });
       }

package/dist/esm/ui/Find.js

@@ -130,7 +130,7 @@ var Find = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "handleMatchCaseClick", function (buttonRef) {
-      if (_this.props.allowMatchCase && _this.props.onToggleMatchCase) {
+      if (_this.props.onToggleMatchCase) {
         _this.props.onToggleMatchCase();
         _this.props.onFind(_this.props.findText);
       }
@@ -211,7 +211,6 @@ var Find = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         findText = _this$props.findText,
         count = _this$props.count,
-        allowMatchCase = _this$props.allowMatchCase,
         shouldMatchCase = _this$props.shouldMatchCase,
         formatMessage = _this$props.intl.formatMessage;
       var resultsCount = formatMessage(messages.resultsCount, {
@@ -226,12 +225,15 @@ var Find = /*#__PURE__*/function (_React$Component) {
         }, findText && jsx("span", {
           "data-testid": "textfield-count",
           css: [countStyles, countStylesAlternateStyles]
-        }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && jsx("div", {
+        }, count.total === 0 ? this.noResultsFound : resultsCount)), jsx("div", {
           css: matchCaseSection
         }, jsx(FindReplaceTooltipButton, {
           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
         })));
@@ -278,26 +280,35 @@ var Find = /*#__PURE__*/function (_React$Component) {
         }, findText && jsx("span", {
           "data-testid": "textfield-count",
           css: countStyles
-        }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && jsx(FindReplaceTooltipButton, {
+        }, count.total === 0 ? this.noResultsFound : resultsCount)), 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/FindReplaceToolbarButtonWithState.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { FindReplaceToolbarButtonWithStateProps } from './types';
-declare const _default: React.MemoExoticComponent<({ popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, isToolbarReducedSpacing, editorView, containerElement, dispatchAnalyticsEvent, featureFlags, takeFullWidth, api, }: FindReplaceToolbarButtonWithStateProps) => JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, isToolbarReducedSpacing, editorView, containerElement, dispatchAnalyticsEvent, takeFullWidth, api, }: FindReplaceToolbarButtonWithStateProps) => JSX.Element | null>;
 export default _default;

package/dist/types/types.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import type { ExtractInjectionAPI, FeatureFlags, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface FindReplacePluginState {
     /** Whether find/replace is active, i.e. displayed */
@@ -34,10 +33,9 @@ export type FindReplaceToolbarButtonWithStateProps = {
     containerElement: HTMLElement | null;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     takeFullWidth?: boolean;
-    featureFlags: FeatureFlags;
     api: ExtractInjectionAPI<FindReplacePlugin> | undefined;
 };
-export type FindReplaceToolbarButtonActionProps = Omit<FindReplaceToolbarButtonWithStateProps, 'featureFlags' | 'api'>;
+export type FindReplaceToolbarButtonActionProps = Omit<FindReplaceToolbarButtonWithStateProps, 'api'>;
 type Config = {
     takeFullWidth: boolean;
     twoLineEditorToolbar: boolean;
@@ -45,10 +43,7 @@ type Config = {
 export type FindReplacePlugin = NextEditorPlugin<'findReplace', {
     pluginConfiguration: Config;
     sharedState: FindReplacePluginState | undefined;
-    dependencies: [
-        OptionalPlugin<FeatureFlagsPlugin>,
-        OptionalPlugin<AnalyticsPlugin>
-    ];
+    dependencies: [OptionalPlugin<AnalyticsPlugin>];
     actions: {
         getToolbarButton: (params: FindReplaceToolbarButtonActionProps) => React.ReactNode;
     };

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/FindReplaceToolbarButtonWithState.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { FindReplaceToolbarButtonWithStateProps } from './types';
-declare const _default: React.MemoExoticComponent<({ popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, isToolbarReducedSpacing, editorView, containerElement, dispatchAnalyticsEvent, featureFlags, takeFullWidth, api, }: FindReplaceToolbarButtonWithStateProps) => JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, isToolbarReducedSpacing, editorView, containerElement, dispatchAnalyticsEvent, takeFullWidth, api, }: FindReplaceToolbarButtonWithStateProps) => JSX.Element | null>;
 export default _default;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import type { ExtractInjectionAPI, FeatureFlags, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface FindReplacePluginState {
     /** Whether find/replace is active, i.e. displayed */
@@ -34,10 +33,9 @@ export type FindReplaceToolbarButtonWithStateProps = {
     containerElement: HTMLElement | null;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     takeFullWidth?: boolean;
-    featureFlags: FeatureFlags;
     api: ExtractInjectionAPI<FindReplacePlugin> | undefined;
 };
-export type FindReplaceToolbarButtonActionProps = Omit<FindReplaceToolbarButtonWithStateProps, 'featureFlags' | 'api'>;
+export type FindReplaceToolbarButtonActionProps = Omit<FindReplaceToolbarButtonWithStateProps, 'api'>;
 type Config = {
     takeFullWidth: boolean;
     twoLineEditorToolbar: boolean;
@@ -46,7 +44,6 @@ export type FindReplacePlugin = NextEditorPlugin<'findReplace', {
     pluginConfiguration: Config;
     sharedState: FindReplacePluginState | undefined;
     dependencies: [
-        OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<AnalyticsPlugin>
     ];
     actions: {

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.1.0",
   "description": "find replace plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -34,15 +34,15 @@
     "./styles": "./src/styles.ts"
   },
   "dependencies": {
-    "@atlaskit/button": "^17.3.0",
-    "@atlaskit/editor-common": "^77.4.0",
+    "@atlaskit/button": "^17.4.0",
+    "@atlaskit/editor-common": "^78.0.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@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 +56,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 +107,9 @@
   "platform-feature-flags": {
     "platform.editor.a11y-find-replace": {
       "type": "boolean"
+    },
+    "platform.design-system-team.editor-new-button_jjjdo": {
+      "type": "boolean"
     }
   },
   "stricter": {