SWED-2339 add transition horizontal + prevent scroll

src/App/components/Dialog/index.js

@@ -3,7 +3,8 @@ import PropTypes from "prop-types";
 
 const Dialog = ({ diaId, diaHeader, children }) => (
 	<>
-		<div
+	{/* TODO: legacy code for div.dialog should be removed when merge the code. So far keep it so it's easier to test the CSS & JS for silent support of the old div.dialog */}
+		{/* <div
 			className="dialog"
 			id={diaId}
 			role="dialog"
@@ -36,7 +37,43 @@ const Dialog = ({ diaId, diaHeader, children }) => (
 					{"\n"}
 				</footer>
 			</section>
-		</div>
+		</div> */}
+
+		<dialog
+			id={diaId}
+			aria-modal="true"
+			aria-labelledby="aria-label-dia"
+			aria-describedby="aria-describe-dia"
+		>
+			{"\n"}
+			<header>
+				{"\n"}
+				<h4>{diaHeader}</h4>
+				{"\n"}
+				<button
+					type="button"
+					className="dialog-close"
+					aria-label="Close dialog"
+					data-dialog-close
+				></button>
+				{"\n"}
+			</header>
+			{"\n"}
+			<div className="dialog-body">{children}</div>
+			{"\n"}
+			<footer>
+				{"\n"}
+				<button className="btn btn-secondary" type="button" data-dialog-close>
+					Cancel
+				</button>
+				{"\n"}
+				<button className="btn btn-primary" type="button">
+					Delete
+				</button>
+				{"\n"}
+			</footer>
+			{"\n"}
+		</dialog>
 	</>
 );
 

src/less/components/dialog.less

@@ -129,18 +129,14 @@ dialog {
 			justify-content: flex-end;
 			border-radius: 0 0 20px 20px;
 
-			// TODO: should it be fixed in cards level or directly in buttons styleheet, btn-secondary should it always be bg-color transparent ?
-			button.btn-secondary {
-				background-color: transparent;
-			}
-
 			> * {
 				margin: 0 0.25rem;
 			}
 		}
 	}
 }
 
+// TODO: can be removed during next major release, once dialog is migrated to <dialog> only
 .dialog-open {
 	overflow: hidden;
 
@@ -254,9 +250,10 @@ dialog {
 		margin: 0;
 		display: flex;
 		justify-content: flex-end;
+		gap: 0.5rem;
 
 		> * {
-			margin: 0 0.25rem;
+			margin: 0;
 		}
 	}
 
@@ -273,9 +270,13 @@ dialog {
 	/*   Closed state of the dialog   */
 	&:not([open]) {
 		opacity: 0;
-		transform: translateY(100px);
+		translate: 0 -100px;
 		transition: all var(--transition-duration-modal)
 			cubic-bezier(0.22, 0.61, 0.36, 1) allow-discrete;
+
+		&.slide-from-right {
+			translate: -100px 0;
+		}
 	}
 
 	/* Transition the :backdrop when the dialog modal is promoted to the top layer */
@@ -335,8 +336,18 @@ dialog {
 		opacity: 0;
 		translate: 0 100px;
 
+		&.slide-from-right {
+			translate: 100px 0;
+		}
+
 		&::backdrop {
 			background-color: transparent;
 		}
 	}
 }
+
+// prevent background scrolling when dialog is opened
+html:has(dialog[open]:modal) {
+	overflow: hidden;
+	scrollbar-gutter: stable;
+}