From 4cc705b10de89e5359d1ab58f1d80d32db198362 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 1 Sep 2021 14:29:35 -0700 Subject: [PATCH 1/6] Remove skeleton motion --- UNRELEASED-v7.md | 1 + src/components/AppProvider/AppProvider.scss | 10 ---------- .../SkeletonBodyText/SkeletonBodyText.scss | 4 ---- .../SkeletonDisplayText/SkeletonDisplayText.scss | 1 - src/components/SkeletonPage/SkeletonPage.scss | 1 - .../SkeletonThumbnail/SkeletonThumbnail.scss | 1 - src/styles/shared/_skeleton.scss | 16 ---------------- 7 files changed, 1 insertion(+), 33 deletions(-) diff --git a/UNRELEASED-v7.md b/UNRELEASED-v7.md index fac9c99fdcd..dd7d876ce30 100644 --- a/UNRELEASED-v7.md +++ b/UNRELEASED-v7.md @@ -19,6 +19,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Added support for multi-sectioned options in `Autocomplete` [#4221](https://github.com/Shopify/polaris-react/pull/4221) - Added `wrapOverflow` prop to `AutocompleteProps` props to force text-breakword ([#4416](https://github.com/Shopify/polaris-react/pull/4416)) +- Removed motion from `Skeleton` components ([#])() ### Bug fixes diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index 4318ecc1a31..75f48fb26ef 100644 --- a/src/components/AppProvider/AppProvider.scss +++ b/src/components/AppProvider/AppProvider.scss @@ -6,16 +6,6 @@ :root { --polaris-version-number: '{{POLARIS_VERSION}}'; - // This value matches the name of the animation defined below. - // The animation name is stored in a custom property so that the scss mixins - // in our public api that reference this animation can do so with - // `var(--polaris-animation-skeleton-shimmer)` instead of - // `:global(polaris-SkeletonShimmerAnimation)`. This allows us to expose a - // single set of public sass API files instead of needing distinct sass API - // entrypoints for consumers that use css-modules in locals mode (such as scss - // files in apps using sewing-kit) and for consumers not using css-modules. - // stylelint-disable-next-line value-keyword-case - --polaris-animation-skeleton-shimmer: polaris-SkeletonShimmerAnimation; } html, diff --git a/src/components/SkeletonBodyText/SkeletonBodyText.scss b/src/components/SkeletonBodyText/SkeletonBodyText.scss index 36368979d4e..a9f9f229ea9 100644 --- a/src/components/SkeletonBodyText/SkeletonBodyText.scss +++ b/src/components/SkeletonBodyText/SkeletonBodyText.scss @@ -4,10 +4,6 @@ $body-text-height: rem(8px); $body-text-line-height: rem(12px); $body-text-last-line-width: 80%; -.SkeletonBodyTextContainer { - @include skeleton-shimmer; -} - .SkeletonBodyText { height: $body-text-height; diff --git a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss index 3cd89337382..aea6039d5c5 100644 --- a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss +++ b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss @@ -13,7 +13,6 @@ $skeleton-display-text-max-width: rem(120px); .DisplayText { max-width: $skeleton-display-text-max-width; - @include skeleton-shimmer; @include skeleton-content; } diff --git a/src/components/SkeletonPage/SkeletonPage.scss b/src/components/SkeletonPage/SkeletonPage.scss index 7330a004990..3e997fbe777 100644 --- a/src/components/SkeletonPage/SkeletonPage.scss +++ b/src/components/SkeletonPage/SkeletonPage.scss @@ -56,7 +56,6 @@ $skeleton-display-text-max-width: rem(120px); } .SkeletonTitle { - @include skeleton-shimmer; @include skeleton-content; max-width: $skeleton-display-text-max-width; height: rem(28px); diff --git a/src/components/SkeletonThumbnail/SkeletonThumbnail.scss b/src/components/SkeletonThumbnail/SkeletonThumbnail.scss index ff2f9afe7b3..c59e729df1f 100644 --- a/src/components/SkeletonThumbnail/SkeletonThumbnail.scss +++ b/src/components/SkeletonThumbnail/SkeletonThumbnail.scss @@ -6,7 +6,6 @@ } .SkeletonThumbnail { - @include skeleton-shimmer; @include skeleton-content; } diff --git a/src/styles/shared/_skeleton.scss b/src/styles/shared/_skeleton.scss index 7c375ed585d..5641787b3e7 100644 --- a/src/styles/shared/_skeleton.scss +++ b/src/styles/shared/_skeleton.scss @@ -1,6 +1,3 @@ -/// Used to create the shimmer effect of skeleton components -$skeleton-shimmer-duration: duration(slower) * 2; - // Used by both Thumbnail and SkeletonThumbnail $small-thumbnail-size: rem(40px); $medium-thumbnail-size: rem(60px); @@ -16,19 +13,6 @@ $thumbnail-sizes: ( @return map-get($thumbnail-sizes, $size); } -@mixin skeleton-shimmer { - // This is a global animation, defined in /src/components/AppProvider/AppProvider.scss - // See that file for why this is referenced as a custom property instead of - // by name - animation: var(--polaris-animation-skeleton-shimmer) - $skeleton-shimmer-duration linear infinite alternate; - will-change: opacity; - - @media (prefers-reduced-motion) { - animation: none; - } -} - @mixin skeleton-content { position: relative; From 0743aa39799fb7e9599e6668d7458b8e8fc5a179 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 1 Sep 2021 17:18:38 -0700 Subject: [PATCH 2/6] Remove keyframes, add PR number --- UNRELEASED-v7.md | 2 +- src/components/AppProvider/AppProvider.scss | 10 ---------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/UNRELEASED-v7.md b/UNRELEASED-v7.md index dd7d876ce30..30d3f202b68 100644 --- a/UNRELEASED-v7.md +++ b/UNRELEASED-v7.md @@ -19,7 +19,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Added support for multi-sectioned options in `Autocomplete` [#4221](https://github.com/Shopify/polaris-react/pull/4221) - Added `wrapOverflow` prop to `AutocompleteProps` props to force text-breakword ([#4416](https://github.com/Shopify/polaris-react/pull/4416)) -- Removed motion from `Skeleton` components ([#])() +- Removed motion from `Skeleton` components ([#4462])(https://github.com/Shopify/polaris-react/pull/4462) ### Bug fixes diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index 75f48fb26ef..86d6db22153 100644 --- a/src/components/AppProvider/AppProvider.scss +++ b/src/components/AppProvider/AppProvider.scss @@ -70,13 +70,3 @@ button::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; } - -@keyframes :global(polaris-SkeletonShimmerAnimation) { - 0% { - opacity: 0.45; - } - - 100% { - opacity: 0.9; - } -} From 53f519b0a983dd12586ef6c91f8001ffdc14f7ed Mon Sep 17 00:00:00 2001 From: Alex Page Date: Thu, 2 Sep 2021 07:30:06 -0700 Subject: [PATCH 3/6] Update UNRELEASED-v7.md --- UNRELEASED-v7.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/UNRELEASED-v7.md b/UNRELEASED-v7.md index 30d3f202b68..2b4db2e5fec 100644 --- a/UNRELEASED-v7.md +++ b/UNRELEASED-v7.md @@ -14,12 +14,13 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - The component styles have moved fromm `dist/styles.css` to `build/esm/styles.css`. Consumers who import styles shall need to update their import path. ([#4424](https://github.com/Shopify/polaris-react/pull/4424)) - The public Sass API has moved from `dist/styles/_public-api.scss` to `build/styles/_public-api.scss`. Consumers who use our Sass API shall need to update their import path. ([#4424](https://github.com/Shopify/polaris-react/pull/4424)) - Removed event parameter from optional `onClick` property for `subNavigationItem` on `Nav/Item` component ([#4394](https://github.com/Shopify/polaris-react/pull/4394)) +- Removed motion from `Skeleton` components and `skeleton-shimmer` mixin ([#4462])(https://github.com/Shopify/polaris-react/pull/4462) ### Enhancements - Added support for multi-sectioned options in `Autocomplete` [#4221](https://github.com/Shopify/polaris-react/pull/4221) - Added `wrapOverflow` prop to `AutocompleteProps` props to force text-breakword ([#4416](https://github.com/Shopify/polaris-react/pull/4416)) -- Removed motion from `Skeleton` components ([#4462])(https://github.com/Shopify/polaris-react/pull/4462) + ### Bug fixes From 6f077f0704039c323668241a866e90450d0a8cc6 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Mon, 22 Nov 2021 12:46:05 -0800 Subject: [PATCH 4/6] Update UNRELEASED.md --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index c7705256cd1..6c3167b0a13 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -6,6 +6,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Enhancements +- Removed motion from `Skeleton` components and `skeleton-shimmer` mixin ([#4462])(https://github.com/Shopify/polaris-react/pull/4462) - Allow for `readonly` items in ActionList ([#4623](https://github.com/Shopify/polaris-react/pull/4623)) - Updated `VisuallyHidden` styles to not use `top` or `clip` ([#4641](https://github.com/Shopify/polaris-react/pull/4641)) - Added `PlainAction` type to `ComplexAction`. ([#4489](https://github.com/Shopify/polaris-react/pull/4489)) From acf418afeb08c5b42a56707986943ac8fd1340bc Mon Sep 17 00:00:00 2001 From: Alex Page Date: Mon, 22 Nov 2021 12:47:32 -0800 Subject: [PATCH 5/6] Update UNRELEASED.md --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index d15a620c63e..dde1988045e 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -7,6 +7,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed filter sass function and color-icon() mixin ([#4676](https://github.com/Shopify/polaris-react/pull/4676)) - Renamed `--p-duration-1-0-0` and `--p-duration-1-5-0` to `--p-duration-100` and `--p-duration-150`. - Removed miscellaneous css custom properties ([#4686](https://github.com/Shopify/polaris-react/pull/4686)) +- Removed skeleton-shimmer mixin ([#4462])(https://github.com/Shopify/polaris-react/pull/4462) ### Enhancements From 9ccae5c465e2094857a052818e364a3a7ee4ab17 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Mon, 22 Nov 2021 12:47:56 -0800 Subject: [PATCH 6/6] Update UNRELEASED.md --- UNRELEASED.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index dde1988045e..0311080610c 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -7,11 +7,11 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed filter sass function and color-icon() mixin ([#4676](https://github.com/Shopify/polaris-react/pull/4676)) - Renamed `--p-duration-1-0-0` and `--p-duration-1-5-0` to `--p-duration-100` and `--p-duration-150`. - Removed miscellaneous css custom properties ([#4686](https://github.com/Shopify/polaris-react/pull/4686)) -- Removed skeleton-shimmer mixin ([#4462])(https://github.com/Shopify/polaris-react/pull/4462) +- Removed `skeleton-shimmer` mixin ([#4462])(https://github.com/Shopify/polaris-react/pull/4462) ### Enhancements -- Removed motion from `Skeleton` components and `skeleton-shimmer` mixin ([#4462])(https://github.com/Shopify/polaris-react/pull/4462) +- Removed motion from `Skeleton` components mixin ([#4462])(https://github.com/Shopify/polaris-react/pull/4462) - Allow for `readonly` items in ActionList ([#4623](https://github.com/Shopify/polaris-react/pull/4623)) - Updated `VisuallyHidden` styles to not use `top` or `clip` ([#4641](https://github.com/Shopify/polaris-react/pull/4641)) - Added `PlainAction` type to `ComplexAction`. ([#4489](https://github.com/Shopify/polaris-react/pull/4489))