GAUD-10044: Create FormElementContainerMixin mixin by EdwinACL831 · Pull Request #7016 · BrightspaceUI/core

EdwinACL831 · 2026-05-22T19:53:49Z

Jira

Description

Currently the d2l-form component is able to find nested forms, native form controllers and d2l custom form controllers (through the FormElementMixin)

there is still 1 use case where we just want to group the form controllers logically in a custom web component -- let's call it form form element container. this is because the form is big enough so we want to encapsulate portions of it in logically and semantically groups of controller. In this case, the form has no chance to find those nested form controllers within the form element container.

Solution

To address this we decided to implement the FormElementContainerMixin which accomplishes that.

- Handles the use case for nested form container components that are not also a form controller - Adds unit test - Updates the demo page to demonstrate this new behavior

…omponent

github-actions · 2026-05-22T19:54:56Z

Thanks for the PR! 🎉

We've deployed an automatic preview for this PR - you can see your changes here:

URL	https://live.d2l.dev/prs/BrightspaceUI/core/pr-7016/

Note

The build needs to finish before your changes are deployed.
Changes to the PR will automatically update the instance.

EdwinACL831 · 2026-05-22T19:56:37Z

This change in combination with the changes at components/form/form-helper.js is how now the form is able to "find" these custom form element containers

dlockhart

Looking good -- just a few minor notes about the demo/docs. We'll also want to add form-element-container-mixin.md documentation.

…data section, reuses the input and input label styles

…de the test file

EdwinACL831 · 2026-05-26T19:43:04Z

@@ -1,9 +1,11 @@
 import './form-element.js';
+import '../../inputs/input-text.js';


This is needed because the class defined using defineCE uses it within its render method.

dlockhart · 2026-05-26T20:19:33Z

+						required
+						class="d2l-input">
+				</div>
+				<d2l-input-text label="Middle Name" name="middle-name" minlength="4" maxlength="8"></d2l-input-text>


Should have an import for input-text.js and input-number.js, which can be removed from form-panel-demo.js.

dlockhart · 2026-05-26T20:21:14Z

+				required
+			>
+			<d2l-input-text
+				id="nested-telephone-input"


Nit: id not required.

I do need it for my tests here

Ok -- could also be elem.querySelector('d2l-input-text') or elem.querySelector('d2l-input-text[name="phone"]').

bearfriend

Mostly a bunch of nits

bearfriend · 2026-05-26T21:12:53Z

+			<d2l-input-group>
+				<div>
+					<label for="native-input" class="d2l-input-label d2l-input-label-required">First Name</label>
+					<input id="native-input"


Suggested change

<input id="native-input"

<input

id="native-input"

bearfriend · 2026-05-26T21:13:35Z

