feat(spinner): add recipe and tokens#31014
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
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;
}
There was a problem hiding this comment.
Only removed the word diff from the test file name to line up with the naming conventions of the other components.
There was a problem hiding this comment.
Only removed the word diff from the test file name to line up with the naming conventions of the other components.
There was a problem hiding this comment.
Only removed the word diff from the test file name to line up with the naming conventions of the other components.
There was a problem hiding this comment.
This was renamed, not sure why it's not showing as such.
|
|
||
| - The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`. | ||
|
|
||
| <h4 id="version-9x-radio-group">Radio Group</h4> |
There was a problem hiding this comment.
This was moved to the correct location. It was originally added right in the middle of the grid changes.
| } | ||
|
|
||
| ::slotted(ion-spinner) { | ||
| color: currentColor; |
There was a problem hiding this comment.
This is needed because we are no longer using --color.
brandyscarney
left a comment
brandyscarney
left a comment
There was a problem hiding this comment.
Looks really good! Just a few comments.
| /** | ||
| * @prop --border-radius: Border radius of the chip | ||
| * @prop --color: Color of the chip | ||
| * @prop --focus-ring-color: Color of the focus ring | ||
| * @prop --focus-ring-style: Style of the focus ring | ||
| * @prop --focus-ring-width: Width of the focus ring | ||
| */ |
There was a problem hiding this comment.
How do we plan to document the new CSS variables? Are we going to add them here or somewhere else?
There was a problem hiding this comment.
Is this auto-generated? If not we should really find a way to do so lol.
There was a problem hiding this comment.
No, it was painstakingly annoying 😭 I'll make a ticket for us to look into a way to generate these.
3 participants
Issue number: internal
What is the current behavior?
Component styles for
ion-spinnerare fragmented across multiple files (native andionic). Themdandiostheme uses the native styles. Developers were restricted to those themes and how those themes structured the logic and styles.What is the new behavior?
spinner.scssfile that consumes CSS variables, ensuring a single source of truth for component logic.spinner.interfaces.tsmdandios.color: currentColorfor slotted spinners within buttons. This ensures the spinner's visual weight matches the button's text/icon color dynamically across all interaction states (hover, active, disabled) without additional token mapping.Does this introduce a breaking change?
This PR introduces a breaking change to how
IonSpinneris 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/Removals: Ensure selectors align with the new slotted element logic and variable names (e.g.,
--ion-spinner-color). CSS variables like--colorhave been removed in favor of the new variables.--colorshould no longer be used. Setting the value,IonSpinner.color, within the tokens file should be used to change the color. If the color needs to be set per component, then--ion-spinner-colorshould be used.Theme classes: Remove any instances that target the theme classes:
ion-spinner.mdSpinner 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: