@brightspace-ui/core 2.17.0 → 2.18.2

package/components/html-block/README.md

@@ -79,25 +79,23 @@ Examples are provided to display how user-authored math can be embedded within y
   import '@brightspace-ui/core/tools/mathjax-test-context.js';
 </script>
 <d2l-html-block>
-  <div class="mathml-container">
-    <math xmlns="http://www.w3.org/1998/Math/MathML">
-      <msqrt>
-        <mn>3</mn>
-        <mi>x</mi>
-        <mo>&#x2212;</mo>
-        <mn>1</mn>
-      </msqrt>
-      <mo>+</mo>
-      <mo stretchy="false">(</mo>
-      <mn>1</mn>
-      <mo>+</mo>
+  <math xmlns="http://www.w3.org/1998/Math/MathML">
+    <msqrt>
+      <mn>3</mn>
       <mi>x</mi>
-      <msup>
-        <mo stretchy="false">)</mo>
-        <mn>2</mn>
-      </msup>
-    </math>
-  </div>
+      <mo>&#x2212;</mo>
+      <mn>1</mn>
+    </msqrt>
+    <mo>+</mo>
+    <mo stretchy="false">(</mo>
+    <mn>1</mn>
+    <mo>+</mo>
+    <mi>x</mi>
+    <msup>
+      <mo stretchy="false">)</mo>
+      <mn>2</mn>
+    </msup>
+  </math>
 </d2l-html-block>
 ```
 
@@ -110,9 +108,7 @@ Examples are provided to display how user-authored math can be embedded within y
   import '@brightspace-ui/core/tools/mathjax-test-context.js';
 </script>
 <d2l-html-block>
-  <div class="latex-container">
     $$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
-  </div>
 </d2l-html-block>
 ```
 

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

@@ -110,6 +110,18 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (inline)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<span>Here's an inline html-block:</span>
+					<d2l-html-block inline>
+						I'm inline!
+					</d2l-html-block>
+					<span>Pretty cool!</span>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (large font)</h2>
 
 			<d2l-demo-snippet>

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

@@ -136,6 +136,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
 			 * @type {Boolean}
 			 */
 			compact: { type: Boolean },
+			/**
+			 * Whether to display the HTML in inline mode
+			 */
+			inline: { 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.
@@ -152,15 +156,16 @@ class HtmlBlock extends RtlMixin(LitElement) {
 				overflow-wrap: break-word;
 				overflow-x: auto;
 				overflow-y: hidden;
-				position: relative;
 				text-align: left;
 			}
-			:host([hidden]) {
-				display: none;
-			}
+			:host([hidden]),
 			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
 				display: none;
 			}
+			:host([inline]),
+			:host([inline]) div.d2l-html-block-rendered {
+				display: inline;
+			}
 			:host([dir="rtl"]) {
 				text-align: right;
 			}
@@ -170,6 +175,7 @@ class HtmlBlock extends RtlMixin(LitElement) {
 	constructor() {
 		super();
 		this.compact = false;
+		this.inline = false;
 		this.noDeferredRendering = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {

package/components/tag-list/README.md

@@ -3,7 +3,7 @@
 
 Tag lists are used to present a list of compact, discrete pieces of information.
 
-<!-- docs: demo display:block -->
+<!-- docs: demo autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';
@@ -12,7 +12,7 @@ Tag lists are used to present a list of compact, discrete pieces of information.
 
 <d2l-tag-list description="Example Tags">
   <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse lorem ipsum dolor"></d2l-tag-list-item>
   <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
   <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
   <d2l-tag-list-item text="Excepteur sint"></d2l-tag-list-item>
@@ -26,7 +26,7 @@ Tag lists are used to present a list of compact, discrete pieces of information.
 
 The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-item` and adds the appropriate keyboard navigation, list semantics, clearing behaviour and responsive behaviour.
 
-<!-- docs: demo live name:d2l-tag-list display:block -->
+<!-- docs: demo live name:d2l-tag-list autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';
@@ -39,7 +39,7 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
 </script>
 <d2l-tag-list description="Example Tags">
   <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse lorem ipsum dolor"></d2l-tag-list-item>
   <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
   <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
 </d2l-tag-list>
@@ -48,7 +48,7 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
 ## Tag List Item [d2l-tag-list-item]
 The `d2l-tag-list-item` provides the appropriate `listitem` semantics and styling for children within a tag list. Tag List items do not work outside of a Tag List and should not be used on their own.
 
-<!-- docs: demo live name:d2l-tag-list-item display:block -->
+<!-- docs: demo live name:d2l-tag-list-item autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';

package/custom-elements.json

@@ -3503,6 +3503,12 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "inline",
+          "description": "Whether to display the HTML in inline mode",
+          "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.",
@@ -3518,6 +3524,13 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "inline",
+          "attribute": "inline",
+          "description": "Whether to display the HTML in inline mode",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "noDeferredRendering",
           "attribute": "no-deferred-rendering",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.17.0",
+  "version": "2.18.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -60,7 +60,7 @@
     "lit-analyzer": "^1",
     "messageformat-validator": "^2",
     "node-sass": "^7",
-    "sinon": "^13",
+    "sinon": "^14",
     "stylelint": "^14"
   },
   "dependencies": {