@brightspace-ui/core 2.177.0 → 2.177.2

package/components/inputs/input-date-range.js

@@ -29,7 +29,7 @@ export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusiv
 
 /**
  * A component consisting of two input-date components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 calendar date format ("YYYY-MM-DD").
- * @slot inline-help - Inline help text content.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected start date or selected end date. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
  */
 class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement))))) {

package/components/inputs/input-date-time-range.js

@@ -62,7 +62,7 @@ export function getShiftedEndDateTime(startValue, endValue, prevStartValue, incl
  * A component consisting of two input-date-time components - one for start of range and one for end of range. The time input only appears once a date is selected.
  * @slot start - Optional content that would appear below the start input-date-time
  * @slot end - Optional content that would appear below the end input-date-time
- * @slot inline-help - Inline help text content.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected start date-time or selected end date-time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
  */
 class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement))))) {

package/components/inputs/input-date-time.js

@@ -39,7 +39,7 @@ function _getFormattedDefaultTime(defaultValue) {
 
 /**
  * A component that consists of a "<d2l-input-date>" and a "<d2l-input-time>" component. The time input only appears once a date is selected. This component displays the "value" if one is specified, and reflects the selected value when one is selected or entered.
- * @slot inline-help - Inline help text content.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected date or selected time. `value` corresponds to the selected value and is formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
  */
 class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))))) {

package/components/inputs/input-date.js

@@ -26,7 +26,7 @@ export function formatISODateInUserCalDescriptor(val) {
 
 /**
  * A component that consists of a text input field for typing a date and an attached calendar (d2l-calendar) dropdown. It displays the "value" if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the calendar or entered in the text input.
- * @slot inline-help - Inline help text content.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected date. `value` corresponds to the selected value and is formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
  */
 class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {

package/components/inputs/input-number.js

@@ -73,7 +73,7 @@ function roundPrecisely(val, maxFractionDigits) {
  * @slot after - Slot beside the input on the right side. Useful for an "icon" or "button-icon".
  * @slot left - Slot within the input on the left side. Useful for an "icon" or "button-icon".
  * @slot right - Slot within the input on the right side. Useful for an "icon" or "button-icon".
- * @slot inline-help - Inline help text content.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value.
  */
 class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {

package/components/inputs/input-percent.js

@@ -11,7 +11,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 /**
  * This component wraps the "<d2l-input-number>" tag and is intended for inputting percent values.
  * @slot after - Slot beside the input on the right side. Useful for an "icon" or "button-icon".
- * @slot inline-help - Inline help text content.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value.
  */
 class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))))) {

package/components/inputs/input-search.js

@@ -13,7 +13,7 @@ export const SUPPRESS_ENTER_TIMEOUT_MS = 1000;
 
 /**
  * This component wraps the native "<input type="search">"" element and is for text searching.
- * @slot inline-help - Inline help text content.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires d2l-input-search-searched - Dispatched when a search is performed. When the input is cleared, this will be fired with an empty value.
  */
 class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {

package/components/inputs/input-time-range.js

@@ -36,7 +36,7 @@ function getValidISOTimeAtInterval(val, timeInterval) {
 
 /**
  * A component consisting of two input-time components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 time format ("hh:mm:ss").
- * @slot inline-help - Inline help text content.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected start time or selected end time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar time format (`hh:mm:ss`).
  */
 

package/components/list/demo/demo-list-nested.js

@@ -19,6 +19,7 @@ class ListDemoNested extends LitElement {
 
 	static get properties() {
 		return {
+			addButton: { type: Boolean, attribute: 'add-button' },
 			demoItemKey: { type: String, attribute: 'demo-item-key' },
 			isDraggable: { attribute: 'is-draggable', type: Boolean },
 			selectable: { type: Boolean },
@@ -169,7 +170,11 @@ class ListDemoNested extends LitElement {
 
 	_renderList(items, nested, includeControls = false, showLoadMore = false) {
 		return html`
-			<d2l-list ?grid="${!this.disableListGrid}" drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}" item-count="${this._items.length}">
+			<d2l-list
+				?grid="${!this.disableListGrid}"
+				drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}"
+				item-count="${this._items.length}"
+				?add-button="${this.addButton}">
 				${ includeControls ? this._renderListControls() : nothing }
 				${repeat(items, item => item.key, item => html`
 					${this._renderListItem(item)}

package/components/list/demo/list-drag-and-drop.html

@@ -38,6 +38,14 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Add Button</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested add-button demo-item-key="imgPrimaryAndSupporting" is-draggable selectable></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
 
 	</d2l-demo-page>
 

package/components/list/demo/list-expand-collapse.html

@@ -18,6 +18,7 @@
 			<template>
 				<d2l-demo-list-nested
 					demo-item-key="imgPrimaryAndSupporting"
+					add-button
 					is-draggable
 					selectable
 					expandable
@@ -45,6 +46,7 @@
 			<template>
 				<d2l-demo-list-nested
 					demo-item-key="imgPrimaryAndSupporting"
+					add-button
 					is-draggable
 					selectable
 					expandable

package/components/list/demo/list-nested.html

@@ -131,7 +131,7 @@
 								<div>Earth Sciences (L1)</div>
 								<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
 							</d2l-list-item-content>
-							<d2l-list slot="nested" grid separators="all">
+							<d2l-list add-button slot="nested" grid separators="all">
 								<d2l-list-item selectable key="L2-1" label="Label for L2-1">
 									<d2l-list-item-content>
 										<div>Introductory Earth Sciences (L2)</div>

package/components/list/list-item-mixin.js

@@ -153,8 +153,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host([_focusing-primary-action]) [slot="control-container"]::after,
 			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::before,
 			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::after,
-			:host([_show-add-button]) [slot="control-container"]::after,
 			:host([_show-add-button]) [slot="control-container"]::before,
+			:host([_show-add-button]) [slot="control-container"]::after,
 			:host(:first-of-type[_nested]) [slot="control-container"]::before {
 				border-top-color: transparent;
 			}
@@ -413,7 +413,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-top: -11.5px;
 			}
 			:host([draggable][selectable][_hovering]) [slot="add"],
-			:host([draggable][selectable][_focusing]) [slot="add"] {
+			:host([draggable][selectable][_focusing]) [slot="add"],
+			:host([draggable][selectable][_hovering]) [slot="add-top"],
+			:host([draggable][selectable][_focusing]) [slot="add-top"] {
 				padding-inline-end: 6px;
 			}
 			.dragging [slot="add"] {
@@ -719,7 +721,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					class="d2l-list-item-actions-container">
 					<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
 				</div>
-				${this._showAddButton && !this._hasNestedListAddButton ? html`
+				${this._showAddButton && (!this._hasNestedListAddButton || (this.expandable && !this.expanded)) ? html`
 				<div slot="add">
 					<d2l-button-add text="${addButtonText}" mode="icon-when-interacted" @click="${this._handleButtonAddClick}"></d2l-button-add>
 				</div>

package/custom-elements.json

@@ -5276,7 +5276,7 @@
       "slots": [
         {
           "name": "inline-help",
-          "description": "Inline help text content."
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -5591,7 +5591,7 @@
         },
         {
           "name": "inline-help",
-          "description": "Inline help text content."
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -5776,7 +5776,7 @@
       "slots": [
         {
           "name": "inline-help",
-          "description": "Inline help text content."
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -5950,7 +5950,7 @@
       "slots": [
         {
           "name": "inline-help",
-          "description": "Inline help text content."
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -6313,7 +6313,7 @@
         },
         {
           "name": "inline-help",
-          "description": "Inline help text content."
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -6490,7 +6490,7 @@
         },
         {
           "name": "inline-help",
-          "description": "Inline help text content."
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -6626,7 +6626,7 @@
       "slots": [
         {
           "name": "inline-help",
-          "description": "Inline help text content."
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -7471,7 +7471,7 @@
       "slots": [
         {
           "name": "inline-help",
-          "description": "Inline help text content."
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -7785,6 +7785,10 @@
       "name": "d2l-demo-list-nested",
       "path": "./components/list/demo/demo-list-nested.js",
       "attributes": [
+        {
+          "name": "add-button",
+          "type": "boolean"
+        },
         {
           "name": "demo-item-key",
           "type": "string"
@@ -7835,6 +7839,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "addButton",
+          "attribute": "add-button",
+          "type": "boolean"
+        },
         {
           "name": "demoItemKey",
           "attribute": "demo-item-key",

package/package.json

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