From d909f4f73d11e32b2442a2a6f9bdebc5baa4ac79 Mon Sep 17 00:00:00 2001
From: Michael Warren <michaelwarren1106@gmail.com>
Date: Wed, 13 Dec 2023 11:40:51 -0500
Subject: [PATCH] fix(spinner): fix spinner animation, prevent spinner resize
 in flex containers (#1787)

---
 src/components/spinner/spinner.styles.ts | 12 ++++++++++--
 src/components/spinner/spinner.test.ts   |  7 +++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
index fd69d41a..a317489e 100644
--- a/src/components/spinner/spinner.styles.ts
+++ b/src/components/spinner/spinner.styles.ts
@@ -1,6 +1,13 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles.js';
 
+// Note on flex:none on the :host
+// Resizing a spinner element using anything but font-size will break the animation
+// mostly because the animation uses em units. Therefore, if a spinner is used in a flex container,
+// without flex:none applied, the spinner can grow/shrink and break the animation
+// flex:none hopes to prevent this by always having the spinner sized according to its actual dimensions
+
+
 export default css`
   ${componentStyles}
 
@@ -13,6 +20,7 @@ export default css`
     display: inline-flex;
     width: 1em;
     height: 1em;
+    flex: none;
   }
 
   .spinner {
@@ -46,7 +54,7 @@ export default css`
   @keyframes spin {
     0% {
       transform: rotate(0deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 0.05em, 3em;
     }
 
     50% {
@@ -56,7 +64,7 @@ export default css`
 
     100% {
       transform: rotate(1080deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 0.05em, 3em;
     }
   }
 `;
diff --git a/src/components/spinner/spinner.test.ts b/src/components/spinner/spinner.test.ts
index 6d96ef19..bdfd9da5 100644
--- a/src/components/spinner/spinner.test.ts
+++ b/src/components/spinner/spinner.test.ts
@@ -27,5 +27,12 @@ describe('<sl-spinner>', () => {
       //
       expect(getComputedStyle(indicator).transform).to.equal('matrix(1, 0, 0, 1, 0, 0)');
     });
+
+    it('should have flex:none to prevent flex re-sizing', async () => {
+      const spinner = await fixture<SlSpinner>(html` <sl-spinner></sl-spinner> `);
+
+      // 0 0 auto is a comiled value for `none`
+      expect(getComputedStyle(spinner).flex).to.equal('0 0 auto');
+    });
   });
 });