Skip to content

Turn code blocks into tables in migration guide #5162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 11, 2022
Merged

Turn code blocks into tables in migration guide #5162

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 82 additions & 5 deletions documentation/guides/migrating-from-v8-to-v9.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Member

@alex-page alex-page Feb 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we do markdown table formatting?

| Title 1 | Title 2 |
| --- | --- |
| Something | Something |

Copy link
Contributor Author

@lgriffee lgriffee Feb 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not if the content is a code block unfortunately, otherwise I'd love to use markdown table formatting.

<tr>
<th>Deprecated Mixin</th>
<th>Replacement Value</th>
</tr>
<tr>
<td>

`@include color-icon(<value>, <hue>)`

</td>
<td>

```scss
svg {
Expand All @@ -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.
Expand Down Expand Up @@ -276,14 +293,29 @@ 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 {
display: none !important;
}
```

</td>
</tr>
</table>

#### `high-contrast-border()`

| Mixin | Replacement Value/Token |
Expand Down Expand Up @@ -334,14 +366,29 @@ 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 {
display: none !important;
}
```

</td>
</tr>
</table>

#### `px()`

This function has been deprecated, but the definition can be copied and used locally.
Expand Down Expand Up @@ -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;
Expand All @@ -465,16 +523,35 @@ 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;
padding: 0;
list-style: none;
```

</td>
</tr>
</table>

#### `when-not-printing()`

| Mixin | Replacement Value/Token |
Expand Down