@atlaskit/editor-plugin-find-replace 0.1.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-find-replace
 
+## 0.3.0
+
+### Minor Changes
+
+- [#67595](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67595) [`3bb66071a333`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3bb66071a333) - [ux] ECA11Y-75: Updated UX/UI for "Find and Replace" modal window, added Focus trap to Find and Replace popup, added return focus to the search button when pressing ESC, update selected match and all matches highlighted colors, added Screan Reader announcements for repeated button clicks ( subtickets: ECA11Y-144, ECA11Y-145, ECA11Y-146, ECA11Y-147, ECA11Y-148, ECA11Y-149 )
+
+## 0.2.0
+
+### Minor Changes
+
+- [#68790](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68790) [`c6d8affc52d1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c6d8affc52d1) - Support maybeAdd plugins in usePreset. Add typing support for universal preset.
+
+  Now when using the editor API with the universal preset
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/cjs/styles.js

@@ -5,13 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectedSearchMatchClass = exports.searchMatchClass = exports.findReplaceStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _css;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable */
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4290
 var searchMatchClass = exports.searchMatchClass = 'search-match';
 var selectedSearchMatchClass = exports.selectedSearchMatchClass = 'selected-search-match';
-var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background-color: ", ";\n  }\n\n  .", " {\n    background-color: ", ";\n    color: white;\n  }\n"])), searchMatchClass, _colors.B75, selectedSearchMatchClass, _colors.B200);
+var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)((_css = {}, (0, _defineProperty2.default)(_css, ".".concat(searchMatchClass), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? {
+  borderRadius: '3px',
+  backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
+  boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px 0 ".concat(_colors.N50A, ", 0 0 1px 0 ").concat(_colors.N60A), ")") + ', inset 0 0 0 1px ' + "var(--ds-border-input, ".concat("".concat(_colors.N40A), ")")
+} : {
+  backgroundColor: _colors.B75
+}), (0, _defineProperty2.default)(_css, ".".concat(selectedSearchMatchClass), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? {
+  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+} : {
+  backgroundColor: _colors.B200,
+  color: 'white'
+}), _css));

package/dist/cjs/ui/Find.js

@@ -18,6 +18,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _form = require("@atlaskit/form");
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
 var _keyboard = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/keyboard"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
@@ -110,6 +111,7 @@ var Find = /*#__PURE__*/function (_React$Component) {
         onSynced && onSynced();
         _this.debouncedFind(value);
       });
+      _this.props.setFindTyped(true);
     });
     // throtlle between animation frames gives better experience on Enter compared to arbitrary value
     // it adjusts based on performance (and document size)
@@ -182,7 +184,8 @@ var Find = /*#__PURE__*/function (_React$Component) {
     _this.findPrevious = formatMessage(messages.findPrevious);
     _this.matchCase = formatMessage(messages.matchCase);
     _this.matchCaseIcon = (0, _react2.jsx)(_keyboard.default, {
-      label: _this.matchCase
+      label: _this.matchCase,
+      size: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? 'small' : 'medium'
     });
     _this.findNextIcon = (0, _react2.jsx)(_chevronDown.default, {
       label: _this.findNext
@@ -222,21 +225,19 @@ var Find = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this3 = this;
+      var _this$state2,
+        _this3 = this;
       // focus on update if find text did not change
-      if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
-        var _this$state2;
-        if (this.props.findText === ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.localFindText)) {
-          this.focusFindTextfield();
-        }
-        if (this.props.findText !== prevProps.findText) {
-          this.syncFindText(function () {
-            // focus after input is synced if find text provided
-            if (_this3.props.findText) {
-              _this3.focusFindTextfield();
-            }
-          });
-        }
+      if (this.props.findText === ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.localFindText)) {
+        this.focusFindTextfield();
+      }
+      if (this.props.findText !== prevProps.findText) {
+        this.syncFindText(function () {
+          // focus after input is synced if find text provided
+          if (_this3.props.findText) {
+            _this3.focusFindTextfield();
+          }
+        });
       }
     }
   }, {
@@ -258,50 +259,90 @@ var Find = /*#__PURE__*/function (_React$Component) {
         selectedMatchPosition: count.index + 1,
         totalResultsCount: count.total
       });
