fix(spinner): allow resizing of dots, bubbles, and circles (#27424)

Issue number: Resolves #18115

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Resizing the `ion-spinner` by setting the width & height using CSS works
for most spinner variants, but not for `dots`, `bubbles`, and `circles`.
The spacing between the circles on these spinner variants is not scaling
with the spinner.


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `ion-spinner` may now be resized by setting the width & height using
CSS for all variants.



## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

### Before

<img width="371" alt="Screenshot 2023-05-08 at 5 17 59 PM"
src="https://user-images.githubusercontent.com/14926794/236937361-b8139bb3-192d-4fbf-839c-f9262b7c112a.png">

### After

<img width="373" alt="Screenshot 2023-05-08 at 5 18 45 PM"
src="https://user-images.githubusercontent.com/14926794/236937508-9a8fa74e-60c8-47d9-9d56-c287da03a33f.png">

---------

Co-authored-by: ionitron <[email protected]>

core/src/components/spinner/spinner-configs.ts

@@ -10,8 +10,8 @@ const spinners = {
       return {
         r: 5,
         style: {
-          top: `${9 * Math.sin(angle)}px`,
-          left: `${9 * Math.cos(angle)}px`,
+          top: `${32 * Math.sin(angle)}%`,
+          left: `${32 * Math.cos(angle)}%`,
           'animation-delay': animationDelay,
         },
       };
@@ -28,8 +28,8 @@ const spinners = {
       return {
         r: 5,
         style: {
-          top: `${9 * Math.sin(angle)}px`,
-          left: `${9 * Math.cos(angle)}px`,
+          top: `${32 * Math.sin(angle)}%`,
+          left: `${32 * Math.cos(angle)}%`,
           'animation-delay': animationDelay,
         },
       };
@@ -72,7 +72,7 @@ const spinners = {
       return {
         r: 6,
         style: {
-          left: `${9 - 9 * index}px`,
+          left: `${32 - 32 * index}%`,
           'animation-delay': animationDelay,
         },
       };

core/src/components/spinner/test/color/index.html

@@ -24,7 +24,6 @@
 
       <ion-content id="content">
         <ion-list>
-          <ion-item><ion-spinner slot="start"></ion-spinner>Platform Default Spinner</ion-item>
           <ion-item
             ><ion-spinner color="primary" slot="start" name="lines"></ion-spinner><code>lines</code> (primary)</ion-item
           >

core/src/components/spinner/test/color/spinner.e2e.ts

@@ -2,9 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * This behavior does not vary across directions.
+ * This behavior does not vary across directions or modes.
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('spinner: color'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/spinner/test/color', config);

core/src/components/spinner/test/resize/spinner.e2e.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * The resize behavior does not vary across directions or modes.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('spinner: resize'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setViewportSize({ width: 320, height: 340 });
+    });
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-spinner {
+            width: 100px;
+            height: 100px;
+          }
+        </style>
+        <ion-spinner name="lines"></ion-spinner>
+        <ion-spinner name="lines-small"></ion-spinner>
+        <ion-spinner name="lines-sharp"></ion-spinner>
+        <ion-spinner name="lines-sharp-small"></ion-spinner>
+        <ion-spinner name="circular"></ion-spinner>
+        <ion-spinner name="dots"></ion-spinner>
+        <ion-spinner name="bubbles"></ion-spinner>
+        <ion-spinner name="circles"></ion-spinner>
+        <ion-spinner name="crescent"></ion-spinner>
+      `,
+        config
+      );
+
+      await expect(page).toHaveScreenshot(screenshot(`spinner-resize-diff`));
+    });
+  });
+});