@brightspace-ui/core 3.138.0 → 3.139.0

package/components/object-property-list/demo/object-property-list.html

@@ -10,6 +10,8 @@
 			import '../object-property-list.js';
 			import '../object-property-list-item.js';
 			import '../object-property-list-item-link.js';
+			import '../object-property-list-item-tooltip-help.js';
+			import '../../icons/icon-custom.js';
 			import '../../status-indicator/status-indicator.js';
 		</script>
 	</head>
@@ -37,6 +39,17 @@
 						<d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
 						<d2l-object-property-list-item-link target="_blank" text="Example new tab link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
 						<d2l-object-property-list-item-link text="Example link with icon" href="https://www.d2l.com/" icon="tier1:alert"></d2l-object-property-list-item-link>
+						<d2l-object-property-list-item-tooltip-help text="Example tooltip">These are extra details</d2l-object-property-list-item-tooltip-help>
+						<d2l-object-property-list-item-tooltip-help text="Example tooltip with icon" icon="tier1:alert">These are extra details</d2l-object-property-list-item-tooltip-help>
+						<d2l-object-property-list-item-tooltip-help text="Example tooltip with custom icon">
+							These are extra details
+							<d2l-icon-custom slot="icon">
+								<svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
+									 <path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
+									 <path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
+								 </svg>
+							</d2l-icon-custom>
+						</d2l-object-property-list-item-tooltip-help>
 					</d2l-object-property-list>
 				</template>
 			</d2l-demo-snippet>

package/components/object-property-list/object-property-list-item-tooltip-help.js

@@ -0,0 +1,42 @@
+import '../tooltip/tooltip-help.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ObjectPropertyListItem } from './object-property-list-item.js';
+
+/**
+ * A single object property, to be used within an object-property-list,
+ * rendered as a help tooltip and with an optional icon.
+ * @slot - Default content placed inside of the tooltip
+ */
+class ObjectPropertyListItemTooltipHelp extends FocusMixin(ObjectPropertyListItem) {
+	static get properties() {
+		return {
+			/**
+			 * Preset icon key (e.g. "tier1:gear")
+			 * @type {string}
+			 */
+			icon: { type: String, reflect: true, },
+		};
+	}
+
+	static get focusElementSelector() {
+		return 'd2l-tooltip-help';
+	}
+
+	_renderText() {
+		return html`
+			<d2l-tooltip-help
+				class="d2l-skeletize"
+				icon="${ifDefined(this.icon)}"
+				inherit-font-style
+				?skeleton="${this.skeleton}"
+				text="${this.text}">
+				<slot></slot>
+				<slot slot="icon" name="icon"></slot>
+			</d2l-tooltip-help>
+		`;
+	}
+}
+
+customElements.define('d2l-object-property-list-item-tooltip-help', ObjectPropertyListItemTooltipHelp);

package/components/tooltip/tooltip-help.js

@@ -89,6 +89,9 @@ class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))
 			:host([skeleton]) #d2l-tooltip-help-text.d2l-skeletize {
 				text-decoration: none;
 			}
+			:host([skeleton]) slot[name="icon"]::slotted(d2l-icon-custom) {
+				display: none;
+			}
 		`];
 	}
 

package/custom-elements.json

@@ -11157,6 +11157,60 @@
         }
       ]
     },
+    {
+      "name": "d2l-object-property-list-item-tooltip-help",
+      "path": "./components/object-property-list/object-property-list-item-tooltip-help.js",
+      "description": "A single object property, to be used within an object-property-list,\nrendered as a help tooltip and with an optional icon.",
+      "attributes": [
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Text to display on the item",
+          "type": "string"
+        },
+        {
+          "name": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        }
+      ],
+      "properties": [
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text to display on the item",
+          "type": "string"
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-object-property-list-item-visibility-change",
+          "description": "Dispatched when the visibility of the item changes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default content placed inside of the tooltip"
+        }
+      ]
+    },
     {
       "name": "d2l-object-property-list-item",
       "path": "./components/object-property-list/object-property-list-item.js",

package/package.json

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