@brightspace-ui/core 1.226.0 → 1.227.0

package/components/list/README.md

@@ -311,7 +311,7 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 
 | Property | Type | Description |
 |---|---|---|
-| `slim` | Boolean | Whether to render a header with reduced whitespace |
+| `padding-type` | String | Header whitespace (`normal` (default), `slim`)|
 <!-- docs: end hidden content -->
 
 ## List Item [d2l-list-item]
@@ -354,16 +354,17 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | `disabled` | Boolean | Disables the input |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
+| `drag-target-handle-only` | Boolean | Make the drag target the drag handle only. |
 | `drop-nested` | Boolean | Whether nested items can be dropped on this item |
 | `drop-text` | String | Text to drag and drop |
 | `href` | String | Address of item link if navigable |
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
 | `labelled-by` | String | The id of element that provides the label for this element |
+| `padding-type` | String | List item whitespace (`normal` (default), `slim`, `none`)|
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
-| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
 
 ### Events
 

package/components/list/list-header.js

@@ -15,9 +15,16 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		return {
 			/**
 			 * Whether to render a header with reduced whitespace
+			 * TODO: Remove
 			 * @type {boolean}
 			 */
-			slim: { reflect: true, type: Boolean }
+			slim: { reflect: true, type: Boolean },
+			/**
+			 * How much padding to render list items with
+			 * One of 'normal'|'slim', defaults to 'normal'
+			 * @type {string}
+			 */
+			paddingType: { type: String, attribute: 'padding-type' },
 		};
 	}
 
@@ -36,7 +43,10 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				margin-top: 6px;
 				min-height: 58px;
 			}
