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

Remove .form-text references #30397

Closed
wants to merge 5 commits into from
Closed

Remove .form-text references #30397

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
2aea30d
docs: removes `.form-text`
zalog Mar 15, 2020
00ea33c
feat(css): removes `$form-text-margin-top`
zalog Mar 15, 2020
90f9273
feat: adds `.invalid-feedback` margins
zalog Mar 15, 2020
06d8358
feat: adds `.valid-feedback` margins
zalog Mar 15, 2020
4f68fbe
fix: replaces `.text-small` with `.small`
zalog Mar 15, 2020
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
3 changes: 0 additions & 3 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -663,8 +663,6 @@ $form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
$form-switch-checked-bg-position: right center !default;

$form-text-margin-top: .25rem !default;

$form-check-inline-margin-right: 1rem !default;

$input-group-addon-color: $input-color !default;
Expand Down Expand Up @@ -765,7 +763,6 @@ $form-file-height-lg: $input-height-lg !default;

// Form validation

$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $small-font-size !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;
Expand Down
1 change: 0 additions & 1 deletion scss/mixins/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
color: $color;
}
Expand Down
24 changes: 12 additions & 12 deletions site/content/docs/4.3/examples/checkout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,15 @@ <h4 class="mb-3">Billing address</h4>
<div class="col-sm-6">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Valid first name is required.
</div>
</div>

<div class="col-sm-6">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Valid last name is required.
</div>
</div>
Expand All @@ -88,7 +88,7 @@ <h4 class="mb-3">Billing address</h4>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Your username is required.
</div>
</div>
Expand All @@ -97,15 +97,15 @@ <h4 class="mb-3">Billing address</h4>
<div class="col-12">
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please enter a valid email address for shipping updates.
</div>
</div>

<div class="col-12">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please enter your shipping address.
</div>
</div>
Expand All @@ -121,7 +121,7 @@ <h4 class="mb-3">Billing address</h4>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please select a valid country.
</div>
</div>
Expand All @@ -132,15 +132,15 @@ <h4 class="mb-3">Billing address</h4>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please provide a valid state.
</div>
</div>

<div class="col-md-3">
<label for="zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Zip code required.
</div>
</div>
Expand Down Expand Up @@ -182,31 +182,31 @@ <h4 class="mb-3">Payment</h4>
<label for="cc-name" class="form-label">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Name on card is required
</div>
</div>

<div class="col-md-6">
<label for="cc-number" class="form-label">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Credit card number is required
</div>
</div>

<div class="col-md-3">
<label for="cc-expiration" class="form-label">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Expiration date required
</div>
</div>

<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Security code required
</div>
</div>
Expand Down
10 changes: 3 additions & 7 deletions site/content/docs/4.3/forms/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<small id="emailHelp" class="mt-2 text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
Expand All @@ -51,22 +51,18 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
</form>
{{< /example >}}

## Help text

Block-level help text in forms can be created using `.form-text` (previously known as `.help-block` in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like `.text-muted`.

{{< callout warning >}}
##### Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.
{{< /callout >}}

Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.
Help text below inputs can be styled with `.mt-2`, `.small`, and/or `.text-muted`.

{{< example >}}
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
<small id="passwordHelpBlock" class="mt-2 text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
{{< /example >}}
Expand Down
38 changes: 19 additions & 19 deletions site/content/docs/4.3/forms/validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
<div class="valid-feedback mt-2">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
<div class="valid-feedback mt-2">
Looks good!
</div>
</div>
Expand All @@ -52,15 +52,15 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
<div class="input-group">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please provide a valid city.
</div>
</div>
Expand All @@ -70,14 +70,14 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please provide a valid zip.
</div>
</div>
Expand All @@ -87,7 +87,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
You must agree before submitting.
</div>
</div>
Expand Down Expand Up @@ -182,14 +182,14 @@ We recommend using client-side validation, but in case you require server-side v
<div class="col-md-4">
<label for="validationServer01" class="form-label">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
<div class="valid-feedback mt-2">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServer02" class="form-label">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
<div class="valid-feedback mt-2">
Looks good!
</div>
</div>
Expand All @@ -198,15 +198,15 @@ We recommend using client-side validation, but in case you require server-side v
<div class="input-group">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationServer03" class="form-label">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please provide a valid city.
</div>
</div>
Expand All @@ -216,14 +216,14 @@ We recommend using client-side validation, but in case you require server-side v
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationServer05" class="form-label">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" required>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please provide a valid zip.
</div>
</div>
Expand All @@ -233,7 +233,7 @@ We recommend using client-side validation, but in case you require server-side v
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
You must agree before submitting.
</div>
</div>
Expand All @@ -258,15 +258,15 @@ Validation styles are available for the following form controls and components:
<div class="mb-3">
<label for="validationTextarea" class="form-label">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
<div class="invalid-feedback mt-2">
Please enter a message in the textarea.
</div>
</div>

<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
<label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
<div class="invalid-feedback mt-2">Example invalid feedback text</div>
</div>

<div class="form-check">
Expand All @@ -276,7 +276,7 @@ Validation styles are available for the following form controls and components:
<div class="form-check mb-3">
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
<div class="invalid-feedback mt-2">More example invalid feedback text</div>
</div>

<div class="mb-3">
Expand All @@ -286,7 +286,7 @@ Validation styles are available for the following form controls and components:
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid select feedback</div>
<div class="invalid-feedback mt-2">Example invalid select feedback</div>
</div>

<div class="form-file">
Expand All @@ -295,7 +295,7 @@ Validation styles are available for the following form controls and components:
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
<div class="invalid-feedback">Example invalid form file feedback</div>
<div class="invalid-feedback mt-2">Example invalid form file feedback</div>
</div>

<div class="mb-3">
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/4.3/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ Changes to Reboot, typography, tables, and more.
- Dropped `.form-row` for the more flexible grid gutters.
- Dropped `.form-inline` for the more flexible grid.
- Dropped support for `.form-control-plaintext` inside `.input-group`s.
- Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`).
- Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.small`, and/or `.text-muted`).
- Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
- Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476)

Expand Down