From 2aea30d8e6d435a7f5274abdb35390157c5b451a Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Sun, 15 Mar 2020 18:24:47 +0200 Subject: [PATCH 1/5] docs: removes `.form-text` --- site/content/docs/4.3/forms/overview.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md index a4cc7800848a..c27923b3d353 100644 --- a/site/content/docs/4.3/forms/overview.md +++ b/site/content/docs/4.3/forms/overview.md @@ -37,7 +37,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
- We'll never share your email with anyone else. + We'll never share your email with anyone else.
@@ -51,22 +51,18 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for {{< /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`, `.text-small`, and/or `.text-muted`. {{< example >}} - + Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. {{< /example >}} From 00ea33cb649eca51fa881effe3a6ca0c6a6e701e Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Sun, 15 Mar 2020 18:28:44 +0200 Subject: [PATCH 2/5] feat(css): removes `$form-text-margin-top` --- scss/_variables.scss | 3 --- scss/mixins/_forms.scss | 1 - 2 files changed, 4 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 6123f3ce1dd1..5076c6bc5566 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -663,8 +663,6 @@ $form-switch-checked-color: $component-active-color !default; $form-switch-checked-bg-image: url("data:image/svg+xml,") !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; @@ -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; diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 7abfd23bfb25..eba86e8c1d11 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -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; } From 90f9273948ee3af6c0d2bae1339c6d338bcd4dce Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Sun, 15 Mar 2020 18:31:20 +0200 Subject: [PATCH 3/5] feat: adds `.invalid-feedback` margins --- .../docs/4.3/examples/checkout/index.html | 24 +++++++-------- site/content/docs/4.3/forms/validation.md | 30 +++++++++---------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html index 82079d19a139..735a0c235d6c 100644 --- a/site/content/docs/4.3/examples/checkout/index.html +++ b/site/content/docs/4.3/examples/checkout/index.html @@ -70,7 +70,7 @@

Billing address

-
+
Valid first name is required.
@@ -78,7 +78,7 @@

Billing address

-
+
Valid last name is required.
@@ -88,7 +88,7 @@

Billing address

@ -
+
Your username is required.
@@ -97,7 +97,7 @@

Billing address

-
+
Please enter a valid email address for shipping updates.
@@ -105,7 +105,7 @@

Billing address

-
+
Please enter your shipping address.
@@ -121,7 +121,7 @@

Billing address

-
+
Please select a valid country.
@@ -132,7 +132,7 @@

Billing address

-
+
Please provide a valid state.
@@ -140,7 +140,7 @@

Billing address

-
+
Zip code required.
@@ -182,7 +182,7 @@

Payment

Full name as displayed on card -
+
Name on card is required
@@ -190,7 +190,7 @@

Payment

-
+
Credit card number is required
@@ -198,7 +198,7 @@

Payment

-
+
Expiration date required
@@ -206,7 +206,7 @@

Payment

-
+
Security code required
diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md index 4613a6d74334..85d5ccbb6e2c 100644 --- a/site/content/docs/4.3/forms/validation.md +++ b/site/content/docs/4.3/forms/validation.md @@ -52,7 +52,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
@ -
+
Please choose a username.
@@ -60,7 +60,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
-
+
Please provide a valid city.
@@ -70,14 +70,14 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun -
+
Please select a valid state.
-
+
Please provide a valid zip.
@@ -87,7 +87,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun -
+
You must agree before submitting.
@@ -198,7 +198,7 @@ We recommend using client-side validation, but in case you require server-side v
@ -
+
Please choose a username.
@@ -206,7 +206,7 @@ We recommend using client-side validation, but in case you require server-side v
-
+
Please provide a valid city.
@@ -216,14 +216,14 @@ We recommend using client-side validation, but in case you require server-side v -
+
Please select a valid state.
-
+
Please provide a valid zip.
@@ -233,7 +233,7 @@ We recommend using client-side validation, but in case you require server-side v -
+
You must agree before submitting.
@@ -258,7 +258,7 @@ Validation styles are available for the following form controls and components:
-
+
Please enter a message in the textarea.
@@ -266,7 +266,7 @@ Validation styles are available for the following form controls and components:
-
Example invalid feedback text
+
Example invalid feedback text
@@ -276,7 +276,7 @@ Validation styles are available for the following form controls and components:
-
More example invalid feedback text
+
More example invalid feedback text
@@ -286,7 +286,7 @@ Validation styles are available for the following form controls and components: -
Example invalid select feedback
+
Example invalid select feedback
@@ -295,7 +295,7 @@ Validation styles are available for the following form controls and components: Choose file... Browse -
Example invalid form file feedback
+
Example invalid form file feedback
From 06d8358ae5c05292d1ef6c812af5f08830cb1e0a Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Sun, 15 Mar 2020 18:32:16 +0200 Subject: [PATCH 4/5] feat: adds `.valid-feedback` margins --- site/content/docs/4.3/forms/validation.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md index 85d5ccbb6e2c..50f0b0305b71 100644 --- a/site/content/docs/4.3/forms/validation.md +++ b/site/content/docs/4.3/forms/validation.md @@ -36,14 +36,14 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
-
+
Looks good!
-
+
Looks good!
@@ -182,14 +182,14 @@ We recommend using client-side validation, but in case you require server-side v
-
+
Looks good!
-
+
Looks good!
From 4f68fbeba266b10c89ac15ed12d2c35c75992855 Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Sun, 15 Mar 2020 19:20:47 +0200 Subject: [PATCH 5/5] fix: replaces `.text-small` with `.small` Fixes using a non existing class. --- site/content/docs/4.3/forms/overview.md | 2 +- site/content/docs/4.3/migration.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md index c27923b3d353..f72c81a28757 100644 --- a/site/content/docs/4.3/forms/overview.md +++ b/site/content/docs/4.3/forms/overview.md @@ -57,7 +57,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for 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 `.mt-2`, `.text-small`, and/or `.text-muted`. +Help text below inputs can be styled with `.mt-2`, `.small`, and/or `.text-muted`. {{< example >}} diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 2d73328d199d..6858e12c7c9f 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -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)