Fixing class names and making look similar to disabled

elastic · Mar 5, 2020 · 75451fb · 75451fb
1 parent 91b9547
commit 75451fb
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
@@ -32,6 +32,15 @@
   font-style: italic;
 }
 
+.globalFilterItem-isInvalid {
+  text-decoration: none;
+
+  .globalFilterLabel__value {
+    color: $euiColorDanger;
+    font-weight: $euiFontWeightBold;
+  }
+}
+
 .globalFilterItem-isPinned {
   position: relative;
 

diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/_filter_editor.scss b/src/plugins/data/public/ui/filter_bar/filter_editor/_filter_editor.scss
@@ -1,8 +1,3 @@
 .globalFilterEditor__fieldInput {
   max-width: $euiSize * 13;
 }
-
-.filterError .filterValue {
-  color: $euiColorDanger;
-  font-weight: bold;
-}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx
@@ -42,7 +42,7 @@ export function FilterLabel({ filter, valueLabel }: Props) {
     );
 
   const getValue = (text?: string) => {
-    return <span className="filterValue">{text}</span>;
+    return <span className="globalFilterLabel__value">{text}</span>;
   };
 
   if (filter.meta.alias !== null) {

diff --git a/src/plugins/data/public/ui/filter_bar/filter_item.tsx b/src/plugins/data/public/ui/filter_bar/filter_item.tsx
@@ -92,12 +92,12 @@ class FilterItemUI extends Component<Props, State> {
     const classes = classNames(
       'globalFilterItem',
       {
-        'globalFilterItem-isDisabled': disabled,
+        'globalFilterItem-isDisabled': disabled || hasError,
+        'globalFilterItem-isInvalid': hasError,
         'globalFilterItem-isPinned': isFilterPinned(filter),
         'globalFilterItem-isExcluded': negate,
       },
-      this.props.className,
-      hasError ? 'filterError' : ''
+      this.props.className
     );
 
     const badge = (