From 5e1c404902060c67c90413f2d4c794894e4b0ac1 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Tue, 31 Dec 2024 15:12:51 +0100
Subject: [PATCH] chore(documentation): add migration instructions for sizing
 utilities (#4370)

---
 .../migrationv8-9.component.ts                | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts
index 39eab0b029..acd5e10960 100644
--- a/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts
+++ b/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts
@@ -87,6 +87,53 @@ export class MigrationV89Component extends LitElement {
                     <code>.invalid-feedback</code>.
                   </p>
                 </li>
+                <li class="mb-16">
+                  <p>
+                    Changed the percentage sizing utility classes (<code>w-*</code>,
+                    <code>h-*</code>, <code>mh-*</code>, <code>mw-*</code>) naming.
+                    <span class="tag tag-sm tag-danger">breaking</span>
+                  </p>
+                  <ul>
+                    <li><code>*-25</code> is now <code>*-quarter</code></li>
+                    <li><code>*-50</code> is now <code>*-half</code></li>
+                    <li><code>*-75</code> is now <code>*-three-quarters</code></li>
+                    <li><code>*-100</code> is now <code>*-full</code></li>
+                  </ul>
+                </li>
+                <li class="mb-16">
+                  <p>
+                    Changed the pixel sizing utility classes (<code>w-*</code>, <code>h-*</code>,
+                    <code>mh-*</code>, <code>mw-*</code>) to pixel-based names.
+                    <span class="tag tag-sm tag-danger">breaking</span>
+                  </p>
+                  <ul>
+                    <li><code>*-hair</code> is now <code>*-1</code></li>
+                    <li><code>*-line</code> is now <code>*-2</code></li>
+                    <li><code>*-micro</code> is now <code>*-4</code></li>
+                    <li><code>*-mini</code> is now <code>*-8</code></li>
+                    <li><code>*-small-regular</code> is now <code>*-12</code></li>
+                    <li><code>*-regular</code> is now <code>*-16</code></li>
+                    <li><code>*-small-large</code> is now <code>*-20</code></li>
+                    <li><code>*-large</code> is now <code>*-24</code></li>
+                    <li><code>*-big</code> is now <code>*-32</code></li>
+                    <li><code>*-bigger-big</code> is now <code>*-40</code></li>
+                    <li><code>*-small-huge</code> is now <code>*-48</code></li>
+                    <li><code>*-huge</code> is now <code>*-56</code></li>
+                    <li><code>*-small-giant</code> is now <code>*-72</code></li>
+                    <li><code>*-giant</code> is now <code>*-80</code></li>
+                    <li><code>*-bigger-giant</code> is now <code>*-112</code></li>
+                  </ul>
+                </li>
+                <li class="mb-16">
+                  <p>
+                    Changed the sizing utility classes max-height and max-width naming.
+                    <span class="tag tag-sm tag-danger">breaking</span>
+                  </p>
+                  <ul>
+                    <li><code>mh-*</code> is now <code>max-h-*</code></li>
+                    <li><code>mw-*</code> is now <code>max-w-*</code></li>
+                  </ul>
+                </li>
               </ul>
             </section>
           </li>