Skip to content

Commit abc0491

Browse files
zvonimirfraszvonimirfras
authored
Merge pull request #2759 from Deku-nattsu/input_fixes
fix: display invalid state even when warn state is enabled
2 parents dcb2fa6 + 5f94821 commit abc0491

File tree

11 files changed

+25
-28
lines changed

11 files changed

+25
-28
lines changed

‎src/combobox/combobox.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ import { Observable } from "rxjs";
118118
[attr.aria-autocomplete]="autocomplete"
119119
[placeholder]="placeholder"/>
120120
<svg
121-
*ngIf="!warn && invalid"
121+
*ngIf="invalid"
122122
cdsIcon="warning--filled"
123123
size="16"
124124
class="cds--list-box__invalid-icon">
@@ -167,7 +167,7 @@ import { Observable } from "rxjs";
167167
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
168168
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
169169
</div>
170-
<div *ngIf="!warn && invalid" class="cds--form-requirement">
170+
<div *ngIf="invalid" class="cds--form-requirement">
171171
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
172172
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
173173
</div>

‎src/datepicker-input/datepicker-input.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
6161
class="cds--date-picker__icon">
6262
</svg>
6363
<svg
64-
*ngIf="!warn && invalid"
64+
*ngIf="invalid"
6565
class="cds--date-picker__icon cds--date-picker__icon--invalid"
6666
cdsIcon="warning--filled"
6767
size="16">
@@ -81,7 +81,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
8181
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
8282
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
8383
</div>
84-
<div *ngIf="!warn && invalid" class="cds--form-requirement">
84+
<div *ngIf="invalid" class="cds--form-requirement">
8585
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
8686
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
8787
</div>

‎src/dropdown/dropdown.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ import { hasScrollableParents } from "carbon-components-angular/utils";
121121
[ngTemplateOutlet]="displayValue">
122122
</ng-template>
123123
<svg
124-
*ngIf="!warn && invalid"
124+
*ngIf="invalid"
125125
class="cds--dropdown__invalid-icon"
126126
cdsIcon="warning--filled"
127127
size="16">
@@ -159,7 +159,7 @@ import { hasScrollableParents } from "carbon-components-angular/utils";
159159
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
160160
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
161161
</div>
162-
<div *ngIf="!warn && invalid" class="cds--form-requirement">
162+
<div *ngIf="invalid" class="cds--form-requirement">
163163
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
164164
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
165165
</div>

‎src/input/input.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ Basic.argTypes = {
6161
},
6262
size: {
6363
options: ["sm", "md", "lg"],
64-
contorl: "select"
64+
control: "select"
6565
}
6666
};
6767

‎src/input/label.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ import { TextInput } from "./input.directive";
9898
[attr.data-invalid]="(invalid ? true : null)"
9999
#wrapper>
100100
<svg
101-
*ngIf="!warn && invalid"
101+
*ngIf="invalid"
102102
cdsIcon="warning--filled"
103103
size="16"
104104
class="cds--text-input__invalid-icon">
@@ -118,7 +118,7 @@ import { TextInput } from "./input.directive";
118118
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
119119
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
120120
</div>
121-
<div *ngIf="!warn && invalid" class="cds--form-requirement">
121+
<div *ngIf="invalid" class="cds--form-requirement">
122122
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
123123
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
124124
</div>

