From 9f039b737f6b99462e3364632a8da63841b3ef4a Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 10 Feb 2022 13:17:29 -0700 Subject: [PATCH 1/3] Create documentation for state() mixin --- .../guides/migrating-from-v8-to-v9.md | 149 ++++++++++++++++++ 1 file changed, 149 insertions(+) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index f7980e6a68b..370e59d1fec 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -346,6 +346,155 @@ This function has been deprecated, but the definition can be copied and used loc | `spacing(loose)` | `--p-space-5` | | `spacing(extra-loose)` | `--p-space-8` | +#### `state()` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Deprecated MixinReplacement Value
+ +`@include state(hover)` + + + +`background-image: linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3))` + +
+ +`@include state(focused)` + + + +```scss +box-shadow: inset 2px 0 0 var(--p-focused); +background-image: linear-gradient( + rgba(223, 227, 232, 0.3), + rgba(223, 227, 232, 0.3) +); +``` + +
+ +`@include state(active)` + + + +`background-image: linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1))` + +
+ +`@include state(selected)` + + + +`background-image: linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15))` + +
+ +`@include state(subdued)` + + + +`background-image: linear-gradient(rgba(249, 250, 251, 1), rgba(249, 250, 251, 1))` + +
+ +`@include state(disabled)` + + + +`background-image: linear-gradient(rgba(249, 250, 251, 1), rgba(249, 250, 251, 1))` + +
+ +`@include state(hover-destructive)` + + + +`background-image: linear-gradient(rgba(251, 234, 229, 0.4), rgba(251, 234, 229, 0.4))` + +
+ +`@include state(focused-destructive)` + + + +```scss +box-shadow: inset 2px 0 0 var(--p-focused); +background-image: linear-gradient( + rgba(251, 234, 229, 0.4), + rgba(251, 234, 229, 0.4) +); +``` + +
+ +`@include state(active-destructive)` + + + +`background-image: linear-gradient(rgba(220, 56, 37, 0.03), rgba(220, 56, 37, 0.03))` + +
+ +For `@include state()` instances that have multiple `` parameters, combine the replacement values (make sure to separate multiple `linear gradients()` by a comma). + +If replacement is too complicated, you can copy the function definition and use it locally. + +| Deprecated Mixin | Source | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `state()` | [definition](https://github.com/Shopify/polaris-react/blob/b443d114d447df15d9e72914c8ca5058439a175e/documentation/guides/legacy-polaris-v8-public-api.scss#L2049-L2076) | + +| Deprecated Mixin | Replacement Value | +| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | +| `@include state(hover)` | `background-image: linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3))` | +| `@include state(focused)` | `box-shadow: inset 2px 0 0 var(--p-focused); background-image: linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3))` | +| `@include state(active)` | `background-image: linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1))` | +| `@include state(selected)` | `background-image: linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15))` | +| `@include state(subdued)` | `background-image: linear-gradient(rgba(249, 250, 251, 1), rgba(249, 250, 251, 1))` | +| `@include state(disabled)` | `background-image: linear-gradient(rgba(249, 250, 251, 1), rgba(249, 250, 251, 1))` | +| `@include state(hover-destructive)` | `background-image: linear-gradient(rgba(251, 234, 229, 0.4), rgba(251, 234, 229, 0.4))` | +| `@include state(focused-destructive)` | `box-shadow: inset 2px 0 0 var(--p-focused); background-image: linear-gradient(rgba(251, 234, 229, 0.4), rgba(251, 234, 229, 0.4))` | +| `@include state(active-destructive)` | `background-image: linear-gradient(rgba(220, 56, 37, 0.03), rgba(220, 56, 37, 0.03))` | + #### `unstyled-link()` Replace any instances of `@include unstyled-link` with the following code block. From ab7eaaf960ce80a89009b834101c9f87465a34b4 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 10 Feb 2022 13:17:59 -0700 Subject: [PATCH 2/3] Remove secondary table option --- documentation/guides/migrating-from-v8-to-v9.md | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 370e59d1fec..104c771b0f8 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -483,18 +483,6 @@ If replacement is too complicated, you can copy the function definition and use | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `state()` | [definition](https://github.com/Shopify/polaris-react/blob/b443d114d447df15d9e72914c8ca5058439a175e/documentation/guides/legacy-polaris-v8-public-api.scss#L2049-L2076) | -| Deprecated Mixin | Replacement Value | -| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -| `@include state(hover)` | `background-image: linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3))` | -| `@include state(focused)` | `box-shadow: inset 2px 0 0 var(--p-focused); background-image: linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3))` | -| `@include state(active)` | `background-image: linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1))` | -| `@include state(selected)` | `background-image: linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15))` | -| `@include state(subdued)` | `background-image: linear-gradient(rgba(249, 250, 251, 1), rgba(249, 250, 251, 1))` | -| `@include state(disabled)` | `background-image: linear-gradient(rgba(249, 250, 251, 1), rgba(249, 250, 251, 1))` | -| `@include state(hover-destructive)` | `background-image: linear-gradient(rgba(251, 234, 229, 0.4), rgba(251, 234, 229, 0.4))` | -| `@include state(focused-destructive)` | `box-shadow: inset 2px 0 0 var(--p-focused); background-image: linear-gradient(rgba(251, 234, 229, 0.4), rgba(251, 234, 229, 0.4))` | -| `@include state(active-destructive)` | `background-image: linear-gradient(rgba(220, 56, 37, 0.03), rgba(220, 56, 37, 0.03))` | - #### `unstyled-link()` Replace any instances of `@include unstyled-link` with the following code block. From c10608b32ff77e65f30c3fe6c237825eadbea2d7 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 10 Feb 2022 13:45:57 -0700 Subject: [PATCH 3/3] Remove unnecessary style declaration --- documentation/guides/migrating-from-v8-to-v9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 104c771b0f8..188eaaf64a7 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -354,7 +354,7 @@ This function has been deprecated, but the definition can be copied and used loc Replacement Value - + `@include state(hover)`