fix(theme): animations no longer run when they shouldn't (#2328)

* fix(theme): animations no longer run when they shouldn't * chore: storybook config minor improvement * fix(website): correct invalid svg name * fix(skeleton-loader): minor animation improvement * chore: add a delay to customized skeleton loader story
twilio-labs · Apr 4, 2022 · 91d20b9 · 91d20b9
1 parent 396949a
commit 91d20b9
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 18 deletions.
diff --git a/.changeset/many-melons-clean.md b/.changeset/many-melons-clean.md
@@ -0,0 +1,7 @@
+---
+'@twilio-paste/customization': patch
+'@twilio-paste/theme': patch
+'@twilio-paste/core': patch
+---
+
+[Theme & Customization] Fix an issue where animations would run once regardless of if animations should be disabled.
diff --git a/.changeset/seven-llamas-serve.md b/.changeset/seven-llamas-serve.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/skeleton-loader': patch
+'@twilio-paste/core': patch
+---
+
+[Skeleton-Loader]: Small animation tweak so that the highlight fully moves through the skeleton loader correctly at the end state.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -8,6 +8,8 @@ import {Stack} from '@twilio-paste/stack';
 import {Grid, Column} from '@twilio-paste/grid';
 import {RenderPerformanceProfiler} from './RenderPerformanceProfiler';
 
