From 8984255158c3866ab1d11617e266ebf5f1e18a70 Mon Sep 17 00:00:00 2001
From: Dmytro Yaremenko <deweisowl@gmail.com>
Date: Thu, 17 Dec 2020 07:07:48 +0200
Subject: [PATCH] Extended form validation states customization capabilities
 (#31757)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 scss/forms/_validation.scss               |  2 +-
 scss/mixins/_forms.scss                   | 19 +++++++++++++------
 site/content/docs/5.0/forms/validation.md |  4 +++-
 site/content/docs/5.0/migration.md        |  1 +
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index acd68f2ed6..c48123a716 100644
--- 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 5e4cfd4883..8be4d2ee91 100644
--- 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 dfdd72c9f7..3f45143d76 100644
--- 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 952cc937ea..b2e08c3ab5 100644
--- 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