From 38e3159f9a045439e51cfa6346b8c254505ff0fc Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 10 Feb 2022 13:44:55 -0700 Subject: [PATCH 1/4] Add documentation for skeleton-page-header-layout() mixin --- documentation/guides/migrating-from-v8-to-v9.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 64400410987..781831faab1 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -328,6 +328,16 @@ This function has been deprecated, but the definition can be copied and used loc | `shadow(layer)` | `--p-shadow-layer` | | `shadow(transparent)` | `--p-shadow-transparent` | +#### `skeleton-page-header-layout()` + +| Deprecated Mixin | Replacement Value | +| -------------------------------------- | ----------------------------------- | +| `@include skeleton-page-header-layout` | `padding-bottom: var(--p-space-2);` | + +#### `skeleton-page-secondary-actions-layout()` + +#### `skeleton-shimmer()` + #### `spacing()` | Function | Replacement Value/Token | From ee9fb67fd5dd380d0587cb91de29df551f6e6945 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 10 Feb 2022 13:49:34 -0700 Subject: [PATCH 2/4] Add documentation for skeleton-page-secondary-actions-layout() mixin --- .../guides/migrating-from-v8-to-v9.md | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 781831faab1..ed3e195d04d 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -336,6 +336,31 @@ This function has been deprecated, but the definition can be copied and used loc #### `skeleton-page-secondary-actions-layout()` + + + + + + + + + +
Deprecated MixinReplacement Value
+ +`@include skeleton-page-secondary-actions-layout` + + + +```scss +margin-top: var(--p-space-2); +display: flex; +flex-direction: row-reverse; +justify-content: flex-end; +align-items: center; +``` + +
+ #### `skeleton-shimmer()` #### `spacing()` From e9fb6eadab08ccf5f6b1ee4b1706beed4d97cec2 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 10 Feb 2022 14:19:17 -0700 Subject: [PATCH 3/4] Create documentation for skeleton-shimmer() mixin --- .../guides/migrating-from-v8-to-v9.md | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index ed3e195d04d..65ec27fb5b9 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -363,6 +363,44 @@ align-items: center; #### `skeleton-shimmer()` +We completely removed motion from our skeleton components for a better user experience but if you want to keep the functionality of this mixin you can reference the table below for replacement values. + + + + + + + + + + +
Deprecated MixinReplacement Value
+ +`@include skeleton-shimmer` + + + +```scss +animation: shimmer 800ms linear infinite alternate; +will-change: opacity; + +@keyframes shimmer { + 0% { + opacity: 0.45; + } + + 100% { + opacity: 0.9; + } +} + +@media (prefers-reduced-motion) { + animation: none; +} +``` + +
+ #### `spacing()` | Function | Replacement Value/Token | From 7c0f2428c8a4a80e372e0166be05160b0d1dacf5 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 11 Feb 2022 09:44:57 -0700 Subject: [PATCH 4/4] Remove extra semicolon --- documentation/guides/migrating-from-v8-to-v9.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 65ec27fb5b9..de59665a31f 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -330,9 +330,9 @@ This function has been deprecated, but the definition can be copied and used loc #### `skeleton-page-header-layout()` -| Deprecated Mixin | Replacement Value | -| -------------------------------------- | ----------------------------------- | -| `@include skeleton-page-header-layout` | `padding-bottom: var(--p-space-2);` | +| Deprecated Mixin | Replacement Value | +| -------------------------------------- | ---------------------------------- | +| `@include skeleton-page-header-layout` | `padding-bottom: var(--p-space-2)` | #### `skeleton-page-secondary-actions-layout()`