8714 add show prop to popover-button

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

@@ -19,7 +19,7 @@ import type {
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { validatePopoverAlign } from '../../schema';
+import { validatePopoverAlign, validateShow } from '../../schema';
 import type { PopoverButtonProps, PopoverButtonStates } from '../../schema/components/popover-button';
 import { alignFloatingElements } from '../../utils/align-floating-elements';
 
@@ -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;
 
+	/**
+	 * Makes the element show up.
+	 */
+	@Prop() public _show?: boolean = false;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -282,6 +294,19 @@ export class KolPopoverButton implements PopoverButtonProps {
 		validatePopoverAlign(this, value);
 	}
 
+	@Watch('_show')
+	public validateShow(value?: boolean): void {
+		validateShow(this, value);
+	}
+
+	public componentDidLoad() {
+		if (this._show) {
+			void this.showPopover();
+		} else {
+			void this.hidePopover();
+		}
+	}
+
 	public componentWillLoad() {
 		this.validatePopoverAlign(this._popoverAlign);
 	}

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

@@ -53,4 +53,37 @@ 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();
+	});
+
+	test('should be closed initially when the _show prop is set to false', async ({ page }) => {
+		await page.setContent(`
+			<kol-popover-button _show="false" _label="Toggle popover">
+				Popover content
+			</kol-popover-button>
+		`);
+
+		const popover = page.getByTestId('popover-content');
+		await expect(popover).not.toBeVisible();
+	});
+
+	test('should be closed initially when the _show prop is not set', async ({ page }) => {
+		await page.setContent(`
+			<kol-popover-button _label="Toggle popover">
+				Popover content
+			</kol-popover-button>
+		`);
+
+		const popover = page.getByTestId('popover-content');
+		await expect(popover).not.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;
 	};
@@ -71,6 +80,7 @@ export class KolPopoverButton implements PopoverButtonProps {
 				_on={this._on}
 				_popoverAlign={this._popoverAlign}
 				_shortKey={this._shortKey}
+				_show={this._show}
 				_syncValueBySelector={this._syncValueBySelector}
 				_tabIndex={this._tabIndex}
 				_tooltipAlign={this._tooltipAlign}
@@ -164,6 +174,11 @@ export class KolPopoverButton implements PopoverButtonProps {
 	 */
 	@Prop() public _shortKey?: ShortKeyPropType;
 
+	/**
+	 * Makes the element show up.
+	 */
+	@Prop() public _show?: boolean;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal

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

@@ -1,9 +1,9 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropLabelWithExpertSlot, PropPopoverAlign } from '../props';
+import type { PropLabelWithExpertSlot, PropPopoverAlign, PropShow } from '../props';
 import type { OptionalButtonProps, RequiredButtonProps } from './button';
 
 export type RequiredPopoverButtonProps = RequiredButtonProps;
-export type OptionalPopoverButtonProps = OptionalButtonProps & PropPopoverAlign;
+export type OptionalPopoverButtonProps = OptionalButtonProps & PropPopoverAlign & PropShow;
 
 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>

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', {