[Studio UI] Consolidate icon naming to filled/outline convention (#3848) - #4083
Open
idaiv wants to merge 2 commits into
Open
[Studio UI] Consolidate icon naming to filled/outline convention (#3848)#4083idaiv wants to merge 2 commits into
idaiv wants to merge 2 commits into
Conversation
Standardize icon usages to the canonical naming pattern:
- {name} for filled variant
- {name}-outline for outline variant
Renames in code (11 files):
- warning-circle → alert-outline (4 usages)
- info-circle → info-outline (8 usages)
- x-circle → close-outline (1 usage)
The old icon names remain registered in the icon library for
backward compatibility with external bundles (copilot-bundle,
direct-edit, data-importer, data-quality-management use the
old names).
Consistent naming per semantic:
- Warning: alert (filled) / alert-outline (outline)
- Info: info (filled) / info-outline (outline)
- Success: checkmark (filled) / check-circle (outline)
- Error: close-filled (filled) / close-outline (outline)
Relates to #3848
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The migrated info and close outline assets hard-code black and therefore ignore inherited theme colors.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Consolidates production icon references around the filled/outline naming convention while retaining legacy registrations.
Changes:
- Migrates warning and information icon references.
- Renames the failed-job icon to
close-outline. - Preserves backward compatibility through existing legacy registrations.
Review: The production call sites are covered, but the new info/close SVGs bypass theme colors by hard-coding black. Automated regression coverage is absent, and one Storybook x-circle reference remains.
File summaries
| File | Description |
|---|---|
notification-settings-view.tsx |
Updates warning icon. |
job-view.tsx |
Updates warning and failure icons. |
use-element-actions-menu.tsx |
Updates information icon. |
missing-context.tsx |
Updates information icon. |
video/footer.tsx |
Updates details icon. |
use-link-data-type.ts |
Updates link-details icon. |
context-menu/index.tsx |
Updates asset information icon. |
select.tsx |
Updates empty-state warning icon. |
use-upload-conflict-modal.tsx |
Updates conflict warning icon. |
useMessage/index.tsx |
Updates message information icons. |
virtual-item.tsx |
Updates field-help icon. |
Review details
- Files reviewed: 11/11 changed files
- Comments generated: 2
- Review effort level: Balanced
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| <Icon | ||
| options={ { width: '16px', height: '16px' } } | ||
| value={ 'info-circle' } | ||
| value={ 'info-outline' } |
| gap={ 'small' } | ||
| > | ||
| <Icon value='x-circle' /><span>{ t('jobs.job.failed', { title: props.title }) }</span> | ||
| <Icon value='close-outline' /><span>{ t('jobs.job.failed', { title: props.title }) }</span> |
|
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
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.
Summary
Standardizes icon naming to a consistent
{name}(filled) +{name}-outline(outline) pattern.Renames in code (11 files):
warning-circle→alert-outline(4 usages)info-circle→info-outline(8 usages)x-circle→close-outline(1 usage)Old names kept as aliases in the icon library for backward compatibility — external bundles using the old names (
warning-circle,info-circle,x-circle) continue to work without changes.Final naming convention:
alertalert-outlineinfoinfo-outlinecheckmarkcheck-circleclose-filledclose-outlineRelates to #3848
Test plan
alert-outline,check-circle) — verify icons still work🤖 Generated with Claude Code