-      return (0, _react2.jsx)("div", {
-        css: _styles.sectionWrapperStyles
-      }, (0, _react2.jsx)(_textfield.default, {
-        name: "find",
-        appearance: "none",
-        placeholder: this.find,
-        value: this.state.localFindText,
-        ref: this.findTextfieldRef,
-        autoComplete: "off",
-        onChange: this.handleFindChange,
-        onKeyDown: this.handleFindKeyDown,
-        onKeyUp: this.handleFindKeyUp,
-        onBlur: this.props.onFindBlur,
-        onCompositionStart: this.handleCompositionStart,
-        onCompositionEnd: this.handleCompositionEnd
-      }), (0, _react2.jsx)("div", {
-        css: _styles.countWrapperStyles,
-        "aria-live": "polite"
-      }, findText && (0, _react2.jsx)("span", {
-        "data-testid": "textfield-count",
-        css: _styles.countStyles
-      }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.matchCase,
-        icon: this.matchCaseIcon,
-        onClick: this.handleMatchCaseClick,
-        isPressed: shouldMatchCase
-      }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.findNext,
-        icon: this.findNextIcon,
-        keymapDescription: 'Enter',
-        onClick: this.handleFindNextClick,
-        disabled: count.total <= 1
-      }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.findPrevious,
-        icon: this.findPrevIcon,
-        keymapDescription: 'Shift Enter',
-        onClick: this.handleFindPrevClick,
-        disabled: count.total <= 1
-      }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.closeFindReplaceDialog,
-        icon: this.closeIcon,
-        keymapDescription: 'Escape',
-        onClick: this.clearSearch
-      }));
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        var elemAfterInput = (0, _react2.jsx)("div", {
+          css: _styles.afterInputSection
+        }, (0, _react2.jsx)("div", {
+          "aria-live": "polite"
+        }, 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", {
+          css: _styles.matchCaseSection
+        }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.matchCase,
+          appearance: "default",
+          icon: this.matchCaseIcon,
+          onClick: this.handleMatchCaseClick,
+          isPressed: shouldMatchCase
+        })));
+        return (0, _react2.jsx)("div", {
+          css: [_styles.sectionWrapperStyles, _styles.sectionWrapperStylesAlternate]
+        }, (0, _react2.jsx)("div", {
+          css: _styles.textFieldWrapper
+        }, (0, _react2.jsx)(_form.Label, {
+          htmlFor: "find-text-field"
+        }, this.find), (0, _react2.jsx)(_textfield.default, {
+          name: "find",
+          id: "find-text-field",
+          appearance: "standard",
+          value: this.state.localFindText,
+          ref: this.findTextfieldRef,
+          autoComplete: "off",
+          onChange: this.handleFindChange,
+          onKeyDown: this.handleFindKeyDown,
+          onKeyUp: this.handleFindKeyUp,
+          onBlur: this.props.onFindBlur,
+          onCompositionStart: this.handleCompositionStart,
+          onCompositionEnd: this.handleCompositionEnd,
+          elemAfterInput: elemAfterInput
+        })));
+      } else {
+        return (0, _react2.jsx)("div", {
+          css: _styles.sectionWrapperStyles
+        }, (0, _react2.jsx)(_textfield.default, {
+          name: "find",
+          appearance: "none",
+          placeholder: this.find,
+          value: this.state.localFindText,
+          ref: this.findTextfieldRef,
+          autoComplete: "off",
+          onChange: this.handleFindChange,
+          onKeyDown: this.handleFindKeyDown,
+          onKeyUp: this.handleFindKeyUp,
+          onBlur: this.props.onFindBlur,
+          onCompositionStart: this.handleCompositionStart,
+          onCompositionEnd: this.handleCompositionEnd
+        }), (0, _react2.jsx)("div", {
+          css: _styles.countWrapperStyles,
+          "aria-live": "polite"
+        }, findText && (0, _react2.jsx)("span", {
+          "data-testid": "textfield-count",
+          css: _styles.countStyles
+        }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.matchCase,
+          icon: this.matchCaseIcon,
+          onClick: this.handleMatchCaseClick,
+          isPressed: shouldMatchCase
+        }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.findNext,
+          icon: this.findNextIcon,
+          keymapDescription: 'Enter',
+          onClick: this.handleFindNextClick,
+          disabled: count.total <= 1
+        }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.findPrevious,
+          icon: this.findPrevIcon,
+          keymapDescription: 'Shift Enter',
+          onClick: this.handleFindPrevClick,
+          disabled: count.total <= 1
+        }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.closeFindReplaceDialog,
+          icon: this.closeIcon,
+          keymapDescription: 'Escape',
+          onClick: this.clearSearch
+        }));
+      }
     }
   }]);
   return Find;

