@brightspace-ui/core 3.254.1 → 3.255.0

package/components/form/docs/form-element-container-mixin.md

@@ -0,0 +1,28 @@
+# FormElementContainerMixin
+
+Extending `FormElementContainerMixin` will allow a custom element's children (native or [custom](./form-element-mixin.md)) to participate in the parent `<d2l-form>`.
+
+## Usage
+
+Simply extend the `FormElementContainerMixin`:
+
+```javascript
+import { FormElementContainerMixin } from '@brightspace-ui/core/form/form-element-container-mixin.js';
+
+class MyCustomFormElementContainer extends FormElementContainerMixin(LitElement) {
+	render() {
+		html`
+			<d2l-input-text
+				label="First Name"
+				name="first-name"
+				required></d2l-input-text>
+			<d2l-input-text
+				label="Last Name"
+				name="last-name"
+				required></d2l-input-text>
+		`;
+	}
+}
+
+customElements.define('my-custom-form-element-container', MyCustomFormElementContainer);
+```

package/components/form/form-element-container-mixin.js

@@ -0,0 +1,8 @@
+/**
+ * When applied to a custom element, form elements within will participate in the form.
+ */
+export const FormElementContainerMixin = superClass => class extends superClass {
+	get isCustomFormElementContainer() {
+		return true;
+	}
+};

package/components/form/form-helper.js

@@ -15,24 +15,34 @@ export const isElement = (node) => node && node.nodeType === Node.ELEMENT_NODE;
 
 export const isCustomElement = (node) => isElement(node) && node.nodeName.indexOf('-') !== -1;
 
-export const isCustomFormElement = (node) => isCustomElement(node) && !!node.formAssociated;
+export const isCustomFormElement = (node) => isCustomElement(node) && Boolean(node.formAssociated);
+
+export const isCustomFormElementContainer = (node) => isCustomElement(node) && Boolean(node.isCustomFormElementContainer);
 
 export const isNativeFormElement = (node) => {
 	if (!isElement(node)) {
 		return false;
 	}
 	const nodeName = node.nodeName.toLowerCase();
-	return !!formElements[nodeName];
+	return Boolean(formElements[nodeName]);
+};
+
+const getElementChildren = (elem) => {
+	if (isCustomFormElementContainer(elem)) {
+		return elem.shadowRoot.children;
+	}
+
+	return elem.tagName === 'SLOT' && ['primary', 'secondary'].includes(elem.name) ? elem.assignedNodes() : elem.children;
 };
 
-const _findFormElementsHelper = (ele, eles, isFormElementPredicate, visitChildrenPredicate) => {
-	if (isNativeFormElement(ele) || isCustomFormElement(ele) || isFormElementPredicate(ele)) {
-		eles.push(ele);
+const _findFormElementsHelper = (elem, elems, isFormElementPredicate, visitChildrenPredicate) => {
+	if (isNativeFormElement(elem) || isCustomFormElement(elem) || isFormElementPredicate(elem)) {
+		elems.push(elem);
 	}
-	if (visitChildrenPredicate(ele)) {
-		const children = ele.tagName === 'SLOT' && ['primary', 'secondary'].includes(ele.name) ? ele.assignedNodes() : ele.children;
+	if (visitChildrenPredicate(elem)) {
+		const children = getElementChildren(elem);
 		for (const child of children) {
-			_findFormElementsHelper(child, eles, isFormElementPredicate, visitChildrenPredicate);
+			_findFormElementsHelper(child, elems, isFormElementPredicate, visitChildrenPredicate);
 		}
 	}
 };

package/components/table/table-wrapper.js

@@ -5,7 +5,6 @@ import { css, html, LitElement, nothing } from 'lit';
 import { cssSizes } from '../inputs/input-checkbox-styles.js';
 import { getComposedParent } from '../../helpers/dom.js';
 import { getFlag } from '../../helpers/flags.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { isPopoverSupported } from '../popover/popover-mixin.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
@@ -421,8 +420,6 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
 
 		this.dirtyText = null;
 		this.dirtyButtonText = null;
-
-		this._excludeStickyColumnsFromScrollCalculations = getFlag('GAUD-9530-exclude-sticky-columns-from-scroll-calculations', false);
 	}
 
 	connectedCallback() {
@@ -461,7 +458,7 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
 		return html`
 			<slot name="controls" @slotchange="${this._handleControlsSlotChange}"></slot>
 			${this.stickyHeaders && this._controlsScrolled ? html`<div class="d2l-sticky-headers-backdrop"></div>` : nothing}
-			${useScrollWrapper ? html`<d2l-scroll-wrapper scroll-area-offset=${ifDefined(this._excludeStickyColumnsFromScrollCalculations ? this._stickyWidth : undefined)} .customScrollers="${this._tableScrollers}">${slot}</d2l-scroll-wrapper>` : slot}
+			${useScrollWrapper ? html`<d2l-scroll-wrapper scroll-area-offset=${this._stickyWidth} .customScrollers="${this._tableScrollers}">${slot}</d2l-scroll-wrapper>` : slot}
 			${this._renderPagerContainer()}
 		`;
 	}
@@ -796,7 +793,7 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
 			}
 			if (headCell.hasAttribute('sticky')) stickyWidth += cellWidth;
 		}
-		if (this._excludeStickyColumnsFromScrollCalculations) this._stickyWidth = stickyWidth;
+		this._stickyWidth = stickyWidth;
 	}
 
 	_updateStickyAncestor(node, popoverOpened) {

package/custom-elements.json

@@ -4967,6 +4967,21 @@
         }
       ]
     },
+    {
+      "name": "d2l-custom-form-element-container",
+      "path": "./components/form/demo/custom-form-element-container.js",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"inputStyles\",\"inputLabelStyles\"]"
+        },
+        {
+          "name": "isCustomFormElementContainer",
+          "type": "boolean"
+        }
+      ]
+    },
     {
       "name": "d2l-form-demo",
       "path": "./components/form/demo/form-demo.js"

package/package.json

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