Merge branch 'master' into akerr/validation-custom/fix-connection-events

BrightspaceUI · Jul 17, 2020 · 01c7441 · 01c7441
2 parents 6748d07 + 6235044
commit 01c7441
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -121,6 +121,7 @@ <h2 class="d2l-heading-3">Templates</h2>
 	<ul>
 		<li><a href="templates/primary-secondary/demo/index.html">Primary Secondary Template (fullscreen width)</a></li>
 		<li><a href="templates/primary-secondary/demo/width-type-normal.html">Primary Secondary Template (normal width)</a></li>
+		<li><a href="templates/primary-secondary/demo/overflow-hidden.html">Primary Secondary Template (hidden primary overflow)</a></li>
 	</ul>
 
 </body>

diff --git a/templates/primary-secondary/demo/overflow-hidden.html b/templates/primary-secondary/demo/overflow-hidden.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../../components/demo/styles.css" type="text/css">
+		<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+		<script type="module">
+			import '../../../components/demo/demo-page.js';
+			import '../primary-secondary.js';
+		</script>
+	</head>
+	<body>
+		<d2l-template-primary-secondary primary-overflow="hidden" width-type="fullscreen">
+			<div slot="header" style="background-color: #ddd;">Header</div>
+			<div slot="primary" style="background-color: green; height: 100%; overflow: auto;">
+				<div style="height: 200vh;"><p>Very tall scrolling thing in the primary panel.</p></div>
+			</div>
+			<p slot="secondary">Secondary</p>
+			<div slot="footer">Footer</div>
+		</d2l-template-primary-secondary>
+	</body>
+</html>
diff --git a/templates/primary-secondary/primary-secondary.js b/templates/primary-secondary/primary-secondary.js
@@ -12,9 +12,14 @@ class TemplatePrimarySecondary extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * Controls how the primary panel's contents overflow
+			 * @type {'default'|'hidden'}
+			 */
+			primaryOverflow: { attribute: 'primary-overflow', reflect: true, type: String },
 			/**
 			 * Whether content fills the screen or not
-			 * @type {('fullscreen'|'normal')}
+			 * @type {'fullscreen'|'normal'}
 			 */
 			widthType: { type: String, attribute: 'width-type', reflect: true },
 			_hasFooter: { type: Boolean }
@@ -60,6 +65,9 @@ class TemplatePrimarySecondary extends LitElement {
 				grid-area: primary;
 				overflow-y: auto;
 			}
+			:host([primary-overflow="hidden"]) main {
+				overflow: hidden;
+			}
 			.d2l-template-primary-secondary-divider {
 				background-color: var(--d2l-color-mica);
 				grid-area: divider;