+	render() {
+		return html`
+			<label for="nested-native-input">Name</label>
+			<input id="nested-native-input"


Suggested change

<input id="nested-native-input"

<input

id="nested-native-input"

bearfriend · 2026-05-26T21:18:01Z


 export const isCustomFormElement = (node) => isCustomElement(node) && !!node.formAssociated;

+export const isCustomFormElementContainer = (node) => isCustomElement(node) && !!node.isCustomFormElementContainer;


Suggested change

export const isCustomFormElementContainer = (node) => isCustomElement(node) && !!node.isCustomFormElementContainer;

export const isCustomFormElementContainer = node => isCustomElement(node) && Boolean(node.isCustomFormElementContainer);

bearfriend · 2026-05-26T21:19:54Z

+const getElementChildren = (ele) => {
+	if (isCustomFormElementContainer(ele)) {
+		return ele.shadowRoot.children;
+	}
+
+	return ele.tagName === 'SLOT' && ['primary', 'secondary'].includes(ele.name) ? ele.assignedNodes() : ele.children;
+};


Typical convention is just el, or maybe elem for more public-facing API stuff I guess. Sort of a nit, but sort of not, for consistency.

Suggested change

const getElementChildren = (ele) => {

if (isCustomFormElementContainer(ele)) {

return ele.shadowRoot.children;

}

return ele.tagName === 'SLOT' && ['primary', 'secondary'].includes(ele.name) ? ele.assignedNodes() : ele.children;

};

const getElementChildren = el => {

if (isCustomFormElementContainer(el)) {

return el.shadowRoot.children;

}

return el.tagName === 'SLOT' && ['primary', 'secondary'].includes(el.name) ? el.assignedNodes() : el.children;

};

I will apply it thanks. but in terms of consistency the whole file uses the ele variable's name (reason why I stick with it). Having that said, I agree with you about the convention, but here seems the convention is not our convention or at least in this file.

Oh sorry, I peeked at the history and thought you had just recently added all the ele uses

bearfriend · 2026-05-26T21:24:00Z

 const _findFormElementsHelper = (ele, eles, isFormElementPredicate, visitChildrenPredicate) => {
 	if (isNativeFormElement(ele) || isCustomFormElement(ele) || isFormElementPredicate(ele)) {
 		eles.push(ele);
 	}
 	if (visitChildrenPredicate(ele)) {
-		const children = ele.tagName === 'SLOT' && ['primary', 'secondary'].includes(ele.name) ? ele.assignedNodes() : ele.children;
+		const children = getElementChildren(ele);
 		for (const child of children) {
 			_findFormElementsHelper(child, eles, isFormElementPredicate, visitChildrenPredicate);


It won't let me make a suggestion here, but same thing with el. Maybe elems for the plural?

Edwin Collazos added 2 commits May 22, 2026 14:49

GAUD-10044: Create FormElementContainerMixin mixin

a06a912

- Handles the use case for nested form container components that are not also a form controller - Adds unit test - Updates the demo page to demonstrate this new behavior

Adds some styles and logic to look and behave as the d2l-input-text c…

2df07d8

…omponent

EdwinACL831 requested a review from a team as a code owner May 22, 2026 19:53

EdwinACL831 commented May 22, 2026

View reviewed changes

Comment thread components/form/demo/custom-form-element-container.js

EdwinACL831 commented May 22, 2026

View reviewed changes

github-actions Bot mentioned this pull request May 22, 2026

Updating vdiff goldens for PR 7016 #7017

Closed

Edwin Collazos added 2 commits May 22, 2026 16:28

Merge branch 'main' into ecollazos/GAUD-10044_nested_form_elements

37a53b8

Fixes lint errors

8b0e9b7

dbatiste reviewed May 25, 2026

View reviewed changes

Comment thread components/form/form-helper.js Outdated

dlockhart reviewed May 25, 2026

View reviewed changes

Renames file and improve unit tests

f767d4a

github-actions Bot mentioned this pull request May 25, 2026

Updating vdiff goldens for PR 7016 #7021

Closed

Edwin Collazos and others added 4 commits May 25, 2026 11:38

Uses the nested custom form element container to render the personal …

9f7d24e

…data section, reuses the input and input label styles

Renames the property to be clearer and updates mixin description

910e793

Adds form-element-container-mixin.md document

8a0cbd0

use input group

59a532f

dlockhart reviewed May 25, 2026

View reviewed changes

Comment thread components/form/demo/custom-form-element-container.js

github-actions Bot mentioned this pull request May 25, 2026

Updating vdiff goldens for PR 7016 #7022

Closed

dlockhart reviewed May 25, 2026

View reviewed changes

Edwin Collazos added 2 commits May 26, 2026 13:59

Addresses feedback

8b4bbdc

Enhances them tests by removing unnecessary file and defining it insi…

c84151f

…de the test file

EdwinACL831 commented May 26, 2026

View reviewed changes

dlockhart reviewed May 26, 2026

View reviewed changes

bearfriend reviewed May 26, 2026

View reviewed changes

		@@ -1,9 +1,11 @@
		import './form-element.js';
		import '../../inputs/input-text.js';

	<input id="nested-native-input"
	<input
	id="nested-native-input"


		export const isCustomFormElement = (node) => isCustomElement(node) && !!node.formAssociated;

		export const isCustomFormElementContainer = (node) => isCustomElement(node) && !!node.isCustomFormElementContainer;

Conversation

EdwinACL831 commented May 22, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Jira

Description

Solution

Uh oh!

github-actions Bot commented May 22, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dlockhart left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

EdwinACL831 May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bearfriend left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

EdwinACL831 commented May 22, 2026 •

edited by atlassian Bot

Loading

dlockhart left a comment •

edited

Loading

EdwinACL831 May 26, 2026 •

edited

Loading