fix(spinner): fix spinner animation, prevent spinner resize in flex containers (#1787)

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;
     }
   }
 `;

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');
+    });
   });
 });