From 5b7a0412463ebab1dbc86c29024c1fd326ac47fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frane=20Poli=C4=87?= <16856471+fPolic@users.noreply.github.com> Date: Wed, 20 Aug 2025 08:39:45 +0200 Subject: [PATCH] chore(ui): move toast to top right (#13092) * chore(ui): display toast in top right corner * fix: error as well * refactor: feedback * chore: move the rest of the modal controls to footer --------- Co-authored-by: William Bouchard <46496014+willbouch@users.noreply.github.com> --- .changeset/wise-yaks-wink.md | 5 +++ .../edit-category-products-form.tsx | 18 ++++---- .../add-products-to-collection-form.tsx | 18 ++++---- .../create-collection-form.tsx | 41 ++++++++++--------- .../add-customers-form/add-customers-form.tsx | 28 +++++++------ .../order-create-shipment-form.tsx | 36 ++++++++-------- .../manage-variant-inventory-items-form.tsx | 23 +++++------ .../add-countries-form/add-countries-form.tsx | 24 +++++------ .../create-region-form/create-region-form.tsx | 23 +++++------ packages/design-system/ui/src/utils/toast.tsx | 34 +++++++++++---- 10 files changed, 140 insertions(+), 110 deletions(-) create mode 100644 .changeset/wise-yaks-wink.md diff --git a/.changeset/wise-yaks-wink.md b/.changeset/wise-yaks-wink.md new file mode 100644 index 0000000000..b36771315a --- /dev/null +++ b/.changeset/wise-yaks-wink.md @@ -0,0 +1,5 @@ +--- +"@medusajs/ui": patch +--- + +chore(ui): display toast in top right corner diff --git a/packages/admin/dashboard/src/routes/categories/category-products/components/edit-category-products-form/edit-category-products-form.tsx b/packages/admin/dashboard/src/routes/categories/category-products/components/edit-category-products-form/edit-category-products-form.tsx index fbfe048e6f..163358a974 100644 --- a/packages/admin/dashboard/src/routes/categories/category-products/components/edit-category-products-form/edit-category-products-form.tsx +++ b/packages/admin/dashboard/src/routes/categories/category-products/components/edit-category-products-form/edit-category-products-form.tsx @@ -148,14 +148,6 @@ export const EditCategoryProductsForm = ({ {form.formState.errors.product_ids.message} )} - - - - @@ -178,6 +170,16 @@ export const EditCategoryProductsForm = ({ search="autofocus" /> + + + + + + ) diff --git a/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx b/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx index 59e29e5d4b..50c21c5433 100644 --- a/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx +++ b/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx @@ -157,14 +157,6 @@ export const AddProductsToCollectionForm = ({ {form.formState.errors.add && ( {form.formState.errors.add.message} )} - - - - @@ -187,6 +179,16 @@ export const AddProductsToCollectionForm = ({ search="autofocus" /> + + + + + + ) diff --git a/packages/admin/dashboard/src/routes/collections/collection-create/components/create-collection-form/create-collection-form.tsx b/packages/admin/dashboard/src/routes/collections/collection-create/components/create-collection-form/create-collection-form.tsx index a7bcdc1592..18a16e9513 100644 --- a/packages/admin/dashboard/src/routes/collections/collection-create/components/create-collection-form/create-collection-form.tsx +++ b/packages/admin/dashboard/src/routes/collections/collection-create/components/create-collection-form/create-collection-form.tsx @@ -46,25 +46,13 @@ export const CreateCollectionForm = () => { return ( - - -
- - - - -
- - + + + +
{t("collections.createCollection")} @@ -111,6 +99,21 @@ export const CreateCollectionForm = () => {
+ + + + + + ) diff --git a/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx b/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx index b0cdc143be..ba9d7d667d 100644 --- a/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx +++ b/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx @@ -137,19 +137,6 @@ export const AddCustomersForm = ({ {form.formState.errors.customer_ids.message} )} - - - - @@ -176,6 +163,21 @@ export const AddCustomersForm = ({ }} /> + + + + + + ) diff --git a/packages/admin/dashboard/src/routes/orders/order-create-shipment/components/order-create-shipment-form/order-create-shipment-form.tsx b/packages/admin/dashboard/src/routes/orders/order-create-shipment/components/order-create-shipment-form/order-create-shipment-form.tsx index 602ded66fe..9702ed5f4f 100644 --- a/packages/admin/dashboard/src/routes/orders/order-create-shipment/components/order-create-shipment-form/order-create-shipment-form.tsx +++ b/packages/admin/dashboard/src/routes/orders/order-create-shipment/components/order-create-shipment-form/order-create-shipment-form.tsx @@ -44,12 +44,12 @@ export function OrderCreateShipmentForm({ const handleSubmit = form.handleSubmit(async (data) => { const addedLabels = data.labels - .filter((l) => !!l.tracking_number) - .map((l) => ({ - tracking_number: l.tracking_number, - tracking_url: "#", - label_url: "#", - })) + .filter((l) => !!l.tracking_number) + .map((l) => ({ + tracking_number: l.tracking_number, + tracking_url: "#", + label_url: "#", + })) await createShipment( { @@ -78,18 +78,8 @@ export function OrderCreateShipmentForm({ onSubmit={handleSubmit} className="flex h-full flex-col overflow-hidden" > - -
- - - - -
- + +
@@ -166,6 +156,16 @@ export function OrderCreateShipmentForm({
+ + + + + + ) diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-manage-inventory-items/components/manage-variant-inventory-items-form/manage-variant-inventory-items-form.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-manage-inventory-items/components/manage-variant-inventory-items-form/manage-variant-inventory-items-form.tsx index 3b4da809a1..80000c151e 100644 --- a/packages/admin/dashboard/src/routes/product-variants/product-variant-manage-inventory-items/components/manage-variant-inventory-items-form/manage-variant-inventory-items-form.tsx +++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-manage-inventory-items/components/manage-variant-inventory-items-form/manage-variant-inventory-items-form.tsx @@ -310,18 +310,7 @@ export function ManageVariantInventoryItemsForm({ return ( - -
- - - - -
- +
@@ -371,6 +360,16 @@ export function ManageVariantInventoryItemsForm({
+ + + + + + ) diff --git a/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx b/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx index 3366f997a0..9241dbf7ef 100644 --- a/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx +++ b/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx @@ -129,18 +129,8 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => { onSubmit={handleSubmit} className="flex h-full flex-col overflow-hidden" > - -
- - - - -
- + + <_DataTable table={table} @@ -158,6 +148,16 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => { prefix={PREFIX} /> + + + + + + ) diff --git a/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx b/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx index 5e6af2e7b7..db7ed7221c 100644 --- a/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx +++ b/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx @@ -186,18 +186,7 @@ export const CreateRegionForm = ({ className="flex h-full flex-col overflow-hidden" onSubmit={handleSubmit} > - -
- - - - -
- +
+ + + + + + ) diff --git a/packages/design-system/ui/src/utils/toast.tsx b/packages/design-system/ui/src/utils/toast.tsx index d7e55c4b22..5aae4e954d 100644 --- a/packages/design-system/ui/src/utils/toast.tsx +++ b/packages/design-system/ui/src/utils/toast.tsx @@ -3,6 +3,8 @@ import { ToastAction, ToastVariant, ToasterPosition } from "@/types" import * as React from "react" import { ExternalToast, toast as toastFn } from "sonner" +const DEFAULT_TOAST_POSITION = "top-right" + interface BaseToastProps { id?: string | number position?: ToasterPosition @@ -16,7 +18,11 @@ interface ToastProps extends BaseToastProps { action?: ToastAction } -function create(variant: ToastVariant, title: React.ReactNode, props: ToastProps = {}) { +function create( + variant: ToastVariant, + title: React.ReactNode, + props: ToastProps = {} +) { const external: ExternalToast = { position: props.position, duration: props.duration, @@ -50,13 +56,15 @@ function message( /** * The props of the toast. */ - props: ToastProps = {} + props: ToastProps = { + position: DEFAULT_TOAST_POSITION, + } ) { return create("message", title, props) } function custom() { - return create("message", "Custom",) + return create("message", "Custom") } interface VariantToastProps extends Omit {} @@ -68,7 +76,9 @@ function info( /** * The props of the toast. */ - props: VariantToastProps = {} + props: VariantToastProps = { + position: DEFAULT_TOAST_POSITION, + } ) { return create("info", title, props) } @@ -80,7 +90,9 @@ function error( /** * The props of the toast. */ - props: VariantToastProps = {} + props: VariantToastProps = { + position: DEFAULT_TOAST_POSITION, + } ) { return create("error", title, props) } @@ -92,7 +104,9 @@ function success( /** * The props of the toast. */ - props: VariantToastProps = { } + props: VariantToastProps = { + position: DEFAULT_TOAST_POSITION, + } ) { return create("success", title, props) } @@ -104,7 +118,9 @@ function warning( /** * The props of the toast. */ - props: VariantToastProps = {} + props: VariantToastProps = { + position: DEFAULT_TOAST_POSITION, + } ) { return create("warning", title, props) } @@ -116,7 +132,9 @@ function loading( /** * The props of the toast. */ - props: VariantToastProps = {} + props: VariantToastProps = { + position: DEFAULT_TOAST_POSITION, + } ) { return create("loading", title, { ...props, dismissable: false }) }