[K8] Continuing to fix the KQL bar styles (#96264) (#96584)

elastic · Apr 8, 2021 · e53d01a · e53d01a
1 parent 34433ee
commit e53d01a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -17,6 +17,16 @@
 
  @include kbnThemeStyle('v8') {
  background-color: $euiFormBackgroundColor;
+ border-radius: $euiFormControlBorderRadius;
+
+ &.kbnQueryBar__textareaWrap--hasPrepend {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ &.kbnQueryBar__textareaWrap--hasAppend {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
  }
 }
 
@@ -35,8 +45,16 @@
  }
 
  @include kbnThemeStyle('v8') {
- border-radius: 0;
  padding-bottom: $euiSizeS + 1px;
+
+ &.kbnQueryBar__textarea--hasPrepend {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ &.kbnQueryBar__textarea--hasAppend {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
  }
 
  &:not(.kbnQueryBar__textarea--autoHeight):not(:invalid) {

diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -682,7 +682,14 @@ export default class QueryStringInputUI extends Component<Props, State> {
  );
  const inputClassName = classNames(
  'kbnQueryBar__textarea',
- this.props.iconType ? 'kbnQueryBar__textarea--withIcon' : null
+ this.props.iconType ? 'kbnQueryBar__textarea--withIcon' : null,
+ this.props.prepend ? 'kbnQueryBar__textarea--hasPrepend' : null,
+ !this.props.disableLanguageSwitcher ? 'kbnQueryBar__textarea--hasAppend' : null
+ );
+ const inputWrapClassName = classNames(
+ 'euiFormControlLayout__childrenWrapper kbnQueryBar__textareaWrap',
+ this.props.prepend ? 'kbnQueryBar__textareaWrap--hasPrepend' : null,
+ !this.props.disableLanguageSwitcher ? 'kbnQueryBar__textareaWrap--hasAppend' : null
  );
 
  return (
@@ -711,7 +718,7 @@ export default class QueryStringInputUI extends Component<Props, State> {
  >
  <div
  role="search"
- className="euiFormControlLayout__childrenWrapper kbnQueryBar__textareaWrap"
+ className={inputWrapClassName}
  ref={this.queryBarInputDivRefInstance}
  >
  <EuiTextArea