From 222b225ed4d4e56de049b08d7e6e8a77d476d481 Mon Sep 17 00:00:00 2001 From: simplejason Date: Mon, 20 Jun 2022 10:00:39 +0800 Subject: [PATCH] fix(module:input, input-number, steps): fix styles in components (#7522) --- .../input-number-group-slot.component.ts | 1 + .../input-number-group.component.ts | 7 +++++-- .../input-number/input-number.component.ts | 6 +++++- .../input/input-group-slot.component.ts | 1 + components/input/input-group.component.ts | 6 +++++- components/input/input.directive.ts | 6 +++++- components/input/style/patch.less | 19 ++++++++++++----- components/progress/progress.component.ts | 1 + components/steps/step.component.ts | 5 +++-- components/steps/steps.component.ts | 21 +++++++------------ 10 files changed, 47 insertions(+), 26 deletions(-) diff --git a/components/input-number/input-number-group-slot.component.ts b/components/input-number/input-number-group-slot.component.ts index f887dfc508..7b6f4f5fc1 100644 --- a/components/input-number/input-number-group-slot.component.ts +++ b/components/input-number/input-number-group-slot.component.ts @@ -13,6 +13,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati template: ` {{ template }} + `, host: { '[class.ant-input-number-group-addon]': `type === 'addon'`, diff --git a/components/input-number/input-number-group.component.ts b/components/input-number/input-number-group.component.ts index 973d09841d..394b24f75f 100644 --- a/components/input-number/input-number-group.component.ts +++ b/components/input-number/input-number-group.component.ts @@ -90,12 +90,13 @@ export class NzInputNumberGroupWhitSuffixOrPrefixDirective { > + @@ -146,7 +147,7 @@ export class NzInputNumberGroupComponent implements AfterContentInit, OnChanges, affixStatusCls: NgClassInterface = {}; groupStatusCls: NgClassInterface = {}; affixInGroupStatusCls: NgClassInterface = {}; - + status: NzValidateStatus = ''; hasFeedback: boolean = false; private destroy$ = new Subject(); @@ -247,6 +248,8 @@ export class NzInputNumberGroupComponent implements AfterContentInit, OnChanges, } private setStatusStyles(status: NzValidateStatus, hasFeedback: boolean): void { + // set inner status + this.status = status; this.hasFeedback = hasFeedback; this.isFeedback = !!status && hasFeedback; const baseAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon); diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts index 4e97746290..22539ea688 100644 --- a/components/input-number/input-number.component.ts +++ b/components/input-number/input-number.component.ts @@ -14,6 +14,7 @@ import { ElementRef, EventEmitter, forwardRef, + Host, Input, NgZone, OnChanges, @@ -43,6 +44,8 @@ import { } from 'ng-zorro-antd/core/types'; import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; +import { NzInputNumberGroupComponent } from './input-number-group.component'; + @Component({ selector: 'nz-input-number', exportAs: 'nzInputNumber', @@ -87,7 +90,7 @@ import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/ `, @@ -403,6 +406,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn private renderer: Renderer2, @Optional() private directionality: Directionality, private destroy$: NzDestroyService, + @Host() @Optional() public nzInputNumberGroupComponent?: NzInputNumberGroupComponent, @Optional() public nzFormStatusService?: NzFormStatusService ) {} diff --git a/components/input/input-group-slot.component.ts b/components/input/input-group-slot.component.ts index 2aff33cea3..17ce12e23d 100644 --- a/components/input/input-group-slot.component.ts +++ b/components/input/input-group-slot.component.ts @@ -13,6 +13,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati template: ` {{ template }} + `, host: { '[class.ant-input-group-addon]': `type === 'addon'`, diff --git a/components/input/input-group.component.ts b/components/input/input-group.component.ts index 19216ac3db..6df1a7fa9a 100644 --- a/components/input/input-group.component.ts +++ b/components/input/input-group.component.ts @@ -90,12 +90,13 @@ export class NzInputGroupWhitSuffixOrPrefixDirective { > + @@ -155,6 +156,7 @@ export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnIni affixStatusCls: NgClassInterface = {}; groupStatusCls: NgClassInterface = {}; affixInGroupStatusCls: NgClassInterface = {}; + status: NzValidateStatus = ''; hasFeedback: boolean = false; private destroy$ = new Subject(); @@ -251,6 +253,8 @@ export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnIni } private setStatusStyles(status: NzValidateStatus, hasFeedback: boolean): void { + // set inner status + this.status = status; this.hasFeedback = hasFeedback; this.isFeedback = !!status && hasFeedback; const baseAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon); diff --git a/components/input/input.directive.ts b/components/input/input.directive.ts index ae6d165766..1f31bf35c8 100644 --- a/components/input/input.directive.ts +++ b/components/input/input.directive.ts @@ -8,6 +8,7 @@ import { ComponentRef, Directive, ElementRef, + Host, Input, OnChanges, OnDestroy, @@ -26,6 +27,8 @@ import { NzFormItemFeedbackIconComponent, NzFormStatusService } from 'ng-zorro-a import { BooleanInput, NgClassInterface, NzSizeLDSType, NzStatus, NzValidateStatus } from 'ng-zorro-antd/core/types'; import { getStatusClassNames, InputBoolean } from 'ng-zorro-antd/core/util'; +import { NzInputGroupComponent } from './input-group.component'; + @Directive({ selector: 'input[nz-input],textarea[nz-input]', exportAs: 'nzInput', @@ -72,6 +75,7 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy { private elementRef: ElementRef, protected hostView: ViewContainerRef, @Optional() private directionality: Directionality, + @Host() @Optional() private nzInputGroupComponent?: NzInputGroupComponent, @Optional() private nzFormStatusService?: NzFormStatusService ) { renderer.addClass(elementRef.nativeElement, 'ant-input'); @@ -138,7 +142,7 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy { } private renderFeedbackIcon(): void { - if (!this.status || !this.hasFeedback) { + if (!this.status || !this.hasFeedback || this.nzInputGroupComponent?.isFeedback) { // remove feedback this.hostView.clear(); this.feedbackRef = null; diff --git a/components/input/style/patch.less b/components/input/style/patch.less index 90ca373365..74dfd697e7 100644 --- a/components/input/style/patch.less +++ b/components/input/style/patch.less @@ -26,7 +26,11 @@ textarea.nz-textarea-autosize-measuring { } } -.@{ant-prefix}-input { +.ant-input-affix-wrapper-textarea-with-clear-btn .ant-input-suffix { + margin-left: 0; +} + +nz-form-item-feedback-icon.@{ant-prefix}-input { &-suffix { display: flex; flex: none; @@ -40,11 +44,16 @@ textarea.nz-textarea-autosize-measuring { right: 0; z-index: 1; height: 100%; - margin-right: @input-padding-horizontal-base; + margin-right: @padding-sm; margin-left: @input-affix-margin; } +} - &&-has-feedback { - padding-right: @padding-lg; +.@{ant-prefix}-input { + &-status-error, &-status-warning, &-status-validating, &-status-success { + &.@{ant-prefix}-input-has-feedback { + padding-right: @padding-lg + @padding-xss; + } } -} \ No newline at end of file +} + diff --git a/components/progress/progress.component.ts b/components/progress/progress.component.ts index 3257b4c02d..d8165146f1 100644 --- a/components/progress/progress.component.ts +++ b/components/progress/progress.component.ts @@ -75,6 +75,7 @@ const defaultFormatter: NzProgressFormatter = (p: number): string => `${p}%`; [ngClass]="'ant-progress ant-progress-status-' + status" [class.ant-progress-line]="nzType === 'line'" [class.ant-progress-small]="nzSize === 'small'" + [class.ant-progress-default]="nzSize === 'default'" [class.ant-progress-show-info]="nzShowInfo" [class.ant-progress-circle]="isCircleStyle" [class.ant-progress-steps]="isSteps" diff --git a/components/steps/step.component.ts b/components/steps/step.component.ts index 129a3e59f1..3d11deec22 100644 --- a/components/steps/step.component.ts +++ b/components/steps/step.component.ts @@ -19,7 +19,7 @@ import { fromEvent, Subject } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; import { NzDestroyService } from 'ng-zorro-antd/core/services'; -import { BooleanInput, NgClassType } from 'ng-zorro-antd/core/types'; +import { BooleanInput, NgClassType, NzSizeDSType } from 'ng-zorro-antd/core/types'; import { InputBoolean } from 'ng-zorro-antd/core/util'; import { NzProgressFormatter } from 'ng-zorro-antd/progress'; @@ -43,7 +43,7 @@ import { NzProgressFormatter } from 'ng-zorro-antd/progress'; @@ -112,6 +112,7 @@ export class NzStepComponent implements OnInit { @Input() nzDescription?: string | TemplateRef; @Input() @InputBoolean() nzDisabled = false; @Input() nzPercentage: number | null = null; + @Input() nzSize: NzSizeDSType = 'default'; @Input() get nzStatus(): string { diff --git a/components/steps/steps.component.ts b/components/steps/steps.component.ts index 9618e54f00..834416fc7a 100644 --- a/components/steps/steps.component.ts +++ b/components/steps/steps.component.ts @@ -10,7 +10,6 @@ import { ChangeDetectorRef, Component, ContentChildren, - ElementRef, EventEmitter, Input, NgZone, @@ -19,7 +18,6 @@ import { Optional, Output, QueryList, - Renderer2, SimpleChanges, TemplateRef, ViewEncapsulation @@ -79,14 +77,13 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit { private indexChangeSubscription = Subscription.EMPTY; showProcessDot = false; + showProgress = false; customProcessDotTemplate?: TemplateRef<{ $implicit: TemplateRef; status: string; index: number }>; classMap: NgClassType = {}; dir: Direction = 'ltr'; constructor( private ngZone: NgZone, - private elementRef: ElementRef, - private renderer: Renderer2, private cdr: ChangeDetectorRef, @Optional() private directionality: Directionality, private destroy$: NzDestroyService @@ -95,7 +92,7 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit { } ngOnChanges(changes: SimpleChanges): void { - if (changes.nzStartIndex || changes.nzDirection || changes.nzStatus || changes.nzCurrent) { + if (changes.nzStartIndex || changes.nzDirection || changes.nzStatus || changes.nzCurrent || changes.nzSize) { this.updateChildrenSteps(); } if (changes.nzDirection || changes.nzProgressDot || changes.nzLabelPlacement || changes.nzSize) { @@ -126,14 +123,8 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit { private updateHostProgressClass(): void { if (this.steps && !this.showProcessDot) { - const hasPercent = !!this.steps.toArray().find(step => step.nzPercentage !== null); - const className = 'ant-steps-with-progress'; - const hasClass = this.elementRef.nativeElement.classList.contains(className); - if (hasPercent && !hasClass) { - this.renderer.addClass(this.elementRef.nativeElement, className); - } else if (!hasPercent && hasClass) { - this.renderer.removeClass(this.elementRef.nativeElement, className); - } + this.showProgress = !!this.steps.toArray().find(step => step.nzPercentage !== null); + this.setClassMap(); } } @@ -142,6 +133,7 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit { const length = this.steps.length; this.steps.toArray().forEach((step, index) => { Promise.resolve().then(() => { + step.nzSize = this.nzSize; step.outStatus = this.nzStatus; step.showProcessDot = this.showProcessDot; if (this.customProcessDotTemplate) { @@ -175,7 +167,8 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit { [`ant-steps-dot`]: this.showProcessDot, ['ant-steps-small']: this.nzSize === 'small', ['ant-steps-navigation']: this.nzType === 'navigation', - ['ant-steps-rtl']: this.dir === 'rtl' + ['ant-steps-rtl']: this.dir === 'rtl', + ['ant-steps-with-progress']: this.showProgress }; } }