Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add form-validation-states Sass map #27999

Merged
merged 3 commits into from Jan 11, 2019
Merged

Add form-validation-states Sass map #27999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
741b6cd
Add form-validation-states Sass map
mdo Jan 8, 2019
d1c7dba
Add @ysds's suggestion for a nested map that can declare the icon too
mdo Jan 11, 2019
e8e034d
Merge branch 'v4-dev' into validation-map
XhmikosR Jan 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions scss/_forms.scss
View file
Open in desktop
Expand Up @@ -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
//
Expand Down
15 changes: 15 additions & 0 deletions scss/_variables.scss
View file
Open in desktop
Expand Up @@ -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
//
Expand Down
12 changes: 3 additions & 9 deletions scss/mixins/_forms.scss
View file
Open in desktop
Expand Up @@ -26,7 +26,7 @@
}


@mixin form-validation-state($state, $color) {
@mixin form-validation-state($state, $color, $icon) {
.#{$state}-feedback {
display: none;
width: 100%;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
31 changes: 31 additions & 0 deletions site/docs/4.2/components/forms.md
View file
Open in desktop
Expand Up @@ -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.
Expand Down