fix(toast): Fixing Spinner and renaming the loadingIcon to loadingComponent #4919
Conversation
🦋 Changeset detectedLatest commit: 1519c00 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 pull request consistently renames the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🪧 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/alert
@heroui/accordion
@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/image
@heroui/input
@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
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.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/components/toast/stories/toast.stories.tsx (1)
229-266:⚠️ Potential issueProps spreading issue in Modal component.
The Modal component is receiving all the
argsprops which are intended for Toast components. This could cause unintended behavior or console warnings about unrecognized props.Apply this fix to only pass Modal-specific props to the Modal component:
- <Modal {...args} isOpen={isOpen} scrollBehavior="outside" onOpenChange={onOpenChange}> + <Modal isOpen={isOpen} scrollBehavior="outside" onOpenChange={onOpenChange}>
🧹 Nitpick comments (1)
packages/components/toast/stories/toast.stories.tsx (1)
229-229: Add type annotation to the template function.The template function is missing TypeScript type annotation for better type safety and developer experience.
-const WithToastFromModalTemplate = (args) => { +const WithToastFromModalTemplate = (args: ToastProps) => {
📜 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 (5)
.changeset/soft-weeks-sell.md(1 hunks)apps/docs/content/docs/components/toast.mdx(3 hunks)packages/components/toast/package.json(1 hunks)packages/components/toast/src/toast-provider.tsx(1 hunks)packages/components/toast/stories/toast.stories.tsx(4 hunks)
✅ Files skipped from review due to trivial changes (1)
- .changeset/soft-weeks-sell.md
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/components/toast/src/toast-provider.tsx
- apps/docs/content/docs/components/toast.mdx
🔇 Additional comments (4)
packages/components/toast/package.json (1)
59-59: New dependency added to support modal functionality.The addition of
@heroui/modalas a development dependency aligns with the changes in the stories file that now includes a modal example to demonstrate toast behavior above modals.packages/components/toast/stories/toast.stories.tsx (3)
5-13: Appropriate imports for the new functionality.The added imports for Modal components, useDisclosure hook, and Spinner are necessary to support the new stories that demonstrate toast behavior with modals and custom loading components.
439-445: Good implementation of the renamed loadingComponent prop.This story correctly demonstrates the use of the renamed
loadingComponentprop (previouslyloadingIcon), which was one of the main objectives of this PR. The Spinner component is appropriately passed as the loading component.
468-473: New story for demonstrating toast above modal.This new story helps demonstrate that toasts appear above modals, which addresses the first objective of the PR. Make sure to update the Modal component as suggested in the previous comment to avoid passing unintended props.
macci001
force-pushed
the
macci001/fix-toast-issues
branch
from
e1d763e to
1519c00
Compare
macci001
changed the title
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