Add form-validation-states Sass map (#27999)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 9d3b6e330feb561bb8929170cb78f1ca7c3b4a1d..205b44a790f12bd8d253d342a4cd3edf7fda3824 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -241,8 +241,9 @@ textarea.form-control {
 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 // server side validation.
 
-@include form-validation-state("valid", $form-feedback-valid-color);
-@include form-validation-state("invalid", $form-feedback-invalid-color);
+@each $state, $data in $form-validation-states {
+  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+}
 
 // Inline forms
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7dd5289e9ef6f8c2da90ae581e388e8360bcd272..ae96c9b6b70da5e71c56a7cefbb5d1b9d5d8ad89 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -658,6 +658,21 @@ $form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg x
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
 
+$form-validation-states: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$form-validation-states: map-merge(
+  (
+    "valid": (
+      "color": $form-feedback-valid-color,
+      "icon": $form-feedback-icon-valid
+    ),
+    "invalid": (
+      "color": $form-feedback-invalid-color,
+      "icon": $form-feedback-icon-invalid
+    ),
+  ),
+  $form-validation-states
+);
 
 // Z-index master list
 //

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index b8eb59d8360ad4c80d099377511a239f464d7bc3..d740a2f77790f77708e667f4c5969b483bdbd8d4 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -26,7 +26,7 @@
 }
 
 
-@mixin form-validation-state($state, $color) {
+@mixin form-validation-state($state, $color, $icon) {
   .#{$state}-feedback {
     display: none;
     width: 100%;
@@ -57,15 +57,10 @@
 
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
+        background-image: $icon;
         background-repeat: no-repeat;
         background-position: center right calc(#{$input-height-inner} / 4);
         background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
-
-        @if $state == "valid" {
-          background-image: $form-feedback-icon-valid;
-        } @else {
-          background-image: $form-feedback-icon-invalid;
-        }
       }
 
       &:focus {
@@ -97,9 +92,8 @@
       border-color: $color;
 
       @if $enable-validation-icons {
-        $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
         padding-right: $custom-select-feedback-icon-padding-right;
-        background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+        background: $custom-select-background, $icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
       }
 
       &:focus {

diff --git a/site/docs/4.2/components/forms.md b/site/docs/4.2/components/forms.md
index 0026d33263c821ccb02fdad03984e516398ac3f6..d1a6acc19c696c557705ffa5ceae695a1e52845b 100644 (file)
--- a/site/docs/4.2/components/forms.md
+++ b/site/docs/4.2/components/forms.md
@@ -1107,6 +1107,37 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 {% endcapture %}
 {% include example.html content=example %}
 
+### 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.
+
+Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
+
+{% highlight scss %}
+// Sass map from `_variables.scss`
+// Override this and recompile your Sass to generate different states
+$form-validation-states: map-merge(
+  (
+    "valid": (
+      "color": $form-feedback-valid-color,
+      "icon": $form-feedback-icon-valid
+    ),
+    "invalid": (
+      "color": $form-feedback-invalid-color,
+      "icon": $form-feedback-icon-invalid
+    ),
+  ),
+  $form-validation-states
+);
+
+// Loop from `_forms.scss`
+// Any modifications to the above Sass map will be reflected in your compiled
+// CSS via this loop.
+@each $state, $data in $form-validation-states {
+  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+}
+{% endhighlight %}
+
 ## Custom forms
 
 For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control.