diff --git a/UNRELEASED.md b/UNRELEASED.md index a4ed29522fe..0311080610c 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -7,9 +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) ### Enhancements +- 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)) diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index fec5833736c..b6d71df6c56 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, @@ -87,13 +77,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; - } -} 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;