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

Fix input group border radii #31953

Merged
merged 5 commits into from
Oct 26, 2020
Merged

Fix input group border radii #31953

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b48263c
Require `.has-validation` class to fix border radii on form elements
MartijnCuppens Oct 22, 2020
afd40ed
Fix border radii on validation messages
MartijnCuppens Oct 22, 2020
9b503f4
Fix border radius for inputs groups with validation
MartijnCuppens Oct 22, 2020
07483d8
Update migration guide
MartijnCuppens Oct 24, 2020
ec54879
Merge branch 'main' into main-mc-input-group-border-radii
mdo Oct 26, 2020
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
22 changes: 18 additions & 4 deletions scss/forms/_input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,12 +128,26 @@

// stylelint-disable-next-line no-duplicate-selectors
.input-group {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
@include border-right-radius(0);
&:not(.has-validation) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
@include border-right-radius(0);
}
}

&.has-validation {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 4) {
@include border-right-radius(0);
}
}

$validation-messages: "";
@each $state in map-keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
}

> :not(:first-child):not(.dropdown-menu) {
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: -$input-border-width;
@include border-left-radius(0);
}
Expand Down
6 changes: 4 additions & 2 deletions site/content/docs/5.0/forms/validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,8 @@ We recommend using client-side validation, but in case you require server-side v

For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).

To fix [issues with border radii](https://github.com/twbs/bootstrap/issues/25110), input groups require an additional `.has-validation` class.

{{< example >}}
<form class="row g-3">
<div class="col-md-4">
Expand All @@ -183,7 +185,7 @@ For invalid fields, ensure that the invalid feedback/error message is associated
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">Username</label>
<div class="input-group">
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
<div id="validationServerUsernameFeedback" class="invalid-feedback">
Expand Down Expand Up @@ -314,7 +316,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltipUsername" class="form-label">Username</label>
<div class="input-group">
<div class="input-group has-validation">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.0/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ toc: true

- Introduce `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)

### Forms

- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.

## v5.0.0-alpha2

### Sass
Expand Down