Skip to content

Commit 222b225

Browse files
simplejasonsimplejason
authored
fix(module:input, input-number, steps): fix styles in components (#7522)
1 parent 3680ed9 commit 222b225

10 files changed

Lines changed: 47 additions & 26 deletions

‎components/input-number/input-number-group-slot.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
1313
template: `
1414
<i nz-icon [nzType]="icon" *ngIf="icon"></i>
1515
<ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
16+
<ng-content></ng-content>
1617
`,
1718
host: {
1819
'[class.ant-input-number-group-addon]': `type === 'addon'`,

‎components/input-number/input-number-group.component.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,13 @@ export class NzInputNumberGroupWhitSuffixOrPrefixDirective {
9090
></span>
9191
<ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
9292
<span
93-
*ngIf="nzSuffix || nzSuffixIcon"
93+
*ngIf="nzSuffix || nzSuffixIcon || isFeedback"
9494
nz-input-number-group-slot
9595
type="suffix"
9696
[icon]="nzSuffixIcon"
9797
[template]="nzSuffix"
9898
>
99+
<nz-form-item-feedback-icon *ngIf="isFeedback" [status]="status"></nz-form-item-feedback-icon>
99100
</span>
100101
</ng-template>
101102
<ng-template #contentTemplate>
@@ -146,7 +147,7 @@ export class NzInputNumberGroupComponent implements AfterContentInit, OnChanges,
146147
affixStatusCls: NgClassInterface = {};
147148
groupStatusCls: NgClassInterface = {};
148149
affixInGroupStatusCls: NgClassInterface = {};
149-
150+
status: NzValidateStatus = '';
150151
hasFeedback: boolean = false;
151152
private destroy$ = new Subject<void>();
152153

@@ -247,6 +248,8 @@ export class NzInputNumberGroupComponent implements AfterContentInit, OnChanges,
247248
}
248249

249250
private setStatusStyles(status: NzValidateStatus, hasFeedback: boolean): void {
251+
// set inner status
252+
this.status = status;
250253
this.hasFeedback = hasFeedback;
251254
this.isFeedback = !!status && hasFeedback;
252255
const baseAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);

‎components/input-number/input-number.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
ElementRef,
1515
EventEmitter,
1616
forwardRef,
17+
Host,
1718
Input,
1819
NgZone,
1920
OnChanges,
@@ -43,6 +44,8 @@ import {
4344
} from 'ng-zorro-antd/core/types';
4445
import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
4546

47+
import { NzInputNumberGroupComponent } from './input-number-group.component';
48+
4649
@Component({
4750
selector: 'nz-input-number',
4851
exportAs: 'nzInputNumber',
@@ -87,7 +90,7 @@ import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/
8790
</div>
8891
<nz-form-item-feedback-icon
8992
class="ant-input-number-suffix"
90-
*ngIf="hasFeedback && !!status"
93+
*ngIf="hasFeedback && !!status && !nzInputNumberGroupComponent?.isFeedback"
9194
[status]="status"
9295
></nz-form-item-feedback-icon>
9396
`,
@@ -403,6 +406,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
403406
private renderer: Renderer2,
404407
@Optional() private directionality: Directionality,
405408
private destroy$: NzDestroyService,
409+
@Host() @Optional() public nzInputNumberGroupComponent?: NzInputNumberGroupComponent,
406410
@Optional() public nzFormStatusService?: NzFormStatusService
407411
) {}
408412

‎components/input/input-group-slot.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
1313
template: `
1414
<i nz-icon [nzType]="icon" *ngIf="icon"></i>
1515
<ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
16+
<ng-content></ng-content>
1617
`,
1718
host: {
1819
'[class.ant-input-group-addon]': `type === 'addon'`,

‎components/input/input-group.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,13 @@ export class NzInputGroupWhitSuffixOrPrefixDirective {
9090
></span>
9191
<ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
9292
<span
93-
*ngIf="nzSuffix || nzSuffixIcon"
93+
*ngIf="nzSuffix || nzSuffixIcon || isFeedback"
9494
nz-input-group-slot
9595
type="suffix"
9696
[icon]="nzSuffixIcon"
9797
[template]="nzSuffix"
9898
>
99+
<nz-form-item-feedback-icon *ngIf="isFeedback" [status]="status"></nz-form-item-feedback-icon>
99100
</span>
100101
</ng-template>
101102
<ng-template #contentTemplate>
@@ -155,6 +156,7 @@ export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnIni
155156
affixStatusCls: NgClassInterface = {};
156157
groupStatusCls: NgClassInterface = {};
157158
affixInGroupStatusCls: NgClassInterface = {};
159+
status: NzValidateStatus = '';
158160
hasFeedback: boolean = false;
159161
private destroy$ = new Subject<void>();
160162

@@ -251,6 +253,8 @@ export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnIni
251253
}
252254

253255
private setStatusStyles(status: NzValidateStatus, hasFeedback: boolean): void {
256+
// set inner status
257+
this.status = status;
254258
this.hasFeedback = hasFeedback;
255259
this.isFeedback = !!status && hasFeedback;
256260
const baseAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);

‎components/input/input.directive.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
ComponentRef,
99
Directive,
1010
ElementRef,
11+
Host,
1112
Input,
1213
OnChanges,
1314
OnDestroy,
@@ -26,6 +27,8 @@ import { NzFormItemFeedbackIconComponent, NzFormStatusService } from 'ng-zorro-a
2627
import { BooleanInput, NgClassInterface, NzSizeLDSType, NzStatus, NzValidateStatus } from 'ng-zorro-antd/core/types';
2728
import { getStatusClassNames, InputBoolean } from 'ng-zorro-antd/core/util';
2829

30+
import { NzInputGroupComponent } from './input-group.component';
31+
2932
@Directive({
3033
selector: 'input[nz-input],textarea[nz-input]',
3134
exportAs: 'nzInput',
@@ -72,6 +75,7 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
7275
private elementRef: ElementRef,
7376
protected hostView: ViewContainerRef,
7477
@Optional() private directionality: Directionality,
78+
@Host() @Optional() private nzInputGroupComponent?: NzInputGroupComponent,
7579
@Optional() private nzFormStatusService?: NzFormStatusService
7680
) {
7781
renderer.addClass(elementRef.nativeElement, 'ant-input');
@@ -138,7 +142,7 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
138142
}
139143

140144
private renderFeedbackIcon(): void {
141-
if (!this.status || !this.hasFeedback) {
145+
if (!this.status || !this.hasFeedback || this.nzInputGroupComponent?.isFeedback) {
142146
// remove feedback
143147
this.hostView.clear();
144148
this.feedbackRef = null;

‎components/input/style/patch.less‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,11 @@ textarea.nz-textarea-autosize-measuring {
2626
}
2727
}
2828

29-
.@{ant-prefix}-input {
29+
.ant-input-affix-wrapper-textarea-with-clear-btn .ant-input-suffix {
30+
margin-left: 0;
31+
}
32+
33+
nz-form-item-feedback-icon.@{ant-prefix}-input {
3034
&-suffix {
3135
display: flex;
3236
flex: none;
@@ -40,11 +44,16 @@ textarea.nz-textarea-autosize-measuring {
4044
right: 0;
4145
z-index: 1;
4246
height: 100%;
43-
margin-right: @input-padding-horizontal-base;
47+
margin-right: @padding-sm;
4448
margin-left: @input-affix-margin;
4549
}
50+
}
4651

47-
&&-has-feedback {
48-
padding-right: @padding-lg;
52+
.@{ant-prefix}-input {
53+
&-status-error, &-status-warning, &-status-validating, &-status-success {
54+
&.@{ant-prefix}-input-has-feedback {
55+
padding-right: @padding-lg + @padding-xss;
56+
}
4957
}
50-
}
58+
}
59+

‎components/progress/progress.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ const defaultFormatter: NzProgressFormatter = (p: number): string => `${p}%`;
7575
[ngClass]="'ant-progress ant-progress-status-' + status"
7676
[class.ant-progress-line]="nzType === 'line'"
7777
[class.ant-progress-small]="nzSize === 'small'"
78+
[class.ant-progress-default]="nzSize === 'default'"
7879
[class.ant-progress-show-info]="nzShowInfo"
7980
[class.ant-progress-circle]="isCircleStyle"
8081
[class.ant-progress-steps]="isSteps"

‎components/steps/step.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { fromEvent, Subject } from 'rxjs';
1919
import { filter, takeUntil } from 'rxjs/operators';
2020

2121
import { NzDestroyService } from 'ng-zorro-antd/core/services';
22-
import { BooleanInput, NgClassType } from 'ng-zorro-antd/core/types';
22+
import { BooleanInput, NgClassType, NzSizeDSType } from 'ng-zorro-antd/core/types';
2323
import { InputBoolean } from 'ng-zorro-antd/core/util';
2424
import { NzProgressFormatter } from 'ng-zorro-antd/progress';
2525

@@ -43,7 +43,7 @@ import { NzProgressFormatter } from 'ng-zorro-antd/progress';
4343
<nz-progress
4444
[nzPercent]="nzPercentage"
4545
nzType="circle"
46-
[nzWidth]="40"
46+
[nzWidth]="nzSize === 'small' ? 32 : 40"
4747
[nzFormat]="nullProcessFormat"
4848
[nzStrokeWidth]="4"
4949
></nz-progress>
@@ -112,6 +112,7 @@ export class NzStepComponent implements OnInit {
112112
@Input() nzDescription?: string | TemplateRef<void>;
113113
@Input() @InputBoolean() nzDisabled = false;
114114
@Input() nzPercentage: number | null = null;
115+
@Input() nzSize: NzSizeDSType = 'default';
115116

116117
@Input()
117118
get nzStatus(): string {

‎components/steps/steps.component.ts‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
ChangeDetectorRef,
1111
Component,
1212
ContentChildren,
13-
ElementRef,
1413
EventEmitter,
1514
Input,
1615
NgZone,
@@ -19,7 +18,6 @@ import {
1918
Optional,
2019
Output,
2120
QueryList,
22-
Renderer2,
2321
SimpleChanges,
2422
TemplateRef,
2523
ViewEncapsulation
@@ -79,14 +77,13 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
7977
private indexChangeSubscription = Subscription.EMPTY;
8078

8179
showProcessDot = false;
80+
showProgress = false;
8281
customProcessDotTemplate?: TemplateRef<{ $implicit: TemplateRef<void>; status: string; index: number }>;
8382
classMap: NgClassType = {};
8483
dir: Direction = 'ltr';
8584

8685
constructor(
8786
private ngZone: NgZone,
88-
private elementRef: ElementRef,
89-
private renderer: Renderer2,
9087
private cdr: ChangeDetectorRef,
9188
@Optional() private directionality: Directionality,
9289
private destroy$: NzDestroyService
@@ -95,7 +92,7 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
9592
}
9693

9794
ngOnChanges(changes: SimpleChanges): void {
98-
if (changes.nzStartIndex || changes.nzDirection || changes.nzStatus || changes.nzCurrent) {
95+
if (changes.nzStartIndex || changes.nzDirection || changes.nzStatus || changes.nzCurrent || changes.nzSize) {
9996
this.updateChildrenSteps();
10097
}
10198
if (changes.nzDirection || changes.nzProgressDot || changes.nzLabelPlacement || changes.nzSize) {
@@ -126,14 +123,8 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
126123

127124
private updateHostProgressClass(): void {
128125
if (this.steps && !this.showProcessDot) {
129-
const hasPercent = !!this.steps.toArray().find(step => step.nzPercentage !== null);
130-
const className = 'ant-steps-with-progress';
131-
const hasClass = this.elementRef.nativeElement.classList.contains(className);
132-
if (hasPercent && !hasClass) {
133-
this.renderer.addClass(this.elementRef.nativeElement, className);
134-
} else if (!hasPercent && hasClass) {
135-
this.renderer.removeClass(this.elementRef.nativeElement, className);
136-
}
126+
this.showProgress = !!this.steps.toArray().find(step => step.nzPercentage !== null);
127+
this.setClassMap();
137128
}
138129
}
139130

@@ -142,6 +133,7 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
142133
const length = this.steps.length;
143134
this.steps.toArray().forEach((step, index) => {
144135
Promise.resolve().then(() => {
136+
step.nzSize = this.nzSize;
145137
step.outStatus = this.nzStatus;
146138
step.showProcessDot = this.showProcessDot;
147139
if (this.customProcessDotTemplate) {
@@ -175,7 +167,8 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
175167
[`ant-steps-dot`]: this.showProcessDot,
176168
['ant-steps-small']: this.nzSize === 'small',
177169
['ant-steps-navigation']: this.nzType === 'navigation',
178-
['ant-steps-rtl']: this.dir === 'rtl'
170+
['ant-steps-rtl']: this.dir === 'rtl',
171+
['ant-steps-with-progress']: this.showProgress
179172
};
180173
}
181174
}

0 commit comments

Comments
 (0)