@brightspace-ui/core 2.25.0 → 2.26.2

package/components/inputs/input-radio-styles.js

@@ -27,6 +27,7 @@ export const radioStyles = css`
 	}
 	.d2l-input-radio,
 	.d2l-input-radio:hover:disabled,
+	.d2l-input-radio:hover.d2l-disabled,
 	.d2l-input-radio-label > input[type="radio"],
 	.d2l-input-radio-label > input[type="radio"]:hover:disabled {
 		background-color: var(--d2l-color-regolith);

package/components/menu/README.md

@@ -283,43 +283,30 @@ Nested menus can be defined by placing a `d2l-menu` inside a `d2l-menu-item`.  F
 ![Nested Menu](./screenshots/nested-menu.png?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo -->
+<!-- docs: demo code -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
   import '@brightspace-ui/core/components/menu/menu-item.js';
-  import '@brightspace-ui/core/components/menu/menu-item-separator.js';
 </script>
 
 <d2l-menu label="Astronomy">
-  <d2l-menu-item text="Introduction"></d2l-menu-item>
-  <d2l-menu-item-separator></d2l-menu-item-separator>
-  <d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
   <d2l-menu-item text="The Solar System">
     <d2l-menu>
-      <d2l-menu-item text="Formation"></d2l-menu-item>
-      <d2l-menu-item text="Modern Solar System"></d2l-menu-item>
+      <d2l-menu-item text="The Sun"></d2l-menu-item>
       <d2l-menu-item text="The Planets">
         <d2l-menu>
           <d2l-menu-item text="Mercury"></d2l-menu-item>
           <d2l-menu-item text="Venus"></d2l-menu-item>
           <d2l-menu-item text="Earth"></d2l-menu-item>
-          <d2l-menu-item text="Mars"></d2l-menu-item>
-          <d2l-menu-item text="..."></d2l-menu-item>
         </d2l-menu>
       </d2l-menu-item>
-      <d2l-menu-item text="The Sun"></d2l-menu-item>
-      <d2l-menu-item text="Asteroids"></d2l-menu-item>
       <d2l-menu-item text="Comets"></d2l-menu-item>
     </d2l-menu>
   </d2l-menu-item>
   <d2l-menu-item text="Stars &amp; Galaxies">
     <d2l-menu>
-      <d2l-menu-item text="What is a Star?"></d2l-menu-item>
       <d2l-menu-item text="Lifecycle of a Star"></d2l-menu-item>
-      <d2l-menu-item text="Binaries &amp; Multiples"></d2l-menu-item>
-      <d2l-menu-item text="Star Clusters"></d2l-menu-item>
-      <d2l-menu-item text="Star Death"></d2l-menu-item>
       <d2l-menu-item text="Galaxies"></d2l-menu-item>
     </d2l-menu>
   </d2l-menu-item>

package/components/selection/selection-input.js

@@ -154,6 +154,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 
 	_handleRadioClick(e) {
 		e.stopPropagation();
+		if (this.disabled) return;
 		this.selected = true;
 	}
 

package/components/selection/selection-mixin.js

@@ -147,7 +147,8 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 		if (!e.composedPath()[0].classList.contains('d2l-selection-input-radio')) return;
 		if (e.keyCode < keyCodes.LEFT || e.keyCode > keyCodes.DOWN) return;
 
-		const selectables = Array.from(this._selectionSelectables.values());
+		const selectables = Array.from(this._selectionSelectables.values())
+			.filter(item => !item.disabled);
 		let currentIndex = selectables.findIndex(selectable => selectable.selected);
 		if (currentIndex === -1) currentIndex = 0;
 		let newIndex;

package/components/tooltip/README.md

@@ -25,22 +25,6 @@ Tooltips display additional information when users focus or hover on a point of
 </d2l-tooltip>
 ```
 
-## Best Practices
-
-<!-- docs: start best practices -->
-<!-- docs: start dos -->
-* Use to show error messages during form validation
-* Use to give the name or purpose of an icon button
-* Use to provide the “full text” for a truncated value in a tight datagrid or list
-<!-- docs: end dos -->
-
-<!-- docs: start donts -->
-* Don’t use tooltips for long paragraphs of text
-* Don’t use tooltips to repeat text that is already shown
-* Don’t allow a tooltip to cover something important (the “hover and cover” anti-pattern)
-<!-- docs: end donts -->
-<!-- docs: end best practices -->
-
 ## Accessibility
 
 **Interactive Target Elements:**
