Skip to content

Commit b5f44d7

Browse files
GomezIvannGomezIvann
authored
Merge pull request #890 from dxc-technology/marcialfps-issue-889
[Major] onChange and onBlur undefined error parameter in Text, Number and Password
2 parents c7ecf90 + 17cdbd3 commit b5f44d7

File tree

20 files changed

+133
-111
lines changed

20 files changed

+133
-111
lines changed

‎docs/src/pages/components/cdk-components/number-input/api.jsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const NumberInputPropsTable = () => {
1414
<td>
1515
<code></code>
1616
</td>
17-
<td>Initial value of the input element, only when it is uncontrolled.</td>
17+
<td>
18+
Initial value of the input element, only when it is uncontrolled.
19+
</td>
1820
</tr>
1921
<tr>
2022
<td>value: string</td>
@@ -82,7 +84,7 @@ const NumberInputPropsTable = () => {
8284
user is lower than min, the onBlur and onChange functions will be
8385
called with the current value and an internal error informing that the
8486
current value is not correct. If a valid state is reached, the error
85-
parameter will be null in both events.
87+
parameter will not be defined in both events.
8688
</td>
8789
</tr>
8890
<tr>
@@ -93,7 +95,7 @@ const NumberInputPropsTable = () => {
9395
user surpasses max, the onBlur and onChange functions will be called
9496
with the current value and an internal error informing that the
9597
current value is not correct. If a valid state is reached, the error
96-
parameter will be null in both events.
98+
parameter will not be defined in both events.
9799
</td>
98100
</tr>
99101
<tr>
@@ -113,7 +115,7 @@ const NumberInputPropsTable = () => {
113115
the error (if the value entered is not valid) will be passed to this
114116
function. An example of this object is: {"{ "}
115117
<code>value: value, error: error</code>
116-
{" }"}. If there is no error, error will be null.
118+
{" }"}. If there is no error, error will not be defined.
117119
</td>
118120
</tr>
119121
<tr>
@@ -125,16 +127,19 @@ const NumberInputPropsTable = () => {
125127
entered is not valid) will be passed to this function. An example of
126128
this object is: {"{ "}
127129
<code>value: value, error: error</code>
128-
{" }"}. If there is no error, error will be null.
130+
{" }"}. If there is no error, error will not be defined.
129131
</td>
130132
</tr>
131133
<tr>
132134
<td>error: string</td>
133135
<td></td>
134136
<td>
135-
If it is defined, the component will change its appearance, showing
136-
the error below the input component. If it is not defined, the error
137-
messages will be managed internally, but never displayed on its own.
137+
If it is a defined value and also a truthy string, the component will
138+
change its appearance, showing the error below the input component. If
139+
the defined value is an empty string, it will reserve a space below
140+
the component for a future error, but it would not change its look. In
141+
case of being undefined or null, both the appearance and the space for
142+
the error message would not be modified.
138143
</td>
139144
</tr>
140145
<tr>

‎docs/src/pages/components/cdk-components/number-input/examples/customErrorsNumberInput.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import { useState } from "react";
33

44
const code = `() => {
55
const [value, setValue] = useState("");
6-
const [errorMessage, setErrorMessage] = useState("");
6+
const [errorMessage, setErrorMessage] = useState();
77
const onChange = ({ value, error }) => {
88
setValue(value);
9-
error ? setErrorMessage("Invalid number.") : setErrorMessage("");
9+
setErrorMessage(error);
1010
};
1111
1212
const [secondValue, setSecondValue] = useState("");
13-
const [customErrorOnChange, setCustomErrorOnChange] = useState("");
13+
const [customErrorOnChange, setCustomErrorOnChange] = useState();
1414
const onChangeSecond = ({ value }) => {
1515
setSecondValue(value);
1616
};
1717
const onBlur = ({ value, error }) => {
1818
setSecondValue(value);
19-
error ? setCustomErrorOnChange("The typed number is not valid. Please, check it.") : setCustomErrorOnChange("");
19+
setCustomErrorOnChange(error);
2020
};
2121
2222
return (
@@ -26,7 +26,7 @@ const code = `() => {
2626
helperText="Using onChange event for handling errors"
2727
value={value}
2828
onChange={onChange}
29-
error={errorMessage}
29+
error={errorMessage == undefined ? "" : "Invalid number."}
3030
min={5}
3131
max={20}
3232
step={5}
@@ -39,7 +39,7 @@ const code = `() => {
3939
value={secondValue}
4040
onChange={onChangeSecond}
4141
onBlur={onBlur}
42-
error={customErrorOnChange}
42+
error={customErrorOnChange == undefined ? "" : "The typed number is not valid. Please, check it."}
4343
min={5}
4444
max={20}
4545
step={5}

‎docs/src/pages/components/cdk-components/number-input/examples/minMaxStepNumberInput.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useState } from "react";
33

44
const code = `() => {
55
const [value, setValue] = useState("");
6-
const [error, setError] = useState("");
6+
const [error, setError] = useState();
77
88
const onChange = ({ value }) => {
99
setValue(value);
@@ -19,7 +19,7 @@ const code = `() => {
1919
value={value}
2020
onChange={onChange}
2121
onBlur={onBlur}
22-
error={error}
22+
error={error == undefined ? "" : error}
2323
min={5}
2424
max={20}
2525
step={5}

‎docs/src/pages/components/cdk-components/password-input/api.jsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const PasswordInputPropsTable = () => {
5252
the error (if the value entered is not valid) will be passed to this
5353
function. An example of this object is: {"{ "}
5454
<code>value: value, error: error</code>
55-
{" }"}. If there is no error, error will be null.
55+
{" }"}. If there is no error, error will not be defined.
5656
</td>
5757
</tr>
5858
<tr>
@@ -64,17 +64,19 @@ const PasswordInputPropsTable = () => {
6464
entered is not valid) will be passed to this function. An example of
6565
this object is: {"{ "}
6666
<code>value: value, error: error</code>
67-
{" }"}. If there is no error, error will be null.
67+
{" }"}. If there is no error, error will not be defined.
6868
</td>
6969
</tr>
7070
<tr>
7171
<td>error: string</td>
7272
<td></td>
7373
<td>
74-
If it is defined, the component will change its appearance, showing
75-
the error below the password input component. If it is not defined,
76-
the error messages will be managed internally, but never displayed on
77-
its own.
74+
If it is a defined value and also a truthy string, the component will
75+
change its appearance, showing the error below the password input
76+
component. If the defined value is an empty string, it will reserve a
77+
space below the component for a future error, but it would not change
78+
its look. In case of being undefined or null, both the appearance and
79+
the space for the error message would not be modified.
7880
</td>
7981
</tr>
8082
<tr>
@@ -87,7 +89,7 @@ const PasswordInputPropsTable = () => {
8789
match the pattern, the onBlur and onChange functions will be called
8890
with the current value and an internal error informing that this value
8991
does not match the pattern. If the pattern is met, the error parameter
90-
of both events will be null.
92+
of both events will not be defined.
9193
</td>
9294
</tr>
9395
<tr>
@@ -100,7 +102,7 @@ const PasswordInputPropsTable = () => {
100102
the onBlur and onChange functions will be called with the current
101103
value and an internal error informing that the value length does not
102104
comply the specified range. If a valid length is reached, the error
103-
parameter of both events will be null.
105+
parameter of both events will not be defined.
104106
</td>
105107
</tr>
106108
<tr>
@@ -113,7 +115,7 @@ const PasswordInputPropsTable = () => {
113115
the onBlur and onChange functions will be called with the current
114116
value and an internal error informing that the value length does not
115117
comply the specified range. If a valid length is reached, the error
116-
parameter of both events will be null.
118+
parameter of both events will not be defined.
117119
</td>
118120
</tr>
119121
<tr>

‎docs/src/pages/components/cdk-components/password-input/examples/customErrorsPasswordInput.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import { useState } from "react";
33

44
const code = `() => {
55
const [firstValue, setFirstValue] = useState("");
6-
const [customLengthError, setCustomLengthError] = useState("");
6+
const [customLengthError, setCustomLengthError] = useState();
77
const onChangeFirst = ({ value, error }) => {
88
setFirstValue(value);
9-
error ? setCustomLengthError("The password does not have the right length.") : setCustomLengthError("");
9+
setCustomLengthError(error);
1010
};
1111
1212
const [secondValue, setSecondValue] = useState("");
13-
const [customPatternError, setCustomPatternError] = useState("");
13+
const [customPatternError, setCustomPatternError] = useState();
1414
const onChangeSecond = ({ value }) => {
1515
setSecondValue(value);
1616
};
1717
const onBlur = ({ value, error }) => {
1818
setSecondValue(value);
19-
error ? setCustomPatternError("The password does not comply the allowed format.") : setCustomPatternError("");
19+
setCustomPatternError(error);
2020
};
2121
2222
return (
@@ -28,7 +28,7 @@ const code = `() => {
2828
onChange={onChangeFirst}
2929
minLength={5}
3030
maxLength={10}
31-
error={customLengthError}
31+
error={customLengthError == undefined ? "" : "The password does not have the right length."}
3232
margin="medium"
3333
clearable
3434
/>
@@ -39,7 +39,7 @@ const code = `() => {
3939
onChange={onChangeSecond}
4040
onBlur={onBlur}
4141
pattern='^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? "]).*$'
42-
error={customPatternError}
42+
error={customPatternError == undefined ? "" : "The password does not comply the allowed format."}
4343
margin="medium"
4444
clearable
4545
/>

‎docs/src/pages/components/cdk-components/password-input/examples/lengthPasswordInput.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useState } from "react";
33

44
const code = `() => {
55
const [value, setValue] = useState("");
6-
const [error, setError] = useState("");
6+
const [error, setError] = useState();
77
88
const onChange = ({ value }) => {
99
setValue(value);
@@ -21,7 +21,7 @@ const code = `() => {
2121
clearable
2222
onChange={onChange}
2323
onBlur={onBlur}
24-
error={error}
24+
error={error == undefined ? "" : error}
2525
minLength={5}
2626
maxLength={10}
2727
margin="medium"

‎docs/src/pages/components/cdk-components/password-input/examples/patternPasswordInput.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useState } from "react";
33

44
const code = `() => {
55
const [value, setValue] = useState("");
6-
const [error, setError] = useState("");
6+
const [error, setError] = useState();
77
88
const onChange = ({ value }) => {
99
setValue(value);
@@ -21,7 +21,7 @@ const code = `() => {
2121
clearable
2222
onChange={onChange}
2323
onBlur={onBlur}
24-
error={error}
24+
error={error == undefined ? "" : error}
2525
pattern='^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? "]).*$'
2626
margin="medium"
2727
/>

‎docs/src/pages/components/cdk-components/text-input/api.jsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ const textInputPropsTable = () => {
107107
the error (if the value entered is not valid) will be passed to this
108108
function. An example of this object is: {"{ "}
109109
<code>value: value, error: error</code>
110-
{" }"}. If there is no error, error will be null.
110+
{" }"}. If there is no error, error will not be defined.
111111
</td>
112112
</tr>
113113
<tr>
@@ -119,16 +119,19 @@ const textInputPropsTable = () => {
119119
entered is not valid) will be passed to this function. An example of
120120
this object is: {"{ "}
121121
<code>value: value, error: error</code>
122-
{" }"}. If there is no error, error will be null.
122+
{" }"}. If there is no error, error will not be defined.
123123
</td>
124124
</tr>
125125
<tr>
126126
<td>error: string</td>
127127
<td></td>
128128
<td>
129-
If it is defined, the component will change its appearance, showing
130-
the error below the input component. If it is not defined, the error
131-
messages will be managed internally, but never displayed on its own.
129+
If it is a defined value and also a truthy string, the component will
130+
change its appearance, showing the error below the input component. If
131+
the defined value is an empty string, it will reserve a space below
132+
the component for a future error, but it would not change its look. In
133+
case of being undefined or null, both the appearance and the space for
134+
the error message would not be modified.
132135
</td>
133136
</tr>
134137
<tr>
@@ -161,7 +164,7 @@ const textInputPropsTable = () => {
161164
pattern, the onBlur and onChange functions will be called with the
162165
current value and an internal error informing that this value does not
163166
match the pattern. If the pattern is met, the error parameter of both
164-
events will be null.
167+
events will not be defined.
165168
</td>
166169
</tr>
167170
<tr>
@@ -174,7 +177,7 @@ const textInputPropsTable = () => {
174177
the onBlur and onChange functions will be called with the current
175178
value and an internal error informing that the value length does not
176179
comply the specified range. If a valid length is reached, the error
177-
parameter of both events will be null.
180+
parameter of both events will not be defined.
178181
</td>
179182
</tr>
180183
<tr>
@@ -187,7 +190,7 @@ const textInputPropsTable = () => {
187190
the onBlur and onChange functions will be called with the current
188191
value and an internal error informing that the value length does not
189192
comply the specified range. If a valid length is reached, the error
190-
parameter of both events will be null.
193+
parameter of both events will not be defined.
191194
</td>
192195
</tr>
193196
<tr>

‎docs/src/pages/components/cdk-components/text-input/examples/customErrorsTextInput.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import { useState } from "react";
33

44
const code = `() => {
55
const [firstValue, setFirstValue] = useState("");
6-
const [customLengthError, setCustomLengthError] = useState("");
6+
const [customLengthError, setCustomLengthError] = useState();
77
const onChangeFirst = ({ value, error }) => {
88
setFirstValue(value);
9-
error ? setCustomLengthError("The text input value does not have the right length.") : setCustomLengthError(null);
9+
setCustomLengthError(error);
1010
};
1111
1212
const [secondValue, setSecondValue] = useState("");
13-
const [customPatternError, setCustomPatternError] = useState("");
13+
const [customPatternError, setCustomPatternError] = useState();
1414
const onChangeSecond = ({ value }) => {
1515
setSecondValue(value);
1616
};
1717
const onBlur = ({ value, error }) => {
1818
setSecondValue(value);
19-
error ? setCustomPatternError("The text input value does not comply the allowed format.") : setCustomPatternError(null);
19+
setCustomPatternError(error);
2020
};
2121
2222
return (
@@ -28,7 +28,7 @@ const code = `() => {
2828
onChange={onChangeFirst}
2929
minLength={5}
3030
maxLength={10}
31-
error={customLengthError}
31+
error={customLengthError == undefined ? "" : "The text input value does not have the right length."}
3232
margin="medium"
3333
clearable
3434
optional
@@ -40,7 +40,7 @@ const code = `() => {
4040
onChange={onChangeSecond}
4141
onBlur={onBlur}
4242
pattern='^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? "]).*$'
43-
error={customPatternError}
43+
error={customPatternError == undefined ? "" : "The text input value does not comply the allowed format."}
4444
margin="medium"
4545
clearable
4646
optional

‎docs/src/pages/components/cdk-components/text-input/examples/lengthTextInput.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useState } from "react";
33

44
const code = `() => {
55
const [value, setValue] = useState("");
6-
const [error, setError] = useState("");
6+
const [error, setError] = useState();
77
88
const onChange = ({ value }) => {
99
setValue(value);
@@ -20,7 +20,7 @@ const code = `() => {
2020
value={value}
2121
onChange={onChange}
2222
onBlur={onBlur}
23-
error={error}
23+
error={error == undefined ? "" : error}
2424
margin="medium"
2525
clearable
2626
minLength={5}

0 commit comments

Comments
 (0)