Add form-validation-states Sass map

twbs · Jan 8, 2019 · 741b6cd · 741b6cd
1 parent b232414
commit 741b6cd
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git 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, $color in $form-validation-states {
+  @include form-validation-state($state, $color);
+}
 
 // Inline forms
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -653,6 +653,16 @@ $form-feedback-font-size:           $small-font-size !default;
 $form-feedback-valid-color:         theme-color("success") !default;
 $form-feedback-invalid-color:       theme-color("danger") !default;
 
+$form-validation-states: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$form-validation-states: map-merge(
+  (
+    "valid": $form-feedback-valid-color,
+    "invalid": $form-feedback-invalid-color
+  ),
+  $form-validation-states
+);
+
 $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
 $form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath 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'/%3e%3c/svg%3e"), "#", "%23") !default;
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;

diff --git a/site/docs/4.2/components/forms.md b/site/docs/4.2/components/forms.md
@@ -1107,6 +1107,29 @@ 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. 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`
+// Change this and recompile your Sass to generate different states
+$form-validation-states: map-merge(
+  (
+    "valid": $form-feedback-valid-color,
+    "invalid": $form-feedback-invalid-color
+  ),
+  $form-validation-states
+);
+
+// Loop from `_forms.scss`
+@each $state, $color in $form-validation-states {
+  @include form-validation-state($state, $color);
+}
+{% 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.