Fix styled-components prop warnings #5181
Conversation
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes styled-components prop warnings by implementing proper prop filtering to prevent non-DOM props from being forwarded to DOM elements. It also includes code cleanup and updates the Tailwind configuration to use ES module syntax.
- Implements
shouldForwardPropfiltering for styled-components to prevent prop warnings - Cleans up unused imports in various components
- Updates Tailwind configuration from CommonJS to ES module format
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| webview-ui/tailwind.config.mjs | Converts Tailwind config from CommonJS to ES module syntax |
| webview-ui/src/index.css | Updates CSS import to reference new .mjs config file |
| webview-ui/src/components/mcp/configuration/McpConfigurationView.tsx | Adds shouldForwardProp filtering and removes unused import |
| webview-ui/src/components/chat/chat-view/hooks/useButtonState.ts | Reorders imports for consistency |
| webview-ui/src/components/chat/chat-view/components/layout/ChatLayout.tsx | Adds shouldForwardProp filtering for isHidden prop |
| webview-ui/src/components/chat/auto-approve-menu/AutoApproveMenuItem.tsx | Adds shouldForwardProp filtering for isFavorited prop |
| webview-ui/src/components/chat/ChatTextArea.tsx | Adds shouldForwardProp filtering and removes unused imports |
Comments suppressed due to low confidence (1)
webview-ui/src/components/chat/ChatTextArea.tsx:112
- The SwitchContainer styled component accepts a 'disabled' prop but doesn't filter it with shouldForwardProp. This will cause the same prop warning that this PR is trying to fix for other components.
const SwitchContainer = styled.div<{ disabled: boolean }>`
Coverage ReportExtension CoverageBase branch: 46% PR branch: 47% ✅ Coverage increased or remained the same Webview CoverageBase branch: 17% PR branch: 17% Consider adding tests to cover your changes. Overall AssessmentPlease consider adding tests to maintain or improve coverage. Last updated: 2025-07-28T18:14:20.267309 |
|
Rubber Stamped |
Related Issue
Issue: #XXXX
Description
Test Procedure
No feature changes - everything should still work the same but you should find less errors complaining about invalid use of DOM element values:
Type of Change
Pre-flight Checklist
npm test) and code is formatted and linted (npm run format && npm run lint)npm run changeset(required for user-facing changes)Screenshots
Additional Notes
Important
Fix styled-components prop warnings and update Tailwind config to
.mjsformat.styled-componentsshouldForwardPropwarnings by filtering non-DOM props inChatTextArea.tsx,AutoApproveMenuItem.tsx, andChatLayout.tsx.tailwind.config.jstotailwind.config.mjsand adjust import inindex.css.ChatTextArea.tsxanduseButtonState.ts.McpConfigurationView.tsx.This description was created by
for b296492. You can customize this summary. It will automatically update as commits are pushed.