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 }) => (