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,