fix (icon list): don't override custom icon colors

[kaeizen]

fixes #3512

Summary by CodeRabbit

• Style
  • Improved icon styling to ensure custom icons display correctly without unintended default color application, while maintaining proper color styling for standard icons.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The change modifies SVG styling rules in the Icon List block to prevent global fill overrides. Instead of applying fill color to all SVG shapes, the rule now only applies colors to non-custom-icon SVGs, allowing multi-colored icons like Noto Color Emoji to preserve their original colors.

Changes

Cohort / File(s)	Change Summary
Icon List Item Styling src/block/icon-list-item/style.scss	Replaces global SVG fill styling with a guarded rule that only applies fill/color to shapes within non-ugb-custom-icon SVGs, preventing override of multi-colored SVG internal colors

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file modification with straightforward CSS rule change
• Guarded styling rule is a common pattern
• No logic density or complex interactions to evaluate

Poem

🐰 A rainbow of colors, once trapped in black tar,
Now shine through with pride, like a vibrant star!
Our CSS guard stands, with a thoughtful embrace,
Letting custom SVGs keep their rightful place. 🎨✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly and concisely describes the main fix: preventing the override of custom icon colors in the icon list component.
Linked Issues check	✅ Passed	The code changes directly address the bug in #3512 by modifying the CSS to avoid overriding fill colors on custom SVG icons, allowing multi-colored SVGs to retain their original colors.
Out of Scope Changes check	✅ Passed	The changes are focused solely on the icon-list-item stylesheet and directly target the CSS override issue described in #3512 without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/3512-icon-list-custom-icon-colors

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7d01e08 and a69cecd.

📒 Files selected for processing (1)

• src/block/icon-list-item/style.scss (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)

• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: build

🔇 Additional comments (1)

src/block/icon-list-item/style.scss (1)

47-56: CSS fix correctly prevents color override on custom icons using established .ugb-custom-icon class pattern.

The :not(.ugb-custom-icon) guard in lines 47-56 is the right approach and is consistent with how the codebase handles custom icons elsewhere (buttons, notifications, count-up components). The addCustomIconClass() function automatically adds this class to uploaded custom SVGs, and the CSS selector ensures that multi-colored icons preserve their colors while regular icons still receive the marker color styling.

No issues found. The fix is verified to follow established patterns in the codebase documented in src/components/icon-search-popover/readme.md.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr3648-stackable-3648-merge.zip	a69cecd

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3648-stackable-3648-merge.zip"}}]}