diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index f7980e6a68b..188eaaf64a7 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -346,6 +346,143 @@ 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) | + #### `unstyled-link()` Replace any instances of `@include unstyled-link` with the following code block.