Skip to content

feat: removes .form-text display #30598

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

Merged
MartijnCuppens merged 5 commits into from
Apr 16, 2020
Merged

feat: removes .form-text display #30598

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
b5f491f
feat: removes `.form-text` display
zalog Apr 15, 2020
e51359f
feat: sets `$form-text-font-size`
zalog Apr 15, 2020
02b35b2
feat: adds `$form-feedback-font-style`
zalog Apr 15, 2020
3d0a890
Update overview.md
MartijnCuppens Apr 16, 2020
5e1a7e4
Update overview.md
MartijnCuppens Apr 16, 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
5 changes: 3 additions & 2 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -570,7 +570,7 @@ $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-size: $small-font-size !default;
$form-text-font-style: null !default;
$form-text-color: $text-muted !default;

Expand Down Expand Up @@ -772,7 +772,8 @@ $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-font-size: $form-text-font-size !default;
$form-feedback-font-style: $form-text-font-style !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;

Expand Down
1 change: 0 additions & 1 deletion scss/forms/_form-text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
//

.form-text {
display: block;
margin-top: $form-text-margin-top;
@include font-size($form-text-font-size);
font-style: $form-text-font-style;
Expand Down
1 change: 1 addition & 0 deletions scss/mixins/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}

Expand Down
16 changes: 8 additions & 8 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">We'll never share your email with anyone else.</small>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
Expand All @@ -53,25 +53,25 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for

## Form text

Block-level form text in forms can be created using `.form-text`.
Block-level or inline-level form text can be created using `.form-text`.

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

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 >}}

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.
Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added 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">
<div 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>
</div>
{{< /example >}}

Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else) with nothing more than a utility class.
Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.

{{< example >}}
<div class="row g-3 align-items-center">
Expand All @@ -82,9 +82,9 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<small id="passwordHelpInline" class="text-muted">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</small>
</span>
</div>
</div>
{{< /example >}}
Expand Down