Skip to content

Commit

Permalink
[8.x] [Unified Search] Remove soon-to-be-deprecated EuiFormControl Sa…
Browse files Browse the repository at this point in the history 
…ss mixins (#193472) (#193806)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Unified Search] Remove soon-to-be-deprecated EuiFormControl Sass
mixins (#193472)](#193472)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cee
Chen","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-24T00:04:45Z","message":"[Unified
Search] Remove soon-to-be-deprecated EuiFormControl Sass mixins
(#193472)\n\n## Summary\r\n\r\nAs part of our ongoing transition towards
CSS-in-JS, EUI is cleaning up\r\nand removing several publicly exported
Sass mixins and variables with\r\nvery low usage (0-1 usages across
Kibana and Cloud) (full list
in\r\nhttps://github.com/elastic/eui/pull/8031).\r\n\r\nThis PR
identifies and replaces one of them (`@euiFormControlWithIcon`)\r\nwith
their functional padding output equivalents (still using generic\r\nEUI
Sass variables - there are no plans to immediately deprecate
those).\r\n\r\nThere should be **no UI regressions** in the unified
search query bar\r\ncompared to main, the right and left padding should
remain the same:\r\n\r\n<img width=\"925\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/ac6359af-5169-4642-ba7e-64e42cb57749\">\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"b3d28c8290891b42175c335ea22c550392bbca9c","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","v8.16.0","backport:version"],"title":"[Unified
Search] Remove soon-to-be-deprecated EuiFormControl Sass
mixins","number":193472,"url":"https://github.com/elastic/kibana/pull/193472","mergeCommit":{"message":"[Unified
Search] Remove soon-to-be-deprecated EuiFormControl Sass mixins
(#193472)\n\n## Summary\r\n\r\nAs part of our ongoing transition towards
CSS-in-JS, EUI is cleaning up\r\nand removing several publicly exported
Sass mixins and variables with\r\nvery low usage (0-1 usages across
Kibana and Cloud) (full list
in\r\nhttps://github.com/elastic/eui/pull/8031).\r\n\r\nThis PR
identifies and replaces one of them (`@euiFormControlWithIcon`)\r\nwith
their functional padding output equivalents (still using generic\r\nEUI
Sass variables - there are no plans to immediately deprecate
those).\r\n\r\nThere should be **no UI regressions** in the unified
search query bar\r\ncompared to main, the right and left padding should
remain the same:\r\n\r\n<img width=\"925\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/ac6359af-5169-4642-ba7e-64e42cb57749\">\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"b3d28c8290891b42175c335ea22c550392bbca9c"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193472","number":193472,"mergeCommit":{"message":"[Unified
Search] Remove soon-to-be-deprecated EuiFormControl Sass mixins
(#193472)\n\n## Summary\r\n\r\nAs part of our ongoing transition towards
CSS-in-JS, EUI is cleaning up\r\nand removing several publicly exported
Sass mixins and variables with\r\nvery low usage (0-1 usages across
Kibana and Cloud) (full list
in\r\nhttps://github.com/elastic/eui/pull/8031).\r\n\r\nThis PR
identifies and replaces one of them (`@euiFormControlWithIcon`)\r\nwith
their functional padding output equivalents (still using generic\r\nEUI
Sass variables - there are no plans to immediately deprecate
those).\r\n\r\nThere should be **no UI regressions** in the unified
search query bar\r\ncompared to main, the right and left padding should
remain the same:\r\n\r\n<img width=\"925\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/ac6359af-5169-4642-ba7e-64e42cb57749\">\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"b3d28c8290891b42175c335ea22c550392bbca9c"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cee Chen <[email protected]>
  • Loading branch information
@kibanamachine @cee-chen
kibanamachine and cee-chen authored Sep 24, 2024
1 parent 58480de commit 93ec7be
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 10 deletions.
18 changes: 8 additions & 10 deletions src/plugins/unified_search/public/query_string_input/query_string_input.scss
View file
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);
}
}
}
1 change: 1 addition & 0 deletions src/plugins/unified_search/public/query_string_input/query_string_input.tsx
View file
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 93ec7be

Please sign in to comment.