-
Notifications
You must be signed in to change notification settings - Fork 27
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added warnings to the PageContentWide
component
#3127
Conversation
🦋 Changeset detectedLatest commit: c7557ec The changes in this PR will be included in the next version bump. This PR includes changesets to release 35 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
...on-components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx
Outdated
Show resolved
Hide resolved
Deploy preview for merchant-center-application-kit ready! ✅ Preview Built with commit c7557ec. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the quick fixup. Just curious, does useWarning
simply show a console warning or does it throw an error and prevent the developer from making mistake?
@jaikumar-tj yes, exactly it'll show a warning in the console, it doesn’t throw an error. It will be looking like this. |
@jaikumar-tj we decided to follow @tdeekens advice of using a warning. Bear in mind this will use a |
...on-components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice! 🫶🏻
Just tiny observations
|
||
useWarning( | ||
props.columns !== '1' || !Boolean(rightChild), | ||
props.columns === '1' && childrenCount > 1, | ||
'PageContentWide: This component only renders its first children when using a single column but you provided more that one.' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
'PageContentWide: This component only renders its first children when using a single column but you provided more that one.' | |
'PageContentWide: This component only renders its first children when using a single column but you provided more than one.' |
'PageContentWide: This component only renders its first children when using a single column but you provided more that one.' | ||
); | ||
|
||
useWarning( | ||
props.columns !== '1' && childrenCount > 2, | ||
'PageContentWide: This component only renders its first two children when using a two columns layout but you provided more that two.' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
'PageContentWide: This component only renders its first two children when using a two columns layout but you provided more that two.' | |
'PageContentWide: This component only renders its first two children when using a two columns layout but you provided more than two.' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great catch! 🦅 Thanks - c7557ec.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💯
The
PageContentWide
doesn't throw a warning when more children are passed as props.For example if 3 are passed, it only renders first 2 children and it goes unnoticed that 3rd component is not rendered and why is that the case.
In this PR we cover 2 possible scenarios when the warning is shown:
This PR closes - #3126.