package/dist/cjs/ui/FindReplace.js

@@ -14,6 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Find = _interopRequireDefault(require("./Find"));
 var _Replace = _interopRequireDefault(require("./Replace"));
 var _styles = require("./styles");
@@ -23,15 +24,45 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(FindReplace, _React$PureComponent);
   var _super = _createSuper(FindReplace);
-  function FindReplace() {
+  function FindReplace(props) {
     var _this;
     (0, _classCallCheck2.default)(this, FindReplace);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "findTextfield", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "replaceTextfield", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTabNavigation", function (event) {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        var modalFindReplace = _this.modalRef.current;
+        if (!modalFindReplace || !modalFindReplace.contains(document.activeElement)) {
+          return;
+        }
+        var focusableElements = Array.from(modalFindReplace.querySelectorAll('[tabindex]:not([tabindex="-1"]), input, button')).filter(function (el) {
+          return el.getAttribute('tabindex') !== '-1';
+        });
+        var currentIndex = focusableElements.findIndex(function (el) {
+          return el === document.activeElement;
+        });
+        var isShiftPressed = event.shiftKey;
+        if (isShiftPressed) {
+          var prevIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;
+          focusableElements[prevIndex].focus();
+        } else {
+          var nextIndex = (currentIndex + 1) % focusableElements.length;
+          focusableElements[nextIndex].focus();
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      findTyped: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFindTyped", function (value) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        _this.setState({
+          findTyped: value
+        });
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFindTextfieldRef", function (findTextfieldRef) {
       _this.findTextfield = findTextfieldRef.current;
     });
@@ -48,9 +79,26 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         _this.replaceTextfield.focus();
       }
     });
+    _this.modalRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   (0, _createClass2.default)(FindReplace, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        // eslint-disable-next-line
+        window.addEventListener('keydown', this.handleTabNavigation);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        // eslint-disable-next-line
+        window.removeEventListener('keydown', this.handleTabNavigation);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -69,8 +117,10 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         allowMatchCase = _this$props.allowMatchCase,
         shouldMatchCase = _this$props.shouldMatchCase,
         onToggleMatchCase = _this$props.onToggleMatchCase;
+      var focusToolbarButton = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? this.props.focusToolbarButton || function () {} : function () {};
       return (0, _react2.jsx)("div", {
-        css: _styles.wrapperStyles
+        ref: this.modalRef,
+        css: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? [_styles.wrapperStyles, _styles.wrapperPaddingStyles] : _styles.wrapperStyles
       }, (0, _react2.jsx)(_Find.default, {
         allowMatchCase: allowMatchCase,
         shouldMatchCase: shouldMatchCase,
@@ -84,8 +134,10 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         onFindNext: onFindNext,
         onFindTextfieldRefSet: this.setFindTextfieldRef,
         onCancel: onCancel,
-        onArrowDown: this.setFocusToReplace
-      }), (0, _react2.jsx)("hr", {
+        onArrowDown: this.setFocusToReplace,
+        findTyped: this.state.findTyped,
+        setFindTyped: this.setFindTyped
+      }), !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') && (0, _react2.jsx)("hr", {
         css: _styles.ruleStyles,
         id: "replace-hr-element"
       }), (0, _react2.jsx)(_Replace.default, {
@@ -95,7 +147,14 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         onReplaceAll: onReplaceAll,
         onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
         onArrowUp: this.setFocusToFind,
-        dispatchAnalyticsEvent: dispatchAnalyticsEvent
+        onCancel: onCancel,
+        count: count,
+        onFindPrev: onFindPrev,
+        onFindNext: onFindNext,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        findTyped: this.state.findTyped,
+        setFindTyped: this.setFindTyped,
+        focusToolbarButton: focusToolbarButton
       }));
     }
   }]);

