(AIR-61698): bug fix for when spinner doesn't spin for mobile view (#…

…1469) * bug fix for when spinner doesn't spin for mobile view * bugfix(AIR-61698): add rush change * bugfix(AIR-61698): fix for unnecessary import * bugfix(AIR-61698): add story for different width of gradient spinner
priceline · Mar 7, 2024 · 3e78da6 · 3e78da6
1 parent f3e671c
commit 3e78da6
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 28 deletions.
diff --git a/common/changes/pcln-design-system/bug-air-61698_2024-03-05-18-44.json b/common/changes/pcln-design-system/bug-air-61698_2024-03-05-18-44.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "bug fix for when spinner doesn't spin on mobile devices",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Animate/Animate.stories.tsx b/packages/core/src/Animate/Animate.stories.tsx
@@ -173,3 +173,13 @@ export const ComposedAnimations = () => {
     </Box>
   )
 }
+
+export const SpinAnimation = () => {
+  return (
+    <Flex width='fit-content'>
+      <Animate variant='spin'>
+        <Button m={2}>Spin!</Button>
+      </Animate>
+    </Flex>
+  )
+}
diff --git a/packages/core/src/Animate/Animate.tsx b/packages/core/src/Animate/Animate.tsx
@@ -37,6 +37,7 @@ export type MotionVariant =
   | 'slideOutBottom'
   | 'slideOutRight'
   | 'slideInRight'
+  | 'spin'
 
 /**
  * @public
@@ -114,6 +115,10 @@ export const MotionVariants: Record<MotionVariant, HTMLMotionProps<'div'>> = {
     initial: { opacity: 1, y: 0 },
     animate: { opacity: 0, y: '100%' },
   },
+  spin: {
+    animate: { rotate: 360, height: 'auto' },
+    transition: { duration: 1, repeat: Infinity, ease: 'linear' },
+  },
 }
 
 /**

diff --git a/packages/core/src/Spinner/Spinner.stories.tsx b/packages/core/src/Spinner/Spinner.stories.tsx
@@ -66,3 +66,9 @@ WithGradientCustomWidth.args = {
   useGradient: true,
   strokeWidth: '10px',
 }
+
+export const WithGradientDifferentSize = Template.bind({})
+WithGradientDifferentSize.args = {
+  size: 'medium',
+  useGradient: true,
+}
diff --git a/packages/core/src/Spinner/Spinner.tsx b/packages/core/src/Spinner/Spinner.tsx
@@ -5,6 +5,7 @@ import { Absolute } from '../Absolute/Absolute'
 import { Flex } from '../Flex/Flex'
 import { PaletteFamilyName } from '../theme/theme'
 import { applySizes, getPaletteColor } from '../utils/utils'
+import { Animate } from './../Animate/Animate'
 
 const sizes = {
   small: css`
@@ -75,40 +76,42 @@ type GradientRingProps = {
 function GradientRing({ strokeWidth = '6px', ...props }: GradientRingProps) {
   const strokeColor = getPaletteColor(props.color, 'base')(props)
   return (
-    <GradientRingWrapper>
-      <svg
-        width='100%'
-        height='100%'
-        viewBox='0 0 200 200'
-        color={strokeColor}
-        fill='none'
-        overflow='visible'
-      >
-        <defs>
-          <linearGradient id='spinner-secondHalf'>
-            <stop offset='0%' stop-opacity='0' stop-color='currentColor' />
-            <stop offset='100%' stop-opacity='0.5' stop-color='currentColor' />
-          </linearGradient>
-          <linearGradient id='spinner-firstHalf'>
-            <stop offset='0%' stop-opacity='1' stop-color='currentColor' />
-            <stop offset='100%' stop-opacity='0.5' stop-color='currentColor' />
-          </linearGradient>
-        </defs>
-
-        <g stroke-width={strokeWidth}>
-          <path stroke='url(#spinner-secondHalf)' d='M 4 100 A 96 96 0 0 1 196 100' />
-          <path stroke='url(#spinner-firstHalf)' d='M 196 100 A 96 96 0 0 1 4 100' />
-          <path stroke='currentColor' stroke-linecap='round' d='M 4 100 A 96 96 0 0 1 4 98' />
-        </g>
-        <animateTransform
+    <GradientRingWrapper mt='-3px'>
+      <Animate variant='spin'>
+        <svg
+          width='100%'
+          height='100%'
+          viewBox='0 0 200 200'
+          color={strokeColor}
+          fill='none'
+          overflow='visible'
+        >
+          <defs>
+            <linearGradient id='spinner-secondHalf'>
+              <stop offset='0%' stop-opacity='0' stop-color='currentColor' />
+              <stop offset='100%' stop-opacity='0.5' stop-color='currentColor' />
+            </linearGradient>
+            <linearGradient id='spinner-firstHalf'>
+              <stop offset='0%' stop-opacity='1' stop-color='currentColor' />
+              <stop offset='100%' stop-opacity='0.5' stop-color='currentColor' />
+            </linearGradient>
+          </defs>
+
+          <g stroke-width={strokeWidth}>
+            <path stroke='url(#spinner-secondHalf)' d='M 4 100 A 96 96 0 0 1 196 100' />
+            <path stroke='url(#spinner-firstHalf)' d='M 196 100 A 96 96 0 0 1 4 100' />
+            <path stroke='currentColor' stroke-linecap='round' d='M 4 100 A 96 96 0 0 1 4 98' />
+          </g>
+          {/* <animateTransform
           from='0 0 0'
           to='360 0 0'
           attributeName='transform'
           type='rotate'
           repeatCount='indefinite'
           dur='1000ms'
-        />
-      </svg>
+        /> */}
+        </svg>
+      </Animate>
     </GradientRingWrapper>
   )
 }