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

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;
 	};

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

@@ -8,16 +8,6 @@ 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,
 	};
@@ -40,6 +30,14 @@ export const PopoverButtonBasic: FC = () => {
 		},
 	];
 
+	useEffect(() => {
+		// Ensure the popover is closed on initial render
+		if (buttonRef.current) {
+			buttonRef.current.showPopover();
+			buttonRef.current.kolFocus();
+		}
+	}, []);
+
 	return (
 		<>
 			<SampleDescription>

packages/tools/visual-tests/tests/sample-app.routes.js

@@ -584,6 +584,10 @@ ROUTES.set('popover-button/basic', {
 		zoom: {
 			skip: true,
 		},
+		viewportSize: {
+			width: 200,
+			height: 220,
+		}
 	},
 });
 ROUTES.set('progress/basic', {