@brightspace-ui/core 3.145.0 → 3.145.1

package/components/object-property-list/README.md

@@ -8,6 +8,7 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-tooltip-help.js';
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
 </script>
 
@@ -17,6 +18,9 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
   <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
   <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 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 help with icon" icon="tier1:grade">
+    These are extra details
+  </d2l-object-property-list-item-tooltip-help>
 </d2l-object-property-list>
 ```
 
@@ -42,11 +46,15 @@ An object property list can be defined using `d2l-object-property-list` and a co
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-tooltip-help.js';
 </script>
 
 <d2l-object-property-list>
   <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
   <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-tooltip-help text="Example link">
+    These are extra details
+  </d2l-object-property-list-item-tooltip-help>
 </d2l-object-property-list>
 ```
 
@@ -130,6 +138,52 @@ The `d2l-object-property-list-item-link` component is a link item for the object
 | `target` | String | Where to display the linked URL |
 <!-- docs: end hidden content -->
 
+## Help Tooltip Item [d2l-object-property-list-item-tooltip-help]
+
+The `d2l-object-property-list-item-tooltip-help` component is an item for the object property list which is used to also display additional information for users. It displays text as a help tooltip, with an optional leading icon.
+
+<!-- docs: demo code properties name:d2l-object-property-list-item-tooltip-help sandboxTitle:'Object Property List Help Tooltip Item' -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-tooltip-help.js';
+</script>
+
+<d2l-object-property-list>
+  <d2l-object-property-list-item-tooltip-help text="Example item">
+	These are extra details
+  </d2l-object-property-list-item-tooltip-help>
+  <d2l-object-property-list-item-tooltip-help text="Example item with icon" icon="tier1:grade">
+	These are extra details
+  </d2l-object-property-list-item-tooltip-help>
+  <d2l-object-property-list-item-tooltip-help text="Example item 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>
+```
+
+<!-- docs: start hidden content -->
+### Slots
+
+| Slot | Type | Description |
+|--|--|--|
+| `default` | required | Default content placed inside of the tooltip |
+| `icon` | optional | Optional slot for a custom icon |
+
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text displayed by the item |
+| `icon` | String | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
+<!-- docs: end hidden content -->
+
 ## Status Slot
 
 Object property lists can optionally contain a single `d2l-status-indicator` inserted into the `status` slot.

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

@@ -8,6 +8,7 @@ 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
+ * @slot icon - Optional slot for a custom icon
  */
 class ObjectPropertyListItemTooltipHelp extends FocusMixin(ObjectPropertyListItem) {
 	static get properties() {

package/components/tooltip/README.md

@@ -117,6 +117,7 @@ The `d2l-tooltip` component is used to display additional information when users
 | `disable-focus-lock` | Boolean, default: `false` | Disables focus lock so that the tooltip will automatically close when no longer hovered even if it still has focus |
 | `force-show` | Boolean, default: `false` | Force the tooltip to stay open as long as it remains `true` |
 | `for-type` | String, default: `descriptor` | Accessibility type for the tooltip to specify whether it is the primary label for the target or a secondary descriptor. Valid values are: `label` and `descriptor`. |
+| `icon` | String | [Preset icon key](../../components/icons#preset-icons) (e.g. `tier1:gear`) |
 | `show-truncated-only` | Boolean, default: `false` | Only show the tooltip if we detect the target element is truncated |
 | `position` | String | Optionally force the tooltip to open in a certain direction. Valid values are: `top`, `bottom`, `left` and `right`. If no position is provided, the tooltip will open in the first position that has enough space for it in the order: bottom, top, right, left. |
 
@@ -215,6 +216,13 @@ The `d2l-tooltip-help` component is used to display additional information when
 ```
 
 <!-- docs: start hidden content -->
+### Slots
+
+| Slot | Type | Description |
+|--|--|--|
+| `default` | required | Default content placed inside of the tooltip |
+| `icon` | optional | Optional slot for a custom icon |
+
 ### Properties
 
 | Property | Type | Description |

package/components/tooltip/tooltip-help.js

@@ -12,6 +12,7 @@ import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
 /**
  * A component used to display additional information when users focus or hover over some text.
  * @slot - Default content placed inside of the tooltip
+ * @slot icon - Optional slot for a custom icon
  */
 class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))) {
 

package/custom-elements.json

@@ -11295,6 +11295,10 @@
         {
           "name": "",
           "description": "Default content placed inside of the tooltip"
+        },
+        {
+          "name": "icon",
+          "description": "Optional slot for a custom icon"
         }
       ]
     },
@@ -14273,6 +14277,10 @@
         {
           "name": "",
           "description": "Default content placed inside of the tooltip"
+        },
+        {
+          "name": "icon",
+          "description": "Optional slot for a custom icon"
         }
       ]
     },

package/package.json

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