bug: circular, lines-sharp, and lines-sharp-small not getting --spinner-color applied in ion-loading

[dexster]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Specifying the --spinner-color has no effect on a 'circular' spinner. All other spinner shapes work as expected.

Expected Behavior

Spinner color should respect defined custom color

Steps to Reproduce

In an Angular 13 project add a spinner.

I am running Angular 13.3 but if the issue is due to the naming I mentioned in additional Info below then I expect this issue is not framework specific

const loader = await this.loadingController.create({
          spinner: 'circular',
          cssClass: 'my-spinner'
        });

// CSS
.my-spinner {
  --spinner-color: red;
}

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.2

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v16.14.0
npm : 8.3.1
OS : macOS Monterey

Additional Information

Should this line not be named 'circular' instead of 'circle'?

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

Line 122 in a6a772a

:host(.spinner-circular) circle {

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[dexster]

https://stackblitz.com/edit/angular-ivy-etyain?file=src%2Fapp%2Fapp.component.html

[sean-perkins]

@dexster the SVG contents for that specific variation uses fill: currentColor;.

If you update your example to:

ion-spinner {
  color: red;
}

The appropriate styles will apply. Can you confirm the same on your end?

[dexster]

@sean-perkins I am using --color currently which is working. Would the resolution then be to update the ion-loading docs for this specific use case or will you be looking at getting this to use --spinner-color?

[liamdebeasi]

There are a couple of issues here:

1. Your --spinner-color variable targets ion-spinner.
   --spinner-color is a CSS Variable on ion-loading, not ion-spinner. Your selector should be ion-loading instead.

2. The circular style never gets color set when used inside of ion-loading.
   See https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/loading/loading.scss#L70-L77.

The circular style was added in e33cf85, but the author never updated ion-loading to take advantage of this.

It also looks like the lines-sharp and lines-sharp-small spinners are affected by this. We should probably just change the selector to ion-spinner instead of selecting every single variant of the spinner.

---

Ionic Team note: Whoever works on this should migrate the spinner and loading screenshot tests first.