+const disableAnimations = isChromatic();
+
 export const globalTypes = {
   theme: {
     name: 'Paste Theme',
@@ -80,7 +82,7 @@ export const decorators = [
         return (
           <RenderPerformanceProfiler id={context.id} kind={context.kind} view="default">
             <GlobalStyles />
-            <Theme.Provider theme={theme} disableAnimations={isChromatic()}>
+            <Theme.Provider theme={theme} disableAnimations={disableAnimations}>
               <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
                 <Story />
               </Box>
@@ -93,14 +95,14 @@ export const decorators = [
             <GlobalStyles />
             <Grid>
               <Column>
-                <Theme.Provider theme="default" disableAnimations={isChromatic()}>
+                <Theme.Provider theme="default" disableAnimations={disableAnimations}>
                   <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
                     <Story />
                   </Box>
                 </Theme.Provider>
               </Column>
               <Column>
-                <Theme.Provider theme="dark" disableAnimations={isChromatic()}>
+                <Theme.Provider theme="dark" disableAnimations={disableAnimations}>
                   <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
                     <Story />
                   </Box>
@@ -114,24 +116,24 @@ export const decorators = [
           <RenderPerformanceProfiler id={context.id} kind={context.kind} view="stacked">
             <GlobalStyles />
             <Stack orientation="vertical">
-              <Theme.Provider theme="default" disableAnimations={isChromatic()}>
+              <Theme.Provider theme="default" disableAnimations={disableAnimations}>
                 <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
                   <Story />
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="default" disableAnimations={isChromatic()}>
+              <Theme.Provider theme="default" disableAnimations={disableAnimations}>
                 <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space20">
                   <Box margin="space40" padding="space40" backgroundColor="colorBackground">
                     <Story />
                   </Box>
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="dark" disableAnimations={isChromatic()}>
+              <Theme.Provider theme="dark" disableAnimations={disableAnimations}>
                 <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
                   <Story />
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="dark" disableAnimations={isChromatic()}>
+              <Theme.Provider theme="dark" disableAnimations={disableAnimations}>
                 <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space20">
                   <Box margin="space40" padding="space40" backgroundColor="colorBackground">
                     <Story />

diff --git a/packages/paste-core/components/skeleton-loader/src/index.tsx b/packages/paste-core/components/skeleton-loader/src/index.tsx
@@ -10,13 +10,16 @@ const AnimatedSkeleton = animated(Box);
 const StyledAnimatedSkeleton = styled(AnimatedSkeleton)(() =>
   css({
     background: `linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)`,
+    transform: `translateX(-100%) skew(155deg)`,
   })
 );
 
 const animatedConfig = {
   loop: {delay: 700, reset: true},
   from: {translateX: '-100%', skew: '155deg'},
-  to: {translateX: '100%', skew: '155deg'},
+  // 105% because at 100% with this skew the highlight remains visible
+  // on the bottom right of the loader at the end state.
+  to: {translateX: '105%', skew: '155deg'},
   config: {
     mass: 0.1,
     tension: 80,

diff --git a/packages/paste-core/components/skeleton-loader/stories/index.stories.tsx b/packages/paste-core/components/skeleton-loader/stories/index.stories.tsx
@@ -327,7 +327,7 @@ export const TableLoading: React.FC = () => {
   );
 };
 
-export const CustomizedSkeletonLoader: React.FC = () => {
+export const CustomizedSkeletonLoader = (): React.ReactNode => {
   const activeTheme = useTheme();
   return (
     <CustomizationProvider
@@ -351,3 +351,8 @@ export const CustomizedSkeletonLoader: React.FC = () => {
     </CustomizationProvider>
   );
 };
+
+CustomizedSkeletonLoader.parameters = {
+  // Sets the delay for a specific story.
+  chromatic: {delay: 3000},
+};
diff --git a/packages/paste-customization/src/CustomizationProvider.tsx b/packages/paste-customization/src/CustomizationProvider.tsx
@@ -29,6 +29,13 @@ const CustomizationProvider: React.FC<CustomizationProviderProps> = ({
   disableAnimations = false,
   ...props
 }) => {
+  const prefersReducedMotion = useReducedMotion();
+  React.useMemo(() => {
+    AnimatedGlobals.assign({
+      skipAnimation: disableAnimations || prefersReducedMotion,
+    });
+  }, [disableAnimations, prefersReducedMotion]);
+
   const customTheme = React.useMemo(
     () =>
       createCustomTheme({
@@ -40,13 +47,6 @@ const CustomizationProvider: React.FC<CustomizationProviderProps> = ({
     [baseTheme, customBreakpoints, elements, theme]
   );
 
-  const prefersReducedMotion = useReducedMotion();
-  React.useLayoutEffect(() => {
-    AnimatedGlobals.assign({
-      skipAnimation: disableAnimations || prefersReducedMotion,
-    });
-  }, [disableAnimations, prefersReducedMotion]);
-
   return (
     <StyledThemeProvider theme={customTheme}>
       <StylingGlobals styles={pasteGlobalStyles({theme: customTheme})} />

diff --git a/packages/paste-theme/src/themeProvider.tsx b/packages/paste-theme/src/themeProvider.tsx
@@ -52,7 +52,7 @@ const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
   ...props
 }) => {
   const prefersReducedMotion = useReducedMotion();
-  React.useLayoutEffect(() => {
+  React.useMemo(() => {
     AnimatedGlobals.assign({
       skipAnimation: disableAnimations || prefersReducedMotion,
     });

diff --git a/packages/paste-website/src/components/icons/ThemableIcon.tsx b/packages/paste-website/src/components/icons/ThemableIcon.tsx
@@ -24,7 +24,7 @@ const ThemableIcon: React.FC<ThemableIconProps> = ({as, display, element = 'ICON
         {title ? <title id={titleId}>{title}</title> : null}
         <path
           fillRule="evenodd"
-          clip-Rule="evenodd"
+          clipRule="evenodd"
           d="M6.00355 0.947754C6.22679 0.94776 6.43242 1.06684 6.54301 1.26015L11.4792 9.88906C11.5898 10.0824 11.5885 10.3207 11.4758 10.5141C11.3631 10.7075 11.1561 10.8266 10.9328 10.8266H0.964032C0.740714 10.8266 0.535026 10.7075 0.424463 10.5141C0.3139 10.3207 0.315264 10.0824 0.428041 9.88903L5.46061 1.26012C5.57335 1.06682 5.78031 0.947748 6.00355 0.947754ZM2.05379 9.57666H9.85697L5.9931 2.82227L2.05379 9.57666ZM17.5895 10.0579C17.8321 9.81234 18.2277 9.81015 18.473 10.053L23.8187 15.3442C24.064 15.587 24.0662 15.9829 23.8236 16.2284L18.5295 21.5861C18.2869 21.8317 17.8913 21.8339 17.646 21.591L12.3003 16.2998C12.055 16.057 12.0528 15.6611 12.2954 15.4156L17.5895 10.0579ZM18.0386 11.3818L13.6231 15.8504L18.0804 20.2622L22.4959 15.7937L18.0386 11.3818ZM1.25024 19.8525C1.25024 17.7924 2.93987 16.1111 5.03807 16.1111C7.13627 16.1111 8.8259 17.7924 8.8259 19.8525C8.8259 21.9127 7.13627 23.594 5.03807 23.594C2.93987 23.594 1.25024 21.9127 1.25024 19.8525ZM5.03807 14.8611C2.262 14.8611 0.000244141 17.0896 0.000244141 19.8525C0.000244141 22.6154 2.262 24.844 5.03807 24.844C7.81415 24.844 10.0759 22.6154 10.0759 19.8525C10.0759 17.0896 7.81415 14.8611 5.03807 14.8611Z"
           fill="currentColor"
         />