From b3d28c8290891b42175c335ea22c550392bbca9c Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Mon, 23 Sep 2024 17:04:45 -0700
Subject: [PATCH] [Unified Search] Remove soon-to-be-deprecated EuiFormControl
 Sass mixins (#193472)

## Summary

As part of our ongoing transition towards CSS-in-JS, EUI is cleaning up
and removing several publicly exported Sass mixins and variables with
very low usage (0-1 usages across Kibana and Cloud) (full list in
https://github.com/elastic/eui/pull/8031).

This PR identifies and replaces one of them (`@euiFormControlWithIcon`)
with their functional padding output equivalents (still using generic
EUI Sass variables - there are no plans to immediately deprecate those).

There should be **no UI regressions** in the unified search query bar
compared to main, the right and left padding should remain the same:

<img width="925" alt=""
src="https://github.com/user-attachments/assets/ac6359af-5169-4642-ba7e-64e42cb57749">

### Checklist

Delete any items that are not applicable to this PR.

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
---
 .../query_string_input/query_string_input.scss | 18 ++++++++----------
 .../query_string_input/query_string_input.tsx  |  1 +
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/plugins/unified_search/public/query_string_input/query_string_input.scss b/src/plugins/unified_search/public/query_string_input/query_string_input.scss
index f0a682564fa0e8..a8642ae0f98465 100644
--- a/src/plugins/unified_search/public/query_string_input/query_string_input.scss
+++ b/src/plugins/unified_search/public/query_string_input/query_string_input.scss
@@ -19,15 +19,20 @@
 
 .kbnQueryBar__textarea {
   z-index: $euiZContentMenu;
-  resize: none !important; // When in the group, it will autosize
   height: $euiFormControlHeight;
   // Unlike most inputs within layout control groups, the text area still needs a border
   // for multi-line content. These adjusts help it sit above the control groups
   // shadow to line up correctly.
-  padding: ($euiSizeS + 2px) $euiSizeS $euiSizeS;
+  padding: $euiSizeS;
+  padding-top: $euiSizeS + 2px;
+  padding-left: $euiSizeXXL; // Account for search icon
   // Firefox adds margin to textarea
   margin: 0;
 
+  &--isClearable {
+    padding-right: $euiSizeXXL; // Account for clear button
+  }
+
   &:not(.kbnQueryBar__textarea--autoHeight) {
     overflow-y: hidden;
     overflow-x: hidden;
@@ -38,7 +43,6 @@
     overflow-x: auto;
     overflow-y: auto;
     white-space: normal;
-
   }
 
   &.kbnQueryBar__textarea--isSuggestionsVisible {
@@ -46,12 +50,6 @@
     border-bottom-left-radius: 0;
   }
 
-  &--isClearable {
-    @include euiFormControlWithIcon($isIconOptional: false, $side: 'right');
-  }
-
-  @include euiFormControlWithIcon($isIconOptional: true);
-
   ~.euiFormControlLayoutIcons {
     // By default form control layout icon is vertically centered, but our textarea
     // can expand to be multi-line, so we position it with padding that matches
@@ -67,4 +65,4 @@
     margin-left: -1px;
     width: calc(100% + 1px);
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx
index f9862b736698e9..2fc06e4aeaf533 100644
--- a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx
+++ b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx
@@ -830,6 +830,7 @@ export default class QueryStringInputUI extends PureComponent<QueryStringInputPr
                 disabled={this.props.isDisabled}
                 className={inputClassName}
                 fullWidth
+                resize="none"
                 rows={1}
                 id={this.textareaId}
                 autoFocus={