Figma: Refactor CSS files in src/components/CollapsibleDropdown #3330 #3473
Conversation
|
""" WalkthroughThis pull request focuses on refactoring the CSS for the CollapsibleDropdown component by moving its specific styles from a component-level CSS module to the global Changes
Assessment against linked issues
Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx (2)
4-4: Consider using absolute imports for better maintainability.While the style import change aligns with the refactoring goal, using relative paths (
../../) can be fragile during future refactoring. Consider using absolute imports instead.-import styles from '../../style/app.module.css'; +import styles from 'style/app.module.css';
76-78: Consider extracting complex class composition logic.The template literal mixing Bootstrap and module classes could be simplified for better maintainability.
-className={`${styles.collapsibleDropdownCollapseBtn} ${ - isActive === true ? 'text-white' : 'text-secondary' -}`} +className={getButtonClasses(styles.collapsibleDropdownCollapseBtn, isActive)}Add this helper function:
const getButtonClasses = (baseClass: string, isActive: boolean): string => { return `${baseClass} ${isActive ? 'text-white' : 'text-secondary'}`; };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/CollapsibleDropdown/CollapsibleDropdown.module.css(0 hunks)src/components/CollapsibleDropdown/CollapsibleDropdown.tsx(3 hunks)src/style/app.module.css(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/CollapsibleDropdown/CollapsibleDropdown.module.css
🧰 Additional context used
🪛 GitHub Actions: PR Workflow
src/style/app.module.css
[warning] Code style issues found. Run Prettier with --write to fix formatting issues.
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyse Code With CodeQL (javascript)
🔇 Additional comments (5)
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx (3)
51-51: Well-structured class naming!The new class name
collapsibleDropdownIconWrapperfollows a good namespacing pattern, which helps prevent style conflicts in the global CSS file.
84-84: Consistent class naming maintained!The class name
collapsibleDropdownIconWrapperSmmaintains consistency with the component's naming pattern.
4-4: Verify complete migration of styles.Let's ensure all required styles were properly migrated to app.module.css.
✅ Verification successful
CSS migration successfully verified ✅
All required styles are present in app.module.css and no references to the old module remain in the codebase.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if all required styles exist in app.module.css rg -l "collapsibleDropdownIconWrapper|collapsibleDropdownCollapseBtn|collapsibleDropdownIconWrapperSm" "src/style/app.module.css" # Check for any remaining references to the old module fd -g "*.tsx" -g "*.ts" -x rg -l "CollapsibleDropdown\.module\.css"Length of output: 316
Script:
#!/bin/bash # Show the actual style definitions in app.module.css echo "=== Styles in app.module.css ===" rg "collapsibleDropdownIconWrapper|collapsibleDropdownCollapseBtn|collapsibleDropdownIconWrapperSm" "src/style/app.module.css" # Fixed command to check for old module references echo -e "\n=== Files still referencing old module ===" fd -e tsx -e ts -x rg -l "CollapsibleDropdown\.module\.css" {} # Check if old module file exists echo -e "\n=== Check for old module file ===" fd -g "CollapsibleDropdown.module.css"Length of output: 595
src/style/app.module.css (2)
9132-9145: Well-structured CSS classes with clear naming.The CSS classes follow good practices:
- Descriptive names that clearly indicate their purpose
- Component-specific prefixes to avoid naming conflicts
- Simple, focused implementations for each class
🧰 Tools
🪛 GitHub Actions: PR Workflow
[warning] Code style issues found. Run Prettier with --write to fix formatting issues.
9129-9145: Fix Prettier formatting issues.The implementation looks good but there are some formatting issues flagged by the pipeline. Please run Prettier with the --write flag to fix the formatting.
Run the following script to verify and fix the formatting:
🧰 Tools
🪛 GitHub Actions: PR Workflow
[warning] Code style issues found. Run Prettier with --write to fix formatting issues.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #3473 +/- ##
=====================================================
+ Coverage 1.90% 88.65% +86.75%
=====================================================
Files 316 338 +22
Lines 8249 8620 +371
Branches 1880 1918 +38
=====================================================
+ Hits 157 7642 +7485
+ Misses 8083 649 -7434
- Partials 9 329 +320 ☔ View full report in Codecov by Sentry. |
|
@Cioppolo14 @palisadoes please review. |
palisadoes
merged commit 5477f18
into
PalisadoesFoundation:develop-postgres
What kind of change does this PR introduce?
Refactoring
Issue Number:
Fixes #3330
Snapshots/Videos:
Summary
Aim is to consolidate style sheet in Collapsible Dropdown into app.module style sheet
Does this PR introduce a breaking change?
No
Checklist
CodeRabbit AI Review
Test Coverage
Have you read the contributing guide?
Yes
Summary by CodeRabbit