From dc154abf9e7370dbcf1c453a0072a62fa60960ee Mon Sep 17 00:00:00 2001 From: maksim-karatkevich Date: Wed, 29 Jul 2020 12:44:59 +0300 Subject: [PATCH] fix(form field): addon alignment (#2460) --- .../_form-field.component.theme.scss | 13 +++++++++++++ .../form-field/form-field-control.ts | 2 ++ .../form-field/form-field.component.ts | 19 +++++++++++++++---- .../theme/components/input/input.directive.ts | 10 +++++++++- .../components/select/select.component.ts | 10 +++++++++- .../theme/styles/themes/_mapping.scss | 6 ++++++ 6 files changed, 54 insertions(+), 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 index 539900e3ca..a78a80d0c2 100644 --- 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 index 829135fb2d..1ac4e2b94b 100644 --- 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; focused$: Observable; disabled$: Observable; + fullWidth$: Observable; } /* @@ -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 index 24732acc42..e7c5c0af99 100644 --- 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 index e07192e313..c7e9382a71 100644 --- 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(false); + + /* + * @docs-private + **/ + fullWidth$ = new BehaviorSubject(this.fullWidth); } diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index a4be9d7c03..7b7ee8012f 100644 --- 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(this.disabled); + /* + * @docs-private + **/ + fullWidth$ = new BehaviorSubject(this.fullWidth); + constructor(@Inject(NB_DOCUMENT) protected document, protected overlay: NbOverlayService, protected hostRef: ElementRef, @@ -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 index 798f5cfa6d..2253da4a9a 100644 --- 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,