8714 add show prop to popover-button

packages/components/src/components/popover-button/component.tsx

@@ -52,13 +52,20 @@ export class KolPopoverButton implements PopoverButtonProps {
 		void this.refPopover?.hidePopover();
 	}
 
+	/**
+	 * Show the popover programmatically by calling the native showPopover method.
+	 */
+	@Method()
+	// eslint-disable-next-line @typescript-eslint/require-await
+	public async showPopover() {
+		void this.refPopover?.showPopover();
+	}
+
 	/**
 	 * Sets focus on the internal element.
 	 */
 	@Method()
 	public async kolFocus() {
-		// eslint-disable-next-line no-console
-		console.log('Focusing popover button', this.refButton);
 		await this.refButton?.kolFocus();
 	}
 
@@ -246,6 +253,11 @@ export class KolPopoverButton implements PopoverButtonProps {
 	 */
 	@Prop() public _shortKey?: ShortKeyPropType;
 
+	/**
+	 * Defines whether the popover is shown.
+	 */
+	@Prop() public _show?: boolean = false;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -277,11 +289,26 @@ export class KolPopoverButton implements PopoverButtonProps {
 	 */
 	@Prop() public _variant?: ButtonVariantPropType = 'normal';
 
+	@Watch('_show')
+	public validateShow(value?: boolean): void {
+		if (value && this.refPopover && !this.popoverOpen) {
+			this.refPopover.showPopover();
+		} else if (!value && this.refPopover && this.popoverOpen) {
+			this.refPopover.hidePopover();
+		}
+	}
+
 	@Watch('_popoverAlign')
 	public validatePopoverAlign(value?: PopoverAlignPropType): void {
 		validatePopoverAlign(this, value);
 	}
 
+	public componentDidLoad() {
+		if (this._show && this.refPopover) {
+			this.refPopover?.showPopover();
+		}
+	}
+
 	public componentWillLoad() {
 		this.validatePopoverAlign(this._popoverAlign);
 	}

packages/components/src/components/popover-button/popover-button.e2e.ts

@@ -53,4 +53,15 @@ test.describe('kol-popover-button', () => {
 		await button.click();
 		await expect(tooltip).not.toBeVisible();
 	});
+
+	test('should be open initially when the _show prop is set to true', async ({ page }) => {
+		await page.setContent(`
+			<kol-popover-button _show _label="Toggle popover">
+				Popover content
+			</kol-popover-button>
+		`);
+
+		const popover = page.getByTestId('popover-content');
+		await expect(popover).toBeVisible();
+	});
 });

packages/components/src/components/popover-button/shadow.tsx

@@ -41,6 +41,15 @@ export class KolPopoverButton implements PopoverButtonProps {
 		void this.ref?.hidePopover();
 	}
 
+	/**
+	 * Shows the popover programmatically by forwarding the call to the web component.
+	 */
+	@Method()
+	// eslint-disable-next-line @typescript-eslint/require-await
+	public async showPopover() {
+		void this.ref?.showPopover();
+	}
+
 	private catchRef = (ref?: HTMLKolPopoverButtonWcElement) => {
 		this.ref = ref;
 	};
@@ -69,6 +78,7 @@ export class KolPopoverButton implements PopoverButtonProps {
 				_label={this._label}
 				_name={this._name}
 				_on={this._on}
+				_show={this._show}
 				_popoverAlign={this._popoverAlign}
 				_shortKey={this._shortKey}
 				_syncValueBySelector={this._syncValueBySelector}
@@ -164,6 +174,11 @@ export class KolPopoverButton implements PopoverButtonProps {
 	 */
 	@Prop() public _shortKey?: ShortKeyPropType;
 
+	/**
+	 * Defines whether the popover is shown.
+	 */
+	@Prop() public _show?: boolean;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal

packages/components/src/schema/components/popover-button.ts

@@ -3,7 +3,10 @@ import type { PropLabelWithExpertSlot, PropPopoverAlign } from '../props';
 import type { OptionalButtonProps, RequiredButtonProps } from './button';
 
 export type RequiredPopoverButtonProps = RequiredButtonProps;
-export type OptionalPopoverButtonProps = OptionalButtonProps & PropPopoverAlign;
+export type OptionalPopoverButtonProps = OptionalButtonProps &
+	PropPopoverAlign & {
+		show: boolean;
+	};
 
 export type RequiredPopoverButtonStates = PropLabelWithExpertSlot;
 export type OptionalPopoverButtonStates = PropPopoverAlign;

packages/samples/react/src/components/popover-button/basic.tsx

@@ -1,23 +1,13 @@
 import { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
 
 export const PopoverButtonBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
 	const buttonRef = React.useRef<HTMLKolPopoverButtonElement>(null);
 
-	useEffect(() => {
-		const run = async () => {
-			await buttonRef.current?.kolFocus();
-			if (buttonRef.current instanceof HTMLButtonElement) {
-				buttonRef.current.click();
-			}
-		};
-		run();
-	}, []);
-
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};
@@ -49,7 +39,7 @@ export const PopoverButtonBasic: FC = () => {
 				</p>
 			</SampleDescription>
 			<div className="flex flex-col gap-4">
-				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }} ref={buttonRef}>
+				<KolPopoverButton _show _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }} ref={buttonRef}>
 					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
 				</KolPopoverButton>
 				<KolPopoverButton _label="Help" _icons="codicon codicon-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>