fix(dialog): prevent scroll to top when opened as Modal (VIV-2248) (#…

…2069)
Vonage · Jan 2, 2025 · 8543e65 · 8543e65
1 parent 5fb9b52
commit 8543e65
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 21 deletions.
diff --git a/libs/components/src/lib/dialog/VARIATIONS.md b/libs/components/src/lib/dialog/VARIATIONS.md
@@ -30,19 +30,35 @@ To add custom icons or to postfix icons, use the [graphic slot](/components/dial
 The `icon-placement` attribute specifies where the dialog's icon should appear (relative to the headline).
 
 ```html preview 290px
-<vwc-dialog
-	icon-placement="side"
-	icon="info"
-	headline="Side Icon Placemnet"
-	subtitle="side is default"
-	open
-></vwc-dialog>
-<br />
-<vwc-dialog
-	icon-placement="top"
-	icon="info"
-	headline="Top Icon Placemnet"
-	subtitle="top is another option"
-	open
-></vwc-dialog>
+<div class="wrapper">
+	<div class="item">
+		<vwc-dialog
+			icon-placement="side"
+			icon="info"
+			headline="Side Icon Placemnet"
+			subtitle="side is default"
+			open
+		></vwc-dialog>
+	</div>
+	<div class="item">
+		<vwc-dialog
+			icon-placement="top"
+			icon="info"
+			headline="Top Icon Placemnet"
+			subtitle="top is another option"
+			open
+		></vwc-dialog>
+	</div>
+</div>
+
+<style>
+	.wrapper {
+		display: flex;
+	}
+	.item {
+		block-size: 280px;
+		position: relative;
+		flex: 1;
+	}
+</style>
 ```
diff --git a/libs/components/src/lib/dialog/dialog.scss b/libs/components/src/lib/dialog/dialog.scss
@@ -40,8 +40,6 @@ $dialog-space-size: 24px;
 	}
 
 	&.modal {
-		position: fixed;
-
 		// reason for box-shadow & hardcoded color - PR-1098
 		box-shadow: 0 4px 20px rgb(0 0 0 / 35%);
 		&::backdrop {

diff --git a/libs/components/src/lib/dialog/dialog.template.ts b/libs/components/src/lib/dialog/dialog.template.ts
@@ -56,7 +56,7 @@ export const DialogTemplate = (context: VividElementDefinitionContext) => {
 	const buttonTag = context.tagFor(Button);
 
 	return html<Dialog>`
-	<${elevationTag} dp="8">
+	<${elevationTag} dp="8" not-relative>
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => x._onKeyDown(c.event as KeyboardEvent)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"

diff --git a/libs/components/src/lib/elevation/README.md b/libs/components/src/lib/elevation/README.md
@@ -76,3 +76,12 @@ Use the `dp` attribute to change the elevation's level in Density-Independent Pi
 	<div class="card">This is the content inside the elevation with DP 24</div>
 </vwc-elevation>
 ```
+
+### No Shadow
+
+Use the no-shadow attribute to toggle off the elevation's drop shadow.
+
+### Not Relative
+
+When there's no need for `position:relative` set on the slotted content. Used in Dialog - caused issues with positioning and scroll to top.  
+This is for use only if the slotted content contain position absolute or fixed. Otherwise, the `:before` element will be mispositioned.
diff --git a/libs/components/src/lib/elevation/elevation.scss b/libs/components/src/lib/elevation/elevation.scss
@@ -18,7 +18,6 @@ $dps: 0 2 4 8 12 16 24;
 	}
 
 	::slotted(*) {
-		position: relative;
 		isolation: isolate;
 
 		&::before {
@@ -38,6 +37,12 @@ $dps: 0 2 4 8 12 16 24;
 		}
 	}
 
+	&:not(.not-relative) {
+		::slotted(*) {
+			position: relative;
+		}
+	}
+
 	&.no-shadow {
 		::slotted(*) {
 			&::before {

diff --git a/libs/components/src/lib/elevation/elevation.spec.ts b/libs/components/src/lib/elevation/elevation.spec.ts
@@ -64,6 +64,22 @@ describe('vwc-elevation', () => {
 		expect(Boolean(element.shadowRoot?.querySelector('slot'))).toEqual(true);
 	});
 
+	describe('no position', () => {
+		it('should add class .not-relative to .base if no-position attribute is added o host', async () => {
+			element.notRelative = true;
+			await elementUpdated(element);
+			expect(getControlElement(element).classList.contains('.not-relative'));
+		});
+	});
+
+	describe('no shadow', () => {
+		it('should add class .no-shadow to .base if no-shadow attribute is added o host', async () => {
+			element.notRelative = true;
+			await elementUpdated(element);
+			expect(getControlElement(element).classList.contains('.no-shadow'));
+		});
+	});
+
 	describe('a11y', () => {
 		it('should pass html a11y test', async () => {
 			expect(await axe(element)).toHaveNoViolations();

diff --git a/libs/components/src/lib/elevation/elevation.template.ts b/libs/components/src/lib/elevation/elevation.template.ts
@@ -2,11 +2,12 @@ import { html } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { Elevation } from './elevation';
 
-const getClasses = ({ dp, noShadow }: Elevation) =>
+const getClasses = ({ dp, noShadow, notRelative }: Elevation) =>
 	classNames(
 		'control',
 		[`dp-${dp}`, Boolean(dp)],
-		['no-shadow', Boolean(noShadow)]
+		['no-shadow', Boolean(noShadow)],
+		['not-relative', Boolean(notRelative)]
 	);
 
 export const elevationTemplate = html<Elevation>` <div

diff --git a/libs/components/src/lib/elevation/elevation.ts b/libs/components/src/lib/elevation/elevation.ts
@@ -21,4 +21,5 @@ export class Elevation extends VividElement {
 	 * HTML Attribute: boolean
 	 */
 	@attr({ attribute: 'no-shadow', mode: 'boolean' }) noShadow?: boolean;
+	@attr({ attribute: 'not-relative', mode: 'boolean' }) notRelative?: boolean;
 }