Skip to content

Commit f5076fa

Browse files
authored
docs(Toast): add note about Popover API (#6667)
1 parent 208ce92 commit f5076fa

File tree

2 files changed

+6
-0
lines changed

2 files changed

+6
-0
lines changed

packages/main/src/components/Modals/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,8 @@ function showToastFn(props: ToastPropTypes, container?: Element | DocumentFragme
226226
*
227227
* **In order to use these helpers, please make sure to render the `Modals` component somewhere in your application tree.**
228228
*
229+
* __Note:__ The `Toast` component does not currently use the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API), which may cause issues like incorrect positioning or alignment. If that's the case, please mount the `Modals` component after all other components, or define a custom container via the `container` parameter.
230+
*
229231
* @since 0.22.2
230232
*/
231233
export function Modals() {
@@ -257,4 +259,7 @@ Modals.showPopover = showPopoverFn;
257259
Modals.showResponsivePopover = showResponsivePopoverFn;
258260
Modals.showMenu = showMenuFn;
259261
Modals.showMessageBox = showMessageBoxFn;
262+
/**
263+
* __Note:__ The `Toast` component does not currently use the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API), which may cause issues like incorrect positioning or alignment. If that's the case, please mount the `Modals` component after all other components, or define a custom container via the `container` parameter.
264+
*/
260265
Modals.showToast = showToastFn;

packages/main/src/webComponents/Toast/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ interface ToastPropTypes extends ToastAttributes, Omit<CommonProps, keyof ToastA
7373
* - You want users to be able to copy some part of the message text.
7474
*
7575
*
76+
* __Note:__ The `Toast` component does not currently use the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API), which may cause issues like incorrect positioning or alignment. To avoid these side effects, we recommend mounting the `Toast` outside the parents' DOM hierarchy, either directly or by using `React.createPortal`, until the Popover API is integrated into this component as well.
7677
*
7778
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
7879
*/

0 commit comments

Comments
 (0)