@brightspace-ui/core 1.213.2 → 1.214.0

package/components/html-block/demo/html-block.html

@@ -80,6 +80,37 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (compact)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-html-block compact>
+						<template>
+							<h1>heading 1</h1>
+							<h2>heading 2</h2>
+							<h3>heading 3</h3>
+							<h4>heading 4</h4>
+							<h5>heading 5</h5>
+							<h6>heading 6</h6>
+							<div><strong>strong</strong></div>
+							<div><b>bold</b></div>
+							<div>text</div>
+							<pre>preformatted</pre>
+							<p>paragraph</p>
+							<ul>
+								<li>unordered item 1</li>
+								<li>unordered item 2</li>
+							</ul>
+							<ol>
+								<li>ordered item 1</li>
+								<li>ordered item 2</li>
+							</ol>
+							<div><a href="https://d2l.com">anchor</a></div>
+						</template>
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (math)</h2>
 
 			<d2l-demo-snippet>

package/components/html-block/html-block.js

@@ -5,6 +5,11 @@ import { HtmlBlockMathRenderer } from '../../helpers/mathjax.js';
 import { requestInstance } from '../../mixins/provider-mixin.js';
 
 export const htmlBlockContentStyles = css`
+	.d2l-html-block-compact {
+		font-size: 0.8rem;
+		font-weight: 400;
+		line-height: 1.2rem;
+	}
 	h1, h2, h3, h4, h5, h6, b, strong, b *, strong * {
 		font-weight: bold;
 	}
@@ -49,7 +54,11 @@ export const htmlBlockContentStyles = css`
 	ul, ol {
 		list-style-position: outside;
 		margin: 1em 0;
-		padding-left: 3em;
+		padding-inline-start: 3em;
+	}
+	.d2l-html-block-compact ul,
+	.d2l-html-block-compact ol {
+		padding-inline-start: 1.5em;
 	}
 	ul, ul[type="disc"] {
 		list-style-type: disc;
@@ -95,11 +104,6 @@ export const htmlBlockContentStyles = css`
 	:host([dir="rtl"]) {
 		text-align: right;
 	}
-	:host([dir="rtl"]) ul,
-	:host([dir="rtl"]) ol {
-		padding-left: 0;
-		padding-right: 3em;
-	}
 `;
 
 let renderers;
@@ -120,6 +124,11 @@ class HtmlBlock extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * Whether compact styles should be applied
+			 * @type {Boolean}
+			 */
+			compact: { type: Boolean },
 			/**
 			 * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
 			 * unless your HTML relies on script executions that may break upon stamping.
@@ -153,6 +162,7 @@ class HtmlBlock extends LitElement {
 
 	constructor() {
 		super();
+		this.compact = false;
 		this.noDeferredRendering = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
@@ -185,7 +195,7 @@ class HtmlBlock extends LitElement {
 
 		if (this._renderContainer) return;
 
-		this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered"></div><slot></slot>';
+		this.shadowRoot.innerHTML += `<div class="d2l-html-block-rendered${this.compact ? ' d2l-html-block-compact' : ''}"></div><slot></slot>`;
 
 		this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => await this._render(e.target));
 		this._renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');

package/custom-elements.json

@@ -3378,6 +3378,12 @@
       "path": "./components/html-block/html-block.js",
       "description": "A component for displaying user-authored HTML.",
       "attributes": [
+        {
+          "name": "compact",
+          "description": "Whether compact styles should be applied",
+          "type": "Boolean",
+          "default": "false"
+        },
         {
           "name": "no-deferred-rendering",
           "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
@@ -3386,6 +3392,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "compact",
+          "attribute": "compact",
+          "description": "Whether compact styles should be applied",
+          "type": "Boolean",
+          "default": "false"
+        },
         {
           "name": "noDeferredRendering",
           "attribute": "no-deferred-rendering",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.213.2",
+  "version": "1.214.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",