@brightspace-ui/core 3.307.2 → 3.308.1

package/components/list/README.md

@@ -382,7 +382,7 @@ Load-More paging functionality can be implemented in lists by placing a `d2l-pag
 
 ## Drag & Drop Lists
 
-The `d2l-list` supports drag & drop.
+The `d2l-list` supports drag & drop, in both `list` and `tiles` layout.
 
 The `d2l-list` is simply a rendering component, so there is some light work involved in hooking up this behaviour. In order for items to be draggable, they must have their `draggable` and `key` attributes set. Optionally, the `drop-nested` attribute can be applied to items to indicate whether other items can be dropped as nested children on the item.
 
@@ -394,7 +394,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
 ### Example
 
-<!-- docs: demo code display:block autoSize:false size:medium sandboxTitle:'List - Drag & Drop'-->
+<!-- docs: demo code display:block sandboxTitle:'List - Drag & Drop'-->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -404,11 +404,13 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
   class ListDemoDragAndDropUsage extends LitElement {
     static properties = {
+      layout: { type: String },
       list: { type: Array }
     };
 
     constructor() {
       super();
+      this.layout = 'list';
       this.list = [
         { key: '1', content: 'Initially first list item' },
         { key: '2', content: 'Initially second list item' },
@@ -429,7 +431,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
       });
 
       return html`
-        <d2l-list @d2l-list-item-position-change="${this._moveItems}">
+        <d2l-list layout="${this.layout}" @d2l-list-item-position-change="${this._moveItems}">
           ${listItems}
         </d2l-list>
       `;
@@ -443,6 +445,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
   customElements.define('d2l-my-drag-drop-elem', ListDemoDragAndDropUsage);
 </script>
 <d2l-my-drag-drop-elem></d2l-my-drag-drop-elem>
+<d2l-my-drag-drop-elem layout="tiles" style="display: flex; justify-content: center; margin-top: 1.5rem;"></d2l-my-drag-drop-elem>
 ```
 
 #### Draggable lists with interactive content
@@ -801,7 +804,7 @@ The example below also includes expand/collapse behavior in order to expand or c
 
 The `d2l-list` component supports displaying items in a tile layout. The built-in rendering will take care of laying out the illustration, selection, secondary actions, and color indicators for each item in either the `list` (default) or `tiles` layout. To display items in a tile layout, set the `d2l-list`'s `layout` property to `tiles`.
 
-**Note:** Nested lists, separators, and drag & drop are not supported in the tile layout.
+**Note:** Nested lists and separators are not supported in the tile layout.
 
 <!-- docs: demo code display:block autoSize:true sandboxTitle:'List - Tile Layout'-->
 ```html

package/components/page/page-divider-internal.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import '../icons/icon-custom.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatPercent } from '@brightspace-ui/intl';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -116,6 +117,14 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		.divider:focus-within {
 			background-color: var(--d2l-color-celestine);
 		}
+		:host([panel-position="start"]) .divider.collapsed,
+		:host([panel-position="end"]) .divider.maxed {
+			cursor: var(--d2l-cursor-resize-inline-end, e-resize);
+		}
+		:host([panel-position="start"]) .divider.maxed,
+		:host([panel-position="end"]) .divider.collapsed {
+			cursor: var(--d2l-cursor-resize-inline-start, w-resize);
+		}
 
 		.slider {
 			inset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;
@@ -189,6 +198,12 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 			height: ${DIVIDER_WIDTH}px;
 			width: 100%;
 		}
+		:host([panel-type="drawer"]) .divider.collapsed {
+			cursor: n-resize;
+		}
+		:host([panel-type="drawer"]) .divider.maxed {
+			cursor: s-resize;
+		}
 
 		:host([panel-type="drawer"]) .slider {
 			inset-inline-end: 18px;
@@ -215,6 +230,11 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 	}
 
 	render() {
+		const dividerClasses = {
+			divider: true,
+			collapsed: this.currentSize <= this.collapsedSize,
+			maxed: this.currentSize === this.maxSize
+		};
 		const { showStartArrow, showEndArrow } = this.#getArrowVisibility();
 		let ariaValues = {};
 		if (this.maxSize > 0) {
@@ -222,7 +242,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		}
 
 		return html`
-		    <div class="divider" @click="${this.#handleClick}" @pointerdown="${this.#handlePointerDown}">
+		    <div class="${classMap(dividerClasses)}" @click="${this.#handleClick}" @pointerdown="${this.#handlePointerDown}">
 				${this.panelType === 'panel' ? html`
 					<div class="divider-arrow start" data-position="start" ?hidden="${!showStartArrow}">
 						<d2l-icon-custom size="tier1">${ICON_ARROW_COLLAPSE_LEFT}</d2l-icon-custom>

package/custom-elements.json

@@ -13402,7 +13402,7 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t.divider-arrow {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: rgba(255, 255, 255, 0.5);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\theight: 24px;\\n\\t\\t\\tinset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t\\twidth: 24px;\\n\\t\\t}\\n\\t\\t.divider-arrow d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.divider:focus-within .divider-arrow:not([hidden]) {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t\\t.divider-arrow:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t.divider-arrow:hover d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.divider-arrow.start {\\n\\t\\t\\tborder-end-start-radius: 6px;\\n\\t\\t\\tborder-start-start-radius: 6px;\\n\\t\\t\\tinset-inline-end: 100%;\\n\\t\\t}\\n\\t\\t.divider-arrow.end {\\n\\t\\t\\tborder-end-end-radius: 6px;\\n\\t\\t\\tborder-start-end-radius: 6px;\\n\\t\\t\\tinset-inline-start: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .slider {\\n\\t\\t\\tinset-inline-end: 18px;\\n\\t\\t\\ttop: auto;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more drawer styling to come */\\n\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.collapsed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.maxed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t.divider-arrow {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: rgba(255, 255, 255, 0.5);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\theight: 24px;\\n\\t\\t\\tinset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t\\twidth: 24px;\\n\\t\\t}\\n\\t\\t.divider-arrow d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.divider:focus-within .divider-arrow:not([hidden]) {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t\\t.divider-arrow:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t.divider-arrow:hover d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.divider-arrow.start {\\n\\t\\t\\tborder-end-start-radius: 6px;\\n\\t\\t\\tborder-start-start-radius: 6px;\\n\\t\\t\\tinset-inline-end: 100%;\\n\\t\\t}\\n\\t\\t.divider-arrow.end {\\n\\t\\t\\tborder-end-end-radius: 6px;\\n\\t\\t\\tborder-start-end-radius: 6px;\\n\\t\\t\\tinset-inline-start: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: n-resize;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: s-resize;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .slider {\\n\\t\\t\\tinset-inline-end: 18px;\\n\\t\\t\\ttop: auto;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more drawer styling to come */\\n\\n\\t`\""
         },
         {
           "name": "focusElementSelector",

package/package.json

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