diff --git a/docs/docs/notification-center/web-component.md b/docs/docs/notification-center/web-component.md
index 5ea7b018bfa..fadebf674cd 100644
--- a/docs/docs/notification-center/web-component.md
+++ b/docs/docs/notification-center/web-component.md
@@ -84,6 +84,7 @@ If you are using TypeScript, then you might want to check the `NotificationCente
| `showUserPreferences` | `boolean` | The flag indicating whether the user preference settings should be visible or not. |
| `allowedNotificationActions` | `boolean` | The flag indicating whether to show/hide the dots menu for actions performed on a notification. |
| `popoverConfig` | `object` | The object defining how the popover should be positioned. It's properties are position and offset. |
+| ~~`popover`~~ | `object` | The object defining how the popover should be positioned. It's properties are position and offset. popover is deprecated, use popoverConfig instead. |
| `theme` | `object` | The object defining the the light/dark styles of the Notification Center component, more info [here](./react/react-components#customizing-the-notification-center-theme). We discourage you to use this prop to do the styling, instead it's recommended to use the `styles` property. |
| `styles` | `object` | The object allows you to define the custom CSS code. Check the details [here](./custom-styling). |
| `colorScheme` | `string` | The prop defining which color version of the styles the component should set. The options are `light` and `dark`. |
diff --git a/packages/notification-center-angular/projects/notification-center-angular/src/lib/notification-center.component.ts b/packages/notification-center-angular/projects/notification-center-angular/src/lib/notification-center.component.ts
index 99561eb3985..1d0824384ac 100644
--- a/packages/notification-center-angular/projects/notification-center-angular/src/lib/notification-center.component.ts
+++ b/packages/notification-center-angular/projects/notification-center-angular/src/lib/notification-center.component.ts
@@ -15,6 +15,7 @@ customElements.define('notification-center-web-component', NotificationCenterWeb
[tabs]="tabs"
[showUserPreferences]="showUserPreferences"
[allowedNotificationActions]="allowedNotificationActions"
+ [popover]="popover"
[popoverConfig]="popoverConfig"
[theme]="theme"
[styles]="styles"
@@ -36,6 +37,7 @@ customElements.define('notification-center-web-component', NotificationCenterWeb
'tabs',
'showUserPreferences',
'allowedNotificationActions',
+ 'popover',
'popoverConfig',
'theme',
'styles',
@@ -58,6 +60,10 @@ export class NotificationCenterComponent {
@Input() tabs: NotificationCenterComponentProps['tabs'];
@Input() showUserPreferences: NotificationCenterComponentProps['showUserPreferences'];
@Input() allowedNotificationActions: NotificationCenterComponentProps['allowedNotificationActions'];
+ /**
+ * @deprecated Use popoverConfig instead
+ */
+ @Input() popover: NotificationCenterComponentProps['popover'];
@Input() popoverConfig: NotificationCenterComponentProps['popoverConfig'];
@Input() theme: NotificationCenterComponentProps['theme'];
@Input() styles: NotificationCenterComponentProps['styles'];
diff --git a/packages/notification-center-vue/src/lib/notification-center-component/NotificationCenterComponent.vue b/packages/notification-center-vue/src/lib/notification-center-component/NotificationCenterComponent.vue
index a65ff553ced..e4ec2109fe9 100644
--- a/packages/notification-center-vue/src/lib/notification-center-component/NotificationCenterComponent.vue
+++ b/packages/notification-center-vue/src/lib/notification-center-component/NotificationCenterComponent.vue
@@ -18,6 +18,13 @@ export interface INotificationCenterComponentProps {
tabs?: NotificationCenterContentComponentProps['tabs'];
showUserPreferences?: NotificationCenterContentComponentProps['showUserPreferences'];
allowedNotificationActions?: NotificationCenterContentComponentProps['allowedNotificationActions'];
+ /**
+ * @deprecated Use popoverConfig instead
+ */
+ popover?: {
+ offset?: number;
+ position?: FloatingPosition;
+ };
popoverConfig?: {
offset?: number;
position?: FloatingPosition;
@@ -85,8 +92,8 @@ watch(computedStyles, (newComputedStyles) => {
@@ -103,6 +106,7 @@ function PopoverWrapper({
tabs,
showUserPreferences,
allowedNotificationActions,
+ popover,
popoverConfig,
unseenBadgeColor,
unseenBadgeBackgroundColor,
@@ -125,8 +129,8 @@ function PopoverWrapper({
tabs={tabs}
showUserPreferences={showUserPreferences}
allowedNotificationActions={allowedNotificationActions}
- offset={popoverConfig?.offset}
- position={popoverConfig?.position}
+ offset={popoverConfig?.offset || popover?.offset}
+ position={popoverConfig?.position || popover?.position}
>
{({ unseenCount }) => (