feat(progress-spinner): added contrast, contrast-fade colors support (#DS-4583) #1285
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request adds Contrast color support to the progress-spinner component, allowing developers to use a contrast color variant for better visual differentiation in different UI contexts.
Changes:
- Added
setDefaultColor()call in the progress spinner component constructor to properly handle default color behavior - Introduced CSS tokens for contrast color variants with support for both light and dark themes
- Updated the indeterminate example to showcase the new contrast color feature
- Added e2e tests for determinate mode with contrast color
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/components/progress-spinner/progress-spinner.component.ts | Added setDefaultColor() call to properly set the default theme color |
| packages/components/progress-spinner/_progress-spinner-theme.scss | Implemented contrast color styling using CSS custom properties and fixed import style |
| packages/components/progress-spinner/progress-spinner-tokens.scss | Added CSS tokens for contrast color in light and dark themes |
| packages/components/progress-spinner/e2e.ts | Added e2e test cases for determinate mode with contrast color |
| packages/docs-examples/components/progress-spinner/progress-spinner-indeterminate/progress-spinner-indeterminate-example.ts | Updated example to showcase contrast color, removed unused imports, and added host styling |
| packages/components-dev/progress-spinner/module.ts | Added example components to the dev module for testing |
| packages/components-dev/progress-spinner/template.html | Added theme toggle and docs examples to the template |
Comments suppressed due to low confidence (1)
packages/components/progress-spinner/e2e.ts:24
- The e2e test file includes test cases for determinate mode with the contrast color, but doesn't include any test cases for indeterminate mode with the contrast color. For consistency and complete test coverage, consider adding test cases for indeterminate mode with contrast color similar to the determinate ones.
<kbq-progress-spinner mode="indeterminate" [value]="44" />
<kbq-progress-spinner mode="indeterminate" [value]="44">
<div kbq-progress-spinner-text>Text</div>
<div kbq-progress-spinner-caption>Caption</div>
</kbq-progress-spinner>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Visit the preview URL for this PR (updated for commit d39914c): https://koobiq-next--prs-1285-ifylur4e.web.app (expires Wed, 21 Jan 2026 09:08:34 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
packages/components/progress-spinner/progress-spinner-tokens.scss
Outdated
Show resolved
Hide resolved
artembelik
changed the title
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
No description provided.