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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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'
 });