@brightspace-ui/core 3.79.2 → 3.79.3

package/components/more-less/README.md

@@ -20,7 +20,6 @@ The `d2l-more-less` element can be used to minimize the display of long content,
 
 | Property | Type | Description |
 |---|---|---|
-| `blur-color` | String | Gradient HEX formatted color of the blurring effect (defaults to white). |
 | `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
 | `h-align` | String | A value of `text` aligns the leading edge of text |
 | `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |

package/components/more-less/demo/more-less.html

@@ -45,16 +45,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>More-less with custom blur color</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-more-less blur-color="#f00">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">Vestibulum</a> elementum venenatis arcu sit amet varius. Maecenas posuere magna arcu, quis maximus odio fringilla ac. Integer ligula lorem, faucibus sit amet cursus vel, pellentesque a justo. Aliquam urna metus, molestie at tempor eget, vestibulum a purus. Donec aliquet rutrum mi. Duis ornare congue tempor. Nullam sed massa fermentum, tincidunt leo eu, vestibulum orci. Sed ultrices est in lacus venenatis, posuere suscipit arcu scelerisque. In aliquam ipsum rhoncus, lobortis ligula ut, molestie orci. Proin scelerisque tempor posuere. Phasellus consequat, lorem quis hendrerit tempor, sem lectus sagittis nunc, in tristique dui arcu non arcu. Nunc aliquam nisi et sapien commodo lacinia. <a href="">Quisque</a> iaculis orci vel odio varius porta. Fusce tincidunt dolor enim, vitae sollicitudin purus suscipit eu.</p>
-					</d2l-more-less>
-				</template>
-			</d2l-demo-snippet>
-
 		</d2l-demo-page>
 
 		<script>

package/components/more-less/more-less.js

@@ -20,12 +20,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
-			/**
-			 * The gradient color of the blurring effect
-			 * @type {string}
-			 */
-			blurColor: { type: String, attribute: 'blur-color' },
-
 			/**
 			 * Indicates whether element is in "more" state
 			 * @type {boolean}
@@ -49,7 +43,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			 * @type {boolean}
 			 */
 			inactive: { type: Boolean, reflect: true },
-			__blurBackground: { state: true },
 			__maxHeight: { state: true },
 			__transitionAdded: { state: true }
 		};
@@ -67,16 +60,9 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			.d2l-more-less-transition {
 				transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
 			}
-			.d2l-more-less-blur {
-				display: none;
-			}
-			:host(:not([expanded]):not([inactive])) .d2l-more-less-blur {
-				bottom: 1em;
-				content: "";
-				display: block;
-				height: 1em;
-				margin-bottom: -0.75em;
-				position: relative;
+			:host(:not([expanded]):not([inactive])) .d2l-more-less-content {
+				-webkit-mask-image: linear-gradient(to top, transparent, #000000 1em);
+				mask-image: linear-gradient(to top, transparent, #000000 1em);
 			}
 			:host([inactive]) .d2l-more-less-toggle {
 				display: none;
@@ -96,7 +82,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		this.height = '4em';
 		this.inactive = false;
 
-		this.__blurBackground = 'linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%)';
 		this.__transitionAdded = false;
 		this.__maxHeight = this.height;
 
@@ -145,7 +130,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 		this.__content = this.shadowRoot.querySelector('.d2l-more-less-content');
 		this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
-		this.__init_setupBlurColour();
 		this.__init_setupListeners();
 
 		this.__bound_transitionEvents = this.__transitionEvents.bind(this);
@@ -164,7 +148,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			<div id="${this.__contentId}" class=${classMap(contentClasses)} style=${styleMap({ maxHeight: `${this.__maxHeight}` })}>
 				<slot></slot>
 			</div>
-			<div class="d2l-more-less-blur" style=${styleMap({ background: `${this.__blurBackground}` })}></div>
 			<d2l-button-subtle
 				class="d2l-more-less-toggle"
 				icon="${this.__computeIcon()}"
@@ -300,33 +283,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		});
 	}
 
-	__init_setupBlurColour() {
-		if (!this.blurColor
-			|| this.blurColor[0] !== '#'
-			|| (this.blurColor.length !== 4 && this.blurColor.length !== 7)
-		) {
-			return;
-		}
-
-		let hex = this.blurColor.substring(1);
-
-		// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-		if (hex.length === 3) {
-			const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-			hex = hex.replace(shorthandRegex, (m, r, g, b) => {
-				return r + r + g + g + b + b;
-			});
-		}
-
-		const bigint = parseInt(hex, 16);
-		const r = (bigint >> 16) & 255;
-		const g = (bigint >> 8) & 255;
-		const b = bigint & 255;
-
-		this.__blurBackground =
-			`linear-gradient(rgba(${r}, ${g}, ${b}, 0) 0%, rgb(${r}, ${g}, ${b}) 100%)`;
-	}
-
 	__init_setupListeners() {
 		this.__startObserving();
 		if (this.__contentSlot) {

package/custom-elements.json

@@ -10170,11 +10170,6 @@
       "path": "./components/more-less/more-less.js",
       "description": "A component used to minimize the display of long content, while providing a way to reveal the full content.",
       "attributes": [
-        {
-          "name": "blur-color",
-          "description": "The gradient color of the blurring effect",
-          "type": "string"
-        },
         {
           "name": "h-align",
           "description": "The h-align property of the more-less button",
@@ -10200,12 +10195,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "blurColor",
-          "attribute": "blur-color",
-          "description": "The gradient color of the blurring effect",
-          "type": "string"
-        },
         {
           "name": "hAlign",
           "attribute": "h-align",

package/package.json

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