refactor(docs): example of blurred card #3741
Conversation
|
|
Someone is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Rate limit exceeded@macci001 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 9 minutes and 38 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe changes involve modifications to the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
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
|
![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
Outside diff range and nitpick comments (1)
apps/docs/content/docs/components/card.mdx (1)
76-76: Enhance clarity by rephrasing.The added information about the
isBlurredprop's behavior is valuable for developers using the component. It clarifies that the card's blurring properties are influenced by its parent component.However, consider rephrasing the sentence to improve readability:
-You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties with respect to its parent. +You can pass the `isBlurred` prop to the card to blur the card. The card's blurring properties are determined by its parent component.Tools
LanguageTool
[style] ~76-~76: ‘with respect to’ might be wordy. Consider a shorter alternative.
Context: ... the card. Card gets blurred properties with respect to its parent. <CodeDemo isGradientBox ti...(EN_WORDINESS_PREMIUM_WITH_RESPECT_TO)
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- apps/docs/content/components/card/blurred.ts (1 hunks)
- apps/docs/content/docs/components/card.mdx (1 hunks)
Files skipped from review due to trivial changes (1)
- apps/docs/content/components/card/blurred.ts
Additional context used
LanguageTool
apps/docs/content/docs/components/card.mdx
[style] ~76-~76: ‘with respect to’ might be wordy. Consider a shorter alternative.
Context: ... the card. Card gets blurred properties with respect to its parent. <CodeDemo isGradientBox ti...(EN_WORDINESS_PREMIUM_WITH_RESPECT_TO)
|
ack, makes sense. In order to avoid the duplication, I think it makes sense to add a note in the docs rather than wrapping the example code. |
macci001
force-pushed
the
macci001/correcting-blured-card-example
branch
2 times, most recently
from
d6510c4
to
649f010
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (2)
apps/docs/content/docs/components/card.mdx (2)
76-78: Enhance clarity and conciseness.The code changes are approved as they enhance clarity by specifying the dependency on the ancestor element's color for the blurring effect.
To further improve readability, consider replacing 'with respect to' with a more concise alternative, such as 'based on'.
Apply this diff to implement the suggestion:
-You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties with respect to its ansestor element's color. +You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties based on its ancestor element's color.Tools
LanguageTool
[style] ~76-~76: ‘with respect to’ might be wordy. Consider a shorter alternative.
Context: ... the card. Card gets blurred properties with respect to its ansestor element's color. <CodeDem...(EN_WORDINESS_PREMIUM_WITH_RESPECT_TO)
80-81: Provide valuable guidance and improve conciseness.The code changes are approved as they provide valuable guidance to users by emphasizing the importance of the ancestor element's background for the blur effect.
To further improve readability, consider replacing 'in order to' with a more concise alternative, such as 'to'.
Apply this diff to implement the suggestion:
-**Note** : While trying out the above example, it is required to provide necessary background to any ansestor element of Card Component in order to obtain the `blur` effect as seen in preview. +**Note**: While trying out the above example, it is required to provide the necessary background to any ancestor element of the Card component to obtain the `blur` effect as seen in the preview.Tools
LanguageTool
[style] ~80-~80: Consider a shorter alternative to avoid wordiness.
Context: ... any ansestor element of Card Component in order to obtain theblureffect as seen in pre...(IN_ORDER_TO_PREMIUM)
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- apps/docs/content/docs/components/card.mdx (1 hunks)
Additional context used
LanguageTool
apps/docs/content/docs/components/card.mdx
[style] ~76-~76: ‘with respect to’ might be wordy. Consider a shorter alternative.
Context: ... the card. Card gets blurred properties with respect to its ansestor element's color. <CodeDem...(EN_WORDINESS_PREMIUM_WITH_RESPECT_TO)
[style] ~80-~80: Consider a shorter alternative to avoid wordiness.
Context: ... any ansestor element of Card Component in order to obtain theblureffect as seen in pre...(IN_ORDER_TO_PREMIUM)
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (2)
apps/docs/content/docs/components/card.mdx (2)
76-76: LGTM, with a minor suggestion.The updated explanation of the
isBlurredprop is clear and informative.To further improve the conciseness of the explanation, consider replacing "with respect to" with "based on":
-You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties with respect to its ansestor element. +You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties based on its ancestor element.Tools
LanguageTool
[style] ~76-~76: ‘with respect to’ might be wordy. Consider a shorter alternative.
Context: ... the card. Card gets blurred properties with respect to its ansestor element. <CodeDemo isGrad...(EN_WORDINESS_PREMIUM_WITH_RESPECT_TO)
80-80: LGTM, with a minor suggestion.The note is a helpful addition to clarify the requirements for observing the blur effect.
To further improve the conciseness of the note, consider replacing "in order to" with "to":
-**Note** : While trying out the above example, it is required to provide necessary background to any ansestor element of Card Component in order to obtain the `blur` effect as seen in preview. +**Note**: While trying out the above example, it is required to provide the necessary background to any ancestor element of the Card component to obtain the `blur` effect as seen in the preview.Tools
LanguageTool
[style] ~80-~80: Consider a shorter alternative to avoid wordiness.
Context: ... any ansestor element of Card Component in order to obtain theblureffect as seen in pre...(IN_ORDER_TO_PREMIUM)
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- apps/docs/content/docs/components/card.mdx (1 hunks)
Additional context used
LanguageTool
apps/docs/content/docs/components/card.mdx
[style] ~76-~76: ‘with respect to’ might be wordy. Consider a shorter alternative.
Context: ... the card. Card gets blurred properties with respect to its ansestor element. <CodeDemo isGrad...(EN_WORDINESS_PREMIUM_WITH_RESPECT_TO)
[style] ~80-~80: Consider a shorter alternative to avoid wordiness.
Context: ... any ansestor element of Card Component in order to obtain theblureffect as seen in pre...(IN_ORDER_TO_PREMIUM)
macci001
force-pushed
the
macci001/correcting-blured-card-example
branch
from
649f010
to
1221938
Compare
macci001
changed the title
macci001
force-pushed
the
macci001/correcting-blured-card-example
branch
from
1221938
to
cf52c8a
Compare
|
|
||
| <CodeDemo isGradientBox title="Blurred Card" files={cardContent.blurred} /> | ||
|
|
||
| **Note**: While trying out the above example, it is required to provide the necessary background to any ancestor element of the Card component to obtain the `blur` effect as seen in the preview. |
There was a problem hiding this comment.
I think we may add a simple example here. It's a bit confusing for the necessary background.
There was a problem hiding this comment.
A small clarification here:
- By Example, do you mean to add some code in the note?
There was a problem hiding this comment.
just an example of the necessary background.
wingkwong
changed the title
|
Added the example for |
Closes #3717
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No): No
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Documentation
isBlurredprop with the parent component's properties, emphasizing the need for a suitable background to observe the blur effect.