fix(select): prevent empty select height collapsing (#1643)

e2e/select.e2e-spec.ts

@@ -0,0 +1,26 @@
+import { browser, by, element, ElementArrayFinder } from 'protractor';
+
+describe('nb-select', () => {
+
+  beforeEach((done) => {
+    browser.get('#/select/select-test.component').then(done);
+  });
+
+  it('should not shrink when has no placeholder and text', (done) => {
+    const checks: Promise<void>[] = [];
+    const selectHeights = [ 24, 32, 40, 48, 56 ];
+    const selectElements: ElementArrayFinder = element.all(by.tagName('nb-select'));
+
+    for (let i = 0; i < selectElements.length; i++) {
+      const check = Promise.all([selectElements[i].getText(), selectElements[i].getSize()])
+        .then(([text, { height }]) => {
+          expect(text).toEqual('');
+          expect(height).toEqual(selectHeights[i]);
+        });
+
+      checks.push(check);
+    }
+
+    Promise.all(checks).then(done);
+  });
+});

src/app/playground-components.ts

@@ -936,6 +936,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'SelectInteractiveComponent',
         name: 'Select Interactive',
       },
+      {
+        path: 'select-test.component',
+        link: '/select/select-test.component',
+        component: 'SelectTestComponent',
+        name: 'Select Test',
+      },
     ],
   },
   {

src/framework/theme/components/select/_select.component.theme.scss

@@ -77,6 +77,12 @@
       line-height: nb-theme(select-#{$size}-text-line-height);
     }
 
+    nb-select.size-#{$size} .select-button.empty::before {
+      content: ' ';
+      display: block;
+      height: nb-theme(select-#{$size}-text-line-height);
+    }
+
     nb-select.size-#{$size}:not(.full-width),
     .options-list:not(.full-width) {
       max-width: nb-theme(select-#{$size}-max-width);

src/framework/theme/components/select/select.component.ts

@@ -658,7 +658,10 @@ export class NbSelectComponent<T> implements AfterViewInit, AfterContentInit, On
     const classes = [];
 
     if (!this.selectionModel.length) {
-      classes.push('placeholder')
+      classes.push('placeholder');
+    }
+    if (!this.selectionModel.length && !this.placeholder) {
+      classes.push('empty');
     }
     if (this.isOpen) {
       classes.push(this.overlayPosition);

src/framework/theme/components/select/select.spec.ts

@@ -4,7 +4,16 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, ElementRef, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -576,6 +585,14 @@ describe('Component: NbSelectComponent', () => {
     expect(() => selectFixture.ngOnDestroy()).not.toThrow();
   });
 
+  it(`should has 'empty' class when has no placeholder and text`, () => {
+    const selectFixture = TestBed.createComponent(NbSelectComponent);
+    selectFixture.detectChanges();
+    const button = selectFixture.debugElement.query(By.css('button'));
+
+    expect(button.classes['empty']).toEqual(true);
+  });
+
   it(`should set overlay width same as button inside select`, () => {
     const selectFixture = TestBed.createComponent(NbSelectComponent);
     const selectComponent = selectFixture.componentInstance;

src/playground/with-layout/select/select-routing.module.ts

@@ -20,6 +20,7 @@ import { SelectShowcaseComponent } from './select-showcase.component';
 import { SelectSizesComponent } from './select-sizes.component';
 import { SelectStatusComponent } from './select-status.component';
 import { SelectInteractiveComponent } from './select-interactive.component';
+import { SelectTestComponent } from './select-test.component';
 
 const routes: Route[] = [
   {
@@ -78,6 +79,10 @@ const routes: Route[] = [
     path: 'select-interactive.component',
     component: SelectInteractiveComponent,
   },
+  {
+    path: 'select-test.component',
+    component: SelectTestComponent,
+  },
 ];
 
 @NgModule({

src/playground/with-layout/select/select-test.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NbComponentSize } from '@nebular/theme';
+
+@Component({
+  template: `
+    <h1>Empty select height test</h1>
+    <nb-select *ngFor="let size of sizes" [size]="size"></nb-select>
+  `,
+  styles: [`
+    nb-select {
+      display: block;
+    }
+  `],
+})
+export class SelectTestComponent {
+  sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
+}

src/playground/with-layout/select/select.module.ts

@@ -23,6 +23,7 @@ import { SelectShowcaseComponent } from './select-showcase.component';
 import { SelectSizesComponent } from './select-sizes.component';
 import { SelectStatusComponent } from './select-status.component';
 import { SelectInteractiveComponent } from './select-interactive.component';
+import { SelectTestComponent } from './select-test.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +41,7 @@ import { SelectInteractiveComponent } from './select-interactive.component';
     SelectSizesComponent,
     SelectStatusComponent,
     SelectInteractiveComponent,
+    SelectTestComponent,
   ],
   imports: [
     FormsModule,