@@ -67,6 +51,22 @@ If you are unable to add a semantically aligned ARIA role or attach the tooltip
 
 The `d2l-tooltip` component is used to display additional information when users focus or hover on a point of interest.
 
+## Best Practices
+
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Use to show error messages during form validation
+* Use to give the name or purpose of an icon button
+* Use to provide the “full text” for a truncated value in a tight datagrid or list
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don’t use tooltips for long paragraphs of text
+* Don’t use tooltips to repeat text that is already shown
+* Don’t allow a tooltip to cover something important (the “hover and cover” anti-pattern)
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
 <!-- docs: demo live name:d2l-tooltip autoSize:false size:small -->
 ```html
 <script type="module">
@@ -151,3 +151,54 @@ In the following example to constrain the tooltip to the dashed boundary we can
   </d2l-tooltip>
 </div>
 ```
+
+## Help Tooltip [d2l-tooltip-help]
+
+The `d2l-tooltip-help` component is used to display additional information when users focus or hover over some text.
+
+### Best Practices
+
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Use a helpful label that provides value on its own
+* The contents of the tooltip should elaborate on the label
+* Keep help text short and concise (full sentences are not necessary)
+* Use a help tooltip when there are space limitations, such as in a table, list, or narrow sidebar
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don’t overuse help tooltips (users end up hunting for information and even experts feel obligated to check their contents)
+* Don't use help tooltips when you are able to use inline help text instead
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
+<!-- docs: demo live name:d2l-tooltip-help autoSize:false size:small -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
+</script>
+
+<p class="d2l-body-compact">
+  This is some sample text.
+  <d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+</p>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text for the Help Tooltip opener |
+| `inherit-font-style` | Boolean, default: `false` | Allows the opener text to inherit font properties such as size and color |
+<!-- docs: end hidden content -->
+
+### Using in a Sentence or Paragraph
+
+When placing a help tooltip next to other text as part of a sentence or a paragraph, use `inherit-font-style` to align its style with the adjacent text 
+(see the demo example above).
+
+Note that the help tooltip does not support being used *within* a language term, due to challenges with translation.   
+Instead, your opener text will need to be a separate language term appearing before or after the other text and making sense on its own. 
+
+See also the [Visibility Switch](https://daylight.d2l.dev/components/switch/#d2l-switch-visibility) for an example use case.

package/components/tooltip/demo/tooltip.html

@@ -11,8 +11,17 @@
 		import '../../demo/demo-page.js';
 		import '../../inputs/input-text.js';
 		import '../tooltip.js';
+		import '../tooltip-help.js';
 	</script>
 	<style>
+		p {
+			padding-top: 1rem;
+		}
+
+		p:nth-child(3) {
+			padding-top: 0;
+		}
+
 		.boundary {
 			background-color: var(--d2l-color-citrine);
 			box-sizing: border-box;
@@ -150,6 +159,21 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Help Tooltip</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-tooltip-help text="Helpful label">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+				<p class="d2l-body-small">
+					This is some sample text.
+					<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+				</p>
+				<p class="d2l-body-compact">
+					This is some sample text.
+					<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+				</p>
+			</template>
+		</d2l-demo-snippet>
+
 	</d2l-demo-page>
 
 </body>

package/components/tooltip/tooltip-help.js

@@ -0,0 +1,101 @@
+import '../colors/colors.js';
+import '../tooltip/tooltip.js';
+import { css, html, LitElement } from 'lit';
+import { bodySmallStyles } from '../typography/styles.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-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
+ */
+class HelpTooltip extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * Allows this component to inherit certain font properties
+			 * @type {boolean}
+			 */
+			inheritFontStyle: { type: Boolean, attribute: 'inherit-font-style' },
+			/**
+			 * REQUIRED: Text that will render as the Help Tooltip opener
+			 * @type {string}
+			 */
+			text: { type: String }
+		};
+	}
+
+	static get styles() {
+		return [bodySmallStyles, css`
+			:host {
+				display: inline;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			#d2l-tooltip-help-text {
+				background: none;
+				border: none;
+				padding: 0;
+				text-decoration-color: var(--d2l-color-galena);
+				text-decoration-line: underline;
+				text-decoration-style: dashed;
+				text-decoration-thickness: 1px;
+				text-underline-offset: 0.1rem;
+			}
+			#d2l-tooltip-help-text:focus {
+				outline-style: none;
+			}
+			#d2l-tooltip-help-text.focus-visible {
+				border-radius: 0.05rem;
+				outline: 2px solid var(--d2l-color-celestine);
+				outline-offset: 0.05rem;
+				text-underline-offset: 0.1rem;
+			}
+			:host([inherit-font-style]) #d2l-tooltip-help-text {
+				color: inherit;
+				font-size: inherit;
+				font-weight: inherit;
+				letter-spacing: inherit;
+				line-height: inherit;
+				margin: inherit;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+
+		this.inheritFontStyle = false;
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		if (!this.text || this.text.length === 0) {
+			console.warn('Help Tooltip component requires text.');
+		}
+	}
+
+	render() {
+		const classes = {
+			'd2l-body-small': !this.inheritFontStyle
+		};
+		return html`
+			<button id="d2l-tooltip-help-text" class="${classMap(classes)}">
+				${this.text}
+			</button>
+			<d2l-tooltip for="d2l-tooltip-help-text" delay=0 offset=13>
+				<slot></slot>
+			</d2l-tooltip>
+		`;
+	}
+
+}
+customElements.define('d2l-tooltip-help', HelpTooltip);

package/components/tooltip/tooltip.js

@@ -144,7 +144,7 @@ class Tooltip extends RtlMixin(LitElement) {
 			 */
 			forType: { type: String, attribute: 'for-type' },
 			/**
-			 * Adjust the size of the gap between the tooltip and its target
+			 * Adjust the size of the gap between the tooltip and its target (px)
 			 * @type {number}
 			 */
 			offset: { type: Number }, /* tooltipOffset */
@@ -340,6 +340,17 @@ class Tooltip extends RtlMixin(LitElement) {
 				animation: d2l-tooltip-right-animation 200ms ease;
 			}
 
+			::slotted(ul),
+			::slotted(ol) {
+				padding-left: 1rem;
+			}
+
+			:host([dir="rtl"]) ::slotted(ul),
+			:host([dir="rtl"]) ::slotted(ol) {
+				padding-left: 0;
+				padding-right: 1rem;
+			}
+
 			@media (prefers-reduced-motion: reduce) {
 				:host([_open-dir="bottom"]) .d2l-tooltip-container,
 				:host([_open-dir="top"]) .d2l-tooltip-container,

package/custom-elements.json

@@ -10008,6 +10008,45 @@
         }
       ]
     },
+    {
+      "name": "d2l-tooltip-help",
+      "path": "./components/tooltip/tooltip-help.js",
+      "description": "A component used to display additional information when users focus or hover over some text.",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: Text that will render as the Help Tooltip opener",
+          "type": "string"
+        },
+        {
+          "name": "inherit-font-style",
+          "description": "Allows this component to inherit certain font properties",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text that will render as the Help Tooltip opener",
+          "type": "string"
+        },
+        {
+          "name": "inheritFontStyle",
+          "attribute": "inherit-font-style",
+          "description": "Allows this component to inherit certain font properties",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default content placed inside of the tooltip"
+        }
+      ]
+    },
     {
       "name": "d2l-tooltip",
       "path": "./components/tooltip/tooltip.js",
@@ -10066,7 +10105,7 @@
         },
         {
           "name": "offset",
-          "description": "Adjust the size of the gap between the tooltip and its target",
+          "description": "Adjust the size of the gap between the tooltip and its target (px)",
           "type": "number"
         },
         {
@@ -10149,7 +10188,7 @@
         {
           "name": "offset",
           "attribute": "offset",
-          "description": "Adjust the size of the gap between the tooltip and its target",
+          "description": "Adjust the size of the gap between the tooltip and its target (px)",
           "type": "number"
         },
         {

package/package.json

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