From 6df05548d9dff8557876abb33153f7d448bac5d5 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:
### 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)
(cherry picked from commit b3d28c8290891b42175c335ea22c550392bbca9c)
---
.../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