From 000ccca164500a63b2123bfe9db6c78a8bd30da2 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Fri, 11 Feb 2022 12:02:34 -0700
Subject: [PATCH] Turn code blocks into tables

---
 .../guides/migrating-from-v8-to-v9.md         | 87 +++++++++++++++++--
 1 file changed, 82 insertions(+), 5 deletions(-)

diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md
index a2b8076b5c8..b4ffed52e9c 100644
--- a/documentation/guides/migrating-from-v8-to-v9.md
+++ b/documentation/guides/migrating-from-v8-to-v9.md
@@ -144,7 +144,18 @@ Reference our [new color token file](https://github.com/Shopify/polaris-react/bl
 
 #### `color-icon()`
 
-Replace any `color-icon(<value>, <hue>)` instances with the following code block. See the [`color()`](#color) and [`filter()`](#filter) sections for replacing those functions.
+<table>
+<tr>
+<th>Deprecated Mixin</th>
+<th>Replacement Value</th>
+</tr>
+<tr>
+<td>
+
+`@include color-icon(<value>, <hue>)`
+
+</td>
+<td>
 
 ```scss
 svg {
@@ -156,6 +167,12 @@ img {
 }
 ```
 
+</td>
+</tr>
+</table>
+
+See the [`color()`](#color) and [`filter()`](#filter) sections for replacing those functions.
+
 #### `color-multiply()`
 
 Use your browser developer tools to inspect the output color value of the function and hard code the color value you need.
@@ -276,7 +293,18 @@ We replaced a few of the following filter function instances with color tokens i
 
 #### `hidden-when-printing()`
 
-Replace any instance of `@include hidden-when-printing;` with the following code
+<table>
+<tr>
+<th>Deprecated Mixin</th>
+<th>Replacement Value</th>
+</tr>
+<tr>
+<td>
+
+`@include hidden-when-printing`
+
+</td>
+<td>
 
 ```scss
 @media print {
@@ -284,6 +312,10 @@ Replace any instance of `@include hidden-when-printing;` with the following code
 }
 ```
 
+</td>
+</tr>
+</table>
+
 #### `high-contrast-border()`
 
 | Mixin                                                          | Replacement Value/Token                              |
@@ -334,7 +366,18 @@ This function has been deprecated, but the definition can be copied and used loc
 
 #### `print-hidden()`
 
-Replace any instance of `@include print-hidden;` with the following code
+<table>
+<tr>
+<th>Deprecated Mixin</th>
+<th>Replacement Value</th>
+</tr>
+<tr>
+<td>
+
+`@include print-hidden`
+
+</td>
+<td>
 
 ```scss
 @media print {
@@ -342,6 +385,10 @@ Replace any instance of `@include print-hidden;` with the following code
 }
 ```
 
+</td>
+</tr>
+</table>
+
 #### `px()`
 
 This function has been deprecated, but the definition can be copied and used locally.
@@ -454,7 +501,18 @@ will-change: opacity;
 
 #### `unstyled-link()`
 
-Replace any instances of `@include unstyled-link` with the following code block.
+<table>
+<tr>
+<th>Deprecated Mixin</th>
+<th>Replacement Value</th>
+</tr>
+<tr>
+<td>
+
+`@include unstyled-link`
+
+</td>
+<td>
 
 ```scss
 color: inherit;
@@ -465,9 +523,24 @@ text-decoration: none;
 }
 ```
 
+</td>
+</tr>
+</table>
+
 #### `unstyled-list()`
 
-Replace any instances of `@include unstyled-list` with the following code block.
+<table>
+<tr>
+<th>Deprecated Mixin</th>
+<th>Replacement Value</th>
+</tr>
+<tr>
+<td>
+
+`@include unstyled-list`
+
+</td>
+<td>
 
 ```scss
 margin: 0;
@@ -475,6 +548,10 @@ padding: 0;
 list-style: none;
 ```
 
+</td>
+</tr>
+</table>
+
 #### `when-not-printing()`
 
 | Mixin                        | Replacement Value/Token |