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:
@@ -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.",
|
||||
})
|
||||
}
|
||||
|
||||
19
www/apps/ui/src/examples/toaster-dismiss.tsx
Normal file
19
www/apps/ui/src/examples/toaster-dismiss.tsx
Normal 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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: () => {},
|
||||
|
||||
Reference in New Issue
Block a user