Remove the use of VSCodeTag
#3983
Conversation
There was a problem hiding this comment.
Pull Request Overview
This pull request replaces the legacy VSCodeTag component with a new Tag component to support the transition to @vscode-elements/elements. Key changes include:
- Removing the import and usage of VSCodeTag from multiple files.
- Introducing a new Tag component with hard-coded styling values.
- Updating all instances of tag usage to maintain consistent UI appearance.
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx | Removed VSCodeTag and replaced with Tag for display of modeled percentage. |
| extensions/ql-vscode/src/view/model-editor/MethodClassifications.tsx | Updated tag usage in classification display from VSCodeTag to Tag. |
| extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx | Replaced VSCodeTag with Tag for unsaved changes display. |
| extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx | Updated styling and usage of tag component for unsaved status. |
| extensions/ql-vscode/src/view/common/Tag.tsx | Introduced the new Tag component with dedicated styling. |
| extensions/ql-vscode/src/view/common/CodePaths/ThreadPath.tsx | Replaced VSCodeTag with Tag for code path labels. |
Comments suppressed due to low confidence (1)
extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx:42
- [nitpick] Consider renaming 'StyledTag' to a more descriptive name such as 'StyledUnsavedTag' since it is used exclusively to indicate unsaved status. This would improve the clarity of the component's purpose.
const StyledTag = styled(Tag)<{ $visible: boolean }>`
Tip: Copilot only keeps its highest confidence comments to reduce noise and keep you focused. Learn more
| background-color: #4d4d4d; | ||
| border: 1px solid transparent; | ||
| border-radius: 2px; | ||
| color: #ffffff; |
There was a problem hiding this comment.
Some of the css attributes are hard-coded (e.g. background-color and color) because using the corresponding CSS variables makes the styles different for different themes.
Could you explain why we wouldn't want the styles to change?
There was a problem hiding this comment.
I thought it makes more sense the keep the appearance the same as the old component. I am happy to use the CSS variables if you think that's the better approach. Here are some screenshots of the differences where left is the old component and the right one is the new component.
Github dark theme
Dark high contrast theme
There was a problem hiding this comment.
I've done a little experimentation and it seems to me that using --vscode-badge-background and --vscode-badge-foreground gets an experience that's closest to what it was before. So unless I'm misunderstanding things I'd suggest we go with those variables instead of hardcoding.
Interestingly I seem to be getting a different experience from you 🤔. Everything looks the same for the dark theme, but here's some screenshots I've taken using some other themes (including the wilder ones):
Appearance on main
Appearance on tuan-nguen/remove-vscode-tags
Appearance on tuan-nguen/remove-vscode-tags using CSS variables
This is part of the work to remove the use of
@vscode/webview-ui-toolkit. The new library@vscode-elements/elementsdoes not have a direct replacement forVSCodeTag, this implements a newTagcomponent for which the styles have been mostly copied from here. Some of the css attributes are hard-coded (e.g.background-colorandcolor) because using the corresponding CSS variables makes the styles different for different themes. I have attached comparison screenshots of the old and new component.Dark theme
Light theme
