-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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
refactor(docs): example of blurred card #3741
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. |
WalkthroughThe changes involve modifications to the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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
|
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.
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
isBlurred
prop'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)
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.
we've isGradientBox
. doesn't it duplicate those code?
<CodeDemo isGradientBox title="Blurred Card" files={cardContent.blurred} />
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. |
d6510c4
to
649f010
Compare
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.
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 theblur
effect 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 theblur
effect as seen in pre...(IN_ORDER_TO_PREMIUM)
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.
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
isBlurred
prop 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 theblur
effect 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 theblur
effect as seen in pre...(IN_ORDER_TO_PREMIUM)
649f010
to
1221938
Compare
1221938
to
cf52c8a
Compare
Added the example for |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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.
Actionable comments posted: 1
📜 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
[uncategorized] ~80-~80: The abbreviation “e.g.” (= for example) requires two periods.
Context: ...red to provide the necessary background(eg. adding `bg-gradient-to-tr from-[#FFB457...(E_G)
🔇 Additional comments (1)
apps/docs/content/docs/components/card.mdx (1)
76-77
: LGTM: Clear explanation of theisBlurred
prop.The updated description provides a clear explanation of how the
isBlurred
prop works, emphasizing its dependency on the ancestor element. This change effectively addresses the confusion reported in the linked issue.
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
isBlurred
prop with the parent component's properties, emphasizing the need for a suitable background to observe the blur effect. An example demonstrating the use of a gradient background has been included.