-			:host([slim]) .d2l-list-header-container {
+			:host([slim]) .d2l-list-header-container { /* TODO: Remove */
+				min-height: 36px;
+			}
+			:host([padding-type="slim"]) .d2l-list-header-container {
 				min-height: 36px;
 			}
 			d2l-selection-select-all {
@@ -64,6 +74,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	constructor() {
 		super();
 		this.slim = false;
+		this.paddingType = 'normal';
 	}
 
 	render() {

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

@@ -53,8 +53,20 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			 * @type {array}
 			 */
 			breakpoints: { type: Array },
+			/**
+			 * Whether to allow the drag target to be the handle only rather than the entire cell
+			 * @type {boolean}
+			 */
+			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
+			/**
+			 * How much padding to render list items with
+			 * One of 'normal'|'slim'|'none', defaults to 'normal'
+			 * @type {string}
+			 */
+			paddingType: { type: String, attribute: 'padding-type' },
 			/**
 			 * Whether to render the list-item with reduced whitespace.
+			 * TODO: Remove in favor of padding-type="slim"
 			 * @type {boolean}
 			 */
 			slim: { type: Boolean },
@@ -106,6 +118,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				border-bottom: 1px solid var(--d2l-color-mica);
 				border-top: 1px solid var(--d2l-color-mica);
 			}
+			:host([padding-type="none"]) d2l-list-item-generic-layout {
+				border-bottom: 0;
+				border-top: 0;
+			}
 			d2l-list-item-generic-layout[data-separators="none"] {
 				border-bottom: 1px solid transparent;
 				border-top: 1px solid transparent;
@@ -143,10 +159,18 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				justify-content: stretch;
 				padding: 0.55rem 0;
 			}
-			:host([slim]) [slot="content"] {
+			:host([slim]) [slot="content"] { /* TODO, remove */
 				padding-bottom: 0.35rem;
 				padding-top: 0.4rem;
 			}
+			:host([padding-type="slim"]) [slot="content"] {
+				padding-bottom: 0.35rem;
+				padding-top: 0.4rem;
+			}
+			:host([padding-type="none"]) [slot="content"] {
+				padding-bottom: 0;
+				padding-top: 0;
+			}
 			[slot="content"] ::slotted([slot="illustration"]),
 			[slot="content"] .d2l-list-item-illustration * {
 				border-radius: 6px;
@@ -219,7 +243,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			.d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-left: 0.9rem;
 			}
-			:host([slim]) d2l-selection-input {
+			:host([slim]) d2l-selection-input { /* TODO, remove */
+				margin-bottom: 0.55rem;
+				margin-top: 0.55rem;
+			}
+			:host([padding-type="slim"]) d2l-selection-input {
 				margin-bottom: 0.55rem;
 				margin-top: 0.55rem;
 			}
@@ -276,6 +304,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		super();
 		this.breakpoints = defaultBreakpoints;
 		this.slim = false;
+		this.paddingType = 'normal';
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
@@ -449,7 +478,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 					?grid-active="${this.role === 'rowgroup'}">
 					${this._renderDropTarget()}
 					${this._renderDragHandle(this._renderOutsideControl)}
-					${this._renderDragTarget(this._renderOutsideControlAction)}
+					${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
 					${this.selectable ? html`
 					<div slot="control">${this._renderCheckbox()}</div>
 					<div slot="control-action"
@@ -497,6 +526,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		return html`<div slot="outside-control-action" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragTarget}</div>`;
 	}
 
+	_renderOutsideControlHandleOnly(dragHandle) {
+		return html`<div slot="outside-control" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragHandle}</div>`;
+	}
+
 	_renderTooltipContent() {
 		return html`
 			<div>${this.localize('components.list-item-tooltip.title')}</div>

package/custom-elements.json

@@ -6471,6 +6471,11 @@
       "name": "d2l-demo-list-item-custom",
       "path": "./components/list/demo/list-item-custom.js",
       "attributes": [
+        {
+          "name": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
@@ -6479,10 +6484,16 @@
         },
         {
           "name": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
+          "description": "Whether to render the list-item with reduced whitespace.\nTODO: Remove in favor of padding-type=\"slim\"",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "padding-type",
+          "description": "How much padding to render list items with\nOne of 'normal'|'slim'|'none', defaults to 'normal'",
+          "type": "string",
+          "default": "\"normal\""
+        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -6546,6 +6557,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "dragTargetHandleOnly",
+          "attribute": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "attribute": "breakpoints",
@@ -6556,10 +6573,17 @@
         {
           "name": "slim",
           "attribute": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
+          "description": "Whether to render the list-item with reduced whitespace.\nTODO: Remove in favor of padding-type=\"slim\"",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with\nOne of 'normal'|'slim'|'none', defaults to 'normal'",
+          "type": "string",
+          "default": "\"normal\""
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -6659,18 +6683,31 @@
       "attributes": [
         {
           "name": "slim",
-          "description": "Whether to render a header with reduced whitespace",
+          "description": "Whether to render a header with reduced whitespace\nTODO: Remove",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "padding-type",
+          "description": "How much padding to render list items with\nOne of 'normal'|'slim', defaults to 'normal'",
+          "type": "string",
+          "default": "\"normal\""
         }
       ],
       "properties": [
         {
           "name": "slim",
           "attribute": "slim",
-          "description": "Whether to render a header with reduced whitespace",
+          "description": "Whether to render a header with reduced whitespace\nTODO: Remove",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with\nOne of 'normal'|'slim', defaults to 'normal'",
+          "type": "string",
+          "default": "\"normal\""
         }
       ],
       "slots": [
@@ -6685,6 +6722,11 @@
       "path": "./components/list/list-item-button.js",
       "description": "A component for a \"listitem\" child within a list. It provides semantics, basic layout, breakpoints for responsiveness, a link for navigation, and selection.",
       "attributes": [
+        {
+          "name": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
@@ -6693,10 +6735,16 @@
         },
         {
           "name": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
+          "description": "Whether to render the list-item with reduced whitespace.\nTODO: Remove in favor of padding-type=\"slim\"",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "padding-type",
+          "description": "How much padding to render list items with\nOne of 'normal'|'slim'|'none', defaults to 'normal'",
+          "type": "string",
+          "default": "\"normal\""
+        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -6760,6 +6808,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "dragTargetHandleOnly",
+          "attribute": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "attribute": "breakpoints",
@@ -6770,10 +6824,17 @@
         {
           "name": "slim",
           "attribute": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
+          "description": "Whether to render the list-item with reduced whitespace.\nTODO: Remove in favor of padding-type=\"slim\"",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with\nOne of 'normal'|'slim'|'none', defaults to 'normal'",
+          "type": "string",
+          "default": "\"normal\""
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -7055,6 +7116,11 @@
           "description": "Address of item link if navigable",
           "type": "string"
         },
+        {
+          "name": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
@@ -7063,10 +7129,16 @@
         },
         {
           "name": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
+          "description": "Whether to render the list-item with reduced whitespace.\nTODO: Remove in favor of padding-type=\"slim\"",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "padding-type",
+          "description": "How much padding to render list items with\nOne of 'normal'|'slim'|'none', defaults to 'normal'",
+          "type": "string",
+          "default": "\"normal\""
+        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -7142,6 +7214,12 @@
           "description": "Address of item link if navigable",
           "type": "string"
         },
+        {
+          "name": "dragTargetHandleOnly",
+          "attribute": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "attribute": "breakpoints",
@@ -7152,10 +7230,17 @@
         {
           "name": "slim",
           "attribute": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
+          "description": "Whether to render the list-item with reduced whitespace.\nTODO: Remove in favor of padding-type=\"slim\"",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with\nOne of 'normal'|'slim'|'none', defaults to 'normal'",
+          "type": "string",
+          "default": "\"normal\""
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",

package/package.json

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