package/dist/cjs/ui/FindReplaceToolbarButton.js

@@ -22,6 +22,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _FindReplace = _interopRequireDefault(require("./FindReplace"));
 var _templateObject, _templateObject2, _templateObject3;
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
@@ -38,6 +39,8 @@ var messages = (0, _reactIntlNext.defineMessages)({
     description: '"Find" highlights all instances of a word or phrase on the document, and "Replace" changes one or all of those instances to something else'
   }
 });
+var dropdownWidthNewDesign = 382;
+var dropdownWidthOldDesign = 352;
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(FindReplaceToolbarButton, _React$PureComponent);
@@ -49,15 +52,30 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      openedByClick: false
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
       if (_this.props.isActive) {
         _this.props.onCancel({
           triggerMethod: _analytics.TRIGGER_METHOD.TOOLBAR
         });
       } else {
+        _this.setState({
+          openedByClick: true
+        });
         _this.props.onActivate();
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusToolbarButton", function () {
+      if (_this.state.openedByClick && _this.toolbarButtonRef.current) {
+        _this.toolbarButtonRef.current.focus();
+      }
+      _this.setState({
+        openedByClick: false
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toolbarButtonRef", /*#__PURE__*/_react.default.createRef());
     return _this;
   }
   (0, _createClass2.default)(FindReplaceToolbarButton, [{
@@ -91,9 +109,17 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
             _this2.props.onCancel({
               triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD
             });
+            if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+              if (_this2.state.openedByClick && _this2.toolbarButtonRef.current) {
+                _this2.toolbarButtonRef.current.focus();
+              }
+              _this2.setState({
+                openedByClick: false
+              });
+            }
           }
         },
-        fitWidth: 352,
+        fitWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? dropdownWidthNewDesign : dropdownWidthOldDesign,
         zIndex: stackBelowOtherEditorFloatingPanels,
         arrowKeyNavigationProviderOptions: {
           type: _uiMenu.ArrowKeyNavigationType.MENU,
@@ -114,7 +140,8 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
           "aria-expanded": isActive,
           "aria-haspopup": true,
           "aria-label": keymap ? (0, _keymaps.tooltip)(keymap, title) : title,
-          "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(keymap)
+          "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(keymap),
+          ref: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? this.toolbarButtonRef : null
         })
       }, (0, _react2.jsx)("div", {
         css: wrapper
@@ -124,7 +151,8 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
         count: {
           index: index,
           total: numMatches
-        }
+        },
+        focusToolbarButton: this.focusToolbarButton
       }, this.props)))));
     }
   }]);

package/dist/cjs/ui/FindReplaceTooltipButton.js

@@ -46,7 +46,8 @@ var FindReplaceTooltipButton = exports.FindReplaceTooltipButton = /*#__PURE__*/f
         icon = _this$props.icon,
         keymapDescription = _this$props.keymapDescription,
         disabled = _this$props.disabled,
-        isPressed = _this$props.isPressed;
+        isPressed = _this$props.isPressed,
+        appearance = _this$props.appearance;
       var pressedProps = _objectSpread({}, typeof isPressed === 'boolean' && {
         'aria-pressed': isPressed
       });
@@ -58,8 +59,9 @@ var FindReplaceTooltipButton = exports.FindReplaceTooltipButton = /*#__PURE__*/f
         hideTooltipOnClick: true,
         position: 'top'
       }, /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
+        id: "afterInputSection",
         label: title,
-        appearance: "subtle",
+        appearance: appearance,
         testId: title,
         ref: this.buttonRef,
         iconBefore: icon,
@@ -73,5 +75,6 @@ var FindReplaceTooltipButton = exports.FindReplaceTooltipButton = /*#__PURE__*/f
   return FindReplaceTooltipButton;
 }(_react.default.PureComponent);
 (0, _defineProperty2.default)(FindReplaceTooltipButton, "defaultProps", {
-  keymapDescription: 'no-keymap'
+  keymapDescription: 'no-keymap',
+  appearance: 'subtle'
 });