Rely on `border-width` for `<hr>` size (#35491)

* fix(reboot): revert hr styles to v4 implementation

* docs(cheatsheet): add a hr example

* fix(reboot): currentColor is the initial border-color value

* Document hr element in Reboot docs

* Update migration guide

* Update scss/_variables.scss

Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index bf0eb9e2505f6614a3139b9e2368276f6481dc21..259f59eb4505b0d2b319b85ce905bd715a197fd8 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -64,20 +64,15 @@ body {
 // Content grouping
 //
 // 1. Reset Firefox's gray color
-// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
 
 hr {
   margin: $hr-margin-y 0;
   color: $hr-color; // 1
-  background-color: $hr-bg-color;
-  border: $hr-border-width;
+  border: 0;
+  border-top: $hr-border-width solid $hr-border-color;
   opacity: $hr-opacity;
 }
 
-hr:not([size]) {
-  height: $hr-height; // 2
-}
-
 
 // Typography
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
index f86d163727f918f96584ce1e91c861daf8f0c695..fd6166b26c945ce7ed94bc6b5366884051456996 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -620,9 +620,13 @@ $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !default;
-$hr-bg-color:                 currentColor !default;
-$hr-border-width:             0 !default;
-$hr-height:                   $border-width !default;
+// fusv-disable
+$hr-bg-color: null !default; // Deprecated in v5.2.0
+$hr-height: null !default; // Deprecated in v5.2.0
+// fusv-enable
+
+$hr-border-color: null !default; // Allows for inherited colors
+$hr-border-width: $border-width !default;
 $hr-opacity:                  .25 !default;
 
 $legend-margin-bottom:        .5rem !default;

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f81a0af188b82b0b18e67eea09b7ecdc442ec132..9e017c507eaef7558be45ae788fd0d66d1855a20 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -124,7 +124,7 @@
     display: block;
   }
 
-  > :last-child {
+  > :not(hr):last-child {
     margin-bottom: 0;
   }
 

diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md
index e3391df30290f28e44c7a93ec8c87a54f18bd6c5..bed4f599eb9d84202ff7fde613947762b3bf6d4f 100644 (file)
--- a/site/content/docs/5.1/content/reboot.md
+++ b/site/content/docs/5.1/content/reboot.md
@@ -129,6 +129,21 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
   </tbody>
 </table>
 
+## Horizontal rules
+
+The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
+
+{{< example >}}
+<hr>
+
+<div class="text-success">
+  <hr>
+</div>
+
+<hr class="text-danger border-2 opacity-50">
+<hr class="border-primary border-3 opacity-75">
+{{< /example >}}
+
 ## Lists
 
 All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.

diff --git a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
index 7c45f7b91acc963022632aa4c5a7d8a7975796bb..a3acea50a2dee278b6f74c05b530637d22e98a8f 100644 (file)
--- a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
@@ -116,6 +116,10 @@ direction: rtl
         <p><em>هذا السطر يحوي نص مائل.</em></p>
         {{< /example >}}
 
+        {{< example show_markup="false" >}}
+        <hr>
+        {{< /example >}}
+
         {{< example show_markup="false" >}}
         <blockquote class="blockquote">
           <p>إقتباس مبهر، موضوع في عنصر blockquote</p>

diff --git a/site/content/docs/5.1/examples/cheatsheet/index.html b/site/content/docs/5.1/examples/cheatsheet/index.html
index be7259ec2c86fedd5424ba44ae070d35ab005ec2..6eecad926ab2f46c907b9aac48aaf4e8fe6a79c8 100644 (file)
--- a/site/content/docs/5.1/examples/cheatsheet/index.html
+++ b/site/content/docs/5.1/examples/cheatsheet/index.html
@@ -115,6 +115,10 @@ body_class: "bg-light"
         <p><em>This line rendered as italicized text.</em></p>
         {{< /example >}}
 
+        {{< example show_markup="false" >}}
+        <hr>
+        {{< /example >}}
+
         {{< example show_markup="false" >}}
         <blockquote class="blockquote">
           <p>A well-known quote, contained in a blockquote element.</p>

diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md
index 7fe5182b5aab0c75a73e9f78097701455bfa1071..732c38ee28bf03b69538cbc44f7f70e12ab434dd 100644 (file)
--- a/site/content/docs/5.1/migration.md
+++ b/site/content/docs/5.1/migration.md
@@ -181,7 +181,7 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa
 
 - <span class="badge bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793)
 
-- <span class="badge bg-danger">Breaking</span> `<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).
+- <span class="badge bg-danger">Breaking</span> ~~`<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).~~
 
 - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.