feat: implement Toaster offset

packages/react-components/react-toast/etc/react-toast.api.md

@@ -13,7 +13,10 @@ export const Toaster: React_2.FC<ToasterProps>;
 export type ToastId = string;
 
 // @public (undocumented)
-export type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+export type ToastOffset = Partial<Record<ToastPosition, ToastOffsetObject>> | ToastOffsetObject;
+
+// @public (undocumented)
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 // @public (undocumented)
 export function useToastController(): {

packages/react-components/react-toast/src/components/Toaster.tsx

@@ -17,6 +17,7 @@ const useStyles = makeStyles({
 export type ToasterProps = Partial<ToasterOptions>;
 
 export const Toaster: React.FC<ToasterProps> = props => {
+  const { offset } = props;
   const { getToastsToRender, isToastVisible, toasterRef } = useToaster<HTMLDivElement>(props);
 
   const styles = useStyles();
@@ -26,7 +27,7 @@ export const Toaster: React.FC<ToasterProps> = props => {
       <div ref={toasterRef}>
         {getToastsToRender((position, toasts) => {
           return (
-            <div key={position} style={getPositionStyles(position)} className={mergeClasses(styles.container)}>
+            <div key={position} style={getPositionStyles(position, offset)} className={mergeClasses(styles.container)}>
               {toasts.map(toastProps => {
                 return (
                   <Toast {...toastProps} key={toastProps.toastId} visible={isToastVisible(toastProps.toastId)}>

packages/react-components/react-toast/src/index.ts

@@ -1,4 +1,4 @@
 export { Toaster } from './components/Toaster';
 
 export { useToastController } from './state';
-export type { ToastPosition, ToastId } from './state';
+export type { ToastPosition, ToastId, ToastOffset } from './state';

packages/react-components/react-toast/src/state/types.ts

@@ -3,7 +3,7 @@ import { EVENTS } from './constants';
 export type ToastId = string;
 export type ToasterId = string;
 
-export type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 export interface ToastOptions {
   toastId: ToastId;
@@ -17,9 +17,16 @@ export interface ToastOptions {
   dispatchedAt: number;
 }
 
+export interface ToastOffsetObject {
+  horizontal?: number;
+  vertical?: number;
+}
+
+export type ToastOffset = Partial<Record<ToastPosition, ToastOffsetObject>> | ToastOffsetObject;
+
 export interface ToasterOptions
   extends Pick<ToastOptions, 'position' | 'timeout' | 'pauseOnWindowBlur' | 'pauseOnHover' | 'priority'> {
-  offset?: number[];
+  offset?: ToastOffset;
   toasterId?: ToasterId;
   limit?: number;
 }

packages/react-components/react-toast/src/state/vanilla/getPositionStyles.ts

@@ -1,4 +1,4 @@
-import { ToastPosition } from '../types';
+import { ToastOffsetObject, ToastOffset, ToastPosition } from '../types';
 
 interface PositionStyles {
   position: 'fixed';
@@ -8,37 +8,43 @@ interface PositionStyles {
   bottom?: number;
 }
 
-export const getPositionStyles = (position: ToastPosition) => {
+export const getPositionStyles = (position: ToastPosition, offset?: ToastOffset) => {
   const positionStyles: PositionStyles = {
     position: 'fixed',
   };
 
+  const { horizontal = 0, vertical = 0 } = offset ? (isShorthandOffset(offset) ? offset : offset[position] ?? {}) : {};
+
   switch (position) {
     case 'top-left':
       Object.assign(positionStyles, {
-        top: 0,
-        left: 0,
+        top: vertical,
+        left: horizontal,
       });
       break;
     case 'top-right':
       Object.assign(positionStyles, {
-        top: 0,
-        right: 0,
+        top: vertical,
+        right: horizontal,
       });
       break;
     case 'bottom-left':
       Object.assign(positionStyles, {
-        bottom: 0,
-        left: 0,
+        bottom: vertical,
+        left: horizontal,
       });
       break;
     case 'bottom-right':
       Object.assign(positionStyles, {
-        bottom: 0,
-        right: 0,
+        bottom: vertical,
+        right: horizontal,
       });
       break;
   }
 
   return positionStyles;
 };
+
+function isShorthandOffset(offset: ToastOffset): offset is ToastOffsetObject {
+  return 'horizontal' in offset || 'vertical' in offset;
+}

packages/react-components/react-toast/stories/Toast/Offset.stories.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ToastPosition, Toaster, useToastController } from '@fluentui/react-toast';
+import { useId } from '@fluentui/react-components';
+
+export const Offset = () => {
+  const toasterId = useId('toaster');
+  const { dispatchToast } = useToastController();
+  const notify = (position: ToastPosition) => dispatchToast('This is a toast', { position, toasterId });
+  const [horizontal, setHorizontal] = React.useState(10);
+  const [vertical, setVertical] = React.useState(10);
+
+  return (
+    <>
+      <Toaster toasterId={toasterId} offset={{ horizontal, vertical }} />
+      <button onClick={() => notify('bottom-left')}>bottom-left</button>
+      <button onClick={() => notify('bottom-right')}>bottom-right</button>
+      <button onClick={() => notify('top-left')}>top-left</button>
+      <button onClick={() => notify('top-right')}>top-right</button>
+      <div>
+        <label htmlFor="horizntal">horizontal</label>
+        <input id="horizontal" type="number" value={horizontal} onChange={e => setHorizontal(Number(e.target.value))} />
+      </div>
+      <div>
+        <label htmlFor="vertical">vertical</label>
+        <input id="vertical" type="number" value={vertical} onChange={e => setVertical(Number(e.target.value))} />
+      </div>
+    </>
+  );
+};

packages/react-components/react-toast/stories/Toast/index.stories.tsx

@@ -2,6 +2,7 @@ export { Default } from './Default.stories';
 export { DefaultToastOptions } from './DefaultToastOptions.stories';
 export { CustomTimeout } from './CustomTimeout.stories';
 export { ToastPositions } from './ToastPositions.stories';
+export { Offset } from './Offset.stories';
 export { DismissToast } from './DismissToast.stories';
 export { DismissAll } from './DismissAll.stories';
 export { PauseOnWindowBlur } from './PauseOnWindowBlur.stories';