Skip to content

Commit a554cfd

Browse files
benelanbenelan
authored
feat: add validation-message and validation-icon attributes to form components for new internal calcite-input-message (#8305)
**Related Issue:** #8057 ## Summary Add an internal `calcite-input-message` to the following components - combobox - input-date-picker - input-number - input-text - input-time-picker - input-time-zone - input - select - text-area The new properties will be used to replace the browser's popover element that displays validation messages on form submission (#8000).
1 parent f36a90e commit a554cfd

40 files changed

+1332
-256
lines changed

‎packages/calcite-components/src/assets/styles/includes.scss

+11
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,17 @@
3838
}
3939
}
4040

41+
// mixin for the container of validation messages displayed below form-associated components
42+
@mixin form-validation-message() {
43+
.validation-container {
44+
padding-block-start: 0.5rem;
45+
display: flex;
46+
flex-direction: column;
47+
align-items: flex-start;
48+
align-self: stretch;
49+
}
50+
}
51+
4152
// mixin to provide base disabled styles for interactive components
4253
// additional styling can be passed via @content
4354
@mixin disabled() {

‎packages/calcite-components/src/components.d.ts

+156-2
Original file line numberDiff line numberDiff line change
@@ -1151,6 +1151,14 @@ export namespace Components {
11511151
* Specifies the status of the input field, which determines message and icons.
11521152
*/
11531153
"status": Status;
1154+
/**
1155+
* Specifies the validation icon to display under the component.
1156+
*/
1157+
"validationIcon": string | boolean;
1158+
/**
1159+
* Specifies the validation message to display under the component.
1160+
*/
1161+
"validationMessage": string;
11541162
/**
11551163
* The component's value(s) from the selected `calcite-combobox-item`(s).
11561164
*/
@@ -2033,6 +2041,14 @@ export namespace Components {
20332041
| "time"
20342042
| "url"
20352043
| "week";
2044+
/**
2045+
* Specifies the validation icon to display under the component.
2046+
*/
2047+
"validationIcon": string | boolean;
2048+
/**
2049+
* Specifies the validation message to display under the component.
2050+
*/
2051+
"validationMessage": string;
20362052
/**
20372053
* The component's value.
20382054
*/
@@ -2142,6 +2158,14 @@ export namespace Components {
21422158
* Specifies the status of the input field, which determines message and icons.
21432159
*/
21442160
"status": Status;
2161+
/**
2162+
* Specifies the validation icon to display under the component.
2163+
*/
2164+
"validationIcon": string | boolean;
2165+
/**
2166+
* Specifies the validation message to display under the component.
2167+
*/
2168+
"validationMessage": string;
21452169
/**
21462170
* Selected date as a string in ISO format (YYYY-MM-DD)
21472171
*/
@@ -2326,6 +2350,14 @@ export namespace Components {
23262350
* Adds text to the end of the component.
23272351
*/
23282352
"suffixText": string;
2353+
/**
2354+
* Specifies the validation icon to display under the component.
2355+
*/
2356+
"validationIcon": string | boolean;
2357+
/**
2358+
* Specifies the validation message to display under the component.
2359+
*/
2360+
"validationMessage": string;
23292361
/**
23302362
* The component's value.
23312363
*/
@@ -2458,6 +2490,14 @@ export namespace Components {
24582490
* Adds text to the end of the component.
24592491
*/
24602492
"suffixText": string;
2493+
/**
2494+
* Specifies the validation icon to display under the component.
2495+
*/
2496+
"validationIcon": string | boolean;
2497+
/**
2498+
* Specifies the validation message to display under the component.
2499+
*/
2500+
"validationMessage": string;
24612501
/**
24622502
* The component's value.
24632503
*/
@@ -2534,6 +2574,14 @@ export namespace Components {
25342574
* Specifies the granularity the component's `value` must adhere to (in seconds).
25352575
*/
25362576
"step": number;
2577+
/**
2578+
* Specifies the validation icon to display under the component.
2579+
*/
2580+
"validationIcon": string | boolean;
2581+
/**
2582+
* Specifies the validation message to display under the component.
2583+
*/
2584+
"validationMessage": string;
25372585
/**
25382586
* The time value in ISO (24-hour) format.
25392587
*/
@@ -2595,6 +2643,14 @@ export namespace Components {
25952643
* Specifies the status of the input field, which determines message and icons.
25962644
*/
25972645
"status": Status;
2646+
/**
2647+
* Specifies the validation icon to display under the component.
2648+
*/
2649+
"validationIcon": string | boolean;
2650+
/**
2651+
* Specifies the validation message to display under the component.
2652+
*/
2653+
"validationMessage": string;
25982654
/**
25992655
* The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default.
26002656
* @see https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC.
@@ -3909,6 +3965,14 @@ export namespace Components {
39093965
* Specifies the status of the input field, which determines message and icons.
39103966
*/
39113967
"status": Status;
3968+
/**
3969+
* Specifies the validation icon to display under the component.
3970+
*/
3971+
"validationIcon": string | boolean;
3972+
/**
3973+
* Specifies the validation message to display under the component.
3974+
*/
3975+
"validationMessage": string;
39123976
/**
39133977
* The component's `selectedOption` value.
39143978
*/
@@ -4577,7 +4641,12 @@ export namespace Components {
45774641
*/
45784642
"selectionMode": Extract<"none" | "multiple" | "single", SelectionMode>;
45794643
/**
4580-
* When `true`, displays zebra styling in the component.
4644+
* When `true`, displays striped styling in the component.
4645+
*/
4646+
"striped": boolean;
4647+
/**
4648+
* When `true`, displays striped styling in the component.
4649+
* @deprecated Use the `striped` property instead.
45814650
*/
45824651
"zebra": boolean;
45834652
}
@@ -4794,6 +4863,14 @@ export namespace Components {
47944863
* Specifies the status of the input field, which determines message and icons.
47954864
*/
47964865
"status": Status;
4866+
/**
4867+
* Specifies the validation icon to display under the component.
4868+
*/
4869+
"validationIcon": string | boolean;
4870+
/**
4871+
* Specifies the validation message to display under the component.
4872+
*/
4873+
"validationMessage": string;
47974874
/**
47984875
* The component's value.
47994876
*/
@@ -8334,6 +8411,14 @@ declare namespace LocalJSX {
83348411
* Specifies the status of the input field, which determines message and icons.
83358412
*/
83368413
"status"?: Status;
8414+
/**
8415+
* Specifies the validation icon to display under the component.
8416+
*/
8417+
"validationIcon"?: string | boolean;
8418+
/**
8419+
* Specifies the validation message to display under the component.
8420+
*/
8421+
"validationMessage"?: string;
83378422
/**
83388423
* The component's value(s) from the selected `calcite-combobox-item`(s).
83398424
*/
@@ -9257,6 +9342,14 @@ declare namespace LocalJSX {
92579342
| "time"
92589343
| "url"
92599344
| "week";
9345+
/**
9346+
* Specifies the validation icon to display under the component.
9347+
*/
9348+
"validationIcon"?: string | boolean;
9349+
/**
9350+
* Specifies the validation message to display under the component.
9351+
*/
9352+
"validationMessage"?: string;
92609353
/**
92619354
* The component's value.
92629355
*/
@@ -9377,6 +9470,14 @@ declare namespace LocalJSX {
93779470
* Specifies the status of the input field, which determines message and icons.
93789471
*/
93799472
"status"?: Status;
9473+
/**
9474+
* Specifies the validation icon to display under the component.
9475+
*/
9476+
"validationIcon"?: string | boolean;
9477+
/**
9478+
* Specifies the validation message to display under the component.
9479+
*/
9480+
"validationMessage"?: string;
93809481
/**
93819482
* Selected date as a string in ISO format (YYYY-MM-DD)
93829483
*/
@@ -9563,6 +9664,14 @@ declare namespace LocalJSX {
95639664
* Adds text to the end of the component.
95649665
*/
95659666
"suffixText"?: string;
9667+
/**
9668+
* Specifies the validation icon to display under the component.
9669+
*/
9670+
"validationIcon"?: string | boolean;
9671+
/**
9672+
* Specifies the validation message to display under the component.
9673+
*/
9674+
"validationMessage"?: string;
95669675
/**
95679676
* The component's value.
95689677
*/
@@ -9700,6 +9809,14 @@ declare namespace LocalJSX {
97009809
* Adds text to the end of the component.
97019810
*/
97029811
"suffixText"?: string;
9812+
/**
9813+
* Specifies the validation icon to display under the component.
9814+
*/
9815+
"validationIcon"?: string | boolean;
9816+
/**
9817+
* Specifies the validation message to display under the component.
9818+
*/
9819+
"validationMessage"?: string;
97039820
/**
97049821
* The component's value.
97059822
*/
@@ -9787,6 +9904,14 @@ declare namespace LocalJSX {
97879904
* Specifies the granularity the component's `value` must adhere to (in seconds).
97889905
*/
97899906
"step"?: number;
9907+
/**
9908+
* Specifies the validation icon to display under the component.
9909+
*/
9910+
"validationIcon"?: string | boolean;
9911+
/**
9912+
* Specifies the validation message to display under the component.
9913+
*/
9914+
"validationMessage"?: string;
97909915
/**
97919916
* The time value in ISO (24-hour) format.
97929917
*/
@@ -9852,6 +9977,14 @@ declare namespace LocalJSX {
98529977
* Specifies the status of the input field, which determines message and icons.
98539978
*/
98549979
"status"?: Status;
9980+
/**
9981+
* Specifies the validation icon to display under the component.
9982+
*/
9983+
"validationIcon"?: string | boolean;
9984+
/**
9985+
* Specifies the validation message to display under the component.
9986+
*/
9987+
"validationMessage"?: string;
98559988
/**
98569989
* The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default.
98579990
* @see https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC.
@@ -11233,6 +11366,14 @@ declare namespace LocalJSX {
1123311366
* Specifies the status of the input field, which determines message and icons.
1123411367
*/
1123511368
"status"?: Status;
11369+
/**
11370+
* Specifies the validation icon to display under the component.
11371+
*/
11372+
"validationIcon"?: string | boolean;
11373+
/**
11374+
* Specifies the validation message to display under the component.
11375+
*/
11376+
"validationMessage"?: string;
1123611377
/**
1123711378
* The component's `selectedOption` value.
1123811379
*/
@@ -11930,7 +12071,12 @@ declare namespace LocalJSX {
1193012071
*/
1193112072
"selectionMode"?: Extract<"none" | "multiple" | "single", SelectionMode>;
1193212073
/**
11933-
* When `true`, displays zebra styling in the component.
12074+
* When `true`, displays striped styling in the component.
12075+
*/
12076+
"striped"?: boolean;
12077+
/**
12078+
* When `true`, displays striped styling in the component.
12079+
* @deprecated Use the `striped` property instead.
1193412080
*/
1193512081
"zebra"?: boolean;
1193612082
}
@@ -12144,6 +12290,14 @@ declare namespace LocalJSX {
1214412290
* Specifies the status of the input field, which determines message and icons.
1214512291
*/
1214612292
"status"?: Status;
12293+
/**
12294+
* Specifies the validation icon to display under the component.
12295+
*/
12296+
"validationIcon"?: string | boolean;
12297+
/**
12298+
* Specifies the validation message to display under the component.
12299+
*/
12300+
"validationMessage"?: string;
1214712301
/**
1214812302
* The component's value.
1214912303
*/

‎packages/calcite-components/src/components/combobox/combobox.scss

+1
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,7 @@ calcite-chip {
242242
@apply block;
243243
}
244244

245+
@include form-validation-message();
245246
@include hidden-form-input();
246247
@include base-component();
247248

0 commit comments

Comments
 (0)