[KQL] Fixed styles of KQL textarea for the K8 theme (#96190)

* Fixed style of KQL textarea for K8 theme and some general heights and borders

* Fix popover paddings
This commit is contained in:
Caroline Horn 2021-04-05 09:05:30 -04:00 committed by GitHub
parent b670ef29ae
commit 76acef0c2c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 7 deletions

View file

@ -85,7 +85,7 @@ class FilterEditorUI extends Component<Props, State> {
public render() { public render() {
return ( return (
<div> <div>
<EuiPopoverTitle> <EuiPopoverTitle paddingSize="m">
<EuiFlexGroup alignItems="baseline" responsive={false}> <EuiFlexGroup alignItems="baseline" responsive={false}>
<EuiFlexItem> <EuiFlexItem>
<FormattedMessage <FormattedMessage

View file

@ -161,7 +161,7 @@ class FilterOptionsUI extends Component<Props, State> {
panelPaddingSize="none" panelPaddingSize="none"
repositionOnScroll repositionOnScroll
> >
<EuiPopoverTitle> <EuiPopoverTitle paddingSize="m">
<FormattedMessage <FormattedMessage
id="data.filter.searchBar.changeAllFiltersTitle" id="data.filter.searchBar.changeAllFiltersTitle"
defaultMessage="Change all filters" defaultMessage="Change all filters"

View file

@ -6,6 +6,7 @@
// Uses the append style, but no bordering // Uses the append style, but no bordering
.kqlQueryBar__languageSwitcherButton { .kqlQueryBar__languageSwitcherButton {
border-right: none !important; border-right: none !important;
border-left: $euiFormInputGroupBorder;
} }
.kbnQueryBar__textareaWrap { .kbnQueryBar__textareaWrap {
@ -13,19 +14,31 @@
display: flex; display: flex;
flex: 1 1 100%; flex: 1 1 100%;
position: relative; position: relative;
@include kbnThemeStyle('v8') {
background-color: $euiFormBackgroundColor;
}
} }
.kbnQueryBar__textarea { .kbnQueryBar__textarea {
z-index: $euiZContentMenu; z-index: $euiZContentMenu;
resize: none !important; // When in the group, it will autosize resize: none !important; // When in the group, it will autosize
height: $euiFormControlHeight; height: $euiFormControlHeight - 2px;
// Unlike most inputs within layout control groups, the text area still needs a border // 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 // for multi-line content. These adjusts help it sit above the control groups
// shadow to line up correctly. // shadow to line up correctly.
padding: $euiSizeS; padding: $euiSizeS;
padding-top: $euiSizeS + 3px;
box-shadow: 0 0 0 1px $euiFormBorderColor; box-shadow: 0 0 0 1px $euiFormBorderColor;
@include kbnThemeStyle('v7') {
padding-top: $euiSizeS + 2px;
}
@include kbnThemeStyle('v8') {
border-radius: 0;
padding-bottom: $euiSizeS + 1px;
}
&:not(.kbnQueryBar__textarea--autoHeight):not(:invalid) { &:not(.kbnQueryBar__textarea--autoHeight):not(:invalid) {
@include euiYScrollWithShadows; @include euiYScrollWithShadows;
} }

View file

@ -96,7 +96,7 @@ export function QueryLanguageSwitcher({
/> />
</EuiPopoverTitle> </EuiPopoverTitle>
<div style={{ width: '350px' }}> <div style={{ width: '350px' }}>
<EuiText> <EuiText size="s">
<p> <p>
<FormattedMessage <FormattedMessage
id="data.query.queryBar.syntaxOptionsDescription" id="data.query.queryBar.syntaxOptionsDescription"

View file

@ -202,7 +202,7 @@ export function SavedQueryManagementComponent({
className="kbnSavedQueryManagement__popover" className="kbnSavedQueryManagement__popover"
data-test-subj="saved-query-management-popover" data-test-subj="saved-query-management-popover"
> >
<EuiPopoverTitle id={'savedQueryManagementPopoverTitle'}> <EuiPopoverTitle paddingSize="m" id={'savedQueryManagementPopoverTitle'}>
{savedQueryPopoverTitleText} {savedQueryPopoverTitleText}
</EuiPopoverTitle> </EuiPopoverTitle>
{savedQueries.length > 0 ? ( {savedQueries.length > 0 ? (
@ -234,7 +234,7 @@ export function SavedQueryManagementComponent({
<EuiSpacer size="s" /> <EuiSpacer size="s" />
</Fragment> </Fragment>
)} )}
<EuiPopoverFooter> <EuiPopoverFooter paddingSize="m">
<EuiFlexGroup <EuiFlexGroup
direction="rowReverse" direction="rowReverse"
gutterSize="s" gutterSize="s"