feat: solid icons css customization AB#981756#1132
Open
TarsysFonseca wants to merge 13 commits intomainfrom
Open
feat: solid icons css customization AB#981756#1132TarsysFonseca wants to merge 13 commits intomainfrom
TarsysFonseca wants to merge 13 commits intomainfrom
Conversation
…s for enhanced customization
TarsysFonseca
temporarily deployed
to
storybook-preview
GitHub Actions
Inactive
|
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request introduces multi-color icon customization support for the bds-icon component through CSS custom properties. The feature allows developers to override individual icon layer colors using CSS variables like --icon-layer-0, --icon-layer-1, etc. The implementation includes comprehensive documentation, interactive Storybook examples, and new unit tests.
Changes:
- Added multi-color icon detection and CSS variable-based customization in the icon utility functions
- Refactored tests to use real DOM elements instead of mocked DOM methods, improving test reliability
- Added comprehensive documentation explaining the new CSS custom properties feature with usage examples and backward compatibility notes
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 22 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/icon/utils.ts | Added isMultiColorIcon and applyColorVariables functions to detect and apply CSS variables to multi-color icons |
| src/components/icon/test/utils.spec.ts | Removed mock DOM setup and added new tests for basic SVG handling scenarios |
| src/components/icon/test/icon.spec.ts | Added comprehensive unit tests for multi-color icon customization and single vs multi-color detection |
| src/components/icon/readme.md | Added "CSS Custom Properties" section with usage examples, backward compatibility notes, and technical details |
| src/components/icon/icon.stories.jsx | Added interactive SolidIconCustomization story demonstrating the new feature with color pickers and various examples |
TarsysFonseca
temporarily deployed
to
storybook-preview
GitHub Actions
Inactive
TarsysFonseca
temporarily deployed
to
storybook-preview
GitHub Actions
Inactive
…ogic and removing unused layer color state
TarsysFonseca
temporarily deployed
to
storybook-preview
GitHub Actions
Inactive
…olor SVG handling
TarsysFonseca
temporarily deployed
to
storybook-preview
GitHub Actions
Inactive
| @@ -362,9 +362,9 @@ describe('bds-icon', () => { | |||
| // Ensure component is visible and browser environment is mocked | |||
| (page.rootInstance as any).isVisible = true; | |||
There was a problem hiding this comment.
Unexpected any. Specify a different type.
Suggested change
| (page.rootInstance as any).isVisible = true; | |
| (page.rootInstance as { isVisible: boolean }).isVisible = true; |
|
|
||
| // Reset svgContent to ensure it starts as undefined | ||
| (page.rootInstance as any).svgContent = undefined; |
There was a problem hiding this comment.
Unexpected any. Specify a different type.
Suggested change
| (page.rootInstance as any).svgContent = undefined; | |
| const iconInstance = page.rootInstance as { svgContent?: string | undefined }; | |
| iconInstance.svgContent = undefined; |
…lid-icons-css-customization
godrien
approved these changes
Feb 23, 2026
TarsysFonseca
temporarily deployed
to
storybook-preview
GitHub Actions
Inactive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces support for multi-color (layered) icon customization using CSS variables in the
bds-iconcomponent, along with comprehensive documentation, Storybook examples, and tests to ensure backward compatibility. The most significant changes are grouped below:Multi-Color Icon Customization Feature:
SolidIconCustomization, to demonstrate how to customize multi-color solid icons using CSS custom properties (e.g.,--icon-layer-0) and to provide interactive examples and documentation for users. This story also highlights backward compatibility with existing usage.bds-iconto support multi-color icons where each layer's color can be overridden via CSS variables, while preserving original colors as fallbacks. This includes tests for rendering, CSS variable overrides, and fallback behavior.Testing Improvements:
bds-iconto cover scenarios for both single-color and multi-color icons, including detection logic and CSS variable application.as unknown as { method: () => void }for improved type safety in TypeScript. [1] [2]Code and Test Cleanup:
utils.spec.tstest file, simplifying test setup.formatSvgutility tests for clarity and maintainability, using real SVG strings and focusing on relevant scenarios.Documentation:
readme.mdfile for thebds-iconcomponent.Corrections