Skip to content

Commit ed0e374

Browse files
pat270pat270
committed
fix(@clayui/css): Form Validation deprecate Bootstrap 4 HTML5 Form Validation components .was-validated, .invalid-feedback, .valid-feedback, .#{$state}-feedback, .#{$state}-tooltip
fix(@clayui/css): Form deprecate variables `$form-feedback-icon-valid-color`, `$form-feedback-icon-valid`, `$form-feedback-icon-invalid-color`, `$form-feedback-icon-invalid`, `$form-validation-states`
1 parent bc2c5f5 commit ed0e374

File tree

2 files changed

+61
-45
lines changed

2 files changed

+61
-45
lines changed

‎packages/clay-css/src/scss/components/_form-validation.scss

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
// HTML 5 Form Validator
2-
3-
// Form validation
4-
//
5-
// Provide feedback to users when form field values are valid or invalid. Works
6-
// primarily for client-side validation via scoped `:invalid` and `:valid`
7-
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
8-
// server side validation.
9-
10-
@each $state, $data in $form-validation-states {
11-
@include form-validation-state(
12-
$state,
13-
map-get($data, color),
14-
map-get($data, icon)
15-
);
1+
@if ($enable-bs4-deprecated) {
2+
// HTML 5 Form Validator
3+
4+
// Form validation
5+
//
6+
// Provide feedback to users when form field values are valid or invalid. Works
7+
// primarily for client-side validation via scoped `:invalid` and `:valid`
8+
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
9+
// server side validation.
10+
11+
@each $state, $data in $form-validation-states {
12+
@include form-validation-state(
13+
$state,
14+
map-get($data, color),
15+
map-get($data, icon)
16+
);
17+
}
18+
19+
.invalid-feedback,
20+
.valid-feedback {
21+
font-weight: $form-feedback-font-weight;
22+
}
1623
}
1724

1825
// Form Feedback
1926

20-
.invalid-feedback,
21-
.valid-feedback {
22-
font-weight: $form-feedback-font-weight;
23-
}
24-
2527
.form-feedback-group {
2628
width: 100%;
2729
word-wrap: break-word;
@@ -52,33 +54,35 @@
5254
word-wrap: break-word;
5355
}
5456

55-
.was-validated .form-control:valid,
56-
.was-validated .form-control.is-valid {
57-
background-color: $input-success-bg;
58-
border-color: $input-success-border-color;
59-
box-shadow: $input-success-box-shadow;
60-
color: $input-success-color;
61-
62-
&:focus {
63-
background-color: $input-success-focus-bg;
64-
border-color: $input-success-focus-border-color;
65-
box-shadow: $input-success-focus-box-shadow;
66-
color: $input-success-focus-color;
57+
@if ($enable-bs4-deprecated) {
58+
.was-validated .form-control:valid,
59+
.was-validated .form-control.is-valid {
60+
background-color: $input-success-bg;
61+
border-color: $input-success-border-color;
62+
box-shadow: $input-success-box-shadow;
63+
color: $input-success-color;
64+
65+
&:focus {
66+
background-color: $input-success-focus-bg;
67+
border-color: $input-success-focus-border-color;
68+
box-shadow: $input-success-focus-box-shadow;
69+
color: $input-success-focus-color;
70+
}
6771
}
68-
}
6972

70-
.was-validated .form-control:invalid,
71-
.was-validated .form-control.is-invalid {
72-
background-color: $input-danger-bg;
73-
border-color: $input-danger-border-color;
74-
box-shadow: $input-danger-box-shadow;
75-
color: $input-danger-color;
76-
77-
&:focus {
78-
background-color: $input-danger-focus-bg;
79-
border-color: $input-danger-focus-border-color;
80-
box-shadow: $input-danger-focus-box-shadow;
81-
color: $input-danger-focus-color;
73+
.was-validated .form-control:invalid,
74+
.was-validated .form-control.is-invalid {
75+
background-color: $input-danger-bg;
76+
border-color: $input-danger-border-color;
77+
box-shadow: $input-danger-box-shadow;
78+
color: $input-danger-color;
79+
80+
&:focus {
81+
background-color: $input-danger-focus-bg;
82+
border-color: $input-danger-focus-border-color;
83+
box-shadow: $input-danger-focus-box-shadow;
84+
color: $input-danger-focus-color;
85+
}
8286
}
8387
}
8488

‎packages/clay-css/src/scss/variables/_forms.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,12 +402,24 @@ $form-feedback-invalid-color: $danger !default;
402402

403403
// Form Feedback Icon
404404

405+
/// @deprecated as of v3.x with no replacement
406+
405407
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
408+
409+
/// @deprecated as of v3.x with no replacement
410+
406411
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
407412

413+
/// @deprecated as of v3.x with no replacement
414+
408415
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
416+
417+
/// @deprecated as of v3.x with no replacement
418+
409419
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
410420

421+
/// @deprecated as of v3.x with no replacement
422+
411423
$form-validation-states: () !default;
412424
$form-validation-states: map-merge(
413425
(

0 commit comments

Comments
 (0)