fix(filter-field): Fixes an issue with confusing disabled styles.

Fixes APM-269127
dynatrace-oss · Nov 23, 2020 · 32ea19d · 32ea19d
1 parent a7e133b
commit 32ea19d
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 11 deletions.
diff --git a/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.html b/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.html
@@ -31,6 +31,7 @@
   </button>
 </div>
 <button
+  *ngIf="!(_filterFieldDisabled || disabled) && deletable"
   dt-icon-button
   variant="nested"
   class="dt-filter-field-tag-button"

diff --git a/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.scss b/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.scss
@@ -26,7 +26,18 @@
   &.dt-filter-field-tag-disabled {
     border-color: $gray-200;
     background-color: #ffffff;
-    color: $gray-300;
+
+    .dt-filter-field-tag-key,
+    .dt-filter-field-tag-value {
+      color: $gray-500;
+    }
+  }
+
+  &.dt-filter-field-tag-read-only {
+    .dt-filter-field-tag-key,
+    .dt-filter-field-tag-value {
+      color: $gray-500;
+    }
   }
 }
 
@@ -75,11 +86,6 @@
 
 .dt-filter-field-tag-container {
   display: flex;
-
-  &.dt-filter-field-tag-value-isfreetext::after {
-    content: '"';
-    color: $turquoise-600;
-  }
 }
 
 .dt-filter-field-tag-value {
@@ -98,6 +104,8 @@
   overflow: hidden;
 }
 
-.dt-filter-field-tag-value-isfreetext .dt-filter-field-tag-value::before {
+.dt-filter-field-tag-value-isfreetext .dt-filter-field-tag-value::before,
+.dt-filter-field-tag-value-isfreetext .dt-filter-field-tag-value::after {
   content: '"';
+  color: currentColor;
 }
diff --git a/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.ts b/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.ts
@@ -44,6 +44,7 @@ import { Subject } from 'rxjs';
     '[attr.role]': `'option'`,
     class: 'dt-filter-field-tag',
     '[class.dt-filter-field-tag-disabled]': '_filterFieldDisabled || disabled',
+    '[class.dt-filter-field-tag-read-only]': '!editable',
   },
   encapsulation: ViewEncapsulation.Emulated,
   preserveWhitespaces: false,

diff --git a/libs/barista-components/filter-field/src/filter-field.spec.ts b/libs/barista-components/filter-field/src/filter-field.spec.ts
@@ -1210,7 +1210,7 @@ describe('DtFilterField', () => {
       const tags = getFilterTags(fixture);
       const { label, deleteButton } = getTagButtons(tags[0]);
       expect(label.disabled).toBeFalsy();
-      expect(deleteButton.disabled).toBeTruthy();
+      expect(deleteButton).toBeNull();
     });
 
     it('should disable the entire tag when disabled is set to true', () => {
@@ -1220,7 +1220,7 @@ describe('DtFilterField', () => {
       const tags = getFilterTags(fixture);
       const { label, deleteButton } = getTagButtons(tags[0]);
       expect(label.disabled).toBeTruthy();
-      expect(deleteButton.disabled).toBeTruthy();
+      expect(deleteButton).toBeNull();
     });
 
     it('should keep the deletable/editable flags on the tags when a tag is edited', () => {

diff --git a/...eld-readonly-non-editable-tags-example/filter-field-readonly-non-editable-tags-example.ts b/...eld-readonly-non-editable-tags-example/filter-field-readonly-non-editable-tags-example.ts
@@ -35,7 +35,12 @@ export class DtExampleFilterFieldReadOnlyTags<T> implements AfterViewInit {
     autocomplete: [
       {
         name: 'AUT',
-        autocomplete: [{ name: 'Linz' }, { name: 'Vienna' }, { name: 'Graz' }],
+        autocomplete: [
+          { name: 'Linz' },
+          { name: 'Vienna' },
+          { name: 'Graz' },
+          { name: 'Bregenz' },
+        ],
       },
       {
         name: 'USA',
@@ -65,7 +70,48 @@ export class DtExampleFilterFieldReadOnlyTags<T> implements AfterViewInit {
     this.DATA.autocomplete[0],
     this.DATA.autocomplete[0].autocomplete![0],
   ];
-  _filters = [this._linzFilter];
+  private _viennaFilter = [
+    this.DATA.autocomplete[0],
+    this.DATA.autocomplete[0].autocomplete![1],
+  ];
+  private _grazFilter = [
+    this.DATA.autocomplete[0],
+    this.DATA.autocomplete[0].autocomplete![2],
+  ];
+  private _bregenzFilter = [
+    this.DATA.autocomplete[0],
+    this.DATA.autocomplete[0].autocomplete![3],
+  ];
+  private _miamiFilter = [
+    this.DATA.autocomplete[1],
+    this.DATA.autocomplete[1].autocomplete![3],
+    'Miami',
+  ];
+  private _austinFilter = [
+    this.DATA.autocomplete[1],
+    this.DATA.autocomplete[1].autocomplete![3],
+    'Austin',
+  ];
+  private _sandiegoFilter = [
+    this.DATA.autocomplete[1],
+    this.DATA.autocomplete[1].autocomplete![3],
+    'San Diego',
+  ];
+  private _bendFilter = [
+    this.DATA.autocomplete[1],
+    this.DATA.autocomplete[1].autocomplete![3],
+    'Bend',
+  ];
+  _filters = [
+    this._linzFilter,
+    this._viennaFilter,
+    this._grazFilter,
+    this._bregenzFilter,
+    this._miamiFilter,
+    this._austinFilter,
+    this._sandiegoFilter,
+    this._bendFilter,
+  ];
 
   _dataSource = new DtFilterFieldDefaultDataSource(this.DATA);
 
@@ -79,6 +125,49 @@ export class DtExampleFilterFieldReadOnlyTags<T> implements AfterViewInit {
         linzTag.deletable = false;
         this._changeDetectorRef.markForCheck();
       }
+      const viennaTag = this.filterField.getTagForFilter(this._viennaFilter);
+      if (viennaTag) {
+        viennaTag.editable = true;
+        viennaTag.deletable = false;
+        this._changeDetectorRef.markForCheck();
+      }
+      const grazTag = this.filterField.getTagForFilter(this._grazFilter);
+      if (grazTag) {
+        grazTag.editable = false;
+        grazTag.deletable = true;
+        this._changeDetectorRef.markForCheck();
+      }
+      const bregenz = this.filterField.getTagForFilter(this._bregenzFilter);
+      if (bregenz) {
+        bregenz.editable = true;
+        bregenz.deletable = true;
+        this._changeDetectorRef.markForCheck();
+      }
+      // Permutation for free texts as well
+      const miami = this.filterField.getTagForFilter(this._miamiFilter);
+      if (miami) {
+        miami.editable = false;
+        miami.deletable = false;
+        this._changeDetectorRef.markForCheck();
+      }
+      const austin = this.filterField.getTagForFilter(this._austinFilter);
+      if (austin) {
+        austin.editable = true;
+        austin.deletable = false;
+        this._changeDetectorRef.markForCheck();
+      }
+      const sandiego = this.filterField.getTagForFilter(this._sandiegoFilter);
+      if (sandiego) {
+        sandiego.editable = false;
+        sandiego.deletable = true;
+        this._changeDetectorRef.markForCheck();
+      }
+      const bend = this.filterField.getTagForFilter(this._bendFilter);
+      if (bend) {
+        bend.editable = true;
+        bend.deletable = true;
+        this._changeDetectorRef.markForCheck();
+      }
     });
   }
 }