refactor: improve RiPopover API with trigger and className props for better extensibility

Refactor RiPopover to add optional trigger and className props while maintaining backwards compatibility. React elements in trigger render directly without span wrapper for styled-components support.

Author: pd-redis

redisinsight/ui/src/components/base/popover/RiPopover.tsx

@@ -11,34 +11,68 @@ export const RiPopover = ({
   children,
   ownFocus,
   button,
+  trigger,
   anchorPosition,
   panelPaddingSize,
   anchorClassName,
   panelClassName,
+  className,
   maxWidth = '100%',
   ...props
-}: RiPopoverProps) => (
-  <Popover
-    {...props}
-    open={isOpen}
-    onClickOutside={closePopover}
-    onKeyDown={(event) => {
-      // Close on escape press
-      if (event.key === keys.ESCAPE) {
-        closePopover?.(event as any)
-      }
-    }}
-    content={children}
-    // Props passed to the children wrapper:
-    className={panelClassName}
-    maxWidth={maxWidth}
-    style={{
-      padding: panelPaddingSize && panelPaddingSizeMap[panelPaddingSize],
-    }}
-    autoFocus={ownFocus}
-    placement={anchorPosition && anchorPositionMap[anchorPosition]?.placement}
-    align={anchorPosition && anchorPositionMap[anchorPosition]?.align}
-  >
-    <span className={anchorClassName}>{button}</span>
-  </Popover>
-)
+}: RiPopoverProps) => {
+  // Warn if both button and trigger are provided
+  if (button !== undefined && trigger !== undefined) {
+    console.warn(
+      "RiPopover: Both 'button' and 'trigger' props are provided. Using 'trigger'. Please migrate to 'trigger' prop.",
+    )
+  }
+
+  // Warn if both panelClassName and className are provided
+  if (panelClassName !== undefined && className !== undefined) {
+    console.warn(
+      "RiPopover: Both 'panelClassName' and 'className' props are provided. Using 'className'. Please migrate to 'className' prop.",
+    )
+  }
+
+  // Determine which trigger to use
+  const activeTrigger = trigger ?? button
+
+  // Determine which className to use
+  const activeClassName = className ?? panelClassName
+
+  // Render trigger element
+  // For new API (trigger): React elements render directly, scalars wrap in span
+  // For old API (button): Always wrap in span (backwards compatibility)
+  const triggerElement =
+    trigger !== undefined && React.isValidElement(activeTrigger) ? (
+      activeTrigger
+    ) : (
+      <span className={anchorClassName}>{activeTrigger}</span>
+    )
+
+  return (
+    <Popover
+      {...props}
+      open={isOpen}
+      onClickOutside={closePopover}
+      onKeyDown={(event) => {
+        // Close on escape press
+        if (event.key === keys.ESCAPE) {
+          closePopover?.(event as any)
+        }
+      }}
+      content={children}
+      // Props passed to the children wrapper:
+      className={activeClassName}
+      maxWidth={maxWidth}
+      style={{
+        padding: panelPaddingSize && panelPaddingSizeMap[panelPaddingSize],
+      }}
+      autoFocus={ownFocus}
+      placement={anchorPosition && anchorPositionMap[anchorPosition]?.placement}
+      align={anchorPosition && anchorPositionMap[anchorPosition]?.align}
+    >
+      {triggerElement}
+    </Popover>
+  )
+}

redisinsight/ui/src/components/base/popover/types.ts

@@ -1,6 +1,7 @@
 import { type PopoverProps } from '@redis-ui/components'
 
 import { anchorPositionMap, panelPaddingSizeMap } from './config'
+import { ReactNode } from 'react'
 
 type AnchorPosition = keyof typeof anchorPositionMap
 
@@ -19,10 +20,16 @@ export type RiPopoverProps = Omit<
   isOpen?: PopoverProps['open']
   closePopover?: PopoverProps['onClickOutside']
   ownFocus?: PopoverProps['autoFocus']
-  button: PopoverProps['content']
+  /* @deprecated old prop for popover trigger element, use trigger */
+  button?: PopoverProps['content']
+  /* preferred prop for popover trigger element (optional) */
+  trigger?: ReactNode
   anchorPosition?: AnchorPosition
   panelPaddingSize?: PanelPaddingSize
   anchorClassName?: string
+  /* @deprecated - use @see{className} - this is popover content wrapper class name */
   panelClassName?: string
+  // new preferred prop for popover content wrapper class name (optional)
+  className?: string
   'data-testid'?: string
 }