Extended form validation states customization capabilities (#31757)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index acd68f2ed648d4c41769b6e9d477785aa88d3cf5..c48123a716c8d2df599e7297d9265f68570d444b 100644 (file)
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -7,6 +7,6 @@
 
 // scss-docs-start form-validation-states-loop
 @each $state, $data in $form-validation-states {
-  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+  @include form-validation-state($state, $data...);
 }
 // scss-docs-end form-validation-states-loop

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 5e4cfd4883e774556d90b98b15ec137b0d73c066..8be4d2ee9132126de6c0a29e90843011cbafdb38 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -13,7 +13,14 @@
   }
 }
 
-@mixin form-validation-state($state, $color, $icon) {
+@mixin form-validation-state(
+  $state,
+  $color,
+  $icon,
+  $tooltip-color: color-contrast($color),
+  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+  $focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+) {
   .#{$state}-feedback {
     display: none;
     width: 100%;
@@ -33,8 +40,8 @@
     margin-top: .1rem;
     @include font-size($form-feedback-tooltip-font-size);
     line-height: $form-feedback-tooltip-line-height;
-    color: color-contrast($color);
-    background-color: rgba($color, $form-feedback-tooltip-opacity);
+    color: $tooltip-color;
+    background-color: $tooltip-bg-color;
     @include border-radius($form-feedback-tooltip-border-radius);
   }
 
@@ -59,7 +66,7 @@
 
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity);
+        box-shadow: $focus-box-shadow;
       }
     }
   }
@@ -87,7 +94,7 @@
 
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        box-shadow: $focus-box-shadow;
       }
     }
   }
@@ -101,7 +108,7 @@
       }
 
       &:focus {
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        box-shadow: $focus-box-shadow;
       }
 
       ~ .form-check-label {

diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index dfdd72c9f7c010c37f1715fd56019bd2e6d00140..3f45143d769e9a85fb7f211677d0f4ea11381943 100644 (file)
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -351,7 +351,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 
 ## Customizing
 
-Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is looped over to generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
+Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
 
 Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
 
@@ -359,6 +359,8 @@ This is the Sass map from `_variables.scss`. Override this and recompile your Sa
 
 {{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
 
+Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
+
 This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
 
 {{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 952cc937eac029c7c7347b10edc5e45830565b92..b2e08c3ab5134452ed5f3c098b698c25177ea8ae 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -12,6 +12,7 @@ toc: true
 ### Sass
 
 - Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
+- Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757).
 
 ### JavaScript