fix(popup): update css for absolute and fixed (VIV-1137) (#1400)

Vonage · Jun 22, 2023 · 5b9171f · 5b9171f
1 parent 83025db
commit 5b9171f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git a/__snapshots__/popup.md b/__snapshots__/popup.md
@@ -4,7 +4,7 @@
 
 ```html
 <vwc-elevation dp="2">
-  <div class="popup-wrapper">
+  <div class="fixed popup-wrapper">
     <div
       aria-hidden="true"
       class="popup"

diff --git a/components/popup/src/vwc-popup-base.ts b/components/popup/src/vwc-popup-base.ts
@@ -205,7 +205,7 @@ export class VWCPopupBase extends LitElement {
 									<!-- 'popup-wrapper' is selected by the wrapping elevation, thus required for shadow styling -->
 									<!-- the reason for not applying directly to its first-child 'popup' is to avoid scenario where popup is set to alternate scheme
 												and affect the shadow style surfacing contrast which should still in default scheme context -->
-									<div class="popup-wrapper">
+									<div class="popup-wrapper ${this.strategy}">
                     <div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${alternate}>
                         <div class="popup-content" >
                             <slot></slot>
@@ -219,3 +219,4 @@ export class VWCPopupBase extends LitElement {
 		`;
     }
 }
+
diff --git a/components/popup/src/vwc-popup.scss b/components/popup/src/vwc-popup.scss
@@ -17,8 +17,14 @@
 	}
 
 	&-wrapper {
-		position: absolute;
 		border-radius: 6px;
+
+		&:not(.absolute) {
+			position: fixed;
+		}
+		&.absolute {
+			position: absolute;
+		}
 	}
 
 	&-content {

diff --git a/components/popup/test/popup.test.js b/components/popup/test/popup.test.js
@@ -174,4 +174,23 @@ describe('popup', () => {
 			expect(updatePositionCallCount).to.equal(0);
 		});
 	});
+
+	describe('strategy',  () => {
+		it('should set fixed class as default strategy', async () => {
+			const [popupElement] = addElement(
+				textToDomToParent(`<${COMPONENT_NAME} open></${COMPONENT_NAME}>`)
+			);
+			await popupElement.updateComplete;
+			expect(popupElement.shadowRoot.querySelector('.popup-wrapper').classList.contains('fixed')).to.eq(true);
+		});
+
+		it('should set absolute class as  strategy absolut is set', async () => {
+			const [popupElement] = addElement(
+				textToDomToParent(`<${COMPONENT_NAME} open></${COMPONENT_NAME}>`)
+			);
+			popupElement.strategy = 'absolute';
+			await popupElement.updateComplete;
+			expect(popupElement.shadowRoot.querySelector('.popup-wrapper').classList.contains('absolute')).to.eq(true);
+		});
+	});
 });