Rename mh-* and mw-* to max-h/w-*, add additional width and height va… (#41687)

* Rename mh-* and mw-* to max-h/w-*, add additional width and height values

Fixes #41330, fixes #40674.

* Bump bundlewatch

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 6f680664ca67b103f46207d49e551172917ef9f6..69e6ca746f2b98edd3a31f1c20b38670daf901d5 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -22,7 +22,7 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "10.75 kB"
+      "maxSize": "11.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 0343850127d9a0e5e9e93b955575ddc30bc71cd1..8f1039d0446e45f684b1098e651ee8aaab9f5a7b 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -210,14 +210,25 @@ $utilities: map-merge(
         50: 50%,
         75: 75%,
         100: 100%,
-        auto: auto
+        auto: auto,
+        min: min-content,
+        max: max-content,
+        fit: fit-content,
       )
     ),
     "max-width": (
       property: max-width,
-      class: mw,
+      class: max-w,
       values: (100: 100%)
     ),
+    "min-width": (
+      property: min-width,
+      class: min-w,
+      values: (
+        0: 0,
+        100: 100%
+      )
+    ),
     "viewport-width": (
       property: width,
       class: vw,
@@ -236,14 +247,25 @@ $utilities: map-merge(
         50: 50%,
         75: 75%,
         100: 100%,
-        auto: auto
+        auto: auto,
+        min: min-content,
+        max: max-content,
+        fit: fit-content,
       )
     ),
     "max-height": (
       property: max-height,
-      class: mh,
+      class: max-h,
       values: (100: 100%)
     ),
+    "min-height": (
+      property: min-height,
+      class: min-h,
+      values: (
+        0: 0,
+        100: 100%,
+      ),
+    ),
     "viewport-height": (
       property: height,
       class: vh,

diff --git a/site/src/content/docs/utilities/sizing.mdx b/site/src/content/docs/utilities/sizing.mdx
index 77f98d71d55c27776e6fe70088b1c5209d98b53c..dd554f9331032ca2d3d2f23ca18c6b6467b5201c 100644 (file)
--- a/site/src/content/docs/utilities/sizing.mdx
+++ b/site/src/content/docs/utilities/sizing.mdx
@@ -25,11 +25,11 @@ Width and height utilities are generated from the utility API in `_utilities.scs
 You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
 
 <Example class="bd-example-flex" code={`<div style="width: 50%; height: 100px;">
-    <div class="mw-100" style="width: 200%;">Max-width 100%</div>
+    <div class="max-w-100" style="width: 200%;">Max-width 100%</div>
   </div>`} />
 
 <Example class="bd-example-flex" code={`<div style="height: 100px;">
-    <div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
+    <div class="max-h-100" style="width: 100px; height: 200px;">Max-height 100%</div>
   </div>`} />
 
 ## Relative to the viewport