fix: override spinner styles (#19245)

* fix: override spinner styles * fix * snapshots
PostHog · Dec 11, 2023 · 53bb9cf · 53bb9cf
1 parent 8514201
commit 53bb9cf
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 21 deletions.
diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
@@ -1341,10 +1341,26 @@ exports[`replay/transform transform inputs input - progress - $value 1`] = `
                       "childNodes": [
                         {
                           "attributes": {
-                            "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;border: 4px solid transparent;border-radius: 50%;border-top: 4px solid #fff;animation: spin 2s linear infinite;",
+                            "style": "background-color: #f3f4ef;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;border: 4px solid transparent;border-radius: 50%;border-top: 4px solid #fff;animation: spin 2s linear infinite;",
                           },
-                          "childNodes": [],
-                          "id": 160,
+                          "childNodes": [
+                            {
+                              "attributes": {
+                                "type": "text/css",
+                              },
+                              "childNodes": [
+                                {
+                                  "id": 161,
+                                  "textContent": "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }",
+                                  "type": 3,
+                                },
+                              ],
+                              "id": 160,
+                              "tagName": "style",
+                              "type": 2,
+                            },
+                          ],
+                          "id": 162,
                           "tagName": "div",
                           "type": 2,
                         },
@@ -1427,7 +1443,7 @@ exports[`replay/transform transform inputs input - progress - $value 2`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 161,
+                  "id": 163,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1500,7 +1516,7 @@ exports[`replay/transform transform inputs input - progress - 0.75 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 162,
+                  "id": 164,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1573,7 +1589,7 @@ exports[`replay/transform transform inputs input - progress - 0.75 2`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 163,
+                  "id": 165,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2578,7 +2594,7 @@ exports[`replay/transform transform inputs placeholder - $inputType - $value 1`]
                       },
                       "childNodes": [
                         {
-                          "id": 165,
+                          "id": 167,
                           "textContent": "hello",
                           "type": 3,
                         },
@@ -2588,7 +2604,7 @@ exports[`replay/transform transform inputs placeholder - $inputType - $value 1`]
                       "type": 2,
                     },
                   ],
-                  "id": 164,
+                  "id": 166,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2848,7 +2864,7 @@ exports[`replay/transform transform inputs webview - $inputType - $value 1`] = `
                 {
                   "attributes": {},
                   "childNodes": [],
-                  "id": 166,
+                  "id": 168,
                   "tagName": "div",
                   "type": 2,
                 },

diff --git a/ee/frontend/mobile-replay/transformers.ts b/ee/frontend/mobile-replay/transformers.ts
@@ -314,6 +314,33 @@ function makeProgressElement(
             value = null
         }
 
+        const styleOverride = {
+            color: wireframe.style?.color || '#35373e',
+            backgroundColor: wireframe.style?.backgroundColor || '#f3f4ef',
+        }
+
+        // if not _isPositiveInteger(value) then we render a spinner,
+        // so we need to add a style element with the spin keyframe
+        const stylingChildren: serializedNodeWithId[] = _isPositiveInteger(value)
+            ? []
+            : [
+                  {
+                      type: NodeType.Element,
+                      tagName: 'style',
+                      attributes: {
+                          type: 'text/css',
+                      },
+                      id: idSequence.next().value,
+                      childNodes: [
+                          {
+                              type: NodeType.Text,
+                              textContent: `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`,
+                              id: idSequence.next().value,
+                          },
+                      ],
+                  },
+              ]
+
         return {
             type: NodeType.Element,
             tagName: 'div',
@@ -328,11 +355,11 @@ function makeProgressElement(
                     attributes: {
                         // with no provided value we render a spinner
                         style: _isPositiveInteger(value)
-                            ? makeDeterminateProgressStyles(wireframe)
-                            : makeIndeterminateProgressStyles(wireframe),
+                            ? makeDeterminateProgressStyles(wireframe, styleOverride)
+                            : makeIndeterminateProgressStyles(wireframe, styleOverride),
                     },
                     id: idSequence.next().value,
-                    childNodes: [],
+                    childNodes: stylingChildren,
                 },
                 ...children,
             ],

diff --git a/ee/frontend/mobile-replay/wireframeStyle.ts b/ee/frontend/mobile-replay/wireframeStyle.ts
@@ -115,29 +115,38 @@ function makeFontStyles(wireframe: wireframe, styleOverride?: MobileStyles): str
     return styles
 }
 
-export function makeIndeterminateProgressStyles(wireframe: wireframeProgress): string {
+export function makeIndeterminateProgressStyles(wireframe: wireframeProgress, styleOverride?: MobileStyles): string {
     let styles = ''
-    if (wireframe.style?.backgroundColor) {
-        styles += `background-color: ${wireframe.style.backgroundColor};`
+    const combinedStyles = {
+        ...wireframe.style,
+        ...styleOverride,
+    }
+    if (combinedStyles.backgroundColor) {
+        styles += `background-color: ${combinedStyles.backgroundColor};`
     }
     styles += makePositionStyles(wireframe)
-    styles += `border: 4px solid ${wireframe.style?.borderColor || 'transparent'};`
+    styles += `border: 4px solid ${combinedStyles.borderColor || 'transparent'};`
     styles += `border-radius: 50%;border-top: 4px solid #fff;`
     styles += `animation: spin 2s linear infinite;`
 
     return styles
 }
 
-export function makeDeterminateProgressStyles(wireframe: wireframeProgress): string {
+export function makeDeterminateProgressStyles(wireframe: wireframeProgress, styleOverride?: MobileStyles): string {
     let styles = ''
-    if (wireframe.style?.backgroundColor) {
-        styles += `background-color: ${wireframe.style.backgroundColor};`
+    const combinedStyles = {
+        ...wireframe.style,
+        ...styleOverride,
+    }
+
+    if (combinedStyles.backgroundColor) {
+        styles += `background-color: ${combinedStyles.backgroundColor};`
     }
     styles += makePositionStyles(wireframe)
     styles += 'border-radius: 50%;'
     const radialGradient = `radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0)`
-    const conicGradient = `conic-gradient(${wireframe.style?.color || 'black'} calc(${wireframe.value} * 1%), ${
-        wireframe.style?.backgroundColor
+    const conicGradient = `conic-gradient(${combinedStyles.color || 'black'} calc(${wireframe.value} * 1%), ${
+        combinedStyles.backgroundColor
     } 0)`
     styles += `background: ${radialGradient}, ${conicGradient};`