kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Restore .form-text (#30565)

Browse source
This commit is contained in:
Catalin Zalog 2020-04-14 09:21:13 +03:00 committed by GitHub
parent 789bcf6ad6
commit e2afbbfa82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
scss/_forms.scss
View file

@ -1,4 +1,5 @@
@import "forms/labels";
@import "forms/form-text";
@import "forms/form-control";
@import "forms/form-select";
@import "forms/form-check";

7
scss/_variables.scss
View file

@ -565,6 +565,11 @@ $btn-transition: color .15s ease-in-out, background-color .15s ease
// Forms
$form-text-margin-top: .25rem !default;
$form-text-font-size: null !default;
$form-text-font-style: null !default;
$form-text-color: $text-muted !default;
$form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
@ -669,8 +674,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;

11
scss/forms/_form-text.scss Normal file
View file

@ -0,0 +1,11 @@
//
// Form text
//
.form-text {
display: block;
margin-top: $form-text-margin-top;
@include font-size($form-text-font-size);
font-style: $form-text-font-style;
color: $form-text-color;
}

2
site/content/docs/4.3/forms/layout.md
View file

@ -18,7 +18,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
## Utilities
[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional help text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or nearly any other element.

14
site/content/docs/4.3/forms/overview.md
View file

@ -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="form-text">We'll never share your email with anyone else.</small>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
@ -51,22 +51,22 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
</form>
{{< /example >}}
## Help text
## Form 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`.
Block-level form text in forms can be created using `.form-text`.
{{< callout warning >}}
##### Associating help text with form controls
##### Associating form 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.
Form 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 form 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.
Form 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.
{{< 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="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
{{< /example >}}

1
site/content/docs/4.3/migration.md
View file

@ -101,7 +101,6 @@ 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 `.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)