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

[mapsandapps]

Issue number: Resolves #18115

---

What is the current behavior?

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?

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

Does this introduce a breaking change?

• Yes
• No

Other information

Before

After

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[sean-perkins]

This looks fantastic, great work!

I updated the PR description to include Resolve # so that the ticket is automatically closed when the PR is merged.

[liamdebeasi]

Spinner has no per-mode styles, so we don't need both iOS and MD screenshots.

[mapsandapps]

Cool. Should I change the other spinner tests similarly?

[liamdebeasi]

Yeah you can, though spinner does have per-mode behavior, so we should probably have a spec test that checks that the default spinner is set correctly on each mode:

ionic-framework/core/src/components/spinner/spinner.tsx

Lines 42 to 48 in eba4c7f

	private getName(): SpinnerTypes {
	const spinnerName = this.name || config.get('spinner');
	const mode = getIonMode(this);
	if (spinnerName) {
	return spinnerName;
	}
	return mode === 'ios' ? 'lines' : 'circular';

We might be able to check that the correct spinner-* class is set.

I'd also be fine if we made a ticket and updated the non-resize tests as a separate task.

[liamdebeasi]

There's quite a lot of wasted space in the screenshot which will slow things down on CI. Could we instead have each spinner next to each other so we can take a smaller screenshot?

[liamdebeasi]

Some questions/nitpicks, but overall this looks great. Nice work! Good to merge when my comments below have been addressed.

[liamdebeasi]

If you choose to remove ion-content (see other comment), then you can just do page.

Suggested change

	await expect(page.locator('#content')).toHaveScreenshot(screenshot(`spinner-resize-diff`));
	await expect(page).toHaveScreenshot(screenshot(`spinner-resize-diff`));

[mapsandapps]

thanks for the tips!