fix: issue for patternhub included inside iframe (#2673)

db-ui · May 23, 2024 · f93624b · f93624b
1 parent ffa8196
commit f93624b
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 2 deletions.
diff --git a/packages/components/src/components/page/page.lite.tsx b/packages/components/src/components/page/page.lite.tsx
@@ -1,6 +1,7 @@
 import {
 	onInit,
 	onMount,
+	onUnMount,
 	Slot,
 	useMetadata,
 	useRef,
@@ -29,8 +30,7 @@ export default function DBPage(props: DBPageProps) {
 		) {
 			// We need to set this to `html` element that the flex-box solution works
 			// See https://stackoverflow.com/a/43710216 - Approach 1 - flexbox
-			document.documentElement.style.blockSize = '100%';
-			document.documentElement.style.overflow = 'hidden';
+			document.documentElement.classList.add('db-page-document');
 		}
 	});
 
@@ -46,6 +46,13 @@ export default function DBPage(props: DBPageProps) {
 		}
 	});
 
+	onUnMount(() => {
+		if (document.documentElement.classList.contains('db-page-document')) {
+			// remove document styles set by this
+			document.documentElement.classList.remove('db-page-document');
+		}
+	});
+
 	// jscpd:ignore-end
 
 	return (

diff --git a/packages/components/src/components/page/page.scss b/packages/components/src/components/page/page.scss
@@ -1,5 +1,10 @@
 @use "@db-ui/foundations/build/scss/variables";
 
+.db-page-document {
+	block-size: 100%;
+	overflow: hidden;
+}
+
 @mixin header-footer-style {
 	> :is(.db-header, .db-footer, header, footer) {
 		display: flex;

diff --git a/showcases/patternhub/.gitignore b/showcases/patternhub/.gitignore
@@ -44,6 +44,7 @@ pages/components/**/docs
 pages/components/**/how-to-use.mdx
 pages/components/**/migration.mdx
 pages/components/**/properties.mdx
+pages/components/**/properties.tsx
 pages/components/**/overview.tsx
 pages/components/**/index.tsx
 !components/src/tsconfig.json

diff --git a/showcases/patternhub/components/old-routing-fallback/index.tsx b/showcases/patternhub/components/old-routing-fallback/index.tsx
@@ -25,6 +25,8 @@ const OldRoutingFallback = () => {
 				const path: string[] = [];
 				if (subDirectory && type) {
 					path.push(subDirectory, type);
+				} else if (subDirectory) {
+					path.push(subDirectory);
 				} else {
 					path.push('overview');
 				}

diff --git a/showcases/patternhub/scripts/generate-docs-mdx.js b/showcases/patternhub/scripts/generate-docs-mdx.js
@@ -115,6 +115,13 @@ const generateDocsMdx = async () => {
 					getRedirectOldFiles('../../../')
 				);
 			}
+
+			if (!FS.existsSync(`${componentOldPath}/properties.tsx`)) {
+				FS.writeFileSync(
+					`${componentOldPath}/properties.tsx`,
+					getRedirectOldFiles('../../../')
+				);
+			}
 		}
 	}
 };

diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss
@@ -9,6 +9,10 @@
 @forward "@db-ui/foundations/build/css/colors/classes/all";
 @forward "@db-ui/foundations/build/css/fonts/classes/all";
 
+body:not(:has(.db-page)) {
+	padding-block-end: variables.$db-spacing-fixed-lg;
+}
+
 .db-main {
 	scroll-behavior: smooth;
 }