chore: prefix styled-component transient props - #261
Open
MihirSachdeva wants to merge 2 commits into
Open
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR prefixes styled-component props with $ to follow the transient props pattern and prevent DOM leakage. This is a best practice in styled-components to ensure that custom props are not passed to the underlying DOM elements.
- Converts all styled-component custom props to transient props by adding the
$prefix - Updates type definitions, component implementations, and styles accordingly
- Ensures tests continue to work with the new transient prop naming
Reviewed Changes
Copilot reviewed 45 out of 45 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/elements/Typography/types.ts | Updated Typography interface to use transient props |
| ui/elements/Typography/Typography.tsx | Updated component to pass transient props |
| ui/elements/Typography/Typography.styles.ts | Updated styles to use transient props |
| ui/elements/Tabs/types.ts | Updated Tab interfaces to use transient props |
| ui/elements/Tabs/Tabs.tsx | Updated component to pass transient props |
| ui/elements/Tabs/Tabs.styles.ts | Updated styles to use transient props |
| ui/elements/Table/types.ts | Updated Table interfaces to use transient props |
| ui/elements/Table/Table.tsx | Updated component to pass transient props |
| ui/elements/Table/Table.styles.ts | Updated styles to use transient props |
| ui/elements/Modal/types.ts | Updated Modal interfaces to use transient props |
| ui/elements/Modal/MultiStepModal/index.tsx | Updated component to pass transient props |
| ui/elements/Modal/Modal.tsx | Updated component to pass transient props |
| ui/elements/Modal/Modal.styles.ts | Updated styles to use transient props |
| ui/elements/Icon/Icon.tsx | Updated component to pass transient props |
| ui/elements/Icon/Icon.styles.ts | Updated styles and type interface to use transient props |
| ui/elements/Form/index.styles.tsx | Updated Label styles to use transient props |
| ui/elements/Form/TextArea/types.ts | Updated TextArea interface to use transient props |
| ui/elements/Form/TextArea/index.styles.tsx | Updated styles to use transient props |
| ui/elements/Form/TextArea/TextArea.tsx | Updated component to pass transient props |
| ui/elements/Form/Label/index.tsx | Updated component to pass transient props |
| ui/elements/Chip/types.ts | Updated Chip interface to use transient props |
| ui/elements/Chip/Chip.tsx | Updated component to pass transient props |
| ui/elements/Chip/Chip.styles.ts | Updated styles to use transient props |
| ui/elements/Calendar/MonthlyCalendarEvent/types.ts | Updated Calendar Event interfaces to use transient props |
| ui/elements/Calendar/MonthlyCalendarEvent/MonthlyCalendarEvent.tsx | Updated component to pass transient props |
| ui/elements/Calendar/MonthlyCalendarEvent/MonthlyCalendar.styles.ts | Updated styles to use transient props |
| ui/elements/Calendar/MonthlyCalendar/types.ts | Updated Calendar interfaces to use transient props |
| ui/elements/Calendar/MonthlyCalendar/OverflowEventsList.tsx | Updated component to pass transient props |
| ui/elements/Calendar/MonthlyCalendar/MonthlyCalendarGridItem.tsx | Updated component to pass transient props |
| ui/elements/Calendar/MonthlyCalendar/MonthlyCalendar.tsx | Updated component to pass transient props |
| ui/elements/Calendar/MonthlyCalendar/MonthlyCalendar.styles.ts | Updated styles to use transient props |
| ui/elements/Calendar/MonthlyCalendar/Loading.tsx | Updated component to pass transient props |
| ui/elements/Calendar/MonthlyCalendar/DateCircle.tsx | Updated component to pass transient props |
| ui/elements/Button/types.ts | Updated Button interfaces to use transient props |
| ui/elements/Button/IconButton.tsx | Updated component to pass transient props |
| ui/elements/Button/Button.tsx | Updated component to pass transient props |
| ui/elements/Button/Button.styles.ts | Updated styles to use transient props |
| ui/elements/AlertBanner/types.ts | Updated AlertBanner interface to use transient props |
| ui/elements/AlertBanner/AlertBanner.tsx | Updated component to pass transient props |
| ui/elements/AlertBanner/AlertBanner.styles.ts | Updated styles to use transient props |
| ui/elements/Alert/types.ts | Updated Alert interfaces to use transient props |
| ui/elements/Alert/Alert.tsx | Updated component to pass transient props |
| ui/elements/Alert/Alert.styles.ts | Updated styles to use transient props |
| stories/helper-components/TokenBlock/index.tsx | Updated story component to use transient props |
| stories/helper-components/TokenBlock/index.styles.ts | Updated styles to use transient props |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| $size={size} | ||
| onClick={handleClick} | ||
| color={color} | ||
| $color={color} |
There was a problem hiding this comment.
The 'name' prop is being removed from the StyledIcon component but it's still referenced in the styles. This will cause the icon name to not be passed to the styled component, breaking icon rendering.
| $height, | ||
| $isActive, | ||
| ...rest | ||
| } = props as any; |
There was a problem hiding this comment.
Using 'as any' type casting defeats the purpose of TypeScript type safety. Consider properly typing the destructured props or using a more specific type assertion.
Suggested change
| } = props as any; | |
| } = props; |
| name, | ||
| color = 'secondary', | ||
| isRequired, | ||
| isDisabled, |
There was a problem hiding this comment.
The 'isDisabled' prop is being destructured but it's not defined in the function parameters. This will cause a runtime error if accessed.
Suggested change
| isDisabled, | |
| isDisabled = false, |
## Description - Provide a clear and concise description of your changes. - Try to use short paragraphs and bullet points to explain the changes. - The more understandable the description is, the more easy it makes for reviewers to merge this PR. - Include all the changes made explaining why it is needed. ## Type of Change - [ ] 🐛 Bug fix (non-breaking change which fixes an issue) - [ ] ✨ New feature (non-breaking change which adds functionality) - [ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] 📚 Documentation update - [ ] 🎨 Style update (formatting, renaming) - [ ] ♻️ Code refactor (no functional changes) - [ ] ⚡️ Performance improvements - [ ] ✅ Test updates - [ ] 🔄 Other (please describe): ## Related Issues Link to any related issues using #issue-number: Fixes # ## Checklist - [ ] PR name uses present imperative tense and specifically describes the changes - Incorrect: ❌ Dependency version update - Correct: ✅ Update version of framer-motion - [ ] I have performed a self-review of my code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new TypeScript warnings - [ ] My changes does not hide eslint warnings un-necessarily - [ ] My pull request maintains linear history with the master branch to ensure that new changes are compatible with latest code. ## Additional Notes Add any additional notes for reviewers ## Screenshots (if applicable) Add screenshots to help explain your changes
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
Testing
npm testhttps://chatgpt.com/codex/tasks/task_b_689be7cf00448320b82810c6ca45a899