docs: added documentation for toast component changes (#7141)

* docs: added documentation for toast component changes

* added redirect from use-toast docs to upgrade guide

* remove unused file

* content linting fixes

* update UI package version

* updated ui preset

* fix upgrade guides main page
This commit is contained in:
Shahed Nasser
2024-05-01 18:12:10 +03:00
committed by GitHub
parent 8387d03370
commit b6083ce104
24 changed files with 559 additions and 343 deletions

View File

@@ -1,15 +1,12 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterDemo() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Info",
toast.info("Info", {
description: "The quick brown fox jumps over the lazy dog.",
})
}

View File

@@ -0,0 +1,19 @@
import { Button, Toaster, toast } from "@medusajs/ui"
export default function DismissableToaster() {
return (
<>
<Toaster />
<Button
onClick={() =>
toast.info("Info", {
description: "The quick brown fox jumps over the lazy dog.",
dismissable: true,
})
}
>
Show
</Button>
</>
)
}

View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterError() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Error",
toast.error("Error", {
description: "The quick brown fox jumps over the lazy dog.",
variant: "error",
duration: 5000,
})
}

View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterLoading() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Loading",
toast.loading("Loading", {
description: "The quick brown fox jumps over the lazy dog.",
variant: "loading",
duration: 5000,
})
}

View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterSuccess() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Success",
toast.success("Success", {
description: "The quick brown fox jumps over the lazy dog.",
variant: "success",
duration: 5000,
})
}

View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterWarning() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Warning",
toast.warning("Warning", {
description: "The quick brown fox jumps over the lazy dog.",
variant: "warning",
duration: 5000,
})
}

View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterWithAction() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Created Product",
toast.success("Created Product", {
description: "The product has been created.",
variant: "success",
action: {
altText: "Undo product creation",
onClick: () => {},