feat(spinner): add recipe and tokens by thetaPC · Pull Request #31014 · ionic-team/ionic-framework

thetaPC · 2026-03-17T22:03:04Z

Issue number: internal

What is the current behavior?

Component styles for ion-spinner are fragmented across multiple files (native and ionic). The md and ios theme uses the native styles. Developers were restricted to those themes and how those themes structured the logic and styles.

What is the new behavior?

Unified Style Architecture: Combined theme-specific styling into a single spinner.scss file that consumes CSS variables, ensuring a single source of truth for component logic.
Property First model: based the recipe on the properties
Updated TypeScript Interface: Changed the filename to spinner.interfaces.ts
Defined Theme Defaults: Added defaults that are being used per theme
Standardized Sizing: Introduced sizes to md and ios.
Updated Test Pages: Updated a couple of test pages to include more cases
Updated Tests: Updated tests to include more cases

Does this introduce a breaking change?

Yes
No

This PR introduces a breaking change to how IonSpinner is styled. Existing manual CSS overrides targeting internal spinner structures or old token names will no longer work due to the shift to the new token hierarchy and a unified base SCSS file.

Migration Path:

Token Updates: Update any custom theme configurations to match the new nested structure.
CSS Overrides: Ensure selectors align with the new slotted element logic and variable names (e.g., --ion-spinner-color).

--color should no longer be used. Setting the value, IonSpinner.color, within the tokens file should be used to change the color.

Theme classes: Remove any instances that target the theme classes: ion-spinner.md
Spinner name class: The class have been updated to include the term name.

.spinner-lines, .spinner-circular, etc should be updated to .spinner-name-lines, .spinner-name-circular, etc.

Other information

Previews:

vercel · 2026-03-17T22:03:11Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Mar 19, 2026 10:45pm

thetaPC · 2026-03-17T22:32:17Z

core/src/components/spinner/spinner.scss

The ionic theme for spinner overwrites the medium since it's one of those components that differs to the set value of medium. I decided to not implement it since it's specific to the project. A workaround would be to set it:

