refactor: update popover component structure and styles for consistency

Author: deleonio

packages/components/src/components/@shared/_popover.mixin.scss

@@ -10,27 +10,22 @@
 	}
 
 	.kol-popover {
+		opacity: 0;
+		background-color: transparent;
 		position: absolute;
-		height: 0;
+		min-width: max-content;
+		min-height: max-content;
+		margin: 0; // popover tags get a default margin from the browser, which interferes with our alignment
+		padding: 0;
+		overflow: unset;
+		border: none;
 
-		&__content {
-			opacity: 0;
-			background-color: transparent;
-			position: absolute;
-			min-width: max-content;
-			min-height: max-content;
-			margin: 0; // popover tags get a default margin from the browser, which interferes with our alignment
-			padding: 0;
-			overflow: unset;
-			border: none;
-
-			&--visible {
-				animation: 0.3s ease-in forwards fadeInOpacity;
-			}
+		&--visible {
+			animation: 0.3s ease-in forwards fadeInOpacity;
+		}
 
-			&--disappear {
-				animation: 0.3s ease-in backwards fadeInOpacity;
-			}
+		&--disappear {
+			animation: 0.3s ease-in backwards fadeInOpacity;
 		}
 
 		&__arrow {

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

@@ -247,31 +247,16 @@ export class KolPopoverButton implements PopoverButtonProps {
 	}
 
 	public componentDidRender() {
-		// Find and setup the popover element
 		if (!this.popoverElement) {
-			// The button might be a web component, so we need to find the actual DOM element
 			const buttonElement = this.refButton as HTMLElement;
-
-			// Look for the next sibling that is the popover wrapper
 			let sibling = buttonElement?.nextElementSibling;
 			while (sibling && !sibling.classList.contains('kol-popover')) {
 				sibling = sibling.nextElementSibling;
 			}
-
 			if (sibling) {
-				const popoverWrapper = sibling as HTMLElement;
-
-				// Find the content element
-				this.popoverElement = popoverWrapper.querySelector('.kol-popover__content') as HTMLDivElement;
-
-				if (this.popoverElement) {
-					this.popoverElement.addEventListener('toggle', this.handleToggle);
-
-					// Now set the wrapper as host - button should be previousElementSibling
-					this.popoverCtrl.setHostElement(popoverWrapper);
-				}
-			} else {
-				console.log('❌ kol-popover not found!');
+				this.popoverElement = sibling as HTMLDivElement;
+				this.popoverElement.addEventListener('toggle', this.handleToggle);
+				this.popoverCtrl.setHostElement(this.popoverElement);
 			}
 		}
 	}

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

@@ -7,7 +7,7 @@ test.describe('kol-split-button', () => {
 		const splitButton = page.locator('kol-split-button ');
 
 		const secondaryButton = splitButton.locator('.kol-split-button__secondary-button');
-		const popover = splitButton.locator('.kol-popover__content');
+		const popover = splitButton.locator('.kol-popover');
 
 		await expect(popover).not.toBeVisible();
 		await secondaryButton.click();

packages/components/src/internal/functional-components/popover/component.tsx

@@ -16,11 +16,9 @@ export const PopoverFC: FC<PopoverFCProps> = (props) => {
 	const { align = 'top', popoverRef, arrowRef, class: classNames } = props;
 
 	return (
-		<div class={clsx('kol-popover', classNames)}>
-			<div class="kol-popover__content" ref={popoverRef} popover="auto">
-				<div class={clsx('kol-popover__arrow', `kol-popover__arrow--${align}`)} ref={arrowRef} />
-				<slot />
-			</div>
+		<div class={clsx('kol-popover', classNames)} ref={popoverRef} popover="auto">
+			<div class={clsx('kol-popover__arrow', `kol-popover__arrow--${align}`)} ref={arrowRef} />
+			<slot />
 		</div>
 	);
 };

packages/components/src/internal/functional-components/popover/controller.ts

@@ -75,7 +75,7 @@ export class PopoverController {
 		const toggleEvent = event as ToggleEvent;
 		const isOpen = toggleEvent.newState === 'open';
 
-		this.popoverElement?.classList.toggle('kol-popover__content--visible', isOpen);
+		this.popoverElement?.classList.toggle('kol-popover--visible', isOpen);
 
 		if (isOpen) {
 			this.cleanupAutoUpdate?.();

packages/components/src/internal/functional-components/popover/popover.e2e.ts

@@ -5,7 +5,7 @@ test.describe('kol-popover', () => {
 	test('should display popover when opened and hide when closed', async ({ page }) => {
 		await page.setContent(`<kol-split-button _label="Toggle">Popover content</kol-split-button>`);
 		const splitButton = page.locator('kol-split-button');
-		const popoverElement = splitButton.locator('.kol-popover__content');
+		const popoverElement = splitButton.locator('.kol-popover');
 
 		await expect(popoverElement).not.toBeVisible();
 		await splitButton.locator('.kol-split-button__secondary-button').click();
@@ -21,10 +21,10 @@ test.describe('kol-popover', () => {
 			const splitButton = page.locator('kol-split-button');
 
 			await splitButton.locator('.kol-split-button__secondary-button').click();
-			await expect(splitButton.locator('.kol-popover__content')).toBeVisible();
+			await expect(splitButton.locator('.kol-popover')).toBeVisible();
 
 			await page.keyboard.press('Escape');
-			await expect(splitButton.locator('.kol-popover__content')).not.toBeVisible();
+			await expect(splitButton.locator('.kol-popover')).not.toBeVisible();
 		});
 	});