fix(form field): addon alignment (#2460)

akveo · Jul 29, 2020 · dc154ab · dc154ab
1 parent e9f84be
commit dc154ab
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 6 deletions.
diff --git a/src/framework/theme/components/form-field/_form-field.component.theme.scss b/src/framework/theme/components/form-field/_form-field.component.theme.scss
@@ -5,6 +5,14 @@
  */
 
 @mixin nb-form-field-theme() {
+  .nb-form-control-container {
+    max-width: inherit;
+
+    input {
+      width: 100%;
+    }
+  }
+
   .nb-form-field-addon {
     display: flex;
     justify-content: center;
@@ -31,9 +39,14 @@
   }
 
   @each $size in nb-get-sizes() {
+    $form-field-max-width: nb-theme(form-field-#{$size}-max-width);
     $addon-height: nb-theme(form-field-addon-#{$size}-height);
     $addon-width: nb-theme(form-field-addon-#{$size}-width);
 
+    .nb-form-field-limited-width.nb-form-field-size-#{$size} {
+      max-width: $form-field-max-width;
+    }
+
     .nb-form-field-prefix-#{$size},
     .nb-form-field-suffix-#{$size} {
       height: $addon-height;

diff --git a/src/framework/theme/components/form-field/form-field-control.ts b/src/framework/theme/components/form-field/form-field-control.ts
@@ -18,6 +18,7 @@ export abstract class NbFormFieldControl {
   size$: Observable<NbComponentSize>;
   focused$: Observable<boolean>;
   disabled$: Observable<boolean>;
+  fullWidth$: Observable<boolean>;
 }
 
 /*
@@ -32,6 +33,7 @@ export class NbFormFieldControlConfig {
 export interface NbFormControlState {
   status: NbComponentStatus;
   size: NbComponentSize;
+  fullWidth: boolean;
   focused: boolean;
   disabled: boolean;
 }
diff --git a/src/framework/theme/components/form-field/form-field.component.ts b/src/framework/theme/components/form-field/form-field.component.ts
@@ -18,9 +18,10 @@ import {
   ElementRef,
   Renderer2,
   AfterViewInit,
+  HostBinding,
 } from '@angular/core';
 import { merge, Subject, Observable, combineLatest, ReplaySubject } from 'rxjs';
-import { takeUntil, distinctUntilChanged, map } from 'rxjs/operators';
+import { takeUntil, distinctUntilChanged, map, tap } from 'rxjs/operators';
 
 import { NbPrefixDirective } from './prefix.directive';
 import { NbSuffixDirective } from './suffix.directive';
@@ -103,6 +104,8 @@ export class NbFormFieldComponent implements AfterContentChecked, AfterContentIn
   @ContentChild(NbFormFieldControl, { static: false }) formControl: NbFormFieldControl;
   @ContentChild(NbFormFieldControlConfig, { static: false }) formControlConfig: NbFormFieldControlConfig;
 
+  @HostBinding('class') formFieldClasses;
+
   constructor(
     protected cd: ChangeDetectorRef,
     protected zone: NgZone,
@@ -142,12 +145,19 @@ export class NbFormFieldComponent implements AfterContentChecked, AfterContentIn
   }
 
   protected subscribeToFormControlStateChange() {
-    const { disabled$, focused$, size$, status$ } = this.formControl;
+    const { disabled$, focused$, size$, status$, fullWidth$ } = this.formControl;
 
-    combineLatest([disabled$, focused$, size$, status$])
+    combineLatest([disabled$, focused$, size$, status$, fullWidth$])
       .pipe(
-        map(([disabled, focused, size, status]) => ({ disabled, focused, size, status })),
+        map(([disabled, focused, size, status, fullWidth]) => ({ disabled, focused, size, status, fullWidth })),
         distinctUntilChanged((oldState, state) => this.isStatesEqual(oldState, state)),
+        tap(({ size, fullWidth }) => {
+          const formFieldClasses = [`nb-form-field-size-${size}`];
+          if (!fullWidth) {
+            formFieldClasses.push('nb-form-field-limited-width')
+          }
+          this.formFieldClasses = formFieldClasses.join(' ');
+        }),
         takeUntil(this.destroy$),
       )
       .subscribe(this.formControlState$);
@@ -184,6 +194,7 @@ export class NbFormFieldComponent implements AfterContentChecked, AfterContentIn
     return oldState.status === state.status &&
            oldState.disabled === state.disabled &&
            oldState.focused === state.focused &&
+           oldState.fullWidth === state.fullWidth &&
            oldState.size === state.size;
   }
 }
diff --git a/src/framework/theme/components/input/input.directive.ts b/src/framework/theme/components/input/input.directive.ts
@@ -284,13 +284,16 @@ export class NbInputDirective implements DoCheck, OnChanges, OnInit, AfterViewIn
     }
   }
 
-  ngOnChanges({ status, fieldSize }: SimpleChanges) {
+  ngOnChanges({ status, fieldSize, fullWidth }: SimpleChanges) {
     if (status) {
       this.status$.next(this.status);
     }
     if (fieldSize) {
       this.size$.next(this.fieldSize);
     }
+    if (fullWidth) {
+      this.fullWidth$.next(this.fullWidth);
+    }
   }
 
   ngOnInit() {
@@ -408,4 +411,9 @@ export class NbInputDirective implements DoCheck, OnChanges, OnInit, AfterViewIn
    * @docs-private
    **/
   disabled$ = new BehaviorSubject<boolean>(false);
+
+  /*
+   * @docs-private
+   **/
+  fullWidth$ = new BehaviorSubject<boolean>(this.fullWidth);
 }
diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts
@@ -723,6 +723,11 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
    **/
   disabled$ = new BehaviorSubject<boolean>(this.disabled);
 
+  /*
+   * @docs-private
+   **/
+  fullWidth$ = new BehaviorSubject<boolean>(this.fullWidth);
+
   constructor(@Inject(NB_DOCUMENT) protected document,
               protected overlay: NbOverlayService,
               protected hostRef: ElementRef<HTMLElement>,
@@ -776,7 +781,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
     return this.selectionModel[0].content;
   }
 
-  ngOnChanges({ disabled, status, size}: SimpleChanges) {
+  ngOnChanges({ disabled, status, size, fullWidth }: SimpleChanges) {
     if (disabled) {
       this.disabled$.next(disabled.currentValue);
     }
@@ -786,6 +791,9 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
     if (size) {
       this.size$.next(size.currentValue);
     }
+    if (fullWidth) {
+      this.fullWidth$.next(fullWidth.currentValue);
+    }
   }
 
   ngAfterContentInit() {

diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss
@@ -2735,6 +2735,12 @@ $eva-mapping: (
   toggle-control-disabled-checked-switcher-checkmark-color: color-basic-100,
   toggle-control-disabled-text-color: text-control-color,
 
+  form-field-tiny-max-width: input-tiny-max-width,
+  form-field-small-max-width: input-small-max-width,
+  form-field-medium-max-width: input-medium-max-width,
+  form-field-large-max-width: input-large-max-width,
+  form-field-giant-max-width: input-giant-max-width,
+
   form-field-addon-basic-text-color: color-basic-600,
   form-field-addon-basic-highlight-text-color: color-primary-500,
   form-field-addon-primary-text-color: color-primary-500,