ion-spinner { --ion-color-medium-bold: #626262; }

thetaPC · 2026-03-17T22:47:51Z

...ts/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-ltr-Mobile-Chrome-linux.png

Only removed the word diff from the test file name to line up with the naming conventions of the other components.

thetaPC · 2026-03-17T22:47:57Z

...pinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Chrome-linux.png

Only removed the word diff from the test file name to line up with the naming conventions of the other components.

thetaPC · 2026-03-17T22:48:16Z

...s/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-md-ltr-Mobile-Chrome-linux.png

Only removed the word diff from the test file name to line up with the naming conventions of the other components.

thetaPC · 2026-03-18T22:52:30Z

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

This was renamed, not sure why it's not showing as such.

brandyscarney · 2026-03-19T19:32:09Z

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

Why did you remove the examples of different spinners with color? I believe those existed to show the color properly applied to all spinner types.

I didn't see how colors and names needed to be tied together for a test. I would expect that it would work for all names regardless. But I've added them back: 5f0020c

brandyscarney · 2026-03-19T19:33:00Z

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

Same question:

Why did you remove the examples of different spinners with color? I believe those existed to show the color properly applied to all spinner types.

#31014 (comment)

brandyscarney · 2026-03-19T19:42:01Z

core/src/components/spinner/spinner.interfaces.ts

+  fn: (dur: number, index: number, total: number) => SpinnerData;
+}
+
+interface SpinnerData {


Suggested change

interface SpinnerData {

export interface SpinnerData {

SpinnerData isn't being used anywhere outside of this file so we don't need to export it.

core/src/themes/themes.interfaces.ts

brandyscarney · 2026-03-19T19:47:00Z

core/src/components/spinner/spinner.tsx

   * Set to `"xlarge"` for the largest size.
   *
-   * Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+   * Defaults to `"medium"`.


Isn't this only the default for md and ios themes?

Yes, I chose medium because that one has the values that are currently being used by the community. I also changed the default for ionic to be xsmall through their config.

brandyscarney · 2026-03-19T20:21:37Z

core/src/components/spinner/spinner.interfaces.ts

+  [spinnerName: string]: SpinnerConfig;
+}
+
+export interface SpinnerConfig {


Should we rename this? It's kind of confusing when we have IonSpinnerConfig also.

Thoughts on this?: ee53528

brandyscarney · 2026-03-19T20:24:11Z

core/src/themes/ionic/default.tokens.ts

+
+      circular: {
+        stroke: {
+          width: '5.6',


Should this be a token or calculated somehow?

Nope, it's exactly the same value set for native.

brandyscarney · 2026-03-19T20:24:28Z

core/src/themes/ionic/default.tokens.ts

    },
+
+    IonSpinner: {
+      color: '#626262',


Shouldn't this use a token or are you waiting on the text / gray colors to be added?

iOS has:

color: 'var(--ion-text-color, #000)',

No, this is due to ionic currently using their own tokens. Since we are no longer using them, I just grabbed the raw value that represent that token. They can always create their own theme and use their tokens.

brandyscarney · 2026-03-19T20:27:08Z

core/src/themes/ios/default.tokens.ts

+
+      lines: {
+        stroke: {
+          width: '7px',


Do we need to add variables for this, or should we use border-width ones?

border-width doesn't have a 7px value. Even if it did, I still would expect to use scaling since the stroke width targets a svg not a border.

I don't think we should add a variable to account for 7px because it would break the current implementation we have for tokens like scaling. We are incrementing the keys by 50 so odd values aren't supported.

brandyscarney · 2026-03-19T20:27:40Z

core/src/themes/md/default.tokens.ts

+
+      lines: {
+        stroke: {
+          width: '7px',


Same question as ios

#31014 (comment)

Co-authored-by: Brandy Smith <[email protected]>

…FW-6860

feat(spinner): add recipe and tokens

0a3f41d

github-actions bot added the package: core @ionic/core package label Mar 17, 2026

vercel bot deployed to Preview March 17, 2026 22:04 View deployment

chore(spinner): run build

5eee3a8

github-actions bot added the package: angular @ionic/angular package label Mar 17, 2026

vercel bot deployed to Preview March 17, 2026 22:19 View deployment

test(color): update test page and snapshots

75a325a

vercel bot deployed to Preview March 17, 2026 22:29 View deployment

thetaPC commented Mar 17, 2026

View reviewed changes

chore(spinner): delete old styles

53d06e1

vercel bot deployed to Preview March 17, 2026 22:34 View deployment

test(spinner): update resize

78cfbba

vercel bot deployed to Preview March 17, 2026 22:43 View deployment

test(spinner): remove diff term

edb0414

thetaPC commented Mar 17, 2026

View reviewed changes

vercel bot deployed to Preview March 17, 2026 22:48 View deployment

test(spinner): update spacing

2ffac3e

vercel bot deployed to Preview March 17, 2026 22:57 View deployment

thetaPC added 2 commits March 17, 2026 16:13

feat(spinner): add recipe and config types

3d89f21

feat(spinner): change class names

363cddf

vercel bot deployed to Preview March 17, 2026 23:18 View deployment

test(spinner): update class

7b13706

vercel bot deployed to Preview March 17, 2026 23:21 View deployment

thetaPC marked this pull request as ready for review March 18, 2026 20:46

thetaPC requested a review from a team as a code owner March 18, 2026 20:46

thetaPC requested a review from brandyscarney March 18, 2026 20:46

thetaPC commented Mar 18, 2026

View reviewed changes

core/src/components/spinner/spinner-interface.ts Outdated

Copy link

Contributor Author

thetaPC Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was renamed, not sure why it's not showing as such.

refactor(spinner): remove plural type

b2a301a

vercel bot deployed to Preview March 18, 2026 23:05 View deployment

brandyscarney reviewed Mar 19, 2026

View reviewed changes

test(spinner): update color snapshots

5f0020c

vercel bot deployed to Preview March 19, 2026 22:18 View deployment

refactor(theme): alphabetize imports

1179d40

Co-authored-by: Brandy Smith <[email protected]>

vercel bot deployed to Preview March 19, 2026 22:20 View deployment

thetaPC added 2 commits March 19, 2026 15:29

docs(spinner, chip): update get value functions comments

4f5ee31

Merge branch 'FW-6860' of github.com:ionic-team/ionic-framework into …

2cd0043

…FW-6860

vercel bot deployed to Preview March 19, 2026 22:32 View deployment

feat(spinner): change type names

4c1c6d2

vercel bot deployed to Preview March 19, 2026 22:35 View deployment

refactor(spinner): change existing config type name

ee53528

vercel bot deployed to Preview March 19, 2026 22:45 View deployment

thetaPC requested a review from brandyscarney March 19, 2026 23:06

Conversation

thetaPC commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thetaPC commented Mar 17, 2026 •

edited

Loading

vercel bot commented Mar 17, 2026 •

edited

Loading

thetaPC Mar 19, 2026 •

edited

Loading