fix(tags): incorrect height (#UIM-365)

packages/mosaic/tags/tag-list.component.spec.ts

@@ -37,7 +37,7 @@ import {
     typeInElement,
     MockNgZone
 } from '@ptsecurity/cdk/testing';
-import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McFormField, McFormFieldModule } from '@ptsecurity/mosaic/form-field';
 import { Subject } from 'rxjs';
 
 import { McInputModule } from '../input/index';
@@ -47,7 +47,7 @@ import { McTagInputEvent } from './tag-input';
 import { McTag } from './tag.component';
 
 
-describe('MatTagList', () => {
+describe('McTagList', () => {
     let fixture: ComponentFixture<any>;
     let tagListDebugElement: DebugElement;
     let tagListNativeElement: HTMLElement;
@@ -68,6 +68,10 @@ describe('MatTagList', () => {
                 expect(tagListNativeElement.classList).toContain('mc-tag-list');
             });
 
+            it('height should be 30px', () => {
+                expect(tagListNativeElement.getBoundingClientRect().height).toBe(30);
+            });
+
             it('should not have the aria-selected attribute when is not selectable', () => {
                 testComponent.selectable = false;
                 fixture.detectChanges();
@@ -483,9 +487,7 @@ describe('MatTagList', () => {
 
     describe('FormFieldTagList', () => {
 
-        beforeEach(() => {
-            setupInputList();
-        });
+        beforeEach(setupInputList);
 
         describe('keyboard behavior', () => {
             beforeEach(() => {
@@ -544,6 +546,11 @@ describe('MatTagList', () => {
             });
         });
 
+        it('height should be 32px', () => {
+            const formFieldElement = fixture.debugElement.query(By.directive(McFormField)).nativeElement;
+            expect(formFieldElement.getBoundingClientRect().height).toBe(32);
+        });
+
         it('should complete the stateChanges stream on destroy', () => {
             const spy = jasmine.createSpy('stateChanges complete');
             const subscription = tagListInstance.stateChanges.subscribe({complete: spy});
@@ -1333,8 +1340,8 @@ class StandardTagList {
         <mc-form-field>
             <mc-tag-list #tagList>
                 <mc-tag *ngFor="let tag of tags" (removed)="remove(tag)">{{ tag }}</mc-tag>
+                <input name="test" [mcTagInputFor]="tagList"/>
             </mc-tag-list>
-            <input name="test" [mcTagInputFor]="tagList"/>
         </mc-form-field>
     `
 })

packages/mosaic/tags/tag-list.scss

@@ -13,7 +13,7 @@
     min-width: 0;
     min-height: 28px;
 
-    padding: 2px 6px;
+    padding: 1px 6px;
 
     & .mc-tag-input {
         max-width: 100%;
@@ -27,7 +27,7 @@
 
 .mc-tags-list__cleaner {
     & .mc-cleaner {
-        height: 32px;
+        height: 30px;
     }
 }
 

packages/wallabyTest.ts

@@ -1,13 +1,15 @@
-// tslint:disable:no-import-side-effect
+/* tslint:disable:no-import-side-effect ordered-imports */
+import 'core-js/es7/reflect';
+import 'core-js/es7/object';
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+
 import { getTestBed } from '@angular/core/testing';
 import {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
-import 'core-js/es7/object';
-import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
 
 
 getTestBed().initTestEnvironment(