refactor(docs): refactoring the toast docs to have capital button names#4883
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update refactors the toast notification components by modifying the way UI options are represented. The changes convert displayed text for colors, placements, radii, and variants to a more user-friendly format (title case) while ensuring that the underlying logic continues to use lowercase values. In addition, the documentation for the ToastProvider has been updated to change the default maximum number of visible toasts from 5 to 3. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Button
participant ToastManager
User->>Button: Clicks a toast option button
Button->>App: Triggers onPress with selected tuple value
App->>App: Converts display value to lowercase (if needed)
App->>ToastManager: Calls addToast with the processed value
ToastManager-->>User: Displays the toast notification
Suggested labels
Suggested reviewers
✨ Finishing Touches
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: 1
🔭 Outside diff range comments (1)
apps/docs/content/components/toast/variants.raw.jsx (1)
13-14: 🛠️ Refactor suggestionRemove @ts-ignore by adding proper types.
The presence of @ts-ignore suggests potential type issues that should be addressed properly.
Consider adding proper types:
+type Variant = "solid" | "bordered" | "faded"; +const TOAST_VARIANTS: Array<[string, Variant]> = [ + ["Solid", "solid"], + ["Bordered", "bordered"], + ["Flat", "faded"], +]; export default function App() {
🧹 Nitpick comments (3)
apps/docs/content/components/toast/color.raw.jsx (1)
6-20: LGTM! Consider extracting color mapping to a constant.The changes improve readability while maintaining functionality. The color values are properly converted to lowercase when used in props and toast configuration.
Consider extracting the color mapping to a constant to improve maintainability:
+const TOAST_COLORS = [ + "Default", + "Primary", + "Secondary", + "Success", + "Warning", + "Danger" +] as const; export default function App() { return ( <div className="flex flex-wrap gap-2"> - {["Default", "Primary", "Secondary", "Success", "Warning", "Danger"].map((color) => ( + {TOAST_COLORS.map((color) => (apps/docs/content/components/toast/radius.raw.jsx (1)
6-26: Consider using destructuring for better readability.The changes improve clarity by separating display text from values. However, array index access could be made more readable.
Consider using destructuring for better readability:
- {[ - ["None", "none"], - ["Small", "sm"], - ["Medium", "md"], - ["Large", "lg"], - ["Full", "full"], - ].map((radius) => ( + {[ + ["None", "none"], + ["Small", "sm"], + ["Medium", "md"], + ["Large", "lg"], + ["Full", "full"], + ].map(([label, value]) => ( <Button - key={radius[1]} - radius={radius[1]} + key={value} + radius={value} variant={"flat"} onPress={() => addToast({ title: "Toast title", description: "Toast displayed successfully", - radius: radius[1], + radius: value, }) } > - {radius[0]} + {label} </Button>apps/docs/content/components/toast/placement.raw.jsx (1)
11-31: Consider extracting positions and using destructuring.The changes improve readability, but could benefit from constant extraction and destructuring.
Consider these improvements:
+const TOAST_POSITIONS = [ + ["Top Left", "top-left"], + ["Top Center", "top-center"], + ["Top Right", "top-right"], + ["Bottom Left", "bottom-left"], + ["Bottom Center", "bottom-center"], + ["Bottom Right", "bottom-right"], +] as const; export default function App() { return ( <div className="flex flex-wrap gap-2"> - {[ - ["Top Left", "top-left"], - ["Top Center", "top-center"], - ["Top Right", "top-right"], - ["Bottom Left", "bottom-left"], - ["Bottom Center", "bottom-center"], - ["Bottom Right", "bottom-right"], - ].map((position) => ( + {TOAST_POSITIONS.map(([label, value]) => ( <Button - key={position[1]} + key={value} variant={"flat"} onPress={() => { - setPlacement(position[1]); + setPlacement(value); addToast({ title: "Toast title", description: "Toast displayed successfully", }); }} > - {position[0]} + {label} </Button>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/docs/content/components/toast/color.raw.jsx(1 hunks)apps/docs/content/components/toast/placement.raw.jsx(1 hunks)apps/docs/content/components/toast/radius.raw.jsx(1 hunks)apps/docs/content/components/toast/variants.raw.jsx(2 hunks)apps/docs/content/docs/components/toast.mdx(1 hunks)
🔇 Additional comments (1)
apps/docs/content/docs/components/toast.mdx (1)
298-303: Default Value Update: maxVisibleToasts Changed to "3"The documentation now reflects that the
maxVisibleToastsdefault value has been updated from "5" to "3". This change aligns with the intention to refine configuration parameters in the docs. Please verify that this update is consistent with the component’s implementation and that all related examples are updated accordingly.
3 participants
Closes #
PR refactors the toast docs to have capital names in the Button copy.
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
Style
Documentation