‎src/input/text-input-label.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import {
4949
[attr.data-invalid]="(invalid ? true : null)"
5050
#wrapper>
5151
<svg
52-
*ngIf="!warn && invalid"
52+
*ngIf="invalid"
5353
cdsIcon="warning--filled"
5454
size="16"
5555
class="cds--text-input__invalid-icon">
@@ -62,7 +62,7 @@ import {
6262
</svg>
6363
<ng-template *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>
6464
<ng-template #textInputContent>
65-
<ng-content select="input[type=text],div"></ng-content>
65+
<ng-content select="[cdsText],[ibmText],input[type=text],div"></ng-content>
6666
</ng-template>
6767
</div>
6868
<div
@@ -72,7 +72,7 @@ import {
7272
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
7373
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
7474
</div>
75-
<div *ngIf="!warn && invalid" class="cds--form-requirement">
75+
<div *ngIf="invalid" class="cds--form-requirement">
7676
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
7777
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
7878
</div>

‎src/input/textarea-label.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ import { TextArea } from "./text-area.directive";
5252
[attr.data-invalid]="(invalid ? true : null)"
5353
#wrapper>
5454
<svg
55-
*ngIf="!warn && invalid"
55+
*ngIf="invalid"
5656
cdsIcon="warning--filled"
5757
size="16"
5858
class="cds--text-area__invalid-icon">
@@ -65,7 +65,7 @@ import { TextArea } from "./text-area.directive";
6565
</svg>
6666
<ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
6767
<ng-template #textAreaContent>
68-
<ng-content select="textarea"></ng-content>
68+
<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content>
6969
</ng-template>
7070
</div>
7171
<div
@@ -75,7 +75,7 @@ import { TextArea } from "./text-area.directive";
7575
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
7676
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
7777
</div>
78-
<div *ngIf="!warn && invalid" class="cds--form-requirement">
78+
<div *ngIf="invalid" class="cds--form-requirement">
7979
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
8080
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
8181
</div>

‎src/input/textarea.stories.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ const Template = (args) => ({
2020
[helperText]="helperText"
2121
[invalid]="invalid"
2222
[disabled]="disabled"
23-
[invalidText]="invalidText">
23+
[invalidText]="invalidText"
24+
[warn]="warn"
25+
[warnText]="warnText">
2426
{{label}}
2527
<textarea
2628
cdsTextArea
@@ -47,8 +49,7 @@ Basic.args = {
4749
cols: 50,
4850
rows: 4,
4951
autocomplete: "on",
50-
theme: "dark",
51-
size: "md"
52+
theme: "dark"
5253
};
5354
Basic.argTypes = {
5455
autocomplete: {
@@ -58,10 +59,6 @@ Basic.argTypes = {
5859
theme: {
5960
options: ["light", "dark"],
6061
control: "radio"
61-
},
62-
size: {
63-
options: ["sm", "md", "lg"],
64-
contorl: "select"
6562
}
6663
};
6764

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export class NumberChange {
7979
[placeholder]="placeholder"
8080
(change)="onNumberInputChange($event)"/>
8181
<svg
82-
*ngIf="!skeleton && !warn && invalid"
82+
*ngIf="!skeleton && invalid"
8383
cdsIcon="warning--filled"
8484
size="16"
8585
class="cds--number__invalid">
@@ -124,7 +124,7 @@ export class NumberChange {
124124
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
125125
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
126126
</div>
127-
<div *ngIf="!warn && invalid" class="cds--form-requirement">
127+
<div *ngIf="invalid" class="cds--form-requirement">
128128
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
129129
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
130130
</div>

‎src/radio/radio-group.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import { RadioChange } from "./radio-change.class";
5151
[ngClass]="{
5252
'cds--radio-button-group--vertical': orientation === 'vertical',
5353
'cds--radio-button-group--label-left': labelPlacement === 'left',
54-
'cds--radio-button-group--invalid' : !warn && invalid,
54+
'cds--radio-button-group--invalid': invalid,
5555
'cds--radio-button-group--warning': !invalid && warn
5656
}"
5757
[attr.data-invalid]="invalid ? true : null">
@@ -62,7 +62,7 @@ import { RadioChange } from "./radio-change.class";
6262
<ng-content></ng-content>
6363
</fieldset>
6464
<div class="cds--radio-button__validation-msg">
65-
<ng-container *ngIf="!warn && invalid">
65+
<ng-container *ngIf="invalid">
6666
<svg
6767
cdsIcon="warning--filled"
6868
size="16"

0 commit comments

Comments
 (0)