Skip to content

Commit

Permalink
[Unified Search] Remove soon-to-be-deprecated EuiFormControl Sass mix…
Browse files Browse the repository at this point in the history
…ins (elastic#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
elastic/eui#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)
  • Loading branch information
cee-chen authored Sep 24, 2024
1 parent 9bbb296 commit b3d28c8
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -38,20 +43,13 @@
overflow-x: auto;
overflow-y: auto;
white-space: normal;

}

&.kbnQueryBar__textarea--isSuggestionsVisible {
border-bottom-right-radius: 0;
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
Expand All @@ -67,4 +65,4 @@
margin-left: -1px;
width: calc(100% + 1px);
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand Down

0 comments on commit b3d28c8

Please sign in to comment.