diff --git a/docs-ui/src/app/components/toast/components.tsx b/docs-ui/src/app/components/toast/components.tsx index 0a6179bc42..037075b1dd 100644 --- a/docs-ui/src/app/components/toast/components.tsx +++ b/docs-ui/src/app/components/toast/components.tsx @@ -26,7 +26,7 @@ export function StatusVariants() { return ( <> - + - - - - -
- Bottom Positions: - - - - - -
- - - ); -} - export function AutoDismiss() { return ( <> - + - - - - -
- Bottom Positions: - - - - - -
- - - ); -}`; - export const autoDismissSnippet = `import { ToastRegion, toastQueue, Button, Flex } from '@backstage/ui'; export function Example() { return ( <> - + - - - ), -}); - -export const AllPositions = meta.story({ - render: () => { - const [currentPosition, setCurrentPosition] = useState<'top' | 'bottom'>( - 'bottom', - ); - const [currentPlacement, setCurrentPlacement] = useState< - 'start' | 'center' | 'end' - >('end'); - - const showToast = ( - position: 'top' | 'bottom', - placement: 'start' | 'center' | 'end', - ) => { - setCurrentPosition(position); - setCurrentPlacement(placement); - toastQueue.add({ - title: `${position} - ${placement}`, - description: `Toast positioned at ${position} ${placement}`, - status: 'info', - }); - }; - - return ( - <> - - -
- Top Positions: - - - - - -
-
- Bottom Positions: - - - - - -
- - - ); - }, -}); - export const AutoDismiss = meta.story({ render: () => ( <> diff --git a/packages/ui/src/components/Toast/ToastRegion.tsx b/packages/ui/src/components/Toast/ToastRegion.tsx index 75b363ffa7..7bf6c00e9f 100644 --- a/packages/ui/src/components/Toast/ToastRegion.tsx +++ b/packages/ui/src/components/Toast/ToastRegion.tsx @@ -22,11 +22,12 @@ import { ToastRegionDefinition } from './definition'; import { Toast } from './Toast'; /** - * A ToastRegion displays one or more toast notifications. + * A ToastRegion displays one or more toast notifications in the bottom-right corner. * * @remarks * The ToastRegion component should typically be placed once at the root of your application. - * It manages the display and positioning of all toast notifications added to its queue. + * It manages the display and stacking of all toast notifications added to its queue. + * Toasts appear in the bottom-right corner with deep stacking when multiple are visible. * Toast regions are ARIA landmark regions that can be navigated using F6 (forward) and * Shift+F6 (backward) for keyboard accessibility. * @@ -35,28 +36,18 @@ import { Toast } from './Toast'; * @example * Basic setup in app root: * ```tsx - * import { ToastRegion, queue } from '@backstage/ui'; + * import { ToastRegion, toastQueue } from '@backstage/ui'; * * function App() { * return ( * <> - * + * * * * ); * } * ``` * - * @example - * Custom positioning: - * ```tsx - * - * ``` - * * @public */ export const ToastRegion = forwardRef( diff --git a/packages/ui/src/components/Toast/definition.ts b/packages/ui/src/components/Toast/definition.ts index b542d6aa82..d9d45f2e9b 100644 --- a/packages/ui/src/components/Toast/definition.ts +++ b/packages/ui/src/components/Toast/definition.ts @@ -52,8 +52,6 @@ export const ToastRegionDefinition = defineComponent()({ }, propDefs: { queue: {}, - position: { dataAttribute: true, default: 'bottom' }, - placement: { dataAttribute: true, default: 'end' }, className: {}, }, }); diff --git a/packages/ui/src/components/Toast/types.ts b/packages/ui/src/components/Toast/types.ts index 5bdccc5edd..457857a86e 100644 --- a/packages/ui/src/components/Toast/types.ts +++ b/packages/ui/src/components/Toast/types.ts @@ -64,10 +64,6 @@ export interface ToastProps extends ToastOwnProps {} export type ToastRegionOwnProps = { /** Toast queue instance */ queue: RAToastQueue; - /** Position of the toast region (top or bottom) */ - position?: Responsive<'top' | 'bottom'>; - /** Horizontal placement of toasts */ - placement?: Responsive<'start' | 'center' | 'end'>; /** Custom class name */ className?: string; };