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

v4: Require .has-validation for input groups with validation #31962

Merged
merged 1 commit into from
Oct 26, 2020
Merged

v4: Require .has-validation for input groups with validation #31962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions scss/_input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@

> .form-control,
> .custom-select {
&:not(:last-child) { @include border-right-radius(0); }
&:not(:first-child) { @include border-left-radius(0); }
}

Expand All @@ -53,9 +52,24 @@
align-items: center;

&:not(:last-child) .custom-file-label,
&:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
}

&:not(.has-validation) {
> .form-control:not(:last-child),
> .custom-select:not(:last-child),
> .custom-file:not(:last-child) .custom-file-label::after {
@include border-right-radius(0);
}
}

&.has-validation {
> .form-control:nth-last-child(n + 3),
> .custom-select:nth-last-child(n + 3),
> .custom-file:nth-last-child(n + 3) .custom-file-label::after {
@include border-right-radius(0);
}
}
}


Expand Down Expand Up @@ -175,8 +189,10 @@

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
@include border-right-radius(0);
Expand Down
4 changes: 0 additions & 4 deletions site/docs/4.5/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,10 +333,6 @@
}
}

.bd-example-forms-input-group-workaround .fix-rounded-right {
@include border-right-radius(.2rem !important);
}

//
// Code snippets
//
Expand Down
52 changes: 6 additions & 46 deletions site/docs/4.5/components/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -754,12 +754,6 @@ We are aware that currently the client-side custom validation styles and tooltip
{% endcapture %}
{% include callout.html content=callout type="warning" %}

{% capture callout %}
##### Input group validation
Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this workaround](#input-group-validation-workaround).
{% endcapture %}
{% include callout.html content=callout type="warning" %}

### How it works

Here's how form validation works with Bootstrap:
Expand Down Expand Up @@ -1157,62 +1151,28 @@ $form-validation-states: map-merge(
}
{% endhighlight %}

### Input group validation workaround

We're unable to resolve the broken `border-radius` of input groups with validation due to selector limitations, so manual overrides are required. When you're using a standard input group and don't customize the default border radius values, add `.rounded-right` to the elements with the broken `border-radius`.

{% highlight html %}
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control rounded-right" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
{% endhighlight %}

<div class="bd-example bd-example-forms-input-group-workaround">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control is-invalid rounded-right" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>

When you are using a small or large input group or customizing the default `border-radius` values, add custom CSS to the element with the busted `border-radius`.
### Input group validation

{% highlight css %}
/* Change values to match the radius of your form control */
.fix-rounded-right {
border-top-right-radius: .2rem !important;
border-bottom-right-radius: .2rem !important;
}
{% endhighlight %}
To detect what elements need rounded corners inside an input group with validation, an input group requires an additional `.has-validation` class.

{% highlight html %}
<div class="input-group input-group-sm">
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control fix-rounded-right" required>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
{% endhighlight %}

<div class="bd-example bd-example-forms-input-group-workaround">
<div class="input-group input-group-sm">
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control is-invalid fix-rounded-right" required>
<input type="text" class="form-control is-invalid" required>
<div class="invalid-feedback">
Please choose a username.
</div>
Expand Down