{
key: K
- header: ReactNode
+ header: string | LemonButtonProps
content: ReactNode
dataAttr?: string
className?: string
@@ -120,21 +120,28 @@ function LemonCollapsePanel({
}: LemonCollapsePanelProps): JSX.Element {
const { height: contentHeight, ref: contentRef } = useResizeObserver({ box: 'border-box' })
+ const headerProps: LemonButtonProps = React.isValidElement(header)
+ ? { children: header }
+ : typeof header === 'string'
+ ? { children: header }
+ : header ?? {}
+
return (
{content ? (
{
+ {...headerProps}
+ fullWidth
+ className="LemonCollapsePanel__header"
+ onClick={(e) => {
onHeaderClick && onHeaderClick()
onChange(!isExpanded)
+ headerProps.onClick?.(e)
}}
icon={isExpanded ? : }
- className="LemonCollapsePanel__header"
{...(dataAttr ? { 'data-attr': dataAttr } : {})}
size={size}
- >
- {header}
-
+ />
) : (
Product features breakdown:
({
header: (