Merge pull request #3752 from novuhq/fix/mark-popover-deprecate

fix: mark popover as deprecated
novuhq · Jul 10, 2023 · abe1e94 · abe1e94
1 parent 2ad9048
commit abe1e94
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 4 deletions.
diff --git 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/...ter-angular/projects/notification-center-angular/src/lib/notification-center.component.ts b/...ter-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/...fication-center-vue/src/lib/notification-center-component/NotificationCenterComponent.vue b/...fication-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) => {
   <VDropdown
     :theme="colorScheme"
     :popperClass="computedStyles.popoverDropdownClass"
-    :placement="popoverConfig?.position"
-    :distance="popoverConfig?.offset"
+    :placement="popoverConfig?.position || popover?.position"
+    :distance="popoverConfig?.offset || popover?.offset"
     :triggers="['click', 'touch']"
     eager-mount
     ref="popper"

diff --git a/...center/src/components/notification-center-web-component/notification-center-component.tsx b/...center/src/components/notification-center-web-component/notification-center-component.tsx
@@ -22,6 +22,7 @@ export const NOTIFICATION_CENTER_PROPS = [
   'tabs',
   'showUserPreferences',
   'allowedNotificationActions',
+  'popover',
   'popoverConfig',
   'theme',
   'styles',
@@ -49,6 +50,7 @@ export const NotificationCenterComponent: FunctionComponent<NotificationCenterCo
   tabs,
   showUserPreferences,
   allowedNotificationActions,
+  popover,
   popoverConfig,
   theme,
   styles,
@@ -87,6 +89,7 @@ export const NotificationCenterComponent: FunctionComponent<NotificationCenterCo
         tabs={tabs}
         showUserPreferences={showUserPreferences}
         allowedNotificationActions={allowedNotificationActions}
+        popover={popover}
         popoverConfig={popoverConfig}
       />
     </NovuProvider>
@@ -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 }) => (
         <NotificationBell

diff --git a/...r/src/components/notification-center-web-component/notification-center-component.types.ts b/...r/src/components/notification-center-web-component/notification-center-component.types.ts
@@ -41,6 +41,14 @@ type SelectedPopoverProps = Pick<
     offset?: IPopoverNotificationCenterProps['offset'];
     position?: IPopoverNotificationCenterProps['position'];
   };
+} & {
+  /**
+   * @deprecated Use popoverConfig instead
+   */
+  popover?: {
+    offset?: IPopoverNotificationCenterProps['offset'];
+    position?: IPopoverNotificationCenterProps['position'];
+  };
 };
 type PopoverProps = SelectedPopoverProps & {
   onNotificationClick?: IPopoverNotificationCenterProps['onNotificationClick'];

diff --git a/packages/notification-center/tsconfig.json b/packages/notification-center/tsconfig.json
@@ -12,6 +12,7 @@
     "declaration": false,
     "declarationMap": false,
     "sourceMap": true,
+    "removeComments": false,
     "outDir": "dist",
     "baseUrl": "."
   },