fix(toast): toast should be above modal and renaming the loadingIcon to loadingComponent #4919
Conversation
🦋 Changeset detectedLatest commit: 20dd898 The changes in this PR will be included in the next version bump. This PR includes changesets to release 14 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 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis PR introduces multiple updates across the toast component. It renames the Changes
Possibly related PRs
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
|
macci001
changed the title
macci001
added
📦 Scope : Components
macci001
force-pushed
the
macci001/fix-toast-issues
branch
from
e9d9d05 to
58544da
Compare
@heroui/accordion
@heroui/alert
@heroui/autocomplete
@heroui/avatar
@heroui/badge
@heroui/breadcrumbs
@heroui/button
@heroui/calendar
@heroui/card
@heroui/checkbox
@heroui/chip
@heroui/code
@heroui/date-input
@heroui/date-picker
@heroui/divider
@heroui/drawer
@heroui/dropdown
@heroui/form
@heroui/input
@heroui/image
@heroui/input-otp
@heroui/kbd
@heroui/link
@heroui/listbox
@heroui/menu
@heroui/modal
@heroui/navbar
@heroui/number-input
@heroui/pagination
@heroui/popover
@heroui/progress
@heroui/radio
@heroui/ripple
@heroui/scroll-shadow
@heroui/select
@heroui/skeleton
@heroui/slider
@heroui/snippet
@heroui/spacer
@heroui/spinner
@heroui/switch
@heroui/table
@heroui/tabs
@heroui/toast
@heroui/tooltip
@heroui/user
@heroui/react
@heroui/system
@heroui/system-rsc
@heroui/theme
@heroui/use-aria-accordion
@heroui/use-aria-accordion-item
@heroui/use-aria-button
@heroui/use-aria-link
@heroui/use-aria-modal-overlay
@heroui/use-aria-multiselect
@heroui/use-callback-ref
@heroui/use-clipboard
@heroui/use-data-scroll-overflow
@heroui/use-disclosure
@heroui/use-draggable
@heroui/use-image
@heroui/use-infinite-scroll
@heroui/use-intersection-observer
@heroui/use-is-mobile
@heroui/use-is-mounted
@heroui/use-measure
@heroui/use-pagination
@heroui/use-real-shape
@heroui/use-ref-state
@heroui/use-resize
@heroui/use-safe-layout-effect
@heroui/use-scroll-position
@heroui/use-ssr
@heroui/use-theme
@heroui/use-update-effect
@heroui/aria-utils
@heroui/dom-animation
@heroui/framer-utils
@heroui/react-rsc-utils
@heroui/react-utils
@heroui/shared-icons
@heroui/shared-utils
@heroui/stories-utils
@heroui/test-utils
commit: |
macci001
force-pushed
the
macci001/fix-toast-issues
branch
from
58544da to
b10d8c5
Compare
macci001
force-pushed
the
macci001/fix-toast-issues
branch
from
b10d8c5 to
fbb05b6
Compare
macci001
force-pushed
the
macci001/fix-toast-issues
branch
from
fbb05b6 to
1b61b94
Compare
macci001
force-pushed
the
macci001/fix-toast-issues
branch
from
1b61b94 to
260a349
Compare
macci001
force-pushed
the
macci001/fix-toast-issues
branch
from
260a349 to
be899a3
Compare
![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
🧹 Nitpick comments (1)
apps/docs/content/docs/components/toast.mdx (1)
183-183: Grammar issue in accessibility sectionThere's a small grammatical error in the accessibility section.
-All Toasts are present in `ToastRegion`. +All Toasts are present in the `ToastRegion`.🧰 Tools
🪛 LanguageTool
[uncategorized] ~183-~183: You might be missing the article “the” here.
Context: ... ofalert- All Toasts are present inToastRegion. - Close button has aria-la...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
.changeset/popular-forks-sparkle.md(1 hunks)apps/docs/content/docs/components/toast.mdx(5 hunks)packages/components/toast/package.json(1 hunks)packages/components/toast/src/toast-provider.tsx(5 hunks)packages/components/toast/src/toast-region.tsx(4 hunks)packages/components/toast/src/toast.tsx(3 hunks)packages/components/toast/src/use-toast.ts(6 hunks)packages/components/toast/stories/toast.stories.tsx(4 hunks)packages/core/theme/src/components/toast.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- packages/components/toast/package.json
- .changeset/popular-forks-sparkle.md
- packages/core/theme/src/components/toast.ts
- packages/components/toast/src/use-toast.ts
- packages/components/toast/src/toast.tsx
- packages/components/toast/src/toast-provider.tsx
🧰 Additional context used
🪛 LanguageTool
apps/docs/content/docs/components/toast.mdx
[uncategorized] ~183-~183: You might be missing the article “the” here.
Context: ... of alert - All Toasts are present in ToastRegion. - Close button has aria-la...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: TypeScript
- GitHub Check: Continuous Release
- GitHub Check: Build
🔇 Additional comments (13)
packages/components/toast/src/toast-region.tsx (4)
17-20: Good addition of the RegionProps interfaceThe new RegionProps interface provides a clean way to add className customization capabilities to the toast region, following component design best practices.
22-22: Clean interface extension approachExtending ToastRegionProps with RegionProps is a good approach that maintains backward compatibility while adding new functionality.
37-38: Props correctly added to component parameter listThe new className and classNames props are properly destructured from the props object.
57-58: Properly combining class names with clsxUsing clsx to combine the className and classNames.base is the right approach.
packages/components/toast/stories/toast.stories.tsx (4)
229-266: Great example of toast with modal integrationThis is an excellent example demonstrating how to use toasts from within a modal. This directly addresses the PR objective of ensuring toast appears above modal components.
439-445: Example of custom loading componentThis is a good example showing how to use the new
loadingComponentprop with a custom Spinner component.This reflects the breaking change from
loadingIcontoloadingComponentmentioned in the PR objectives.
468-473: New story export for toast with modalThe new export complements the template defined earlier, providing a complete example.
5-13:❓ Verification inconclusive
New dependencies added for modal functionality
The addition of Modal components and Spinner makes sense for the new story examples.
Please ensure these dependencies are properly added to the package.json file.
🏁 Script executed:
#!/bin/bash # Check if modal and spinner packages are included in dependencies grep -E "\"@heroui/(modal|spinner)\"" package.jsonLength of output: 50
Action Required: Manually Verify Dependency Entries in package.json
The new Modal and Spinner components in the toast story look good, but the automated check did not find any entries for
@heroui/modaland@heroui/spinnerin package.json. Since the grep command showed no output, please manually verify that these dependencies (or devDependencies) are properly added to package.json. If they are missing, add them accordingly.apps/docs/content/docs/components/toast.mdx (5)
171-171: Updated slot documentation for loadingComponentThe documentation has been properly updated to reflect the renaming from
loadingIcontoloadingComponent.
256-259: Updated API prop documentationThe documentation has been properly updated to reflect the renaming from
loadingIcontoloadingComponent.
287-287: Updated type definition for classNamesThe type definition for classNames has been updated to include
loadingComponentinstead ofloadingIcon.
334-339: New regionProps property documentationThe documentation for the new
regionPropsproperty is clear and concise.
343-354: New ToastRegion Props sectionThe addition of a dedicated section for ToastRegion Props provides comprehensive documentation for the new styling capabilities.
macci001
force-pushed
the
macci001/fix-toast-issues
branch
from
579fce7 to
18dbfdc
Compare
|
@wingkwong added your suggestion in latest commit. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/components/toast/stories/toast.stories.tsx (2)
230-290: Enhance theWithToastFromOverlayTemplatewith proper type safety.The template lacks proper typing for the
argsparameter, which could lead to type-related issues. Also, be careful about spreadingargsdirectly to both toast and overlay components as noted in previous comments.Consider adding proper typing and separating the props:
- const WithToastFromOverlayTemplate = (args) => { + const WithToastFromOverlayTemplate = (args: ToastProps & { defaultOpen?: boolean }) => { const {isOpen, onOpen, onOpenChange, onClose} = useDisclosure(); const { isOpen: isDrawerOpen, onOpen: onDrawerOpen, onOpenChange: onDrawerOpenChange, } = useDisclosure({defaultOpen: args.defaultOpen}); + // Extract toast-specific props to avoid passing unrelated props + const toastProps = { + title: args.title, + description: args.description, + color: args.color, + variant: args.variant, + size: args.size, + radius: args.radius, + shadow: args.shadow, + hideIcon: args.hideIcon, + hideCloseButton: args.hideCloseButton, + timeout: args.timeout, + shouldShowTimeoutProgress: args.shouldShowTimeoutProgress, + }; return ( <> <ToastProvider maxVisibleToasts={args.maxVisibleToasts} placement={args.placement} /> <Modal isOpen={isOpen} scrollBehavior="outside" onOpenChange={onOpenChange}> <ModalContent> <ModalHeader>Toast from Modal</ModalHeader> <ModalBody> <div>Press "Show Toast" to launch a toast.</div> </ModalBody> <ModalFooter> <div className="flex gap-4"> <Button onPress={() => { addToast({ title: "Toast from modal", description: "Toast Displayed Successfully", - ...args, + ...toastProps, }); }} > Show Toast </Button> <Button onPress={onClose}>Close</Button> </div> </ModalFooter> </ModalContent> </Modal> <Drawer isOpen={isDrawerOpen} onOpenChange={onDrawerOpenChange}> <DrawerContent className="p-4"> <Button className="w-fit" onPress={() => { addToast({ title: "Toast from drawer", description: "Toast Displayed Successfully", - ...args, + ...toastProps, }); }} > Show Toast </Button> </DrawerContent> </Drawer> <div className="flex gap-x-2"> <Button onPress={onOpen}>Open Modal</Button> <Button onPress={onDrawerOpen}>Open Drawer</Button> </div> </> ); };
240-240: Consider addingregionPropsto the ToastProvider.Since the PR introduces a new optional
regionPropsproperty to the ToastProvider, you could showcase it in this template to demonstrate the new functionality.- <ToastProvider maxVisibleToasts={args.maxVisibleToasts} placement={args.placement} /> + <ToastProvider + maxVisibleToasts={args.maxVisibleToasts} + placement={args.placement} + regionProps={{ + className: "z-[10000]" // Ensure toast appears above modals + }} + />
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
packages/components/toast/package.json(1 hunks)packages/components/toast/stories/toast.stories.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/components/toast/package.json
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: TypeScript
- GitHub Check: Continuous Release
- GitHub Check: Build
🔇 Additional comments (3)
packages/components/toast/stories/toast.stories.tsx (3)
5-14: Good addition of imports for overlay components.The new imports from Modal, Drawer, and Spinner components support the new overlay-related toast functionality, which aligns with the PR objective of ensuring toast appears above modals.
463-469: Excellent implementation of the renamedloadingComponentprop.This new export demonstrates the renamed property functionality, transitioning from
loadingIcontoloadingComponentas specified in the PR objectives. Using a Spinner component shows the improved flexibility of this approach.
492-497: Good addition of the ToastFromOverlay export.This export provides a useful example of how toast components can be displayed from within modal and drawer overlays, directly addressing the PR's primary objective of ensuring toasts appear above modals.
Closes #4898
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
Yes
This is an breaking change as loadingIcon prop is renamed to loadingComponent prop
📝 Additional Information
Summary by CodeRabbit
New Features
Documentation
loadingIcontoloadingComponent.ToastRegion Propsand theregionPropsattribute.Style