Bug report: Discrepancy between Toast implementation and documentation example

[VrajPatelK]

Bug report

Describe the bug

1. Discrepancy in Toast appearance: When I implemented the provided Toast component, the appearance differed from what was shown in the documentation. The actual Toast ( shown in image-1) does not match the design of the one in the documentation ( shown in image-2).
2. Close button not working as expected: In the documentation example ( shown in image-2), when clicking the "Close" button, the toast does not close even though dismissable is set to true.

System information

• Medusa version (including plugins): v2
  • "@medusajs/ui-preset": "preview"
  • "@medusajs/ui": "preview"
• Node.js version: v20.13.1
• Database: postgresql^15.1
• Operating system: macOS
• Browser (if relevant): chrome

Steps to reproduce the behavior

1. Go to the Toast component in the documentation.
2. Implement the Toast component using the provided code.
3. Compare the appearance of the Toast with what is shown in the documentation.
4. Click the "Close" button and observe that the toast does not dismiss.
5. Notice both the appearance discrepancy and the non-functional "Close" button.

Expected behavior

1. The implemented Toast component should match the design and behavior shown in the documentation ( shown in image-2).
2. The "Close" button should function as expected, dismissing the toast when dismissable is set to true( shown in image-2).

Screenshots

Image1 (While Implementation)

Image:2 (Inside Docs)

Code snippets

import { Button, Toaster, toast } from "@medusajs/ui"

export function DismissableToaster() {
  return (
    <>
      <Toaster />
      <Button
        onClick={() =>
          toast.info("Info", {
            description: "The quick brown fox jumps over the lazy dog.",
            dismissable: true,
          })
        }
      >
        Show
      </Button>
    </>
  )
}

[kasperkristensen]

Hi @VrajPatelK, I think that either you were viewing the V1 docs or seeing a cached version of the page as we were updating the UI docs to reflect the release of V2 yesterday. At least on my end https://docs.medusajs.com/ui/components/toast is showing the correct component.

Hitting the "x" button on a Toaster in V2 also works as expected, so closing this issue. If you are facing any issues with the V2 version of the toaster then feel free to re-open the issue.