[Unified Search] Change filter styling

src/plugins/unified_search/public/filter_badge/filter_badge_group.tsx

@@ -9,10 +9,10 @@
 
 import React, { Fragment } from 'react';
 import type { Filter, BooleanRelation, DataViewBase } from '@kbn/es-query';
-import { EuiTextColor } from '@elastic/eui';
+import { EuiBadge, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { FilterBadgeErrorBoundary } from './filter_badge_error_boundary';
 import { FilterExpressionBadge } from './filter_badge_expression';
-import { conditionCss } from './filter_badge.styles';
 
 export interface FilterBadgeGroupProps {
   filters: Filter[];
@@ -23,10 +23,15 @@ export interface FilterBadgeGroupProps {
 }
 
 const BooleanRelationDelimiter = ({ conditional }: { conditional: BooleanRelation }) => {
+  const { euiTheme } = useEuiTheme();
+  const horizontalMargin = css`
+    margin-inline: ${euiTheme.size.s};
+  `;
+
   /**
    *  Spaces have been added to make the title readable.
    */
-  return <EuiTextColor className={conditionCss}>{` ${conditional} `}</EuiTextColor>;
+  return <EuiBadge color="warning" css={horizontalMargin}>{` ${conditional} `}</EuiBadge>;
 };
 
 export function FilterBadgeGroup({

src/plugins/unified_search/public/filter_badge/filter_content/filter_content.tsx

@@ -8,20 +8,36 @@
  */
 
 import React from 'react';
-import { EuiTextColor } from '@elastic/eui';
+import { EuiTextColor, useEuiTheme } from '@elastic/eui';
 import type { Filter } from '@kbn/es-query';
 import { FILTERS } from '@kbn/es-query';
+import { css } from '@emotion/react';
 import { existsOperator, isOneOfOperator } from '../../filter_bar/filter_editor';
 import { strings } from '../i18n';
 
-const FilterValue = ({ value }: { value: string | number }) => {
+const FilterValue = ({ value, operator }: { value?: string | number; operator?: string }) => {
+  const { euiTheme } = useEuiTheme();
+  const operatorStyles = css`
+    font-weight: ${euiTheme.font.weight.semiBold};
+    color: ${euiTheme.colors.primaryText};
+  `;
+  const valueFontWeight = css`
+    font-weight: ${euiTheme.font.weight.medium};
+  `;
+
   return (
-    <EuiTextColor
-      color={typeof value === 'string' ? 'success' : 'accent'}
-      className="globalFilterLabel__value"
-    >
-      {` ${value}`}
-    </EuiTextColor>
+    <>
+      {operator ? (
+        <EuiTextColor color="primary" css={operatorStyles} className="globalFilterLabel__value">
+          {` ${operator}`}
+        </EuiTextColor>
+      ) : null}
+      {value ? (
+        <EuiTextColor color="success" css={valueFontWeight} className="globalFilterLabel__value">
+          {` ${value}`}
+        </EuiTextColor>
+      ) : null}
+    </>
   );
 };
 
@@ -32,16 +48,31 @@ const FilterField = ({
   filter: Filter;
   fieldLabel?: string | undefined;
 }) => {
+  const { euiTheme } = useEuiTheme();
+  const fontWeight = css`
+    font-weight: ${euiTheme.font.weight.semiBold};
+  `;
+
   return (
     <>
       <Prefix prefix={filter.meta.negate} />
-      {fieldLabel || filter.meta.key}:
+      <EuiTextColor css={fontWeight}>{fieldLabel || filter.meta.key}:</EuiTextColor>
     </>
   );
 };
 
-const Prefix = ({ prefix }: { prefix?: boolean }) =>
-  prefix ? <EuiTextColor color="danger">{strings.getNotLabel()}</EuiTextColor> : null;
+const Prefix = ({ prefix }: { prefix?: boolean }) => {
+  const { euiTheme } = useEuiTheme();
+  const fontWeight = css`
+    font-weight: ${euiTheme.font.weight.semiBold};
+  `;
+
+  return prefix ? (
+    <EuiTextColor color="danger" css={fontWeight}>
+      {strings.getNotLabel()}
+    </EuiTextColor>
+  ) : null;
+};
 
 export interface FilterContentProps {
   filter: Filter;
@@ -65,14 +96,14 @@ export function FilterContent({ filter, valueLabel, fieldLabel, hideAlias }: Fil
       return (
         <>
           <FilterField filter={filter} fieldLabel={fieldLabel} />
-          <FilterValue value={`${existsOperator.message}`} />
+          <FilterValue operator={existsOperator.message} />
         </>
       );
     case FILTERS.PHRASES:
       return (
         <>
           <FilterField filter={filter} fieldLabel={fieldLabel} />
-          <FilterValue value={`${isOneOfOperator.message} ${valueLabel}`} />
+          <FilterValue operator={isOneOfOperator.message} value={valueLabel} />
         </>
       );
     case FILTERS.QUERY_STRING:

test/functional/apps/context/_filters.ts

@@ -176,7 +176,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await filterBar.clickEditFilterById('0');
 
       expect(await filterBar.getFilterEditorPreview()).to.equal(
-        'extension: png OR bytes: 1,000B to 2KB'
+        'extension: png\nOR\nbytes: 1,000B to 2KB'
       );
     });
 

x-pack/test/functional/apps/infra/hosts_view.ts

@@ -608,7 +608,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
             expect(hostRowsAfterFilter.length).to.equal(2);
 
             const deleteFilterButton = await find.byCssSelector(
-              `[title="Delete host.name: host-1 OR host.name: host-2"]`
+              `[title="Delete host.name: host-1\nOR\nhost.name: host-2"]`
             );
             await deleteFilterButton.click();
             await pageObjects.header.waitUntilLoadingHasFinished();

x-pack/test_serverless/functional/test_suites/common/context/_filters.ts

@@ -176,7 +176,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await filterBar.clickEditFilterById('0');
 
       expect(await filterBar.getFilterEditorPreview()).to.equal(
-        'extension: png OR bytes: 1,000B to 2KB'
+        'extension: png\nOR\nbytes: 1,000B to 2KB'
       );
     });