From 0c22b14a39f04377b82d4b07d57f5f90b29f7ea2 Mon Sep 17 00:00:00 2001 From: diego tonini Date: Thu, 14 Nov 2024 12:21:25 +0100 Subject: [PATCH] feat: add center-center position --- src/assets.tsx | 2 +- src/styles.css | 5 +++++ src/types.ts | 9 ++++++++- website/src/components/Position/index.tsx | 12 ++++++++++-- website/src/pages/toast.mdx | 2 +- website/src/pages/toaster.mdx | 2 +- 6 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/assets.tsx b/src/assets.tsx index e2fed7b0..48eab646 100644 --- a/src/assets.tsx +++ b/src/assets.tsx @@ -23,7 +23,7 @@ export const getAsset = (type: ToastTypes): JSX.Element | null => { const bars = Array(12).fill(0); -export const Loader = ({ visible, className }: { visible: boolean, className?: string }) => { +export const Loader = ({ visible, className }: { visible: boolean; className?: string }) => { return (
diff --git a/src/styles.css b/src/styles.css index 5ad26c3a..1dcea379 100644 --- a/src/styles.css +++ b/src/styles.css @@ -82,6 +82,11 @@ bottom: max(var(--offset), env(safe-area-inset-bottom)); } +:where([data-sonner-toaster][data-x-position='center'][data-y-position='center']) { + top: calc(50% - calc(var(--front-toast-height) / 2)); + left: 50%; +} + :where([data-sonner-toast]) { --y: translateY(100%); --lift-amount: calc(var(--lift) * var(--gap)); diff --git a/src/types.ts b/src/types.ts index 5e03a891..1d232610 100644 --- a/src/types.ts +++ b/src/types.ts @@ -84,7 +84,14 @@ export function isAction(action: Action | React.ReactNode): action is Action { return (action as Action).label !== undefined; } -export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'; +export type Position = + | 'top-left' + | 'top-right' + | 'bottom-left' + | 'bottom-right' + | 'top-center' + | 'bottom-center' + | 'center-center'; export interface HeightT { height: number; toastId: number | string; diff --git a/website/src/components/Position/index.tsx b/website/src/components/Position/index.tsx index d221afa8..25b26fde 100644 --- a/website/src/components/Position/index.tsx +++ b/website/src/components/Position/index.tsx @@ -2,7 +2,15 @@ import { toast, useSonner } from 'sonner'; import { CodeBlock } from '../CodeBlock'; import React from 'react'; -const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'] as const; +const positions = [ + 'top-left', + 'top-center', + 'top-right', + 'bottom-left', + 'bottom-center', + 'bottom-right', + 'center-center', +] as const; export type Position = (typeof positions)[number]; @@ -33,7 +41,7 @@ export const Position = ({ setPosition(position); removeAllToasts(); } - + toast('Event has been created', { description: 'Monday, January 3rd at 6:00pm', }); diff --git a/website/src/pages/toast.mdx b/website/src/pages/toast.mdx index 9f96ee48..e1d403ef 100644 --- a/website/src/pages/toast.mdx +++ b/website/src/pages/toast.mdx @@ -147,7 +147,7 @@ function. It will not affect the positioning of other toasts. ```jsx // Available positions: -// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right +// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right, center-center toast('Hello World', { position: 'top-center', }); diff --git a/website/src/pages/toaster.mdx b/website/src/pages/toaster.mdx index ad301d83..428f657b 100644 --- a/website/src/pages/toaster.mdx +++ b/website/src/pages/toaster.mdx @@ -21,7 +21,7 @@ Changes the place where all toasts will be rendered. ```jsx // Available positions: -// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right +// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right, center-center ```