Prevent print utils from overriding all other display utils (#25269)

* Prevent print utils from overriding all other display utils

Fixes #25221.

I agree with the referenced issue—this is unexpected and also causes a serious bug when mixed with other utility classes. This wasn't an issue in v3 given we had different utilities for hiding that weren't focused on display property.

* Add printing changes to migration docs

* unrelated heading sentence case change

* List out all .d-print- classes

diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index 9b4030699dab12039f5d60adeb6f988919e44178..343765f8651dc12a4658cfb200d8eccd2ca83565 100644 (file)
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -6,6 +6,17 @@ group: migration
 toc: true
 ---
 
+## Stable changes
+
+Moving from Beta 3 to our stable v4.0 release, there are no breaking changes, but there are some notable changes.
+
+### Printing
+- Fixed broken print utilities. Previously, using a `.d-print-*` class would unexpectedly overrule any other `.d-*` class. Now, they match our other display utilities and only apply to that media (`@media print`).
+
+- Expanded available print display utilities to match other utilities. Beta 3 and older only had `block`, `inline-block`, `inline`, and `none`. Stable v4 added `flex`, `inline-flex`, `table`, `table-row`, and `table-cell`.
+
+- Fixed print preview rendering across browsers with new print styles that specify `@page` `size`.
+
 ## Beta 3 changes
 
 While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap.

diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md
index f48d0a538f6de1cdbb5acd4684f55d42c012f5c7..d7cab217517a6d329a7a5165ae0347a20145b1b6 100644 (file)
--- a/docs/4.0/utilities/display.md
+++ b/docs/4.0/utilities/display.md
@@ -45,7 +45,7 @@ The media queries effect screen widths with the given breakpoint *or larger*. Fo
 <span class="d-block p-2 bg-dark text-white">d-block</span>
 {% endexample %}
 
-## Hiding Elements
+## Hiding elements
 
 For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
 
@@ -75,14 +75,17 @@ To show an element only on a given interval of screen sizes you can combine one
 
 ## Display in print
 
-Change the `display` value of elements when printing with our print display utility classes.
-
-| Class | Print style |
-| --- | --- |
-| `.d-print-block` | Applies `display: block;` to the element when printing |
-| `.d-print-inline` | Applies `display: inline;` to the element when printing |
-| `.d-print-inline-block` | Applies `display: inline-block;` to the element when printing |
-| `.d-print-none` | Applies `display: none;` to the element when printing |
+Change the `display` value of elements when printing with our print display utility classes. Includes support for the same `display` values as our responsive `.d-*` utilities.
+
+- `.d-print-none`
+- `.d-print-inline`
+- `.d-print-inline-block`
+- `.d-print-block`
+- `.d-print-table`
+- `.d-print-table-row`
+- `.d-print-table-cell`
+- `.d-print-flex`
+- `.d-print-inline-flex`
 
 The print and display classes can be combined.
 

diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index 893b6387c17246ba558750f5caa04ec2d8821662..20aeeb5f3e7586bba0fe69bff02057b15b2309f3 100644 (file)
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -25,32 +25,14 @@
 // Utilities for toggling `display` in print
 //
 
-.d-print-block {
-  display: none !important;
-
-  @media print {
-    display: block !important;
-  }
-}
-
-.d-print-inline {
-  display: none !important;
-
-  @media print {
-    display: inline !important;
-  }
-}
-
-.d-print-inline-block {
-  display: none !important;
-
-  @media print {
-    display: inline-block !important;
-  }
-}
-
-.d-print-none {
-  @media print {
-    display: none !important;
-  }
+@media print {
+  .d-print-none         { display: none !important; }
+  .d-print-inline       { display: inline !important; }
+  .d-print-inline-block { display: inline-block !important; }
+  .d-print-block        { display: block !important; }
+  .d-print-table        { display: table !important; }
+  .d-print-table-row    { display: table-row !important; }
+  .d-print-table-cell   { display: table-cell !important; }
+  .d-print-flex         { display: flex !important; }
+  .d-print-inline-flex  { display: inline-flex !important; }
 }