fix(application-system): Fix checkbox half width and third width layout #17305
Conversation
WalkthroughThe pull request introduces modifications to the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 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
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #17305 +/- ##
==========================================
- Coverage 35.69% 35.68% -0.01%
==========================================
Files 6928 6921 -7
Lines 148718 148521 -197
Branches 42495 42405 -90
==========================================
- Hits 53087 53006 -81
+ Misses 95631 95515 -116
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 39 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Datadog ReportAll test runs ✅ 5 Total Test Services: 0 Failed, 5 Passed Test Services
🔻 Code Coverage Decreases vs Default Branch (2) |
![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 (1)
libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterItem.tsx (1)
49-60: Consider moving getSpan to a shared utilityThe
getSpanfunction is duplicated in bothFieldsRepeaterItemandTableRepeaterItem. Consider extracting it to a shared utility to maintain DRY principles and ensure consistent behavior.+ // New file: libs/application/ui-fields/src/lib/utils/layout.ts + export const getSpan = (component: string, width: string) => { + if (component !== 'radio' && component !== 'checkbox') { + if (width === 'half') { + return '1/2' + } + if (width === 'third') { + return '1/3' + } + return '1/1' + } + return '1/1' + }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
libs/application/templates/reference-template/src/forms/exampleForm/tablesAndRepeatersSection/fieldsRepeaterSubsection.ts(1 hunks)libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterItem.tsx(3 hunks)libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterItem.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterItem.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/templates/reference-template/src/forms/exampleForm/tablesAndRepeatersSection/fieldsRepeaterSubsection.ts (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterItem.tsx (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
🔇 Additional comments (3)
libs/application/templates/reference-template/src/forms/exampleForm/tablesAndRepeatersSection/fieldsRepeaterSubsection.ts (1)
26-26: Verify layout impact of full-width repeater
The change from 'half' to 'full' width will make the fields repeater span the entire container width. While this aligns with the PR objective, please ensure this doesn't negatively impact the layout of nested fields, especially those with 'half' and 'third' widths.
✅ Verification successful
Let me gather more context about the field builder implementation to understand the width handling.
Let me check the FieldsRepeaterFormField implementation to understand how the width property is handled.
Let me check the styling implementation and Box component usage in the FieldsRepeaterFormField component.
Based on the code analysis, I can now provide a final response:
Width change from 'half' to 'full' is safe and consistent with the component's design
The change from 'half' to 'full' width for the fields repeater is safe because:
- The FieldsRepeaterFormField component properly handles width through Box components
- The width property is used for layout purposes only and doesn't affect functionality
- Child fields maintain their own width properties independently (as seen in the stories where email field has
width: 'half') - The core implementation in
libs/application/core/src/lib/fieldBuilders.tsalso uses 'full' width as default
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for other fieldsRepeater configurations to ensure consistency
rg -l "buildFieldsRepeaterField" | xargs rg "width: ['\"](half|full)['\"]"
Length of output: 1168
Script:
#!/bin/bash
# Check the implementation of buildFieldsRepeaterField to understand width handling
ast-grep --pattern 'buildFieldsRepeaterField = function($$$) {
$$$
}'
# Also check for any width-related components or interfaces
rg -A 5 'interface.*Field.*Props'
Length of output: 63127
Script:
#!/bin/bash
# Check the FieldsRepeaterFormField implementation
rg -A 10 "FieldsRepeaterFormField = " libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterFormField.tsx
# Also check for any width-related styling
rg "width: .*props\.field\.width" libs/application/ui-fields/src/lib/FieldsRepeaterFormField/
Length of output: 411
Script:
#!/bin/bash
# Check the entire FieldsRepeaterFormField component file for Box/width usage
cat libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterFormField.tsx
# Also check for any width-related styling in the stories
cat libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterFormField.stories.mdx
Length of output: 9092
libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterItem.tsx (1)
218-218: LGTM: Improved readability of split calculation
The ternary operator makes the split calculation more concise and readable.
libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterItem.tsx (1)
49-60: Duplicate implementation detected
This implementation is identical to FieldsRepeaterItem.tsx. As mentioned in the previous review comment, these shared functions should be moved to a common utility file to avoid duplication and maintain consistency.
Also applies to: 218-218
norda-gunni
changed the title
...
Attach a link to issue if relevant
What
Specify what you're trying to achieve
Why
Specify why you need to achieve this
Screenshots / Gifs
Attach Screenshots / Gifs to help reviewers understand the scope of the pull request
Checklist:
Summary by CodeRabbit
New Features
Refactor