facelift

Vonage · Feb 3, 2023 · 352cba0 · 352cba0
1 parent d0fa82b
commit 352cba0
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 64 deletions.
diff --git a/libs/components/src/lib/popup/popup.template.ts b/libs/components/src/lib/popup/popup.template.ts
@@ -1,19 +1,18 @@
-import { html, ref, when } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
+import { html } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { Elevation } from '../elevation/elevation';
-import { Button } from '../button/button';
+// import { Button } from '../button/button';
 import type { Popup } from './popup';
 
-const getClasses = ({
-	_open: open, dismissible, alternate
-}: Popup) => classNames(
-	'control',
-	['open', Boolean(open)],
-	['dismissible', Boolean(dismissible)],
-	['alternate', Boolean(alternate)]
-);
+// const getClasses = ({
+// 	_open: open, dismissible, alternate
+// }: Popup) => classNames(
+// 	'control',
+// 	['open', Boolean(open)],
+// 	['dismissible', Boolean(dismissible)],
+// 	['alternate', Boolean(alternate)]
+// );
 
 /**
  * The template for the {@link @vonage/vivid#Popup} component.
@@ -27,21 +26,9 @@ export const popupTemplate: (
 	definition: FoundationElementDefinition
 ) => ViewTemplate<Popup> = (context: ElementDefinitionContext) => {
 	const elevationTag = context.tagFor(Elevation);
-	const buttonTag = context.tagFor(Button);
+	// const buttonTag = context.tagFor(Button);
 
-	return html`
-	<${elevationTag}>
-		<div class="popup-wrapper ${(x) => x.strategy}" ${ref('popupEl')}>
-			<div class="${getClasses}" aria-hidden="${(x) => x._open ? 'false' : 'true'}"
-				part="${(x) => x.alternate ? 'vvd-theme-alternate' : ''}">
-				<div class="popup-content">
-					<slot></slot>
-					${when(x => x.dismissible,
-					html<Popup>`<${buttonTag} size="condensed" @click="${x => (x.hidePopover())}" class="dismissible-button"
-							icon="close-small-solid" shape="pill"></${buttonTag}>`)}
-				</div>
-				${when(x => x.arrow, html<Popup>`<div class="arrow" ${ref('arrowEl')}></div>`)}
-			</div>
-		</div>
-	</${elevationTag}>`;
+	return html`<${elevationTag}></${elevationTag}>`;
 };
+
+
diff --git a/libs/components/src/lib/popup/popup.ts b/libs/components/src/lib/popup/popup.ts
@@ -1,6 +1,6 @@
 import { attr, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { arrow, autoUpdate, computePosition, flip, hide, inline, offset } from '@floating-ui/dom';
+import { arrow, computePosition, flip, hide, inline, offset } from '@floating-ui/dom';
 import type { Placement, Strategy } from '@floating-ui/dom';
 
 /**
@@ -91,30 +91,46 @@ export class Popup extends FoundationElement {
 	 */
 	@attr anchor!: string | HTMLElement;
 
+	/**
+	 * Whether the popup is open by default
+	 *
+	 * @public
+	 * HTML Attribute: defaultopen
+	 */
+	@attr defaultopen!: string | HTMLElement;
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		if (this.defaultopen) {
+			console.log('defaultopen');
+			// this.showPopover();
+		}
+	}
+
 	override disconnectedCallback(): void {
 		super.disconnectedCallback();
 		this.#cleanup?.();
 	}
 
-	override attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
-		super.attributeChangedCallback(name, oldValue, newValue);
-		switch (name) {
-			case 'anchor': {
-				this.anchorEl = this.#getAnchor();
-				break;
-			}
-			case 'open': {
-				this._open ? this.showPopover() : this.hidePopover();
-				break;
-			}
-		}
-		if (this.anchorEl && this.popupEl) {
-			this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
-		}
-		else {
-			this.#cleanup?.();
-		}
-	}
+	// override attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+	// 	super.attributeChangedCallback(name, oldValue, newValue);
+	// 	switch (name) {
+	// 		case 'anchor': {
+	// 			this.anchorEl = this.#getAnchor();
+	// 			break;
+	// 		}
+	// 		case 'open': {
+	// 			this._open ? this.showPopover() : this.hidePopover();
+	// 			break;
+	// 		}
+	// 	}
+	// 	if (this.anchorEl && this.popupEl) {
+	// 		this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
+	// 	}
+	// 	else {
+	// 		this.#cleanup?.();
+	// 	}
+	// }
 
 	/**
 	 * Updates popup's position
@@ -160,21 +176,21 @@ export class Popup extends FoundationElement {
 	/**
 	 * Gets the anchor element by id
 	 */
-	#getAnchor(): HTMLElement | null {
-		return this.anchor instanceof HTMLElement ? this.anchor : document.getElementById(this.anchor);
-	}
-
-	override showPopover(): void {
-		if (!this.classList.contains(':open')) {
-			super.showPopover();
-		}
-		this._open = this.classList.contains(':open');
-	}
-
-	override hidePopover(): void {
-		if (this.classList.contains(':open')) {
-			super.hidePopover();
-		}
-		this._open = this.classList.contains(':open');
-	}
+	// #getAnchor(): HTMLElement | null {
+	// 	return this.anchor instanceof HTMLElement ? this.anchor : document.getElementById(this.anchor);
+	// }
+
+	// override showPopover(): void {
+	// 	if (!this.classList.contains(':open')) {
+	// 		super.showPopover();
+	// 	}
+	// 	this._open = this.classList.contains(':open');
+	// }
+
+	// override hidePopover(): void {
+	// 	if (this.classList.contains(':open')) {
+	// 		super.hidePopover();
+	// 	}
+	// 	this._open = this.classList.contains(':open');
+	// }
 }