chore: display error message to match grid label#4047
chore: display error message to match grid label#4047JamalAlabdullah wants to merge 1 commit intomainfrom
Conversation
JamalAlabdullah
added
kind/other
📝 WalkthroughWalkthroughRefactoring of the Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
JamalAlabdullah
added
kind/feature-request
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/layout/ComponentStructureWrapper.tsx (1)
34-53: Consider making validation Flex sizing consistent with content Flex breakpoints.The validation
Flex(lines 46-51) only specifiesxsandmdbreakpoints, while the contentFlex(line 39) spreadsgrid?.innerGridwhich may includesm,lg, orxlvalues. IfinnerGriddefines narrower widths at these breakpoints, the validation messages could end up wider than the content they relate to, potentially causing visual misalignment.If the intent is for validation to always span full width regardless of
innerGrid, consider being explicit about all breakpoints:<Flex item - size={{ xs: 12, md: 12 }} + size={{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }} >Otherwise, if validation width should match content width, consider:
<Flex item - size={{ xs: 12, md: 12 }} + size={{ xs: 12, ...grid?.innerGrid }} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/layout/ComponentStructureWrapper.tsx` around lines 34 - 53, componentWithValidations renders two Flex blocks where the content Flex uses size={{ xs: 12, ...grid?.innerGrid }} but the validation Flex hardcodes size={{ xs: 12, md: 12 }}, causing breakpoint mismatch; update the validation Flex sizing to match the content Flex by either spreading grid?.innerGrid (size={{ xs: 12, ...grid?.innerGrid }}) or by explicitly providing the same breakpoints you expect, so AllComponentValidations aligns with the Flex containing children when showValidationMessages is true (refer to componentWithValidations, Flex, AllComponentValidations, grid?.innerGrid, showValidationMessages, indexedId, baseComponentId).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/layout/ComponentStructureWrapper.tsx`:
- Around line 34-53: componentWithValidations renders two Flex blocks where the
content Flex uses size={{ xs: 12, ...grid?.innerGrid }} but the validation Flex
hardcodes size={{ xs: 12, md: 12 }}, causing breakpoint mismatch; update the
validation Flex sizing to match the content Flex by either spreading
grid?.innerGrid (size={{ xs: 12, ...grid?.innerGrid }}) or by explicitly
providing the same breakpoints you expect, so AllComponentValidations aligns
with the Flex containing children when showValidationMessages is true (refer to
componentWithValidations, Flex, AllComponentValidations, grid?.innerGrid,
showValidationMessages, indexedId, baseComponentId).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a6993d1f-db03-494f-9126-c972544c2a20
📒 Files selected for processing (1)
src/layout/ComponentStructureWrapper.tsx
|
lassopicasso
left a comment
lassopicasso
left a comment
There was a problem hiding this comment.
One comment about the width👍
I am unsure, but @Magnusrm mentioned that this change can perhaps be a breaking change for existing apps' layouts.
Maybe we should discuss this with the team on slack and see if someone has any more thoughts around this before we merget it.
| {showValidationMessages && ( | ||
| <Flex | ||
| item | ||
| size={{ xs: 12, md: 12 }} |
There was a problem hiding this comment.
| size={{ xs: 12, md: 12 }} | |
| size={{ xs: 12, ...grid?.label?.innerGrid }} |
I may be wrong, but shouldn't the validation message have the same width as label? Edit: you could test if your solution works with setting inner-grid on label, and if it doesnt change the width of error message, you can test my suggestion.
There was a problem hiding this comment.
I have tested in repo ra0479-02 page 5 and it looks no effect happens and everything looks good , i tested in other pages also.
In the layout json files we have some json that has labelGrid and other do not have , so in line 34
const componentWithValidations = !grid?.labelGrid ? (. added logic to cover both status ,
and if you check the component Label.tsx line 57 it is set to 12 ; size={grid ?? { xs: 12 }} this match line 48 in this component ComponentStructureWrapper.tsx .
so the label Flex item uses size={{ xs: 12 }} and size={{ xs: 12, md: 12 }} uses the same, so i think your suggestion is allready included in the ternary logic.
2 participants
Description
Changed the way we display the validation error message to match grid label not input field.
Related Issue(s)
BEFORE
AFTER
Verification/QA
kind/*andbackport*label to this PR for proper release notes groupingSummary by CodeRabbit