fix(spinner): allow resizing of dots, bubbles, and circles #27424
Conversation
|
|
| /** | ||
| * This behavior does not vary across directions. | ||
| */ | ||
| configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { |
There was a problem hiding this comment.
Spinner has no per-mode styles, so we don't need both iOS and MD screenshots.
There was a problem hiding this comment.
Cool. Should I change the other spinner tests similarly?
There was a problem hiding this comment.
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
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.
| test('should not have visual regressions', async ({ page }) => { | ||
| await page.setIonViewport(); | ||
|
|
||
| await expect(page).toHaveScreenshot(screenshot(`spinner-resize-diff`)); |
There was a problem hiding this comment.
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?
| config | ||
| ); | ||
|
|
||
| await expect(page.locator('#content')).toHaveScreenshot(screenshot(`spinner-resize-diff`)); |
There was a problem hiding this comment.
If you choose to remove ion-content (see other comment), then you can just do page.
| await expect(page.locator('#content')).toHaveScreenshot(screenshot(`spinner-resize-diff`)); | |
| await expect(page).toHaveScreenshot(screenshot(`spinner-resize-diff`)); |
There was a problem hiding this comment.
thanks for the tips!
Issue number: Resolves #18115
What is the current behavior?
Resizing the
ion-spinnerby setting the width & height using CSS works for most spinner variants, but not fordots,bubbles, andcircles. The spacing between the circles on these spinner variants is not scaling with the spinner.What is the new behavior?
ion-spinnermay now be resized by setting the width & height using CSS for all variants.Does this introduce a breaking change?
Other information
Before
After